refactor: enhance order filtering logic and improve code readability

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
@@ -34,34 +34,42 @@ const { t } = useI18n();
 const route = useRoute();
 
 const arrayData = useArrayData(props.dataKey);
-
 const categoryList = ref(null);
 const typeList = ref([]);
 const searchByTag = ref(null);
 
 const vnFilterPanelRef = ref();
-const orderByList = ref([
+const orderByListStatic = [
     { id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
     { id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
     { id: 'name', name: t('params.name'), priority: 999 },
     { id: 'price', name: t('params.price'), priority: 999 },
-]);
-const orderWayList = ref([
+];
+const orderWayList = [
     { id: 'ASC', name: t('params.ASC') },
     { id: 'DESC', name: t('params.DESC') },
-]);
+];
 const orderBySelected = ref('relevancy DESC, name');
 const orderWaySelected = ref('ASC');
+const orderByList = computed(() =>
+    orderByListStatic.concat(
+        props.tags.map((tag) => ({
+            ...tag,
+            field: tag.id,
+            isTag: true,
+        })),
+    ),
+);
 
-const resetCategory = (params, search) => {
+function resetCategory(params, search) {
     typeList.value = null;
     params.categoryFk = null;
     params.typeFk = null;
     arrayData.store.userFilter = null;
     search();
-};
+}
 
-const selectCategory = async (params, category, search) => {
+async function selectCategory(params, category, search) {
     if (vnFilterPanelRef.value.params.categoryFk === category?.id) {
         resetCategory(params, search);
         return;
@@ -69,16 +77,16 @@ const selectCategory = async (params, category, search) => {
     params.typeFk = null;
     params.categoryFk = category.id;
     await loadTypes(category?.id);
-};
+}
 
-const loadTypes = async (id) => {
+async function loadTypes(id) {
     const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
         params: { itemCategoryId: id },
     });
     typeList.value = data;
-};
+}
 
-const applyTags = (tagInfo, params, search) => {
+function applyTags(tagInfo, params, search) {
     if (!tagInfo || !tagInfo.values.length) {
         params.tagGroups = null;
         search();
@@ -88,7 +96,7 @@ const applyTags = (tagInfo, params, search) => {
     if (!params.tagGroups) params.tagGroups = [];
     params.tagGroups.push(tagInfo);
     search();
-};
+}
 
 async function onSearchByTag(value) {
     if (!value.target.value) return;
@@ -102,16 +110,16 @@ async function onSearchByTag(value) {
     searchByTag.value = null;
 }
 
-const removeTagGroupParam = (params, search, valIndex) => {
+function removeTagGroupParam(params, search, valIndex) {
     if (!valIndex && valIndex !== 0) {
         params.tagGroups = null;
     } else {
         params.tagGroups.splice(valIndex, 1);
     }
     search();
-};
+}
 
-const setCategoryList = (data) => {
+function setCategoryList(data) {
     categoryList.value = (data || [])
         .filter((category) => category.display)
         .map((category) => ({
@@ -121,17 +129,22 @@ const setCategoryList = (data) => {
 
     vnFilterPanelRef.value.params.categoryFk &&
         loadTypes(vnFilterPanelRef.value.params.categoryFk);
-};
+}
 
-const getCategoryClass = (category, params) => {
+function getCategoryClass(category, params) {
     if (category.id === params?.categoryFk) {
         return 'active';
     }
-};
+}
 
 function addOrder(value, field, params) {
     let { orderBy } = params;
     orderBy = JSON.parse(orderBy);
+
+    if (field == 'field') {
+        orderBy.isTag = !orderByListStatic.find((tag) => tag.id === value);
+    }
+
     orderBy[field] = value;
     params.orderBy = JSON.stringify(orderBy);
     vnFilterPanelRef.value.search();