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