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

fix: 03 layout

Browse source
This commit is contained in:
puriphatt 2024-07-17 07:38:44 +00:00
parent 1250eb6bc7
commit b5a2dee9aa
2 changed files with 111 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/03_customer-management/CustomerInfoComponent.vue
View file

@ -87,8 +87,8 @@ watch(currentStatus, async () => {
</script> </script>
<template> <template>
<div class="bordered surface-1 col column"> <div class="bordered surface-1 col column surface-2">
<div class="row no-wrap justify-between bordered-b surface-2"> <div class="row no-wrap justify-between bordered-b surface-3">
<div class="row items-center"> <div class="row items-center">
<q-btn <q-btn
round round
@ -128,7 +128,7 @@ watch(currentStatus, async () => {
</div> </div>
</div> </div>
</div> </div>
<div class="row items-center q-pa-md"> <div class="row items-center q-px-md">
<q-btn <q-btn
id="btn-add-customer" id="btn-add-customer"
dense dense
@ -138,23 +138,27 @@ watch(currentStatus, async () => {
@click="$emit('dialog')" @click="$emit('dialog')"
style="background-color: var(--cyan-6); color: white" style="background-color: var(--cyan-6); color: white"
/> />
<q-separator vertical inset class="q-mx-lg" /> <q-separator vertical inset class="q-mx-md" />
<q-input <q-input
style="width: 250px" style="width: 250px"
outlined outlined
dense dense
:label="$t('search')" :label="$t('search')"
class="q-mr-lg"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="500" debounce="500"
></q-input> >
<template v-slot:prepend>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-btn <q-btn
padding="10px 16px"
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" class="bordered rounded q-ml-md"
unelevated unelevated
> >
<q-menu class="bordered"> <q-menu class="bordered">
@ -197,6 +201,7 @@ watch(currentStatus, async () => {
<div v-for="(br, i) in branch" :key="i" class="col-4"> <div v-for="(br, i) in branch" :key="i" class="col-4">
<BranchCardCustomer <BranchCardCustomer
class="surface-1"
:inactive="br.status === 'INACTIVE'" :inactive="br.status === 'INACTIVE'"
:color="customerType === 'CORP' ? 'corp' : 'pers'" :color="customerType === 'CORP' ? 'corp' : 'pers'"
:badgeField="['status']" :badgeField="['status']"

15
src/pages/03_customer-management/MainPage.vue
View file

@ -1650,17 +1650,13 @@ watch([inputSearch, currentStatus], async () => {
> >
<!-- tabs --> <!-- tabs -->
<div class="column"> <div class="column">
<div <div class="row q-px-md q-py-sm justify-between full-width surface-3">
class="row justify-between full-width items-center surface-3"
style="z-index: 1"
>
<div class="row q-py-sm q-px-md justify-between full-width">
<q-input <q-input
for="input-search" for="input-search"
outlined outlined
dense dense
:label="$t('search')" :label="$t('search')"
class="q-mr-md col-12 col-md-3" class="col-12 col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="200" debounce="200"
@ -1671,8 +1667,9 @@ watch([inputSearch, currentStatus], async () => {
</q-input> </q-input>
<div <div
class="row col-12 col-md-4" class="row col-md-5 col-12"
:class="{ 'q-pt-xs': $q.screen.lt.md }" :class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
> >
<q-select <q-select
v-model="currentStatus" v-model="currentStatus"
@ -1693,7 +1690,7 @@ watch([inputSearch, currentStatus], 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" class="q-mx-sm col"
:options=" :options="
currentTab === 'employer' currentTab === 'employer'
? fieldDisplayEmployer ? fieldDisplayEmployer
@ -1757,7 +1754,6 @@ watch([inputSearch, currentStatus], async () => {
</q-btn-toggle> </q-btn-toggle>
</div> </div>
</div> </div>
</div>
<div class="surface-2 bordered-b q-px-md"> <div class="surface-2 bordered-b q-px-md">
<q-tabs <q-tabs
@ -1814,6 +1810,7 @@ watch([inputSearch, currentStatus], async () => {
</div> </div>
<!-- body --> <!-- body -->
<q-splitter <q-splitter
v-model="splitterModel" v-model="splitterModel"
:limits="[15, 80]" :limits="[15, 80]"