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

feat: scroll inside product / service

Browse source
This commit is contained in:
Methapon2001 2024-07-08 11:15:31 +07:00
parent ff7b4d1f76
commit 37d19e8600
1 changed files with 116 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1227,31 +1227,28 @@ watch(inputSearchProductAndService, async () => {
<!-- group/type --> <!-- group/type -->
<div <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
class="surface-1 col bordered rounded q-px-md q-pt-md scroll column" class="surface-1 col bordered rounded column no-wrap"
> >
<div class="row justify-between"> <div class="row surface-2 bordered-b q-px-md q-py-sm">
<div <div v-if="productMode === 'type'" class="text-h6 text-weight-bold">
v-if="productMode === 'type'"
class="text-h6 text-weight-bold q-mb-md"
>
{{ $t('productAndServiceType') }} {{ $t('productAndServiceType') }}
</div> </div>
<div <div
v-else-if="productMode === 'group'" v-else-if="productMode === 'group'"
class="text-h6 text-weight-bold q-mb-md" class="text-h6 text-weight-bold"
> >
{{ $t('productAndServiceAll') }} {{ $t('productAndServiceAll') }}
</div> </div>
<div <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
class="row q-px-md q-pb-md" class="row q-ml-auto"
> >
<q-input <q-input
style="width: 300px" style="width: 300px"
outlined outlined
dense dense
:label="$t('search')" :label="$t('search')"
class="q-mr-lg" class="q-mr-sm"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="500" debounce="500"
@ -1309,119 +1306,117 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
<div class="row q-col-gutter-md col scroll"> <div style="height: 100%" class="q-pa-md scroll">
<div <div class="row q-col-gutter-md col">
:class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`" <div
v-for="(v, i) in productMode === 'type' :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
? productType v-for="(v, i) in productMode === 'type'
: productGroup" ? productType
:key="i" : productGroup"
> :key="i"
<ProductCardComponent >
v-if="productMode === 'type'" <ProductCardComponent
isType v-if="productMode === 'type'"
:count-product="v._count.product" isType
:count-type="v._count.type" :count-product="v._count.product"
:count-service="v._count.service" :count-type="v._count.type"
:title="v.name" :count-service="v._count.service"
:subtitle="v.code" :title="v.name"
:date="new Date(v.updatedAt)" :subtitle="v.code"
:status="v.status" :date="new Date(v.updatedAt)"
:id="v.id" :status="v.status"
:isDisabled="v.status === 'INACTIVE'" :id="v.id"
:color=" :isDisabled="v.status === 'INACTIVE'"
$q.dark.isActive :color="
? 'var(--purple-7-hsl)' $q.dark.isActive
: 'var(--violet-11-hsl)' ? 'var(--purple-7-hsl)'
" : 'var(--violet-11-hsl)'
@toggleStatus="toggleStatusType(v.id, v.status)" "
@viewCard=" @toggleStatus="toggleStatusType(v.id, v.status)"
() => { @viewCard="
currentStatusProduct = v.status === 'INACTIVE'; () => {
clearFormGroup(); currentStatusProduct = v.status === 'INACTIVE';
currentIdType = v.id; clearFormGroup();
assignFormDataGroup(v); currentIdType = v.id;
isEdit = false; assignFormDataGroup(v);
drawerInfo = true; isEdit = false;
} drawerInfo = true;
" }
@updateCard=" "
() => { @updateCard="
clearFormGroup(); () => {
currentIdType = v.id; clearFormGroup();
assignFormDataGroup(v); currentIdType = v.id;
isEdit = true; assignFormDataGroup(v);
drawerInfo = true; isEdit = true;
} drawerInfo = true;
" }
@deleteCard=" "
() => { @deleteCard="
deleteProductById(v.id); () => {
} deleteProductById(v.id);
" }
@on-click=" "
async () => { @on-click="
pathTypeName = v.name; async () => {
currentIdType = v.id; pathTypeName = v.name;
productMode = 'service'; currentIdType = v.id;
productAndServiceTab = 'all'; productMode = 'service';
// await featchStatsService(); productAndServiceTab = 'all';
// await featchStatsProduct(); // await featchStatsService();
await fetchListOfProduct(); // await featchStatsProduct();
await fetchListOfService(); await fetchListOfProduct();
await fetchListOfProductAndService(); await fetchListOfService();
flowStore.rotate(); await fetchListOfProductAndService();
} flowStore.rotate();
" }
/> "
<ProductCardComponent />
v-else-if="productMode === 'group'" <ProductCardComponent
:title="v.name" v-else-if="productMode === 'group'"
:subtitle="v.code" :title="v.name"
:count-product="v._count.product" :subtitle="v.code"
:count-type="v._count.type" :count-product="v._count.product"
:count-service="v._count.service" :count-type="v._count.type"
:date="new Date(v.updatedAt)" :count-service="v._count.service"
:status="v.status" :date="new Date(v.updatedAt)"
color="var(--pink-6-hsl)" :status="v.status"
:id="v.id" color="var(--pink-6-hsl)"
:isDisabled="v.status === 'INACTIVE'" :id="v.id"
@toggleStatus="toggleStatusGroup(v.id, v.status)" :isDisabled="v.status === 'INACTIVE'"
@viewCard=" @toggleStatus="toggleStatusGroup(v.id, v.status)"
() => { @viewCard="
currentStatusProduct = v.status === 'INACTIVE'; () => {
clearFormGroup(); currentStatusProduct = v.status === 'INACTIVE';
assignFormDataGroup(v); clearFormGroup();
isEdit = false; assignFormDataGroup(v);
currentId = v.id; isEdit = false;
drawerInfo = true; currentId = v.id;
} drawerInfo = true;
" }
@updateCard=" "
() => { @updateCard="
clearFormGroup(); () => {
assignFormDataGroup(v); clearFormGroup();
isEdit = true; assignFormDataGroup(v);
currentId = v.id; isEdit = true;
currentId = v.id;
drawerInfo = true; drawerInfo = true;
} }
" "
@deleteCard=" @deleteCard="deleteProductById(v.id)"
() => { @on-click="
deleteProductById(v.id); async () => {
} pathGroupName = v.name;
" currentId = v.id;
@on-click=" productMode = 'type';
async () => { await fetchListType();
pathGroupName = v.name; flowStore.rotate();
currentId = v.id; }
productMode = 'type'; "
await fetchListType(); />
flowStore.rotate(); </div>
}
"
/>
</div> </div>
</div> </div>