WIP: [filter] add filter group

src/App.vue

@@ -1169,20 +1169,6 @@ textarea.input:focus {
   max-width: 95%;
 }
 
-.query-list .tag {
-  margin-right: 1em;
-  margin-bottom: 0.2em;
-  border: 1px solid transparent;
-}
-
-.query-list .tag .delete {
-  transform: rotate(45deg) scale(0.7);
-}
-
-.query-list .tag:hover {
-  transform: scale(1.1);
-}
-
 .fixed-page {
   position: fixed;
   left: 0;

src/components/modals/EditSearchFilterGroupModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    :class="{
+      modal: true,
+      'is-active': active
+    }"
+  >
+    <div class="modal-background" @click="$emit('cancel')"></div>
+
+    <div class="modal-content">
+      <div class="box">
+        <h1 class="title" v-if="groupToEdit.id">
+          {{ $t('main.filter_group_edit') }} "{{ groupToEdit.name }}"
+        </h1>
+        <h1 class="title" v-else>
+          {{ $t('main.filter_group_add') }}
+        </h1>
+
+        <form v-on:submit.prevent>
+          <text-field
+            ref="nameField"
+            :label="$t('assets.fields.name')"
+            v-model.trim="form.name"
+            @enter="runConfirmation"
+            v-focus
+          />
+          <color-field
+            ref="colorField"
+            :label="$t('main.color')"
+            v-model="form.color"
+          />
+        </form>
+
+        <modal-footer
+          :error-text="$t('main.filter_group_error')"
+          :is-error="isError"
+          :is-loading="isLoading"
+          @confirm="runConfirmation"
+          @cancel="$emit('cancel')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+ * Modal used to edit filter group information.
+ */
+import { modalMixin } from '@/components/modals/base_modal'
+import ModalFooter from '@/components/modals/ModalFooter'
+import ColorField from '@/components/widgets/ColorField'
+import TextField from '@/components/widgets/TextField'
+
+export default {
+  name: 'edit-search-filter-group-modal',
+  mixins: [modalMixin],
+  components: {
+    ColorField,
+    ModalFooter,
+    TextField
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    },
+    isError: {
+      type: Boolean,
+      default: false
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    groupToEdit: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  data() {
+    return {
+      form: {
+        color: '',
+        name: ''
+      }
+    }
+  },
+
+  methods: {
+    runConfirmation(event) {
+      if (!this.form.name.length) {
+        this.$refs.nameField.focus()
+        return
+      }
+
+      if (!event || event.keyCode === 13 || !event.keyCode) {
+        this.$emit('confirm', {
+          // id: this.groupToEdit.id,
+          ...this.form
+        })
+      }
+    }
+  },
+
+  watch: {
+    groupToEdit() {
+      const {
+        id,
+        color = '',
+        name = ''
+      } = this.groupToEdit?.id ? this.groupToEdit : {}
+      this.form = {
+        id,
+        color,
+        name
+      }
+    },
+
+    active() {
+      if (this.active) {
+        setTimeout(() => {
+          this.$refs.nameField.focus()
+        }, 100)
+      }
+    }
+  }
+}
+</script>

src/components/modals/EditSearchFilterModal.vue

@@ -17,17 +17,21 @@
           <text-field
             ref="nameField"
             :label="$t('assets.fields.name')"
-            v-model="form.name"
+            v-model.trim="form.name"
             @enter="runConfirmation"
             v-focus
           />
 
           <text-field
-            ref="nameField"
             :label="$t('main.search_query')"
-            v-model="form.search_query"
+            v-model.trim="form.search_query"
             @enter="runConfirmation"
-            v-focus
+          />
+
+          <combobox
+            :label="$t('main.filter_group')"
+            :options="groupOptions"
+            v-model="form.search_filter_group_id"
           />
         </form>
 
@@ -49,14 +53,16 @@
    filter label when it's too complex to read or too long.
  */
 import { modalMixin } from '@/components/modals/base_modal'
+import ModalFooter from '@/components/modals/ModalFooter'
 
+import Combobox from '@/components/widgets/Combobox'
 import TextField from '@/components/widgets/TextField'
-import ModalFooter from '@/components/modals/ModalFooter'
 
 export default {
   name: 'edit-search-filter-modal',
   mixins: [modalMixin],
   components: {
+    Combobox,
     ModalFooter,
     TextField
   },
@@ -77,31 +83,32 @@ export default {
     searchQueryToEdit: {
       type: Object,
       default: () => {}
+    },
+    groupOptions: {
+      type: Array,
+      default: () => []
     }
   },
 
   data() {
-    if (this.searchQueryToEdit && this.searchQueryToEdit.id) {
-      return {
-        form: {
-          text: this.searchQueryToEdit.text,
-          task_status_id: this.searchQueryToEdit.task_status_id
-        }
-      }
-    } else {
-      return {
-        form: {
-          text: '',
-          task_status_id: null
-        }
+    return {
+      form: {
+        id: null,
+        name: '',
+        search_filter_group_id: null,
+        search_query: '',
+        task_status_id: null
       }
     }
   },
 
-  computed: {},
-
   methods: {
     runConfirmation(event) {
+      if (!this.form.name.length) {
+        this.$refs.nameField.focus()
+        return
+      }
+
       if (!event || event.keyCode === 13 || !event.keyCode) {
         this.$emit('confirm', {
           id: this.searchQueryToEdit.id,
@@ -113,15 +120,19 @@ export default {
 
   watch: {
     searchQueryToEdit() {
-      if (this.searchQueryToEdit && this.searchQueryToEdit.id) {
+      if (this.searchQueryToEdit?.id) {
         this.form.id = this.searchQueryToEdit.id
         this.form.name = this.searchQueryToEdit.name
+        this.form.search_filter_group_id =
+          this.searchQueryToEdit.search_filter_group_id
         this.form.search_query = this.searchQueryToEdit.search_query
       } else {
         this.form = {
-          id: '',
+          id: null,
           name: '',
-          search_query: ''
+          search_filter_group_id: null,
+          search_query: '',
+          task_status_id: null
         }
       }
     },
@@ -136,5 +147,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped></style>

src/components/pages/Assets.vue

@@ -61,8 +61,11 @@
           </div>
           <div class="query-list">
             <search-query-list
+              :groups="assetSearchFilterGroups"
               :queries="assetSearchQueries"
               @change-search="changeSearch"
+              @create-group="saveSearchFilterGroup"
+              @remove-group="removeSearchFilterGroup"
               @remove-search="removeSearchQuery"
               v-if="!isAssetsLoading && !initialLoading"
             />
@@ -423,6 +426,7 @@ export default {
       'assetListScrollPosition',
       'assetsCsvFormData',
       'assetSearchText',
+      'assetSearchFilterGroups',
       'assetSearchQueries',
       'assetTypes',
       'assetValidationColumns',
@@ -532,8 +536,10 @@ export default {
       'loadEpisodes',
       'newAsset',
       'removeAssetSearch',
+      'removeAssetSearchFilterGroup',
       'restoreAsset',
       'saveAssetSearch',
+      'saveAssetSearchFilterGroup',
       'setLastProductionScreen',
       'setAssetSearch',
       'setPreview',
@@ -819,6 +825,22 @@ export default {
         })
     },
 
+    saveSearchFilterGroup(filterGroup) {
+      this.saveAssetSearchFilterGroup(filterGroup)
+        .then(() => {})
+        .catch(err => {
+          if (err) console.error(err)
+        })
+    },
+
+    removeSearchFilterGroup(filterGroup) {
+      this.removeAssetSearchFilterGroup(filterGroup)
+        .then(() => {})
+        .catch(err => {
+          if (err) console.error(err)
+        })
+    },
+
     removeSearchQuery(searchQuery) {
       this.removeAssetSearch(searchQuery)
         .then(() => {})