WIP
This commit is contained in:
parent
036dcaadd2
commit
b7ba664e45
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
|||
<QSpace />
|
||||
<div id="st-actions"></div>
|
||||
</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">
|
||||
<VnPaginate
|
||||
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