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

refactor: no product on service work & select all search

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

73
src/components/ProfileBanner.vue
View file

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

103
src/pages/04_product-service/MainPage.vue
View file

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