WIP
This commit is contained in:
parent
036dcaadd2
commit
b7ba664e45
|
|
@ -119,6 +119,11 @@ select:-webkit-autofill {
|
||||||
font-variation-settings: 'FILL' 1;
|
font-variation-settings: 'FILL' 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fill-icon-on-hover:hover {
|
||||||
|
font-variation-settings: 'FILL' 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.vn-table-separation-row {
|
.vn-table-separation-row {
|
||||||
height: 16px !important;
|
height: 16px !important;
|
||||||
background-color: var(--vn-section-color) !important;
|
background-color: var(--vn-section-color) !important;
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
|
||||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||||
import ItemSummary from '../Item/Card/ItemSummary.vue';
|
import ItemSummary from '../Item/Card/ItemSummary.vue';
|
||||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||||
|
import ItemListFilter from './ItemListFilter.vue';
|
||||||
|
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { toDateFormat } from 'src/filters/date.js';
|
import { toDateFormat } from 'src/filters/date.js';
|
||||||
|
|
@ -442,6 +443,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
||||||
<QSpace />
|
<QSpace />
|
||||||
<div id="st-actions"></div>
|
<div id="st-actions"></div>
|
||||||
</QToolbar>
|
</QToolbar>
|
||||||
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||||
|
<QScrollArea class="fit text-grey-8">
|
||||||
|
<ItemListFilter data-key="ItemList" />
|
||||||
|
</QScrollArea>
|
||||||
|
</QDrawer>
|
||||||
<QPage class="column items-center q-pa-md">
|
<QPage class="column items-center q-pa-md">
|
||||||
<VnPaginate
|
<VnPaginate
|
||||||
ref="paginateRef"
|
ref="paginateRef"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,348 @@
|
||||||
|
<script setup>
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="ItemCategories"
|
||||||
|
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
||||||
|
@on-fetch="(data) => (categoriesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
ref="itemTypesRef"
|
||||||
|
url="ItemTypes"
|
||||||
|
:filter="itemTypesFilter"
|
||||||
|
@on-fetch="(data) => (itemTypesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="TicketRequests/getItemTypeWorker"
|
||||||
|
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
|
||||||
|
@on-fetch="(data) => (buyersOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Suppliers"
|
||||||
|
:filter="{ fields: ['name', 'nickname'], order: 'name ASC' }"
|
||||||
|
@on-fetch="(data) => (suppliersOptions = data)"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
url="Tags"
|
||||||
|
:filter="{ fields: ['id', 'name', 'isFree'] }"
|
||||||
|
auto-load
|
||||||
|
@on-fetch="(data) => (tagOptions = data)"
|
||||||
|
/>
|
||||||
|
<!-- <pre>categoryFkparam:: {{ itemTypesFilter }}</pre> -->
|
||||||
|
<!-- <pre>{{ tagValues }}</pre> -->
|
||||||
|
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||||
|
<template #tags="{ tag, formatFn }">
|
||||||
|
<div v-if="tag.label !== 'tags'" class="q-gutter-x-xs">
|
||||||
|
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||||
|
<span>{{ formatFn(tag.value) }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="q-gutter-x-xs">
|
||||||
|
<strong>{{ t('params.tags') }} </strong>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #body="{ params, searchFn }">
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnInput
|
||||||
|
v-model="params.search"
|
||||||
|
:label="t('params.search')"
|
||||||
|
is-outlined
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('params.categoryFk')"
|
||||||
|
v-model="params.categoryFk"
|
||||||
|
@update:model-value="searchFn()"
|
||||||
|
:options="categoriesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
hide-selected
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('params.typeFk')"
|
||||||
|
v-model="params.typeFk"
|
||||||
|
@update:model-value="searchFn()"
|
||||||
|
:options="itemTypesOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
hide-selected
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
>
|
||||||
|
<template #option="scope">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
|
||||||
|
<QItemLabel caption>{{
|
||||||
|
scope.opt?.category?.name
|
||||||
|
}}</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelectFilter>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('params.buyerFk')"
|
||||||
|
v-model="params.buyerFk"
|
||||||
|
@update:model-value="searchFn()"
|
||||||
|
:options="buyersOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="nickname"
|
||||||
|
hide-selected
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('params.supplierFk')"
|
||||||
|
v-model="params.supplierFk"
|
||||||
|
@update:model-value="searchFn()"
|
||||||
|
:options="suppliersOptions"
|
||||||
|
option-value="id"
|
||||||
|
option-label="name"
|
||||||
|
hide-selected
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
>
|
||||||
|
<template #option="scope">
|
||||||
|
<QItem v-bind="scope.itemProps">
|
||||||
|
<QItemSection>
|
||||||
|
<QItemLabel>{{
|
||||||
|
scope.opt?.name + ': ' + scope.opt?.nickname
|
||||||
|
}}</QItemLabel>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
</template>
|
||||||
|
</VnSelectFilter>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem>
|
||||||
|
<QItem class="row items-center">
|
||||||
|
<QItemLabel>
|
||||||
|
{{ t('params.tags') }}
|
||||||
|
</QItemLabel>
|
||||||
|
<QIcon
|
||||||
|
name="add_circle"
|
||||||
|
class="fill-icon-on-hover q-ml-md"
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
@click="tagValues.push({})"
|
||||||
|
/>
|
||||||
|
</QItem>
|
||||||
|
<QItem
|
||||||
|
v-for="(tag, index) in tagValues"
|
||||||
|
:key="index"
|
||||||
|
class="row items-center"
|
||||||
|
>
|
||||||
|
<QItemSection class="col">
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('params.tag')"
|
||||||
|
v-model="tag.selectedTag"
|
||||||
|
:options="tagOptions"
|
||||||
|
option-label="name"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
:emit-value="false"
|
||||||
|
use-input
|
||||||
|
:is-clearable="false"
|
||||||
|
@update:model-value="getSelectedTagValues(tag)"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
<QItemSection class="col">
|
||||||
|
<VnSelectFilter
|
||||||
|
v-if="!tag?.selectedTag?.isFree && tag.valueOptions"
|
||||||
|
:label="t('params.tag')"
|
||||||
|
v-model="tag.value"
|
||||||
|
:options="tag.valueOptions || []"
|
||||||
|
option-value="value"
|
||||||
|
option-label="value"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
rounded
|
||||||
|
emit-value
|
||||||
|
use-input
|
||||||
|
:disable="!tag"
|
||||||
|
:is-clearable="false"
|
||||||
|
@update:model-value="applyTags()"
|
||||||
|
/>
|
||||||
|
<VnInput
|
||||||
|
v-else
|
||||||
|
v-model="tag.value"
|
||||||
|
:label="t('params.value')"
|
||||||
|
:disable="!tag"
|
||||||
|
is-outlined
|
||||||
|
:is-clearable="false"
|
||||||
|
@keyup.enter="applyTags()"
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
<QIcon
|
||||||
|
name="delete"
|
||||||
|
class="fill-icon-on-hover q-ml-xs"
|
||||||
|
size="sm"
|
||||||
|
color="primary"
|
||||||
|
@click="removeTag(index, params, searchFn)"
|
||||||
|
/>
|
||||||
|
</QItem>
|
||||||
|
|
||||||
|
<!-- <QItem>
|
||||||
|
<QItemSection>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('params.isOrdered')"
|
||||||
|
v-model="params.isOrdered"
|
||||||
|
toggle-indeterminate
|
||||||
|
/>
|
||||||
|
</QItemSection>
|
||||||
|
</QItem> -->
|
||||||
|
</template>
|
||||||
|
</VnFilterPanel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
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
|
||||||
|
</i18n>
|
||||||
Loading…
Reference in New Issue