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

fix: 04 layout

Browse source
This commit is contained in:
puriphatt 2024-07-17 07:32:56 +00:00
parent b2149f1f0c
commit 1250eb6bc7
1 changed files with 1614 additions and 1619 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -773,7 +773,7 @@ async function deleteProductById(productId?: string) {
persistent: true, persistent: true,
message: t('deleteConfirmMessage'), message: t('deleteConfirmMessage'),
action: async () => { action: async () => {
if (editByTree !== undefined) { if (editByTree.value !== undefined) {
if (editByTree.value === 'type') { if (editByTree.value === 'type') {
// Product Type // Product Type
await deleteProductServiceType(productId ?? currentIdType.value); await deleteProductServiceType(productId ?? currentIdType.value);
@ -1343,7 +1343,7 @@ watch(inputSearchProductAndService, async () => {
></q-fab-action> ></q-fab-action>
</ButtonAddComponent> </ButtonAddComponent>
<div class="full-height overflow-hidden"> <div class="full-height column no-wrap">
<div class="text-body-2 q-mb-xs flex items-center"> <div class="text-body-2 q-mb-xs flex items-center">
{{ $t('dataSum') }} {{ $t('dataSum') }}
<q-btn <q-btn
@ -1373,17 +1373,22 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</transition> </transition>
<div
class="column col rounded bordered"
style="flex-wrap: nowrap; overflow: hidden"
>
<q-splitter <q-splitter
v-model="splitterModel" v-model="splitterModel"
:limits="[20, 100]" :limits="[20, 100]"
style="width: 100%; height: 100%" style="width: 100%"
class="col"
after-class="overflow-hidden" after-class="overflow-hidden"
> >
<template v-slot:before> <template v-slot:before>
<div class="surface-2 column full-height"> <div class="surface-1 column full-height">
<div <div
class="row bordered-b q-pl-sm text-weight-bold items-center" class="row bordered-b surface-3 q-px-md q-py-sm text-weight-bold items-center"
:style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`" :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
> >
<div class="col">จัดการสาขาทั้งหมด</div> <div class="col">จัดการสาขาทั้งหมด</div>
</div> </div>
@ -1616,7 +1621,9 @@ watch(inputSearchProductAndService, async () => {
} }
} }
" "
:model-value="node.status !== 'INACTIVE'" :model-value="
node.status !== 'INACTIVE'
"
/> />
</div> </div>
</q-item-section> </q-item-section>
@ -1643,76 +1650,51 @@ watch(inputSearchProductAndService, async () => {
<!-- group/type --> <!-- group/type -->
<div <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
class="surface-2 items-center full-width full-height justify-between" class="surface-2 items-center full-width full-height column col"
> >
<!-- tool bar -->
<div <div
class="q-px-md row bordered-b justify-between items-center" class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
:class="{ ' ': $q.screen.lt.md }"
:style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`"
> >
<q-input <q-input
:class="{ 'col-12': $q.screen.lt.md }" for="input-search"
outlined outlined
:class="{ 'col-12': $q.screen.lt.md }"
dense dense
unelavated
:label="$t('search')" :label="$t('search')"
class="" class=""
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="250" debounce="200"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-magnify" /> <q-icon name="mdi-magnify" />
</template> </template>
</q-input> </q-input>
<div class="row" style="gap: var(--size-2)"> <div
<q-btn class="row col-12 col-md-6"
icon="mdi-tune-vertical-variant" :class="{ 'q-pt-xs': $q.screen.lt.md }"
size="sm" style="white-space: nowrap"
:color="$q.dark.isActive ? 'dark' : 'white'"
:text-color="$q.dark.isActive ? 'white' : 'dark'"
class="bordered rounded"
unelevated
> >
<q-menu class="bordered"> <q-select
<q-list v-close-popup dense> v-model="currentStatus"
<q-item outlined
clickable dense
class="flex items-center" option-value="value"
@click=" option-label="label"
() => { class="col"
currentStatus = 'All'; map-options
} emit-value
" :options="[
> { label: $t('all'), value: 'All' },
{{ $t('all') }} { label: $t('statusACTIVE'), value: 'ACTIVE' },
</q-item> {
<q-item label: $t('statusINACTIVE'),
clickable value: 'INACTIVE',
class="flex items-center" },
@click=" ]"
() => { ></q-select>
currentStatus = 'ACTIVE';
}
"
>
{{ $t('statusACTIVE') }}
</q-item>
<q-item
clickable
class="flex items-center"
@click="
() => {
currentStatus = 'INACTIVE';
}
"
>
{{ $t('statusINACTIVE') }}
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-select <q-select
v-if="modeView === false" v-if="modeView === false"
@ -1726,6 +1708,7 @@ watch(inputSearchProductAndService, async () => {
" "
:display-value="$t('displayField')" :display-value="$t('displayField')"
v-model="tbControl.groupAndType.fieldSelected" v-model="tbControl.groupAndType.fieldSelected"
class="col q-mx-sm"
option-label="label" option-label="label"
option-value="value" option-value="value"
map-options map-options
@ -1789,20 +1772,20 @@ watch(inputSearchProductAndService, async () => {
(productGroup?.length === 0 && productMode === 'group')) && (productGroup?.length === 0 && productMode === 'group')) &&
stat[0].count !== undefined stat[0].count !== undefined
" "
class="surface-1 row items-center justify-center bordered q-pa-md full-width full-height" class="items-center justify-center full-width flex col"
> >
<NoData :not-found="!!inputSearch" /> <NoData :not-found="!!inputSearch" />
</div> </div>
<template v-else> <template v-else>
<div class="surface-1 col flex q-pa-md scroll full-width"> <div class="surface-2 q-pa-md scroll col full-width">
<q-table <q-table
:style="`height: ${hideStat ? '60dvh' : '50vh'}`"
flat flat
bordered bordered
:grid="modeView" :grid="modeView"
:rows=" :rows="
(productMode === 'type' ? productType : productGroup) || [] (productMode === 'type' ? productType : productGroup) ||
[]
" "
:columns="tbColumn.groupAndType" :columns="tbColumn.groupAndType"
class="full-width" class="full-width"
@ -1859,7 +1842,9 @@ watch(inputSearchProductAndService, async () => {
> >
<q-td <q-td
v-if=" v-if="
tbControl.groupAndType.fieldSelected.includes('name') tbControl.groupAndType.fieldSelected.includes(
'name',
)
" "
> >
<div class="row items-center"> <div class="row items-center">
@ -2237,7 +2222,7 @@ watch(inputSearchProductAndService, async () => {
<div <div
v-if="productMode === 'group'" v-if="productMode === 'group'"
class="row items-center justify-between q-px-md q-py-sm" class="row items-center justify-between q-px-md q-py-sm full-width"
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <div class="row items-center">
@ -2299,7 +2284,7 @@ watch(inputSearchProductAndService, async () => {
<div <div
v-if="productMode === 'type'" v-if="productMode === 'type'"
class="row justify-between items-center q-px-md q-py-sm" class="row justify-between items-center q-px-md q-py-sm full-width"
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <div class="row items-center">
@ -2363,12 +2348,11 @@ watch(inputSearchProductAndService, async () => {
<!-- product/service --> <!-- product/service -->
<div <div
v-else-if="productMode === 'service'" v-else-if="productMode === 'service'"
class="surface-2 col bordered rounded column no-wrap" class="surface-1 col column no-wrap"
style="overflow: hidden" style="overflow: hidden"
> >
<div <div
class="row justify-between items-center q-px-md q-py-sm rounded surface-2" class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
:style="`z-index: 1 ; height: ${$q.screen.lt.md ? '20%' : '56px'}`"
> >
<q-input <q-input
:class="{ 'col-12': $q.screen.lt.md }" :class="{ 'col-12': $q.screen.lt.md }"
@ -2376,7 +2360,6 @@ watch(inputSearchProductAndService, async () => {
dense dense
unelavated unelavated
:label="$t('search')" :label="$t('search')"
class="q-mr-md"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearchProductAndService" v-model="inputSearchProductAndService"
debounce="250" debounce="250"
@ -2386,13 +2369,17 @@ watch(inputSearchProductAndService, async () => {
</template> </template>
</q-input> </q-input>
<div class="row" style="gap: var(--size-2)"> <div
class="row col-12 col-md-6"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
>
<q-btn <q-btn
icon="mdi-tune-vertical-variant" icon="mdi-tune-vertical-variant"
size="sm" size="sm"
:color="$q.dark.isActive ? 'dark' : 'white'" :color="$q.dark.isActive ? 'dark' : 'white'"
:text-color="$q.dark.isActive ? 'white' : 'dark'" :text-color="$q.dark.isActive ? 'white' : 'dark'"
class="bordered rounded q-py-sm" class="bordered rounded q-py-sm col"
unelevated unelevated
> >
<q-menu class="bordered"> <q-menu class="bordered">
@ -2441,6 +2428,7 @@ watch(inputSearchProductAndService, async () => {
v-if="modeView === false" v-if="modeView === false"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-mx-sm"
:options=" :options="
{ {
product: tbControl.product.fieldDisplay, product: tbControl.product.fieldDisplay,
@ -2517,10 +2505,11 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
<div class="surface-2 bordered-b q-px-md">
<q-tabs <q-tabs
dense dense
v-model="productAndServiceTab" v-model="productAndServiceTab"
class="bordered-b q-px-md" active-color="info"
align="left" align="left"
> >
<q-tab <q-tab
@ -2570,23 +2559,25 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</q-tab> </q-tab>
</q-tabs> </q-tabs>
</div>
<div <div
v-if=" v-if="
(productAndServiceTab === 'product' && product?.length === 0) || (productAndServiceTab === 'product' &&
product?.length === 0) ||
(productAndServiceTab === 'service' && service?.length === 0) (productAndServiceTab === 'service' && service?.length === 0)
" "
class="flex justify-center items-center surface-1" class="flex justify-center items-center surface-2 col"
:style="`height: ${hideStat ? '60vh' : '49vh'}`"
> >
<NoData :not-found="!!inputSearchProductAndService" /> <NoData :not-found="!!inputSearchProductAndService" />
</div> </div>
<!-- tab --> <!-- tab -->
<template v-else> <template v-else>
<div class="flex scroll full-width q-pa-md surface-1"> <div
class="flex scroll full-width q-pa-md surface-2 column col"
>
<q-table <q-table
class="full-width" class="full-width"
:style="`height: ${hideStat ? '55vh' : '45vh'}`"
flat flat
bordered bordered
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
@ -2645,7 +2636,8 @@ watch(inputSearchProductAndService, async () => {
<div class="row items-center"> <div class="row items-center">
<div <div
:class="{ :class="{
'status-active': props.row.status !== 'INACTIVE', 'status-active':
props.row.status !== 'INACTIVE',
'status-inactive': 'status-inactive':
props.row.status === 'INACTIVE', props.row.status === 'INACTIVE',
}" }"
@ -2735,7 +2727,9 @@ watch(inputSearchProductAndService, async () => {
> >
<div class="col-4">{{ $t('salePrice') }}</div> <div class="col-4">{{ $t('salePrice') }}</div>
<div class="col-4 text-weight-bold"> <div class="col-4 text-weight-bold">
{{ formatNumberDecimal(props.row.price || 0, 2) }} {{
formatNumberDecimal(props.row.price || 0, 2)
}}
</div> </div>
</div> </div>
<div <div
@ -3098,6 +3092,7 @@ watch(inputSearchProductAndService, async () => {
</template> </template>
</q-splitter> </q-splitter>
</div> </div>
</div>
<FormDialog <FormDialog
v-model:modal="dialogInputForm" v-model:modal="dialogInputForm"