refactor: no product on service work & select all search

This commit is contained in:
puriphatt 2024-08-22 16:37:27 +07:00
parent 446015a795
commit f56c5591cc
2 changed files with 112 additions and 64 deletions

View file

@ -81,38 +81,47 @@ const showOverlay = ref(false);
@mouseleave="showOverlay = false"
@click.stop="$emit('view')"
>
<q-img id="profile-view" v-if="img" :src="img" :ratio="1">
<template #error>
<q-img
v-if="fallbackImg"
:src="fallbackImg"
:ratio="1"
style="background-color: transparent"
>
<template #error>
<div
class="full-width full-height flex items-center justify-center"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
<q-icon :name="icon || 'mdi-account'" />
</div>
</template>
</q-img>
<div
v-else
class="full-width full-height flex items-center justify-center"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
<q-icon :name="icon || 'mdi-account'" />
</div>
</template>
</q-img>
<div
v-if="img"
class="full-width full-height"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
<q-img id="profile-view" :src="img" :ratio="1">
<template #error>
<q-img
v-if="fallbackImg"
:src="fallbackImg"
:ratio="1"
style="background-color: transparent"
>
<template #error>
<div
class="full-width full-height flex items-center justify-center"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
<q-icon :name="icon || 'mdi-account'" />
</div>
</template>
</q-img>
<div
v-else
class="full-width full-height flex items-center justify-center"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
<q-icon :name="icon || 'mdi-account'" />
</div>
</template>
</q-img>
</div>
<div
v-else
class="full-width full-height flex items-center justify-center"

View file

@ -497,6 +497,24 @@ async function searchProduct(isAdd: boolean = true) {
flowStore.rotate();
}
function selectAllProduct(list: ProductList[]) {
list
?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
})
.forEach((i) => {
const productExists = selectProduct.value.some(
(product) => product.id === i.id,
);
if (!productExists) {
selectProduct.value.push({ ...i });
}
});
}
async function fetchListOfOptionBranch() {
const uid = getUserId();
const role = getRole();
@ -3799,47 +3817,61 @@ watch(
}
"
>
<div class="full-width q-pa-lg">
<div class="row items-center justify-between q-mb-md">
<div
class="full-width q-pa-lg column"
:class="
resultSearchProduct?.length === 0 || productIsAdd?.length === 0
? 'full-height no-wrap'
: ''
"
>
<div
class="row items-center justify-between q-mb-md"
v-if="productIsAdd?.length !== 0"
>
<q-checkbox
:label="$t('selectAll')"
:model-value="
selectProduct.length ===
productIsAdd?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
}).length
"
@click="
() => {
if (
selectProduct.length ===
!!inputSearchProductAndService
? selectProduct.length ===
resultSearchProduct?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
}).length
: selectProduct.length ===
productIsAdd?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
}).length
"
@click="
() => {
if (
!!inputSearchProductAndService
? selectProduct.length ===
resultSearchProduct?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
}).length
: selectProduct.length ===
productIsAdd?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
}).length
) {
selectProduct = [];
} else {
productIsAdd
?.filter((i) => {
if (i.status === 'INACTIVE') {
return false;
}
return true;
})
.forEach((i) => {
const productExists = selectProduct.some(
(product) => product.id === i.id,
);
if (!productExists) {
selectProduct.push({ ...i });
}
});
!!inputSearchProductAndService
? resultSearchProduct && selectAllProduct(resultSearchProduct)
: productIsAdd && selectAllProduct(productIsAdd);
}
}
"
@ -3863,10 +3895,17 @@ watch(
</div>
<div
class="flex col justify-center items-center"
v-if="resultSearchProduct?.length === 0"
class="flex col justify-center items-center col"
v-if="resultSearchProduct?.length === 0 || productIsAdd?.length === 0"
>
<NoData notFound />
<NoData
:notFound="resultSearchProduct?.length === 0"
:text="
productIsAdd?.length === 0
? $t('productService.product.noProduct')
: ''
"
/>
</div>
<div v-else class="row q-col-gutter-md">
<div