152 lines
4.4 KiB
Vue
152 lines
4.4 KiB
Vue
<script setup>
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
|
|
import axios from 'axios';
|
|
import { useI18n } from 'vue-i18n';
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
import CatalogItem from 'src/components/ui/CatalogItem.vue';
|
|
import OrderCatalogFilter from 'src/pages/Order/Card/OrderCatalogFilter.vue';
|
|
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const stateStore = useStateStore();
|
|
const { t } = useI18n();
|
|
const dataKey = 'OrderCatalogList';
|
|
const arrayData = useArrayData(dataKey);
|
|
const store = arrayData.store;
|
|
const tags = ref([]);
|
|
|
|
let catalogParams = {
|
|
orderFk: route.params.id,
|
|
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
|
|
};
|
|
|
|
onMounted(() => {
|
|
stateStore.rightDrawer = true;
|
|
checkOrderConfirmation();
|
|
});
|
|
|
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
|
|
|
async function checkOrderConfirmation() {
|
|
const response = await axios.get(`Orders/${route.params.id}`);
|
|
if (response.data.isConfirmed === 1) {
|
|
router.push(`/order/${route.params.id}/line`);
|
|
}
|
|
}
|
|
|
|
function extractTags(items) {
|
|
if (!items || !items.length) return;
|
|
const resultTags = [];
|
|
(items || []).forEach((item) => {
|
|
(item.tags || []).forEach((tag) => {
|
|
const index = resultTags.findIndex((item) => item.tagFk === tag.tagFk);
|
|
if (index === -1) {
|
|
resultTags.push({ ...tag, priority: 1 });
|
|
} else {
|
|
resultTags[index].priority += 1;
|
|
}
|
|
});
|
|
});
|
|
tags.value = resultTags;
|
|
extractValueTags(items);
|
|
}
|
|
|
|
const tagValue = ref([]);
|
|
|
|
function extractValueTags(items) {
|
|
const resultValueTags = items.flatMap((x) =>
|
|
Object.keys(x)
|
|
.filter((k) => /^value\d+$/.test(k))
|
|
.map((v) => x[v])
|
|
.filter((v) => v)
|
|
.sort()
|
|
);
|
|
tagValue.value = resultValueTags;
|
|
}
|
|
const autoLoad = computed(() => !!JSON.parse(route?.query.table ?? '{}')?.categoryFk);
|
|
|
|
watch(
|
|
() => store.data,
|
|
(val) => {
|
|
extractTags(val);
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<VnSearchbar
|
|
:data-key="dataKey"
|
|
:user-params="catalogParams"
|
|
:static-params="['orderFk', 'orderBy']"
|
|
:redirect="false"
|
|
url="Orders/CatalogFilter"
|
|
:label="t('Search items')"
|
|
:info="t('You can search items by name or id')"
|
|
/>
|
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
|
<QScrollArea class="fit text-grey-8">
|
|
<OrderCatalogFilter
|
|
:data-key="dataKey"
|
|
:tag-value="tagValue"
|
|
:tags="tags"
|
|
:initial-catalog-params="catalogParams"
|
|
/>
|
|
</QScrollArea>
|
|
</QDrawer>
|
|
<QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
|
|
<div class="full-width">
|
|
<VnPaginate
|
|
:data-key="dataKey"
|
|
url="Orders/CatalogFilter"
|
|
:limit="50"
|
|
:user-params="catalogParams"
|
|
:auto-load="autoLoad"
|
|
>
|
|
<template #body="{ rows }">
|
|
<div class="catalog-list">
|
|
<div v-if="rows && !rows?.length" class="no-result">
|
|
{{ t('globals.noResults') }}
|
|
</div>
|
|
<CatalogItem
|
|
v-for="row in rows"
|
|
:key="row.id"
|
|
:item="row"
|
|
is-catalog
|
|
class="fill-icon"
|
|
data-cy="orderCatalogItem"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.catalog-list {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.no-result {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: var(--vn-label-color);
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
You can search items by name or id: Puedes buscar items por nombre o id
|
|
Search items: Buscar items
|
|
</i18n>
|