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>
|
</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']"
|
||||||
|
|
|
||||||
|
|
@ -1650,112 +1650,108 @@ 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"
|
<q-input
|
||||||
style="z-index: 1"
|
for="input-search"
|
||||||
>
|
outlined
|
||||||
<div class="row q-py-sm q-px-md justify-between full-width">
|
dense
|
||||||
<q-input
|
:label="$t('search')"
|
||||||
for="input-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
|
outlined
|
||||||
dense
|
dense
|
||||||
:label="$t('search')"
|
option-value="value"
|
||||||
class="q-mr-md col-12 col-md-3"
|
option-label="label"
|
||||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
class="col"
|
||||||
v-model="inputSearch"
|
map-options
|
||||||
debounce="200"
|
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>
|
<template v-slot:folder>
|
||||||
<q-icon name="mdi-magnify" />
|
<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>
|
||||||
</q-input>
|
<template v-slot:list>
|
||||||
|
<q-icon
|
||||||
<div
|
name="mdi-format-list-bulleted"
|
||||||
class="row col-12 col-md-4"
|
class="q-px-sm q-py-xs rounded"
|
||||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
size="16px"
|
||||||
>
|
:style="{
|
||||||
<q-select
|
color: $q.dark.isActive
|
||||||
v-model="currentStatus"
|
? modeView === false
|
||||||
outlined
|
? '#C9D3DB'
|
||||||
dense
|
: '#787B7C'
|
||||||
option-value="value"
|
: modeView === false
|
||||||
option-label="label"
|
? '#787B7C'
|
||||||
class="col"
|
: '#C9D3DB',
|
||||||
map-options
|
}"
|
||||||
emit-value
|
/>
|
||||||
:options="[
|
</template>
|
||||||
{ label: $t('all'), value: 'All' },
|
</q-btn-toggle>
|
||||||
{ 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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -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]"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue