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

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

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