From b7ba664e4565bb900e97f559916159d2dbb65f26 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Tue, 23 Apr 2024 09:05:34 -0300 Subject: [PATCH 1/8] WIP --- src/css/app.scss | 5 + src/pages/Item/ItemList.vue | 6 + src/pages/Item/ItemListFilter.vue | 348 ++++++++++++++++++++++++++++++ 3 files changed, 359 insertions(+) create mode 100644 src/pages/Item/ItemListFilter.vue diff --git a/src/css/app.scss b/src/css/app.scss index 25b484649..9037802ad 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -119,6 +119,11 @@ select:-webkit-autofill { font-variation-settings: 'FILL' 1; } +.fill-icon-on-hover:hover { + font-variation-settings: 'FILL' 1; + cursor: pointer; +} + .vn-table-separation-row { height: 16px !important; background-color: var(--vn-section-color) !important; diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue index 3e399e29f..9c1ab9df6 100644 --- a/src/pages/Item/ItemList.vue +++ b/src/pages/Item/ItemList.vue @@ -12,6 +12,7 @@ import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue'; import ItemSummary from '../Item/Card/ItemSummary.vue'; import VnPaginate from 'components/ui/VnPaginate.vue'; +import ItemListFilter from './ItemListFilter.vue'; import { useStateStore } from 'stores/useStateStore'; import { toDateFormat } from 'src/filters/date.js'; @@ -442,6 +443,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
+ + + + + +import { ref, watch, computed } from 'vue'; +import { useI18n } from 'vue-i18n'; +import { onMounted } from 'vue'; +import { useStateStore } from 'stores/useStateStore'; + +import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; +import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; +import VnInput from 'src/components/common/VnInput.vue'; +import FetchData from 'components/FetchData.vue'; +import VnInputDate from 'src/components/common/VnInputDate.vue'; + +import { useArrayData } from 'composables/useArrayData'; +import axios from 'axios'; + +const { t } = useI18n(); + +const props = defineProps({ + dataKey: { + type: String, + required: true, + }, +}); + +const stateStore = useStateStore(); + +const itemTypesRef = ref(null); +const categoriesOptions = ref([]); +const itemTypesOptions = ref([]); +const buyersOptions = ref([]); +const suppliersOptions = ref([]); +const tagValues = ref([]); + +const arrayData = useArrayData(props.dataKey); +const itemTypesFilter = computed(() => { + return { + fields: ['id', 'name', 'categoryFk'], + include: 'category', + order: 'name ASC', + where: { categoryFk: arrayData.store?.userParams?.categoryFk }, + }; +}); + +// TODO: checkear este watch que fetchee cuando cambie categoryFk +watch(itemTypesFilter.value.where.categoryFk, () => itemTypesRef.value.fetch()); + +const getSelectedTagValues = async (tag) => { + try { + tag.value = null; + const filter = { + fields: ['value'], + order: 'value ASC', + }; + + const params = { filter: JSON.stringify(filter) }; + const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, { + params, + }); + tag.valueOptions = data; + } catch (err) { + console.error('Error getting selected tag values'); + } +}; + +// const applyColumnFilter = async (col) => { +// try { +// params[col.field] = col.columnFilter.filterValue; +// await arrayData.addFilter({ params }); +// } catch (err) { +// console.error('Error applying column filter', err); +// } +// }; + +const applyTags = () => { + // params.tags = tagValues.value + // .filter((tag) => tag.selectedTag && tag.value) + // .map((tag) => ({ + // tagFk: tag.selectedTag.id, + // tagName: tag.selectedTag.name, + // value: tag.value, + // })); + console.log('apply tags'); + const params = { + tags: tagValues.value + .filter((tag) => tag.selectedTag && tag.value) + .map((tag) => ({ + tagFk: tag.selectedTag.id, + tagName: tag.selectedTag.name, + value: tag.value, + })), + }; + console.log('params:: ', params); + arrayData.addFilter({ params }); + // search(); +}; + +const removeTag = (index, params, search) => { + (tagValues.value || []).splice(index, 1); + // applyTags(params, search); +}; + +onMounted(async () => { + stateStore.rightDrawer = true; +}); + + + + + +en: + params: + search: General search + categoryFk: Category + typeFk: Type + buyerFk: Buyer + supplierFk: Supplier + tags: Tags + tag: Tag + value: Value +es: + params: + search: Búsqueda general + categoryFk: Reino + typeFk: Tipo + buyerFk: Comprador + supplierFk: Proveedor + tags: Etiquetas + tag: Etiqueta + value: Valor + From f3b5bf7f4b1847286738ce6225ec4b70c5fba628 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Tue, 23 Apr 2024 15:34:52 -0300 Subject: [PATCH 2/8] Item list filter --- src/composables/useArrayData.js | 7 +- src/pages/Item/ItemList.vue | 2 +- src/pages/Item/ItemListFilter.vue | 230 +++++++++++++++++++++--------- src/router/modules/item.js | 1 + 4 files changed, 171 insertions(+), 69 deletions(-) diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index 998ee0576..04d7bfef7 100644 --- a/src/composables/useArrayData.js +++ b/src/composables/useArrayData.js @@ -156,9 +156,10 @@ export function useArrayData(key, userOptions) { delete store.userParams[param]; delete params[param]; if (store.filter?.where) { - delete store.filter.where[ - Object.keys(exprBuilder ? exprBuilder(param) : param)[0] - ]; + const key = Object.keys( + exprBuilder && exprBuilder(param) ? exprBuilder(param) : param + ); + if (key[0]) delete store.filter.where[key[0]]; if (Object.keys(store.filter.where).length === 0) { delete store.filter.where; } diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue index 9c1ab9df6..3b3697612 100644 --- a/src/pages/Item/ItemList.vue +++ b/src/pages/Item/ItemList.vue @@ -70,7 +70,7 @@ const exprBuilder = (param, value) => { } }; -const params = reactive({}); +const params = reactive({ isFloramondo: false, isActive: true }); const applyColumnFilter = async (col) => { try { diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue index a99811e2f..ad6167014 100644 --- a/src/pages/Item/ItemListFilter.vue +++ b/src/pages/Item/ItemListFilter.vue @@ -4,13 +4,14 @@ import { useI18n } from 'vue-i18n'; import { onMounted } from 'vue'; import { useStateStore } from 'stores/useStateStore'; +import FetchData from 'components/FetchData.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnInput from 'src/components/common/VnInput.vue'; -import FetchData from 'components/FetchData.vue'; -import VnInputDate from 'src/components/common/VnInputDate.vue'; +import { QCheckbox } from 'quasar'; import { useArrayData } from 'composables/useArrayData'; +import { useValidator } from 'src/composables/useValidator'; import axios from 'axios'; const { t } = useI18n(); @@ -23,6 +24,7 @@ const props = defineProps({ }); const stateStore = useStateStore(); +const validationsStore = useValidator(); const itemTypesRef = ref(null); const categoriesOptions = ref([]); @@ -30,19 +32,27 @@ const itemTypesOptions = ref([]); const buyersOptions = ref([]); const suppliersOptions = ref([]); const tagValues = ref([]); +const fieldFiltersValues = ref([]); +const moreFields = ref([]); const arrayData = useArrayData(props.dataKey); -const itemTypesFilter = computed(() => { - return { - fields: ['id', 'name', 'categoryFk'], - include: 'category', - order: 'name ASC', - where: { categoryFk: arrayData.store?.userParams?.categoryFk }, - }; -}); +const itemTypesFilter = { + fields: ['id', 'name', 'categoryFk'], + include: 'category', + order: 'name ASC', + where: {}, +}; -// TODO: checkear este watch que fetchee cuando cambie categoryFk -watch(itemTypesFilter.value.where.categoryFk, () => itemTypesRef.value.fetch()); +const onCategoryChange = async (categoryFk, search) => { + if (!categoryFk) { + itemTypesFilter.where.categoryFk = null; + delete itemTypesFilter.where.categoryFk; + } else { + itemTypesFilter.where.categoryFk = categoryFk; + } + search(); + await itemTypesRef.value.fetch(); +}; const getSelectedTagValues = async (tag) => { try { @@ -62,45 +72,60 @@ const getSelectedTagValues = async (tag) => { } }; -// const applyColumnFilter = async (col) => { -// try { -// params[col.field] = col.columnFilter.filterValue; -// await arrayData.addFilter({ params }); -// } catch (err) { -// console.error('Error applying column filter', err); -// } -// }; - -const applyTags = () => { - // params.tags = tagValues.value - // .filter((tag) => tag.selectedTag && tag.value) - // .map((tag) => ({ - // tagFk: tag.selectedTag.id, - // tagName: tag.selectedTag.name, - // value: tag.value, - // })); - console.log('apply tags'); - const params = { - tags: tagValues.value - .filter((tag) => tag.selectedTag && tag.value) - .map((tag) => ({ - tagFk: tag.selectedTag.id, - tagName: tag.selectedTag.name, - value: tag.value, - })), - }; - console.log('params:: ', params); - arrayData.addFilter({ params }); - // search(); +const applyTags = (params, search) => { + params.tags = tagValues.value + .filter((tag) => tag.selectedTag && tag.value) + .map((tag) => ({ + tagFk: tag.selectedTag.id, + tagName: tag.selectedTag.name, + value: tag.value, + })); + search(); }; const removeTag = (index, params, search) => { (tagValues.value || []).splice(index, 1); - // applyTags(params, search); + applyTags(params, search); +}; + +const applyFieldFilters = (params) => { + fieldFiltersValues.value.forEach((fieldFilter) => { + if ( + fieldFilter.selectedField && + (fieldFilter.value !== null || + fieldFilter.value !== '' || + fieldFilter.value !== undefined) + ) { + params[fieldFilter.name] = fieldFilter.value; + } + }); + arrayData.applyFilter({ params }); +}; + +const removeFieldFilter = (index, params, search) => { + delete params[fieldFiltersValues.value[index].name]; + (fieldFiltersValues.value || []).splice(index, 1); + applyFieldFilters(params, search); }; onMounted(async () => { stateStore.rightDrawer = true; + if (arrayData.store?.userParams?.categoryFk) + itemTypesFilter.where.categoryFk = arrayData.store?.userParams?.categoryFk; + await itemTypesRef.value.fetch(); + const { models } = validationsStore; + const properties = models.Item?.properties || {}; + + const _moreFields = ['id', 'description', 'name', 'isActive']; + + _moreFields.forEach((field) => { + let prop = properties[field]; + moreFields.value.push({ + name: field, + label: prop ? prop.description : field, + type: prop ? prop.type : null, + }); + }); }); @@ -116,7 +141,6 @@ onMounted(async () => { url="ItemTypes" :filter="itemTypesFilter" @on-fetch="(data) => (itemTypesOptions = data)" - auto-load /> { /> @@ -136,16 +160,16 @@ onMounted(async () => { auto-load @on-fetch="(data) => (tagOptions = data)" /> - - - + 
{{ itemTypesFilter }}
+ @@ -335,7 +424,13 @@ en: tags: Tags tag: Tag value: Value + isFloramondo: Floramondo + isActive: Active + description: Description + name: Name + id: ID es: + More fields: Más campos params: search: Búsqueda general categoryFk: Reino @@ -345,4 +440,9 @@ es: tags: Etiquetas tag: Etiqueta value: Valor + isFloramondo: Floramondo + isActive: Activo + description: Descripción + name: Nombre + id: ID diff --git a/src/router/modules/item.js b/src/router/modules/item.js index 41f3ec92a..a9e7090b3 100644 --- a/src/router/modules/item.js +++ b/src/router/modules/item.js @@ -6,6 +6,7 @@ export default { meta: { title: 'items', icon: 'vn:item', + moduleName: 'Item', }, component: RouterView, redirect: { name: 'ItemMain' }, From 969087a34777075715c870943508266ad656ac73 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Wed, 24 Apr 2024 17:48:47 -0300 Subject: [PATCH 3/8] Remove unused things --- src/pages/Item/ItemListFilter.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue index ad6167014..e0993356c 100644 --- a/src/pages/Item/ItemListFilter.vue +++ b/src/pages/Item/ItemListFilter.vue @@ -1,5 +1,5 @@ From ce55109dd31dd19dd579b74391c35f9b1d0cca30 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Fri, 26 Apr 2024 15:41:03 -0300 Subject: [PATCH 7/8] fix more fields label when selected --- src/pages/Item/ItemListFilter.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue index 2e89cdbcf..98bc74b20 100644 --- a/src/pages/Item/ItemListFilter.vue +++ b/src/pages/Item/ItemListFilter.vue @@ -369,7 +369,7 @@ onMounted(async () => { Date: Fri, 26 Apr 2024 21:05:45 +0200 Subject: [PATCH 8/8] fix: reset fieldFilter.value when change model --- src/pages/Item/ItemListFilter.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue index 98bc74b20..a51f9ebb4 100644 --- a/src/pages/Item/ItemListFilter.vue +++ b/src/pages/Item/ItemListFilter.vue @@ -381,6 +381,7 @@ onMounted(async () => { @update:model-value=" ($event) => { fieldFilter.name = $event.name; + fieldFilter.value = null; fieldFilter.selectedField = $event; } "