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

refactor: lay out

Browse source
This commit is contained in:
oat_dev 2024-07-08 17:16:34 +07:00
parent 199815f78e
commit c50e775c11
2 changed files with 146 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -42,7 +42,7 @@ withDefaults(
<div <div
bordered bordered
:class="{ 'is-add-product': isAddProduct }" :class="{ 'is-add-product': isAddProduct }"
class="column bordered rounded q-pa-sm no-wrap" class="column bordered rounded q-pa-sm no-wrap surface-1"
style="height: 20rem" style="height: 20rem"
@click="$emit('select', data)" @click="$emit('select', data)"
> >

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

@ -1559,119 +1559,13 @@ watch(inputSearchProductAndService, async () => {
<!-- product/service --> <!-- product/service -->
<div <div
v-else-if="productMode === 'service'" v-else-if="productMode === 'service'"
class="surface-1 col bordered rounded column" class="surface-2 col bordered rounded column"
> >
<div <div
class="row justify-between items-center surface-1 rounded" class="row justify-between items-center surface-1 q-px-md q-py-sm rounded surface-3 bordered"
style="z-index: 1" style="z-index: 1"
> >
<q-tabs <div>
v-model="productAndServiceTab"
class="full-height"
style="border-top-left-radius: var(--radius-2)"
>
<q-tab
name="all"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
pageSizeServiceAndProduct;
// await fetchListOfProductAndService();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'all'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('all') }}
<q-badge
class="rounded q-ml-sm"
:class="
productAndServiceTab === 'all' ? '' : 'app-text-muted'
"
:color="productAndServiceTab === 'all' ? 'primary' : ''"
style="background-color: var(--surface-3)"
:label="totalProductAndService"
/>
</div>
</q-tab>
<q-tab
name="product"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
// await fetchListOfProduct();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'product'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('product') }}
<q-badge
class="rounded q-ml-sm"
:class="
productAndServiceTab === 'product' ? '' : 'app-text-muted'
"
:color="productAndServiceTab === 'product' ? 'primary' : ''"
style="background-color: var(--surface-3)"
:label="totalProduct"
/>
</div>
</q-tab>
<q-tab
name="service"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
// await fetchListOfService();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'service'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('service') }}
<q-badge
class="rounded q-ml-sm"
:class="
productAndServiceTab === 'service' ? '' : 'app-text-muted'
"
:color="productAndServiceTab === 'service' ? 'primary' : ''"
style="background-color: var(--surface-3)"
:label="totalService"
/>
</div>
</q-tab>
</q-tabs>
<div class="row q-py-sm q-pr-md">
<q-input <q-input
style="width: 300px" style="width: 300px"
outlined outlined
@ -1687,7 +1581,8 @@ watch(inputSearchProductAndService, async () => {
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
</q-input> </q-input>
</div>
<div class="row">
<q-btn <q-btn
icon="mdi-tune-vertical-variant" icon="mdi-tune-vertical-variant"
size="sm" size="sm"
@ -1754,10 +1649,91 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
<!-- tab --> <!-- tab -->
<div <div
v-if="productAndService && productAndService.length > 0" v-if="productAndService && productAndService.length > 0"
class="row flex q-pa-md q-col-gutter-md col scroll" class="row flex col q-px-md"
> >
<q-tabs
dense
v-model="productAndServiceTab"
class="col-12 q-mb-lg bordered-b"
align="left"
style="border-top-left-radius: var(--radius-2)"
>
<q-tab
name="all"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
pageSizeServiceAndProduct;
// await fetchListOfProductAndService();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'all'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('all') }}
</div>
</q-tab>
<q-tab
name="product"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
// await fetchListOfProduct();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'product'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('product') }}
</div>
</q-tab>
<q-tab
name="service"
@click="
async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = '';
currentStatus = 'All';
// await fetchListOfService();
flowStore.rotate();
}
"
>
<div
class="row"
:class="
productAndServiceTab === 'service'
? 'text-bold'
: 'app-text-muted'
"
>
{{ $t('service') }}
</div>
</q-tab>
</q-tabs>
<div class="col-12 row flex col q-col-gutter-sm scroll full-height">
<div <div
class="col-md-3 col-sm-6 col-12" class="col-md-3 col-sm-6 col-12"
v-for="i in productAndServiceTab === 'all' v-for="i in productAndServiceTab === 'all'
@ -1819,9 +1795,13 @@ watch(inputSearchProductAndService, async () => {
/> />
</div> </div>
</div> </div>
</div>
<!-- footer --> <!-- footer -->
<div class="row items-center justify-between q-px-md"> <div
class="row items-center justify-between q-px-md surface-2"
style="z-index: 99"
>
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <div class="row items-center">
<div class="app-text-muted" style="width: 80px"> <div class="app-text-muted" style="width: 80px">