Label formatter function

src/components/ui/VnFilterPanel.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import toDate from 'filters/toDate';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -78,6 +79,18 @@ async function remove(key) {
     delete store.userParams[key];
     await search();
 }
+
+function formatValue(value) {
+    if (typeof value === 'boolean') {
+        return value ? t('Yes') : t('No');
+    }
+
+    if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return toDate(value);
+    }
+
+    return `"${value}"`;
+}
 </script>
 <template>
     <q-form @submit="search">
@@ -136,7 +149,7 @@ async function remove(key) {
                         size="sm"
                         removable
                     >
-                        <slot name="tags" :tag="chip">
+                        <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
                                 <strong>{{ chip.label }}:</strong>
                                 <span>"{{ chip.value }}"</span>

src/pages/Customer/CustomerFilter.vue

@@ -33,10 +33,10 @@ function setWorkers(data) {
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag }">
+        <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>"{{ tag.value }}"</span>
+                <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
         <template #body="{ params, searchFn }">

src/pages/Ticket/TicketFilter.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import toDate from 'filters/toDate';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -14,29 +13,10 @@ const props = defineProps({
 });
 
 const workers = ref([]);
-const workersCopy = ref([]);
 const provinces = ref([]);
 const states = ref([]);
 const agencies = ref([]);
 const warehouses = ref([]);
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
-
-function formatValue(value) {
-    console.log(typeof value);
-    if (typeof value === 'boolean') {
-        return value ? t('Yes') : t('No');
-    }
-
-    if (isNaN(value) && !isNaN(Date.parse(value))) {
-        return toDate(value);
-    }
-
-    return `"${value}"`;
-}
 </script>
 
 <template>
@@ -51,10 +31,10 @@ function formatValue(value) {
         auto-load
     />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag }">
+        <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatValue(tag.value) }}</span>
+                <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
         <template #body="{ params, searchFn }">
@@ -129,12 +109,12 @@ function formatValue(value) {
             <q-item>
                 <q-item-section>
                     <q-select
+                        :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
                         :options="workers"
                         option-value="id"
                         option-label="name"
                         emit-value
-                        :label="t('Salesperson')"
                         map-options
                         use-input
                         :input-debounce="0"