fix: 03 layout
This commit is contained in:
puriphatt
parent
1250eb6bc7
commit
b5a2dee9aa
2 changed files with 111 additions and 109 deletions
|
|
@ -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']"
|
||||
|
|
|
|||
|
|
@ -1650,112 +1650,108 @@ 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">
|
||||
<q-input
|
||||
for="input-search"
|
||||
<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="col-12 col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-md-5 col-12"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<q-select
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('search')"
|
||||
class="q-mr-md col-12 col-md-3"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('all'), value: 'All' },
|
||||
{ label: $t('statusACTIVE'), value: 'ACTIVE' },
|
||||
{ label: $t('statusINACTIVE'), value: 'INACTIVE' },
|
||||
]"
|
||||
></q-select>
|
||||
<q-select
|
||||
v-if="modeView === false"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="q-mx-sm col"
|
||||
:options="
|
||||
currentTab === 'employer'
|
||||
? fieldDisplayEmployer
|
||||
: fieldDisplayEmployee
|
||||
"
|
||||
:display-value="$t('displayField')"
|
||||
v-model="fieldSelected"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
map-options
|
||||
emit-value
|
||||
outlined
|
||||
multiple
|
||||
dense
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
id="btn-mode"
|
||||
v-model="modeView"
|
||||
dense
|
||||
class="no-shadow bordered rounded surface-1"
|
||||
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
size="xs"
|
||||
:options="[
|
||||
{ value: true, slot: 'folder' },
|
||||
{ value: false, slot: 'list' },
|
||||
]"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
<template v-slot:folder>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="16px"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? modeView
|
||||
? '#C9D3DB '
|
||||
: '#787B7C'
|
||||
: modeView
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div
|
||||
class="row col-12 col-md-4"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
>
|
||||
<q-select
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('all'), value: 'All' },
|
||||
{ label: $t('statusACTIVE'), value: 'ACTIVE' },
|
||||
{ label: $t('statusINACTIVE'), value: 'INACTIVE' },
|
||||
]"
|
||||
></q-select>
|
||||
<q-select
|
||||
v-if="modeView === false"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col q-mx-sm"
|
||||
:options="
|
||||
currentTab === 'employer'
|
||||
? fieldDisplayEmployer
|
||||
: fieldDisplayEmployee
|
||||
"
|
||||
:display-value="$t('displayField')"
|
||||
v-model="fieldSelected"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
map-options
|
||||
emit-value
|
||||
outlined
|
||||
multiple
|
||||
dense
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
id="btn-mode"
|
||||
v-model="modeView"
|
||||
dense
|
||||
class="no-shadow bordered rounded surface-1"
|
||||
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
size="xs"
|
||||
:options="[
|
||||
{ value: true, slot: 'folder' },
|
||||
{ value: false, slot: 'list' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:folder>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="16px"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? modeView
|
||||
? '#C9D3DB '
|
||||
: '#787B7C'
|
||||
: modeView
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:list>
|
||||
<q-icon
|
||||
name="mdi-format-list-bulleted"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
size="16px"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? modeView === false
|
||||
? '#C9D3DB'
|
||||
: '#787B7C'
|
||||
: modeView === false
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
<template v-slot:list>
|
||||
<q-icon
|
||||
name="mdi-format-list-bulleted"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
size="16px"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? modeView === false
|
||||
? '#C9D3DB'
|
||||
: '#787B7C'
|
||||
: modeView === false
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1814,6 +1810,7 @@ watch([inputSearch, currentStatus], async () => {
|
|||
</div>
|
||||
|
||||
<!-- body -->
|
||||
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
:limits="[15, 80]"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue