diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index bd1bf75e5..39e190147 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';
@@ -69,7 +70,7 @@ const exprBuilder = (param, value) => {
}
};
-const params = reactive({});
+const params = reactive({ isFloramondo: false, isActive: true });
const applyColumnFilter = async (col) => {
try {
@@ -442,6 +443,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
+
+
+
+
+
+import { ref } from 'vue';
+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 VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import { QCheckbox } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useValidator } from 'src/composables/useValidator';
+import axios from 'axios';
+
+const { t } = useI18n();
+
+const props = defineProps({
+ dataKey: {
+ type: String,
+ required: true,
+ },
+});
+
+const stateStore = useStateStore();
+const validationsStore = useValidator();
+
+const itemTypesRef = ref(null);
+const categoriesOptions = ref([]);
+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 = {
+ fields: ['id', 'name', 'categoryFk'],
+ include: 'category',
+ order: 'name ASC',
+ where: {},
+};
+
+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 {
+ 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 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);
+};
+
+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];
+ const label = t(`params.${field}`);
+ moreFields.value.push({
+ name: field,
+ label,
+ type: prop ? prop.type : null,
+ });
+ });
+
+ // Fill fieldFiltersValues with existent userParams
+ if (arrayData.store?.userParams) {
+ fieldFiltersValues.value = Object.entries(arrayData.store?.userParams)
+ .filter(([key, value]) => value && _moreFields.includes(key))
+ .map(([key, value]) => ({
+ name: key,
+ value,
+ selectedField: moreFields.value.find((field) => field.name === key),
+ }));
+ }
+});
+
+
+
+ (categoriesOptions = data)"
+ auto-load
+ />
+ (itemTypesOptions = data)"
+ />
+ (buyersOptions = data)"
+ auto-load
+ />
+ (suppliersOptions = data)"
+ auto-load
+ />
+ (tagOptions = data)"
+ />
+
+
+
+ {{ t(`params.${tag.label}`) }}
+ : {{ formatFn(tag.value) }}
+
+
+
+
+
+
+
+
+
+
+ onCategoryChange($event, searchFn)
+ "
+ :options="categoriesOptions"
+ option-value="id"
+ option-label="name"
+ hide-selected
+ dense
+ outlined
+ rounded
+ />
+
+
+
+
+
+
+
+
+ {{ scope.opt?.name }}
+ {{
+ scope.opt?.category?.name
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{
+ scope.opt?.name + ': ' + scope.opt?.nickname
+ }}
+
+
+
+
+
+
+
+
+
+ {{ t('params.tags') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('More fields') }}
+
+
+
+
+
+ {
+ fieldFilter.name = $event.name;
+ fieldFilter.value = null;
+ fieldFilter.selectedField = $event;
+ }
+ "
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+en:
+ params:
+ search: General search
+ categoryFk: Category
+ typeFk: Type
+ buyerFk: Buyer
+ supplierFk: Supplier
+ 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
+ typeFk: Tipo
+ buyerFk: Comprador
+ supplierFk: Proveedor
+ tags: Etiquetas
+ tag: Etiqueta
+ value: Valor
+ isFloramondo: Floramondo
+ isActive: Activo
+ description: Descripción
+ name: Nombre
+ id: Id
+