chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor(05): quotation product service

Browse source
This commit is contained in:
puriphatt 2024-10-02 15:07:53 +07:00
parent 1fc31f3cc5
commit c0171a4b0c
2 changed files with 531 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

177
src/pages/05_quotation/MainPage.vue
View file

@ -98,7 +98,7 @@ const { currentMyBranch } = storeToRefs(userBranch);
const currentCustomerId = ref<string | undefined>();
const refreshImageState = ref(false);
const emptyCreateDialog = ref(true);
const emptyCreateDialog = ref(false);
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
@ -120,95 +120,6 @@ const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
},
);
const nodes = ref<Node[]>([
{
title: 'กลุ่มสินค้าและบริการที่ 1',
subtitle: 'TG01000000001',
selected: false,
type: 'group',
children: [
{
title:
'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
subtitle: 'TG01000000001',
selected: false,
type: 'type',
children: [
{
title: 'งาน 1',
subtitle: 'TG01000000001',
selected: false,
type: 'work',
children: [
{
title: 'สินค้า 1',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
],
},
],
},
],
},
{
title: 'กลุ่มสินค้าและบริการที่ 2',
subtitle: 'TG01000000001',
selected: false,
type: 'group',
children: [
{
title:
'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
subtitle: 'TG01000000001',
selected: false,
type: 'type',
children: [
{
title: 'งาน 1',
subtitle: 'TG01000000001',
selected: false,
type: 'work',
children: [
{
title: 'สินค้า 1',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
],
},
],
},
],
},
]);
const productServiceStore = useProductServiceStore();
const router = useRouter();
@ -509,78 +420,7 @@ async function getService(id: string, force = false) {
}
function convertToTree() {
const node = productGroup.value.map((g) => ({
id: g.id,
title: g.name,
subtitle: g.code,
detail: g.detail,
remark: g.remark,
type: 'group',
displayDropIcon: g._count.service + g._count.product !== 0,
}));
nodes.value = node;
}
async function openProductServiceTree(node: Node, anchestor?: Node[]) {
if (node.type === 'group') {
const curGroupNode = nodes.value.find((v) => v.id === node.id);
await getAllService(node.id);
if (!curGroupNode) return;
curGroupNode.children = serviceList.value[curGroupNode.id]?.map((t) => ({
id: t.id,
title: t.name,
subtitle: t.code,
detail: t.detail,
type: 'type',
displayDropIcon: t.work.length > 0,
}));
}
if (node.type === 'type' && anchestor && anchestor[0].children) {
const curTypeNode = anchestor[0].children.find((v) => v.id === node.id);
const curType = serviceList.value[anchestor[0].id]?.find(
(v) => v.id === node.id,
);
if (!curTypeNode) return;
const noNameWork = curType.work
.filter((v) => !v.name)
.flatMap((v) =>
v.productOnWork.map((p) => ({
id: p.product.id,
title: p.product.name,
subtitle: p.product.code,
detail: p.product.detail,
remark: p.product.remark,
type: 'product',
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
})),
);
const withNameWork = curType.work
.filter((v) => v.name)
.flatMap((w) => ({
id: w.id,
title: w.name,
subtitle: ' ',
attributes: {
additional: w.attributes.additional,
showTotalPrice: w.attributes.showTotalPrice,
},
type: 'work',
displayDropIcon: w.productOnWork.length > 0,
children: w.productOnWork.map((p) => ({
id: p.product.id,
title: p.product.name,
subtitle: p.product.code,
detail: p.product.detail,
remark: p.product.remark,
type: 'product',
})),
}));
curTypeNode.children = noNameWork.concat(withNameWork);
}
// TODO: convert quotation product service data to tree
}
const quotationStore = useQuotationStore();
@ -1019,7 +859,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
</section>
</DialogForm>
<!-- add employee -->
<!-- add employee quotation -->
<DialogForm
:title="$t('general.select', { msg: $t('quotation.employeeList') })"
v-model:modal="pageState.employeeModal"
@ -1714,8 +1554,15 @@ watch(() => pageState.currentTab, fetchQuotationList);
<ProductServiceForm
v-model="pageState.productServiceModal"
v-model:nodes="nodes"
@open="openProductServiceTree"
v-model:product-group="productGroup"
v-model:product-list="productList"
v-model:service-list="serviceList"
@select-group="
async (id) => {
await getAllService(id);
await getAllProduct(id);
}
"
></ProductServiceForm>
</template>

595
src/pages/05_quotation/ProductServiceForm.vue
View file

@ -1,8 +1,21 @@
<script lang="ts" setup>
import DialogForm from 'src/components/DialogForm.vue';
import { onMounted, ref, watch } from 'vue';
import TreeView from 'src/components/shared/TreeView.vue';
import { computed, reactive, ref, watch } from 'vue';
import useOptionStore from 'stores/options';
import { moveItemUp, moveItemDown, deleteItem } from 'stores/utils';
import DialogForm from 'src/components/DialogForm.vue';
import TreeView from 'src/components/shared/TreeView.vue';
import SelectZone from 'src/components/shared/SelectZone.vue';
import SelectInput from 'src/components/shared/SelectInput.vue';
import TotalProductCardComponent from 'src/components/04_product-service/TotalProductCardComponent.vue';
import DeleteButton from 'src/components/button/DeleteButton.vue';
import { isRoleInclude } from 'src/stores/utils';
import {
ProductGroup,
ProductList,
Service,
Work,
} from 'src/stores/product-service/types';
type Node = {
[key: string]: any;
@ -13,45 +26,256 @@ type Node = {
icon?: string;
children?: Node[];
};
defineEmits<{
(e: 'open', node: Node, ancestorNode?: Node[]): void;
}>();
type ProductGroupId = string;
const optionStore = useOptionStore();
const emit = defineEmits<{
(e: 'selectGroup', id: string): void;
}>();
const model = defineModel<boolean>();
const inputSearch = defineModel<string>('inputSearch');
const nodes = defineModel<Node[]>('nodes', { default: [] });
const productGroup = defineModel<ProductGroup[]>('productGroup', {
default: [],
});
const productList = defineModel<Partial<Record<ProductGroupId, ProductList[]>>>(
'productList',
{ default: {} },
);
const serviceList = defineModel<Partial<Record<ProductGroupId, Service[]>>>(
'serviceList',
{ default: {} },
);
const splitterModel = ref(20);
const infoDrawer = ref(false);
const currentTab = ref('1');
const currentSelectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
const currentSelectedNode = ref<Node[]>([]);
const priceDisplay = computed(() => ({
price: !isRoleInclude(['sale_agent']),
agentPrice: isRoleInclude([
'admin',
'head_of_admin',
'head_of_sale',
'system',
'owner',
'accountant',
'sale_agent',
]),
serviceCharge: isRoleInclude([
'admin',
'head_of_admin',
'system',
'owner',
'accountant',
]),
}));
const nodes = ref<Node[]>([]);
const productServiceCard = ref();
const splitterModel = ref(0);
const selectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
const selectedNode = ref<Node[]>([]);
const selectedProductGroup = ref('');
const selectedItems = ref<[]>([]);
const preSelectedItems = ref<[]>([]);
const refSelectZone = ref<InstanceType<typeof SelectZone>>();
const pageState = reactive({
addModal: false,
infoDrawer: false,
infoTab: '1',
productServiceTab: '1',
});
function triggerInfo() {
infoDrawer.value = !infoDrawer.value;
pageState.infoDrawer = !pageState.infoDrawer;
}
function toggleSelected(node: Node, ancestorNode?: Node[]) {
if (currentSelectedNode.value.includes(node)) {
currentSelectedNode.value = [];
function triggerAddDialog() {
assignSelect(preSelectedItems.value, selectedItems.value);
pageState.addModal = true;
}
function toggleSelected(node: Node) {
if (selectedNode.value.includes(node)) {
selectedNode.value = [];
} else {
currentSelectedNode.value = [];
currentSelectedNode.value.push(node);
selectedNode.value = [];
selectedNode.value.push(node);
}
}
function toggleDelete(node?: Node, all?: boolean) {
if (all) {
selectedProductGroup.value = '';
nodes.value = [];
selectedItems.value = [];
} else {
const targetItem = selectedItems.value.find((i) => i.id === node?.id);
deleteItem(nodes.value, nodes.value.indexOf(node));
targetItem &&
deleteItem(selectedItems.value, selectedItems.value.indexOf(targetItem));
}
}
function toggleMove(node?: Node, to?: 'up' | 'down') {
const targetItem = selectedItems.value.find((i) => i.id === node?.id);
if (to === 'up' && targetItem) {
moveItemUp(nodes.value, nodes.value.indexOf(node));
moveItemUp(selectedItems.value, selectedItems.value.indexOf(targetItem));
} else if (to === 'down' && targetItem) {
moveItemDown(nodes.value, nodes.value.indexOf(node));
moveItemDown(selectedItems.value, selectedItems.value.indexOf(targetItem));
}
}
function mapCard() {
const data = {
service:
serviceList.value[selectedProductGroup.value]?.map((s) => ({
type: 'service',
id: s.id,
name: s.name,
code: s.code,
work: s.work,
attributes: s.attributes,
createAt: s.createdAt,
selectedImage: s.selectedImage,
})) || [],
product:
productList.value[selectedProductGroup.value]?.map((p) => ({
type: 'product',
id: p.id,
name: p.name,
code: p.code,
detail: p.detail,
remark: p.remark,
price: p.price,
agentPrice: p.agentPrice,
serviceCharge: p.serviceCharge,
process: p.process,
selectedImage: p.selectedImage,
})) || [],
};
productServiceCard.value = data;
}
function mapNode() {
assignSelect(selectedItems.value, preSelectedItems.value);
const node = selectedItems.value.map((v: Node) => {
if (v.type === 'service') {
return {
id: v.id,
title: v.name,
subtitle: v.code,
detail: v.detail,
attributes: {
additional: v.attributes.additional,
},
opened: v.work.length > 0,
type: 'type',
icon: 'mdi-server-outline',
bg: 'hsla(var(--orange-5-hsl)/0.1)',
fg: 'var(--orange-5)',
children: (function () {
const noNameObjects = v.work
.filter((w: Work) => !w.name)
.flatMap((w: Work) =>
w.productOnWork.map((p) => ({
id: p.product.id,
title: p.product.name,
subtitle: p.product.code || ' ',
detail: p.product.detail,
remark: p.product.remark,
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
type: 'product',
})),
);
const withNameObjects = v.work
.filter((w: Work) => w.name)
.flatMap((w: Work) => ({
id: w.id,
title: w.name,
subtitle: ' ',
attributes: w.attributes,
type: 'work',
opened: w.productOnWork.length > 0,
children: w.productOnWork.map((p) => ({
id: p.product.id,
title: p.product.name,
subtitle: p.product.code || ' ',
detail: p.product.detail,
remark: p.product.remark,
type: 'product',
})),
}));
return noNameObjects.concat(withNameObjects);
})(),
};
} else {
return {
id: v.id,
title: v.name,
subtitle: v.code,
detail: v.detail,
remark: v.remark,
type: 'product',
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
};
}
});
nodes.value = node;
pageState.addModal = false;
}
function assignSelect(to: [], from: []) {
const existingItems = new Set(to);
for (let i = to.length - 1; i >= 0; i--) {
if (!from.includes(to[i])) {
to.splice(i, 1);
}
}
const newItems = from.filter((item) => !existingItems.has(item));
to.push(...newItems);
}
watch(
() => currentSelectedNode.value,
() => selectedNode.value,
(v) => {
if (v.length > 0) {
currentSelectedType.value = v[0].type;
selectedType.value = v[0].type;
} else {
currentSelectedType.value = '';
selectedType.value = '';
}
},
);
watch(
() => selectedProductGroup.value,
async (v) => {
if (v && v !== '') emit('selectGroup', v);
if (productList.value || serviceList.value) {
mapCard();
}
preSelectedItems.value = [];
},
);
watch(
() => [productList.value, serviceList.value],
() => {
if (productList.value || serviceList.value) {
mapCard();
}
},
{ deep: true },
);
</script>
<template>
<div>
@ -66,6 +290,7 @@ watch(
v-model="splitterModel"
:limits="[0, 30]"
class="col"
disable
before-class="overflow-hidden"
after-class="overflow-hidden"
>
@ -84,12 +309,11 @@ watch(
<nav
v-for="node in nodes"
:key="node.id"
:class="{ 'active-nav': currentSelectedNode.includes(node) }"
:class="{ 'active-nav': selectedNode.includes(node) }"
class="column q-py-xs q-px-md rounded q-mb-sm cursor-pointer"
@click.stop="
() => {
toggleSelected(node);
$emit('open', node);
node.opened = !node.opened;
}
"
@ -106,14 +330,14 @@ watch(
<template v-slot:after>
<section class="column full-height no-wrap">
<header
class="row items-center q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
class="row items-center q-py-sm q-px-md justify-between full-width surface-3 bordered-b no-wrap"
>
<q-input
for="input-search"
outlined
dense
:label="$t('general.search')"
class="q-mr-md col-12 col-md-4"
class="q-mr-md col-md-4"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
debounce="200"
@ -123,28 +347,42 @@ watch(
</template>
</q-input>
<div>
<div class="row items-center q-gutter-x-sm">
<q-btn
padding="4px"
flat
rounded
icon="mdi-store-plus-outline"
@click="triggerAddDialog"
style="color: hsl(var(--text-mute))"
/>
<q-btn
padding="4px"
color="info"
flat
rounded
icon="mdi-information-outline"
@click="triggerInfo"
style="color: hsl(var(--text-mute))"
/>
</div>
</header>
<article class="col">
<div style="height: 100%" class="relative-position scroll">
<div
style="height: 100%; overflow-y: auto; overflow-x: hidden"
class="no-wrap row relative-position"
>
<!-- SEC: tree view body -->
<section>
<section class="col">
<div class="full-height column">
<span
v-if="false"
v-if="nodes.length === 0 && !selectedProductGroup"
class="col column items-center justify-center app-text-muted"
>
<q-avatar color="input-border" class="q-mb-md">
<q-avatar
style="background: var(--surface-0)"
class="q-mb-md"
>
<q-icon name="mdi-shopping" />
</q-avatar>
{{
@ -155,40 +393,77 @@ watch(
})
}}
</span>
<article class="q-pa-md" v-else>
<article class="column" v-else>
<section
class="bordered-b q-py-sm q-px-lg row items-center"
>
<q-avatar
size="24px"
style="
background: hsla(var(--pink-6-hsl) / 0.15);
color: var(--pink-6);
"
>
<q-icon name="mdi-folder-outline" />
</q-avatar>
<div class="column q-ml-md">
<span style="font-weight: 600">
{{
productGroup.find(
(g) => g.id === selectedProductGroup,
)?.name || '-'
}}
</span>
<span class="text-caption app-text-muted">
{{
productGroup.find(
(g) => g.id === selectedProductGroup,
)?.code || '-'
}}
</span>
</div>
<DeleteButton
icon-only
class="q-ml-auto"
@click.stop="toggleDelete(undefined, true)"
/>
</section>
<span
class="q-py-sm q-px-lg"
style="background: hsla(var(--info-bg) / 0.1)"
>
{{
$t('general.list', {
msg: $t('productService.title'),
})
}}
</span>
<TreeView
class="full-width q-pt-sm"
class="full-width q-py-sm q-px-md"
v-model:nodes="nodes"
expandable
selectable
:selected-node="currentSelectedNode"
@open="
(n, ancestor) => {
$emit('open', n, ancestor);
}
"
:selected-node="selectedNode"
@move-up="(node) => toggleMove(node, 'up')"
@move-down="(node) => toggleMove(node, 'down')"
@select="toggleSelected"
@delete="toggleDelete"
:decoration="[
{
level: 0,
icon: 'mdi-folder-outline',
bg: 'hsla(var(--pink-6-hsl)/0.1)',
fg: 'var(--pink-6)',
},
{
level: 1,
icon: 'mdi-server-outline',
bg: 'hsla(var(--orange-5-hsl)/0.1)',
fg: 'var(--orange-5)',
},
{
level: 2,
level: 1,
icon: 'mdi-briefcase-outline',
bg: 'hsla(var(--violet-11-hsl)/0.1)',
fg: 'var(--violet-11)',
},
{
level: 3,
level: 2,
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
@ -200,14 +475,14 @@ watch(
</section>
<!-- SEC: info -->
<transition name="info-slide">
<transition name="info-slide" class="absolute-right">
<div
v-if="infoDrawer"
class="column no-wrap surface-1 full-height absolute-right"
style="z-index: 1; width: 20vw"
v-if="pageState.infoDrawer"
class="column no-wrap surface-1"
style="z-index: 1; width: 20vw; position: sticky"
>
<span
v-if="currentSelectedType === ''"
v-if="selectedType === ''"
class="col column items-center justify-center app-text-muted"
>
<q-img
@ -230,16 +505,16 @@ watch(
inline-label
mobile-arrows
dense
v-model="currentTab"
v-model="pageState.infoTab"
align="left"
class="full-width bordered-b"
active-color="info"
>
<q-tab name="1" @click="currentTab = '1'">
<q-tab name="1" @click="pageState.infoTab = '1'">
<div
class="row text-capitalize"
:class="
currentTab === 'detail'
pageState.infoTab === 'detail'
? 'text-bold'
: 'app-text-muted'
"
@ -247,17 +522,17 @@ watch(
{{ $t('general.detail') }}
</div>
</q-tab>
<q-tab name="2" @click="currentTab = '2'">
<q-tab name="2" @click="pageState.infoTab = '2'">
<div
class="row text-capitalize"
:class="
currentTab === 'remark'
pageState.infoTab === 'remark'
? 'text-bold'
: 'app-text-muted'
"
>
{{
currentSelectedType !== 'work'
selectedType !== 'work' && selectedType !== 'type'
? $t('general.remark')
: $t('productService.service.properties')
}}
@ -266,56 +541,57 @@ watch(
</q-tabs>
<div class="q-pa-md column scroll">
<span v-if="currentTab === '1'">
<span v-if="pageState.infoTab === '1'">
<span class="app-text-muted">
{{
$t('general.detail', {
msg:
currentSelectedType === 'group'
selectedType === 'group'
? $t('productService.group.title')
: currentSelectedType === 'type'
: selectedType === 'type'
? $t('productService.type.title')
: currentSelectedType === 'work'
: selectedType === 'work'
? $t('productService.service.title2')
: $t('productService.product.title'),
})
}}
</span>
<aside class="surface-3 q-pa-md">
{{ currentSelectedNode[0].detail || '-' }}
{{ selectedNode[0].detail || '-' }}
</aside>
</span>
<span v-if="currentTab === '2'">
<span v-if="pageState.infoTab === '2'">
<span class="app-text-muted">
{{
currentSelectedType !== 'work'
selectedType !== 'work' && selectedType !== 'type'
? $t('general.remark', {
msg:
currentSelectedType === 'group'
selectedType === 'group'
? $t('productService.group.title')
: currentSelectedType === 'type'
? $t('productService.type.title')
: $t('productService.product.title'),
: $t('productService.product.title'),
})
: `${$t('productService.service.properties')}${$t('productService.service.title2')}`
: selectedType === 'work'
? `${$t('productService.service.properties')}${$t('productService.service.title2')}`
: `${$t('productService.service.properties')}${$t('productService.service.title')}`
}}
</span>
<aside
v-if="currentSelectedType !== 'work'"
v-if="
selectedType !== 'work' && selectedType !== 'type'
"
class="surface-3 q-pa-md"
>
{{ currentSelectedNode[0].remark || '-' }}
{{ selectedNode[0].remark || '-' }}
</aside>
<aside v-else class="q-pt-md row q-gutter-sm">
<template
v-if="
currentSelectedNode[0].attributes.additional
.length > 0
selectedNode[0].attributes.additional.length > 0
"
>
<div
v-for="att in currentSelectedNode[0].attributes
v-for="att in selectedNode[0].attributes
.additional"
:key="att"
class="bordered q-py-xs q-px-sm rounded"
@ -338,6 +614,173 @@ watch(
</template>
</q-splitter>
</DialogForm>
<!-- add product add service -->
<DialogForm
height="75vh"
submit-icon="mdi-check"
:hideCloseEvent="false"
bg-color="var(--surface-2)"
v-model:modal="pageState.addModal"
:title="$t('general.list', { msg: $t('productService.title') })"
:submit-label="$t('general.select', { msg: $t('productService.title') })"
:submit="
() => {
mapNode();
}
"
:close="
() => ((preSelectedItems = []), (pageState.productServiceTab = '1'))
"
>
<section class="col row">
<SelectZone
ref="refSelectZone"
no-padding
border-search-section
item-class="col-md-3 col-sm-6 col-12"
v-model:selected-item="preSelectedItems"
:items="
pageState.productServiceTab === '1'
? productServiceCard && productServiceCard.service
: productServiceCard && productServiceCard.product
"
:no-items-icon="
selectedProductGroup
? pageState.productServiceTab === '1'
? 'mdi-server-outline'
: 'mdi-shopping-outline'
: 'mdi-folder-outline'
"
:no-items-label="
selectedProductGroup
? $t('general.noData', {
msg:
pageState.productServiceTab === '1'
? $t('productService.service.title')
: $t('productService.product.title'),
})
: $t('general.select', { msg: $t('productService.group.title') })
"
>
<template #top>
<div class="row items-center app-text-muted">
{{ $t('productService.group.title') }}
<SelectInput
id="product-group-select"
:placeholder="
!selectedProductGroup
? $t('general.select', {
msg: $t('productService.group.title'),
})
: ''
"
v-model="selectedProductGroup"
clearable
optionLabel="name"
optionValue="id"
class="q-pl-sm col-5"
:fillInput="false"
:hide-selected="false"
:option="productGroup"
style="min-height: 50px"
>
<template #option="{ scope }">
<q-item
v-if="scope.opt"
v-bind="scope.itemProps"
class="row items-center"
>
<q-item-section>
{{ scope.opt.name }}
<span class="app-text-muted text-caption">
{{ scope.opt.code }}
</span>
</q-item-section>
</q-item>
</template>
<template #selectedItem="{ scope }">
<q-item-section v-if="scope.opt">
{{ scope.opt.name }}
<span class="app-text-muted text-caption">
{{ scope.opt.code }}
</span>
</q-item-section>
</template>
</SelectInput>
</div>
</template>
<template #tab>
<q-tabs
inline-label
mobile-arrows
dense
v-model="pageState.productServiceTab"
align="left"
class="full-width bordered-b row"
active-color="info"
>
<q-tab name="1" @click="pageState.productServiceTab = '1'">
<div
class="row text-capitalize"
:class="
pageState.productServiceTab === '1'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('productService.service.title') }}
</div>
</q-tab>
<q-tab name="2" @click="pageState.productServiceTab = '2'">
<div
class="row text-capitalize"
:class="
pageState.productServiceTab === '2'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('productService.product.title') }}
</div>
</q-tab>
<q-checkbox
:label="$t('general.selectAll')"
class="q-ml-auto q-mr-md"
size="xs"
:model-value="
selectedProductGroup && productServiceCard
? pageState.productServiceTab === '1'
? productServiceCard.service.length !== 0
? productServiceCard.service?.every((item) =>
preSelectedItems.includes(item),
)
: false
: productServiceCard.product.length !== 0
? productServiceCard.product?.every((item) =>
preSelectedItems.includes(item),
)
: false
: false
"
@click="() => refSelectZone?.select(undefined, true)"
></q-checkbox>
</q-tabs>
</template>
<template #data="{ item }">
<TotalProductCardComponent
:priceDisplay="priceDisplay"
:title="item.name"
:data="item"
/>
</template>
</SelectZone>
</section>
</DialogForm>
</div>
</template>
<style scoped>