From 98159de2573746932c62154ab24d1ba4cd732e12 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 23 May 2024 13:55:06 +0200 Subject: [PATCH 01/20] refactor: refs #6896 end migration orders --- src/pages/Order/Card/OrderCatalogFilter.vue | 152 ++++++----- src/pages/Order/Card/OrderCatalogItem.vue | 5 +- src/pages/Order/Card/OrderForm.vue | 65 +++-- src/pages/Order/OrderCatalog.vue | 20 +- src/pages/Order/OrderLines.vue | 270 +++++++++++++------- 5 files changed, 330 insertions(+), 182 deletions(-) diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue index 04748a8c8..af593008f 100644 --- a/src/pages/Order/Card/OrderCatalogFilter.vue +++ b/src/pages/Order/Card/OrderCatalogFilter.vue @@ -3,14 +3,15 @@ import { computed, ref } from 'vue'; import { useI18n } from 'vue-i18n'; import { useRoute } from 'vue-router'; import axios from 'axios'; - import VnInput from 'components/common/VnInput.vue'; import FetchData from 'components/FetchData.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnSelect from 'components/common/VnSelect.vue'; import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue'; +import { useValidator } from 'src/composables/useValidator'; const { t } = useI18n(); + const route = useRoute(); const props = defineProps({ dataKey: { @@ -21,32 +22,34 @@ const props = defineProps({ type: Array, required: true, }, + tagValue: { + type: Array, + required: true, + }, }); const categoryList = ref(null); const selectedCategoryFk = ref(null); const typeList = ref(null); const selectedTypeFk = ref(null); - +const validationsStore = useValidator(); +const selectedOrder = ref(null); +const selectedOrderField = ref(null); +const moreFields = ref([]); +const moreFieldsOrder = ref([]); +const createValue = (val, done) => { + if (val.length > 2) { + // if (!tagOptions.value.includes(val)) { + // done(tagOptions.value, 'add-unique'); + // } + tagValues.value.push({ value: val }); + } +}; const resetCategory = () => { selectedCategoryFk.value = null; typeList.value = null; }; -const selectedOrder = ref(null); -const orderList = [ - { way: 'ASC', name: 'Ascendant' }, - { way: 'DESC', name: 'Descendant' }, -]; - -const selectedOrderField = ref(null); -const OrderFields = [ - { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 }, - { field: 'showOrder, price', name: 'Color and price', priority: 999 }, - { field: 'name', name: 'Name', priority: 999 }, - { field: 'price', name: 'Price', priority: 999 }, -]; - const clearFilter = (key) => { if (key === 'categoryFk') { resetCategory(); @@ -72,21 +75,6 @@ const loadTypes = async (categoryFk) => { typeList.value = data; }; -const onFilterInit = async ({ params }) => { - if (params.typeFk) { - selectedTypeFk.value = params.typeFk; - } - if (params.categoryFk) { - await loadTypes(params.categoryFk); - selectedCategoryFk.value = params.categoryFk; - } - if (params.orderBy) { - orderByParam.value = JSON.parse(params.orderBy); - selectedOrder.value = orderByParam.value?.way; - selectedOrderField.value = orderByParam.value?.field; - } -}; - const selectedCategory = computed(() => (categoryList.value || []).find( (category) => category?.id === selectedCategoryFk.value @@ -109,12 +97,25 @@ function exprBuilder(param, value) { const selectedTag = ref(null); const tagValues = ref([{}]); -const tagOptions = ref(null); -const isButtonDisabled = computed( - () => !selectedTag.value || tagValues.value.some((item) => !item.value) -); +const tagOptions = ref([]); const applyTagFilter = (params, search) => { + // console.log('params: ', params); + // if (!selectedTag.value) { + // console.log('values: ', selectedTag?.value?.name); + + // params.tagGroups.push( + // JSON.stringify({ + // values: selectedTag?.value?.name, + // // tagSelection: { + // // ...selectedTag.value, + // // orgShowField: selectedTag?.value?.name, + // // }, + // }) + // ); + // search(); + // return; + // } if (!tagValues.value?.length) { params.tagGroups = null; search(); @@ -125,12 +126,12 @@ const applyTagFilter = (params, search) => { } params.tagGroups.push( JSON.stringify({ - values: tagValues.value, + values: tagValues.value.filter((obj) => Object.keys(obj).length > 0), tagSelection: { ...selectedTag.value, - orgShowField: selectedTag.value.name, + orgShowField: selectedTag?.value?.name, }, - tagFk: selectedTag.value.tagFk, + tagFk: selectedTag?.value?.tagFk, }) ); search(); @@ -155,12 +156,6 @@ const onOrderFieldChange = (value, params, search) => { search(); }; -const onOrderChange = (value, params, search) => { - const orderBy = Object.assign({}, orderByParam.value, { way: value.way }); - params.orderBy = JSON.stringify(orderBy); - search(); -}; - const setCategoryList = (data) => { categoryList.value = (data || []) .filter((category) => category.display) @@ -168,6 +163,10 @@ const setCategoryList = (data) => { ...category, icon: `vn:${(category.icon || '').split('-')[1]}`, })); + const _moreFields = ['ASC', 'DESC']; + const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price']; + moreFields.value = useLang(_moreFields); + moreFieldsOrder.value = useLang(_moreFieldsTypes); }; const getCategoryClass = (category, params) => { @@ -175,6 +174,20 @@ const getCategoryClass = (category, params) => { return 'active'; } }; + +const useLang = (values) => { + const { models } = validationsStore; + const properties = models.Item?.properties || {}; + return values.map((name) => { + let prop = properties[name]; + const label = t(`params.${name}`); + return { + name, + label, + type: prop ? prop.type : null, + }; + }); +};