Feature/reworked custom scope for the advanced search modal

app/partials/advancedSearchModal.html

@@ -2,21 +2,23 @@
     <div class="modal" list-view-parent>
         <div class="close-modal" ng-click="$emit('closeModal')"></div>
 
-        <form ng-hide="showCustomScopeTab">
+        <form ng-hide="showCustomScopeTab" class="advanced-search">
             <h2>Advanced Search</h2>
             <section>
                 <label>
                     <span class="input-label">Scope</span>
-                    <select ng-model="searchScope" ng-options="scope for scope in searchScopes" ng-change="searchScopeChanged()"></select>
-                    <span class="edit-custom-scope" ng-click="showCustomScopeTab = true" title="Edit custom scope" ng-show="searchScope === 'Custom'"></span>
+                    <select ng-model="searchScope" ng-options="scope for scope in searchScopes"
+                            ng-change="searchScopeChanged()"></select>
+                    <span class="edit-custom-scope" ng-click="showCustomScopeTab = true" title="Edit custom scope"
+                          ng-show="searchScope === 'Custom'"></span>
                 </label>
             </section>
 
             <h3>Filters
                 <span class="actions">
                     <button class="action-btn positive small" ng-click="addFilter()">Add Filter</button>
                     <button class="action-btn small" ng-click="$broadcast('importFilters')">Import</button>
-                    <button class="action-btn small"  ng-click="$broadcast('exportFilters')">Export</button>
+                    <button class="action-btn small" ng-click="$broadcast('exportFilters')">Export</button>
                 </span>
             </h3>
             <section>
@@ -36,23 +38,49 @@ <h3>Filters
             </div>
         </form>
 
-        <form ng-show="showCustomScopeTab">
+        <form ng-show="showCustomScopeTab" class="custom-scope">
             <h2>Create Custom Scope</h2>
 
             <div class="flex">
                 <div>
                     <h3>Files</h3>
                     <list-view items="customScope.files">
-                        <input type="checkbox" ng-model="$parent.item.active" />
-                        {{::$parent.item.filename}}
+                        <label ng-show="$parent.item.visible">
+                            <input type="checkbox" ng-model="$parent.item.active"/>
+                            {{::$parent.item.filename}}
+                        </label>
                     </list-view>
+                    <div class="styled-text-input">
+                        <input type=text name="npc-mod-filter" id="adv-filter-files" ng-model="fileFilter"
+                               placeholder="Filter" ng-change="filterFiles(fileFilter)"/>
+                        <label for="adv-filter-files">Filter (RegEx)</label>
+                    </div>
+
+                    <div class="list-commands">
+                        <button class="action-btn positive" ng-click="removeFilterForFiles()">Remove Filter</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.files, true)">Check All</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.files, false)">Uncheck All</button>
+                    </div>
                 </div>
                 <div>
                     <h3>Groups</h3>
                     <list-view items="customScope.groups">
-                        <input type="checkbox" ng-model="$parent.item.active" />
-                        {{::$parent.item.signature}} - {{::$parent.item.name}}
+                        <label ng-show="$parent.item.visible">
+                            <input type="checkbox" ng-model="$parent.item.active"/>
+                            {{::$parent.item.signature}} - {{::$parent.item.name}}
+                        </label>
                     </list-view>
+
+                    <div class="styled-text-input">
+                        <input type=text name="npc-mod-filter" id="adv-filter-groups" ng-model="groupFilter"
+                               placeholder="Filter" ng-change="filterGroups(groupFilter)"/>
+                        <label for="adv-filter-groups">Filter (RegEx)</label>
+                    </div>
+                    <div class="list-commands">
+                        <button class="action-btn positive" ng-click="removeFilterForGroups()">Remove Filter</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.groups, true)">Check All</button>
+                        <button class="action-btn positive" ng-click="newStateForVisible(customScope.groups, false)">Uncheck All</button>
+                    </div>
                 </div>
             </div>
 

src/javascripts/Views/edit/advancedSearchModal.js

@@ -32,7 +32,8 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
     let getCustomScopeFiles = function() {
         return xelib.GetLoadedFileNames().map(filename => ({
             filename: filename,
-            active: true
+            active: true,
+            visible: true
         }));
     };
 
