feat: implement item table advanced search options popover

src/gui/app/directives/controls/firebot-checkbox.js

@@ -7,12 +7,13 @@
             bindings: {
                 label: "@",
                 tooltip: "@?",
+                tooltipPlacement: "@?",
                 model: "=",
                 style: "@?",
                 disabled: "<?"
             },
             template: `
-            <label class="control-fb control--checkbox" style="{{$ctrl.style}}"> {{$ctrl.label}} <tooltip ng-if="$ctrl.tooltip" text="$ctrl.tooltip"></tooltip>
+            <label class="control-fb control--checkbox" style="{{$ctrl.style}}"> {{$ctrl.label}} <tooltip ng-if="$ctrl.tooltip" text="$ctrl.tooltip" placement="{{$ctrl.tooltipPlacement || ''}}"></tooltip>
                 <input type="checkbox" ng-model="$ctrl.model" ng-disabled="$ctrl.disabled">
                 <div class="control__indicator"></div>
             </label>

src/gui/app/directives/misc/firebot-item-table/firebot-item-table.html

@@ -28,13 +28,35 @@
           query="searchQuery"
           class="fit-header-search"
         ></searchbar>
-        <firebot-checkbox
-          ng-if="$ctrl.customFilterName != null"
-          label="Full text search"
-          model="$ctrl.useFullTextSearch"
-          tooltip="Search all fields. Use ! to exclude a term."
-          style="white-space: nowrap; margin: 0 0 0 5px;"
-        />
+        <button
+            ng-if="$ctrl.showAdvancedOptionsButton"
+            uib-tooltip="Advanced Search Options"
+            tooltip-append-to-body="true"
+            tooltip-placement="top-right"
+            uib-popover-template="'advancedSearchOptionsPopover.html'"
+            popover-placement="bottom-right"
+            popover-append-to-body="true"
+            popover-trigger="'outsideClick'"
+            class="btn-reset fbit-advance-search-btn"
+        >
+          <i 
+            class="fas fa-toolbox"
+          ></i>
+          <div ng-if="$ctrl.hasAdvancedOptionsApplied()" class="options-applied-indicator"></div>
+        </button>
+        <script type="text/ng-template" id="advancedSearchOptionsPopover.html">
+            <div class="p-3">
+              <firebot-checkbox
+                ng-if="$ctrl.customFilterName != null"
+                label="Full text search"
+                model="$ctrl.useFullTextSearch"
+                tooltip="Search all fields. Prefix with ! to preform an exclusive search."
+                tooltip-placement="top-right"
+                style="margin: 0;"
+              />
+            </div>
+        </script>
+
       </div>
     </div>
     <div class="p-6">

src/gui/app/directives/misc/firebot-item-table/firebot-item-table.js

@@ -40,19 +40,16 @@
                     reverse: false
                 };
 
-                $ctrl.getSearchQuery = () => {
-                    if ($ctrl.searchField) {
-                        return {
-                            [$ctrl.searchField]: $scope.searchQuery
-                        };
-                    }
-                    return $scope.searchQuery;
-                };
-
                 $ctrl.getFilterName = () => {
                     return $ctrl.useFullTextSearch ? null : $ctrl.customFilterName;
                 };
 
+                $ctrl.showAdvancedOptionsButton = false;
+
+                $ctrl.hasAdvancedOptionsApplied = () => {
+                    return $ctrl.useFullTextSearch;
+                };
+
                 $ctrl.$onInit = () => {
                     if ($ctrl.items == null) {
                         $ctrl.items = [];
@@ -63,6 +60,8 @@
 
                     $ctrl.showStatusIndicator = $ctrl.statusField != null;
                     $ctrl.headerClass = `${$ctrl.sortTagContext.split(' ').join('-')}-header`;
+
+                    $ctrl.showAdvancedOptionsButton = $ctrl.customFilterName != null;
                 };
 
                 $ctrl.triggerItemsUpdate = () => {

src/gui/app/directives/misc/tooltip.js

@@ -5,10 +5,11 @@
         bindings: {
             text: "<",
             type: "@",
+            placement: "@?",
             styles: "@"
         },
         template: `
-                <i class="fal" style="{{$ctrl.styles}}" ng-class="{'fa-question-circle': $ctrl.type === 'question', 'fa-info-circle': $ctrl.type === 'info' }" uib-tooltip="{{$ctrl.text}}" tooltip-append-to-body="true"></i>
+                <i class="fal" style="{{$ctrl.styles}}" ng-class="{'fa-question-circle': $ctrl.type === 'question', 'fa-info-circle': $ctrl.type === 'info' }" uib-tooltip="{{$ctrl.text}}" tooltip-placement="{{$ctrl.placement || ''}}" tooltip-append-to-body="true"></i>
             `,
         controller: function() {
             const ctrl = this;

src/gui/app/templates/chat/_commands.html

@@ -40,7 +40,6 @@
         no-data-message="No custom commands saved. You should make one! :)"
         none-found-message="No custom commands found."
         search-placeholder="Search commands"
-        search-field="trigger"
         test-button="true"
         on-test-button-clicked="manuallyTriggerCommand(itemId)"
         status-field="active"

src/gui/scss/core/_firebot-item-table.scss

@@ -73,4 +73,26 @@
             }
         }
     }
+}
+
+.fbit-advance-search-btn {
+    position: relative;
+    margin-left: 10px;
+    margin-right: 5px;
+    padding: 2px;
+    &:hover {
+        cursor: pointer;
+        i {
+            opacity: 0.75;
+        }
+    }
+    .options-applied-indicator {
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        background-color: #1c9dc1;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+    }
 }

src/gui/scss/core/_helpers.scss

@@ -203,4 +203,21 @@ font-weight: 900;
 
 .text-center {
     text-align: center;
+}
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.btn-reset {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
 }