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

fix: 01 layout & responsive tool bar

Browse source
This commit is contained in:
puriphatt 2024-07-16 02:52:38 +00:00
parent 503e8ed0a3
commit 2997c7ff59
1 changed files with 514 additions and 560 deletions
Download patch file Download diff file Expand all files Collapse all files

186
src/pages/01_branch-management/MainPage.vue
View file

@ -26,6 +26,7 @@ import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
import { watch } from 'vue'; import { watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
import { Status } from 'src/stores/types';
const { t } = useI18n(); const { t } = useI18n();
const utilsStore = useUtilsStore(); const utilsStore = useUtilsStore();
@ -63,6 +64,7 @@ const columns = [
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const hideStat = ref(false); const hideStat = ref(false);
const currentStatus = ref<Status | 'All'>('All');
const profileFileImg = ref<File | undefined>(undefined); const profileFileImg = ref<File | undefined>(undefined);
const imageUrl = ref<string | null>(''); const imageUrl = ref<string | null>('');
@ -524,7 +526,7 @@ watch(locale, () => {
/> />
</transition> </transition>
<div class="column col surface-1 rounded" :no-padding="!!branchData.total"> <div class="col surface-2 rounded" :no-padding="!!branchData.total">
<template v-if="!branchData.total"> <template v-if="!branchData.total">
<TooltipComponent <TooltipComponent
class="self-end" class="self-end"
@ -540,18 +542,20 @@ watch(locale, () => {
/> />
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="row" style="flex-grow: 1; flex-wrap: nowrap"> <div class="full-height column" style="flex-grow: 1; flex-wrap: nowrap">
<q-splitter <q-splitter
v-model="splitterModel" v-model="splitterModel"
:limits="[0, 100]" :limits="[0, 100]"
style="width: 100%" style="width: 100%"
class="col"
> >
<template v-slot:before> <template v-slot:before>
<div class="rounded surface-1 column" style="height: 100%"> <div class="surface-1 column full-height">
<div <div
class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center" class="row bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
style="height: 50px" :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
> >
<div class="col">จัดการสาขาทั้งหมด</div> <div class="col">จัดการสาขาทั้งหมด</div>
@ -584,8 +588,8 @@ watch(locale, () => {
</q-btn> </q-btn>
</div> </div>
<div class="col" style="position: relative"> <div class="col">
<div class="scroll" style="position: absolute; inset: 0"> <div class="scroll">
<q-tree <q-tree
:nodes="treeData" :nodes="treeData"
node-key="id" node-key="id"
@ -775,82 +779,47 @@ watch(locale, () => {
</template> </template>
<template v-slot:after> <template v-slot:after>
<div class="column" style="height: 100%"> <div class="column full-height">
<div <div
class="row justify-between q-pl-md items-center surface-2 bordered-b q-pr-md" class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
style="height: 50px"
> >
<div class="col-6">
<q-input <q-input
for="input-Search" for="input-search"
style="width: 250px"
:label-color="$q.dark.isActive ? 'white' : 'grey-10'"
outlined outlined
dense dense
label="ค้นหา" :label="$t('search')"
class="q-mr-md col-12 col-md-4"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="500" debounce="200"
></q-input> >
</div> <template v-slot:prepend>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<div class="col-6 row q-gutter-x-sm justify-end text-right"> <div
<q-btn-dropdown class="row col-12 col-md-6"
class="bordered rounded surface-1" :class="{ 'q-pt-xs': $q.screen.lt.md }"
>
<q-select
v-model="statusFilter"
outlined
dense dense
unelevated option-value="value"
:label="labelBtnStatus" option-label="label"
> class="col"
<q-list> map-options
<q-item emit-value
clickable :options="[
v-close-popup { label: $t('all'), value: 'all' },
@click=" { label: $t('statusACTIVE'), value: 'statusACTIVE' },
async () => { {
labelBtnStatus = $t('all'); label: $t('statusINACTIVE'),
statusFilter = 'all'; value: 'statusINACTIVE',
} },
" ]"
> ></q-select>
<q-item-section>
<q-item-label>{{ $t('all') }}</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="
async () => {
labelBtnStatus = $t('statusACTIVE');
statusFilter = 'statusACTIVE';
}
"
>
<q-item-section>
<q-item-label>
{{ $t('statusACTIVE') }}
</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="
async () => {
labelBtnStatus = $t('statusINACTIVE');
statusFilter = 'statusINACTIVE';
}
"
>
<q-item-section>
<q-item-label>
{{ $t('statusINACTIVE') }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-select <q-select
id="select-field" id="select-field"
@ -859,6 +828,7 @@ watch(locale, () => {
fieldDisplay.map((v) => ({ label: $t(v), value: v })) fieldDisplay.map((v) => ({ label: $t(v), value: v }))
" "
:display-value="$t('displayField')" :display-value="$t('displayField')"
class="col q-mx-sm"
v-model="fieldSelected" v-model="fieldSelected"
option-label="label" option-label="label"
option-value="value" option-value="value"
@ -870,8 +840,8 @@ watch(locale, () => {
/> />
<q-btn-toggle <q-btn-toggle
v-model="modeView"
id="btn-mode" id="btn-mode"
v-model="modeView"
dense dense
class="no-shadow bordered rounded surface-1" class="no-shadow bordered rounded surface-1"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
@ -916,10 +886,10 @@ watch(locale, () => {
</q-btn-toggle> </q-btn-toggle>
</div> </div>
</div> </div>
<div style="position: relative; flex: 1">
<div <div
style="position: absolute; inset: 0" class="q-pa-md col scroll"
class="scroll q-pa-md" style="background-color: transparent; overflow-x: auto"
> >
<q-table <q-table
flat flat
@ -953,8 +923,7 @@ watch(locale, () => {
) { ) {
return true; return true;
} }
if (fieldSelectedBranch.value === 'all') if (fieldSelectedBranch.value === 'all') return true;
return true;
if (fieldSelectedBranch.value === 'branchHQLabel') if (fieldSelectedBranch.value === 'branchHQLabel')
return v.isHeadOffice; return v.isHeadOffice;
if (fieldSelectedBranch.value === 'branchLabel') if (fieldSelectedBranch.value === 'branchLabel')
@ -971,7 +940,7 @@ watch(locale, () => {
:visible-columns="fieldSelected" :visible-columns="fieldSelected"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr class="surface-2" :props="props"> <q-tr class="surface-3" :props="props">
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
@ -992,7 +961,10 @@ watch(locale, () => {
:props="props" :props="props"
@click=" @click="
() => { () => {
if (props.row.isHeadOffice && props.row._count.branch !==0) { if (
props.row.isHeadOffice &&
props.row._count.branch !== 0
) {
fieldSelectedBranch.value = ''; fieldSelectedBranch.value = '';
inputSearch = ''; inputSearch = '';
currentHq = { currentHq = {
@ -1007,9 +979,7 @@ watch(locale, () => {
} }
" "
> >
<q-td <q-td v-if="fieldSelected.includes('branchLabelName')">
v-if="fieldSelected.includes('branchLabelName')"
>
<div class="row items-center"> <div class="row items-center">
<div <div
:class="{ :class="{
@ -1050,9 +1020,7 @@ watch(locale, () => {
<q-td v-if="fieldSelected.includes('branchLabelTel')"> <q-td v-if="fieldSelected.includes('branchLabelTel')">
{{ props.row.contact[0]?.telephoneNo || '-' }} {{ props.row.contact[0]?.telephoneNo || '-' }}
</q-td> </q-td>
<q-td <q-td v-if="fieldSelected.includes('branchLabelType')">
v-if="fieldSelected.includes('branchLabelType')"
>
{{ {{
props.row.isHeadOffice props.row.isHeadOffice
? $t('branchHQLabel') ? $t('branchHQLabel')
@ -1060,8 +1028,6 @@ watch(locale, () => {
}} }}
</q-td> </q-td>
<q-td> <q-td>
<q-btn <q-btn
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
size="sm" size="sm"
@ -1101,9 +1067,7 @@ watch(locale, () => {
size="xs" size="xs"
style="color: hsl(var(--green-6-hsl))" style="color: hsl(var(--green-6-hsl))"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('viewDetail') }} {{ $t('viewDetail') }}
</span> </span>
</q-item> </q-item>
@ -1139,9 +1103,7 @@ watch(locale, () => {
size="xs" size="xs"
style="color: hsl(var(--cyan-6-hsl))" style="color: hsl(var(--cyan-6-hsl))"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('edit') }} {{ $t('edit') }}
</span> </span>
</q-item> </q-item>
@ -1151,8 +1113,7 @@ watch(locale, () => {
:clickable="props.row.status === 'CREATED'" :clickable="props.row.status === 'CREATED'"
class="row" class="row"
:class="{ :class="{
'surface-3': 'surface-3': props.row.status !== 'CREATED',
props.row.status !== 'CREATED',
'app-text-muted': 'app-text-muted':
props.row.status !== 'CREATED', props.row.status !== 'CREATED',
}" }"
@ -1168,9 +1129,7 @@ watch(locale, () => {
props.row.status === 'CREATED', props.row.status === 'CREATED',
}" }"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('delete') }} {{ $t('delete') }}
</span> </span>
</q-item> </q-item>
@ -1228,7 +1187,10 @@ watch(locale, () => {
}" }"
@click=" @click="
() => { () => {
if (props.row.isHeadOffice && props.row._count.branch !==0) { if (
props.row.isHeadOffice &&
props.row._count.branch !== 0
) {
fieldSelectedBranch.value = ''; fieldSelectedBranch.value = '';
inputSearch = ''; inputSearch = '';
currentHq = { currentHq = {
@ -1279,7 +1241,7 @@ watch(locale, () => {
" "
> >
<template v-slot:action> <template v-slot:action>
<q-menu class="bordered" > <q-menu class="bordered">
<q-list> <q-list>
<q-item <q-item
:id="`view-detail-btn-${props.row.name}-view`" :id="`view-detail-btn-${props.row.name}-view`"
@ -1311,9 +1273,7 @@ watch(locale, () => {
size="xs" size="xs"
style="color: hsl(var(--green-6-hsl))" style="color: hsl(var(--green-6-hsl))"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('viewDetail') }} {{ $t('viewDetail') }}
</span> </span>
</q-item> </q-item>
@ -1350,9 +1310,7 @@ watch(locale, () => {
size="xs" size="xs"
style="color: hsl(var(--cyan-6-hsl))" style="color: hsl(var(--cyan-6-hsl))"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('edit') }} {{ $t('edit') }}
</span> </span>
</q-item> </q-item>
@ -1363,8 +1321,7 @@ watch(locale, () => {
:clickable="props.row.status === 'CREATED'" :clickable="props.row.status === 'CREATED'"
class="row" class="row"
:class="{ :class="{
'surface-3': 'surface-3': props.row.status !== 'CREATED',
props.row.status !== 'CREATED',
'app-text-muted': 'app-text-muted':
props.row.status !== 'CREATED', props.row.status !== 'CREATED',
}" }"
@ -1380,9 +1337,7 @@ watch(locale, () => {
props.row.status === 'CREATED', props.row.status === 'CREATED',
}" }"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('delete') }} {{ $t('delete') }}
</span> </span>
</q-item> </q-item>
@ -1433,7 +1388,6 @@ watch(locale, () => {
</q-table> </q-table>
</div> </div>
</div> </div>
</div>
</template> </template>
</q-splitter> </q-splitter>
</div> </div>