@@ -41,7 +42,8 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
         return Object.keys(map).sort().map(signature => ({
             signature: signature,
             name: map[signature],
-            active: true
+            active: true,
+            visible: true
         }));
     };
 
@@ -89,6 +91,45 @@ ngapp.controller('advancedSearchModalController', function($scope, searchService
         $scope.$broadcast('keyDown', e);
     };
 
+    function atLeastOneRegexMatch(regEx, string) {
+        try {
+            const reg = new RegExp(regEx, 'i');
+            const exec = reg.exec(string);
+            return exec !== null;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    $scope.newStateForVisible = function(items, newState) {
+        items.forEach((item) => {
+            if(item.visible)
+                item.active = newState;
+        });
+    };
+
+    $scope.filterFiles = function(filter) {
+        $scope.customScope.files.forEach((file) => {
+            file.visible = !filter || atLeastOneRegexMatch(filter, file.filename);
+        });
+    };
+
+    $scope.filterGroups = function(filter) {
+        $scope.customScope.groups.forEach((group) => {
+            group.visible = !filter || atLeastOneRegexMatch(filter, group.signature + " - " + group.name);
+        });
+    };
+
+    $scope.removeFilterForFiles = function() {
+        $scope.filterFiles();
+        $scope.fileFilter = "";
+    };
+
+    $scope.removeFilterForGroups = function() {
+        $scope.filterGroups();
+        $scope.groupFilter = "";
+    };
+
     // initialization
     let nodes = $scope.modalOptions.nodes,
         node = nodes[0],

src/stylesheets/general/modals.scss

@@ -7,6 +7,7 @@
   overflow-y: auto;
   z-index: 15;
   background-color: rgba($modal_shadow, 0.4);
+  padding: 0 20px; /*Modals don't touch the border of the window*/
 
   .modal {
     position: relative;

src/stylesheets/views/advancedSearchModal.scss

@@ -1,6 +1,7 @@
 .advanced-search-modal {
   .modal {
-    max-width: 700px;
+    max-width: 90vw;
+    width: fit-content;
   }
 
   form .input-label {
@@ -42,16 +43,35 @@
     align-items: flex-start;
     justify-content: stretch;
     margin-top: 4px;
+    margin-right: -20px;
+    flex-wrap: wrap;
 
     > div {
       flex: 1;
+      min-width: 340px;
+      margin-right: 20px;
+    }
+  }
+
+  .advanced-search {
+    max-width: 90vw;
+    width: 700px;
+  }
+
+  .custom-scope {
+    max-width: 90vw;
+    width: fit-content;
+
+    .list-item.selected {
+      background: unset;
     }
   }
 
   list-view {
     overflow-y: auto;
     max-height: 400px;
     display: block;
+    height: 400px;
   }
 
   reference-select {
@@ -119,4 +139,85 @@
       }
     }
   }
+
+
+  .styled-text-input {
+    position: relative;
+    padding: 15px 0 0;
+    margin-top: 10px;
+    $accent-color: desaturate($positive, 0.1);
+
+    input {
+      font-family: inherit;
+      width: 100%;
+      border: 0;
+      border-bottom: 2px solid $accent-color;
+      outline: 0;
+      font-size: 1rem;
+      /*color: #fff;*/
+      padding: 7px 0;
+      background: transparent;
+      transition: border-color 0.2s;
+
+      &::placeholder {
+        color: transparent;
+      }
+
+      &:placeholder-shown ~ label {
+        font-size: 1rem;
+        cursor: text;
+        top: 25px;
+      }
+
+      &:focus {
+        /*padding-bottom: 6px;*/
+        font-weight: 700;
+        border-width: 3px;
+        margin-bottom: -1px;
+        border-image: linear-gradient(to right, $accent-color, transparentize($accent-color, 0.5));
+        border-image-slice: 1;
+      }
+
+      &:focus ~ label {
+        position: absolute;
+        top: 0;
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        color: $accent-color;
+        font-weight: 700;
+      }
+
+    }
+
+    label {
+      position: absolute;
+      top: 0;
+      display: block;
+      transition: 0.2s;
+      font-size: 1rem;
+      /*color: #9b9b9b;*/
+    }
+  }
+
+  .list-commands {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    margin: 4px 0;
+
+    .action-btn {
+      color: $secondary_action;
+      font-size: 0.9rem;
+      flex: 1;
+
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
 }