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
bordered
: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"
@click="$emit('select', data)"
>

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

@ -1559,119 +1559,13 @@ watch(inputSearchProductAndService, async () => {
<!-- product/service -->
<div
v-else-if="productMode === 'service'"
class="surface-1 col bordered rounded column"
class="surface-2 col bordered rounded column"
>
<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"
>
<q-tabs
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">
<div>
<q-input
style="width: 300px"
outlined
@ -1687,7 +1581,8 @@ watch(inputSearchProductAndService, async () => {
<q-icon name="mdi-magnify" />
</template>
</q-input>
</div>
<div class="row">
<q-btn
icon="mdi-tune-vertical-variant"
size="sm"
@ -1754,10 +1649,91 @@ watch(inputSearchProductAndService, async () => {
</div>
<!-- tab -->
<div
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
class="col-md-3 col-sm-6 col-12"
v-for="i in productAndServiceTab === 'all'
@ -1819,9 +1795,13 @@ watch(inputSearchProductAndService, async () => {
/>
</div>
</div>
</div>
<!-- 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="row items-center">
<div class="app-text-muted" style="width: 80px">