feat: disabled buttons

src/pages/Order/Card/CatalogFilterValueDialog.vue

@@ -63,6 +63,15 @@ const getSelectedTagValues = async (tag) => {
 <template>
     <QForm @submit="applyTags(tagValues)" class="all-pointer-events">
         <QCard class="q-pa-sm column q-pa-lg">
+            <QBtn
+                round
+                color="primary"
+                style="position: absolute; z-index: 1; right: 0; top: 0"
+                icon="search"
+                type="submit"
+            >
+            </QBtn>
+
             <VnSelect
                 :label="t('params.tag')"
                 v-model="selectedTag"
@@ -77,6 +86,16 @@ const getSelectedTagValues = async (tag) => {
                 use-input
                 @update:model-value="($event) => getSelectedTagValues($event)"
             />
+            <QBtn
+                icon="add_circle"
+                shortcut="+"
+                flat
+                class="filter-icon q-mb-md"
+                size="md"
+                dense
+                :disabled="!selectedTag || !tagValues[0].value"
+                @click="tagValues.unshift({})"
+            />
             <div
                 v-for="(value, index) in tagValues"
                 :key="value"
@@ -95,7 +114,7 @@ const getSelectedTagValues = async (tag) => {
                         rounded
                         emit-value
                         use-input
-                        :disable="!value"
+                        :disable="!value || !selectedTag"
                         :is-clearable="false"
                         class="col"
                     />
@@ -108,25 +127,19 @@ const getSelectedTagValues = async (tag) => {
                         :is-clearable="false"
                         class="col"
                     />
-                    <QIcon
-                        name="delete"
+                    <QBtn
+                        icon="delete"
+                        size="md"
+                        outlined
+                        dense
+                        rounded
+                        flat
                         class="filter-icon col-2"
+                        :disabled="!value.value"
                         @click="removeTagGroupParam(index)"
                     />
                 </div>
             </div>
-            <QBtn
-                icon="add_circle"
-                shortcut="+"
-                flat
-                class="filter-icon q-mb-md"
-                size="md"
-                dense
-                @click="tagValues.push({})"
-            />
-            <QBtn color="primary" type="submit">
-                {{ t('search') }}
-            </QBtn>
         </QCard>
     </QForm>
 </template>

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -35,6 +35,7 @@ const arrayData = useArrayData(props.dataKey);
 const categoryList = ref(null);
 const selectedCategoryFk = ref(null);
 const typeList = ref([]);
+const tagsValues = ref([]);
 const selectedTypeFk = ref(null);
 const generalSearchParam = ref(null);
 
@@ -289,9 +290,12 @@ onMounted(() => {
             <QSeparator />
 
             <QItem class="q-mt-lg">
-                <VnInput
+                <VnSelect
                     :label="t('components.itemsFilterPanel.value')"
-                    is-outlined
+                    :options="props.tagValue"
+                    dense
+                    outlined
+                    rounded
                     :is-clearable="false"
                     v-model="generalSearchParam"
                     @keyup.enter="
@@ -305,7 +309,7 @@ onMounted(() => {
                     <template #prepend>
                         <QIcon name="search" />
                     </template>
-                    <template #append>
+                    <template #after>
                         <QBtn
                             icon="add_circle"
                             shortcut="+"
@@ -315,6 +319,7 @@ onMounted(() => {
                         />
                         <QPopupProxy>
                             <CatalogFilterValueDialog
+                                style="display: inline-block"
                                 :tags="tags"
                                 @apply-tags="
                                     ($event) => applyTags($event, params, searchFn)
@@ -322,7 +327,7 @@ onMounted(() => {
                             />
                         </QPopupProxy>
                     </template>
-                </VnInput>
+                </VnSelect>
             </QItem>
             <QSeparator />
         </template>