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

refactor: virtual branch on profile banner and card mode

Browse source
This commit is contained in:
puriphatt 2024-09-09 14:26:14 +07:00
parent a8ebc85ace
commit b0b410a2cc
2 changed files with 40 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/01_branch-management/BranchCard.vue
View file

@ -3,7 +3,7 @@ import { baseUrl } from 'stores/utils';
defineProps<{ defineProps<{
inactive?: boolean; inactive?: boolean;
color?: 'none' | 'hq' | 'br'; color?: 'none' | 'hq' | 'br' | 'br-virtual';
data: { data: {
branchLabelCode: string; branchLabelCode: string;
branchLabelName: string; branchLabelName: string;
@ -96,6 +96,7 @@ defineProps<{
'branchLabelTel', 'branchLabelTel',
'branchLabelType', 'branchLabelType',
]" ]"
:key="key"
class="branch-card__data" class="branch-card__data"
> >
<div>{{ $t(`branch.card.${key}`) }}</div> <div>{{ $t(`branch.card.${key}`) }}</div>

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

@ -1362,7 +1362,13 @@ watch(currentHq, () => {
} }
" "
:metadata="props.row" :metadata="props.row"
:color="props.row.isHeadOffice ? 'hq' : 'br'" :color="
props.row.isHeadOffice
? 'hq'
: props.row.virtual
? 'br-virtual'
: 'br'
"
:key="props.row.id" :key="props.row.id"
:data="{ :data="{
branchLabelCode: props.row.code, branchLabelCode: props.row.code,
@ -1500,18 +1506,22 @@ watch(currentHq, () => {
:color="`hsla(var(${ :color="`hsla(var(${
formTypeBranch === 'headOffice' formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
: $q.dark.isActive : formData.virtual
? '--violet-10' ? '--blue-6'
: '--violet-11' : $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/1)`" }-hsl)/1)`"
:bg-color="`hsla(var(${ :bg-color="`hsla(var(${
imageUrl imageUrl
? '--gray-0' ? '--gray-0'
: formTypeBranch === 'headOffice' : formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
: $q.dark.isActive : formData.virtual
? '--violet-10' ? '--blue-6'
: '--violet-11' : $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/${imageUrl ? '0' : '0.15'})`" }-hsl)/${imageUrl ? '0' : '0.15'})`"
:menu="formMenuIcon" :menu="formMenuIcon"
@view="imageDialog = true" @view="imageDialog = true"
@ -1702,18 +1712,22 @@ watch(currentHq, () => {
:color="`hsla(var(${ :color="`hsla(var(${
formTypeBranch === 'headOffice' formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
: $q.dark.isActive : formData.virtual
? '--violet-10' ? '--blue-6'
: '--violet-11' : $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/1)`" }-hsl)/1)`"
:bg-color="`hsla(var(${ :bg-color="`hsla(var(${
imageUrl imageUrl
? '--gray-0' ? '--gray-0'
: formTypeBranch === 'headOffice' : formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
: $q.dark.isActive : formData.virtual
? '--violet-10' ? '--blue-6'
: '--violet-11' : $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/${imageUrl ? '0' : '0.15'})`" }-hsl)/${imageUrl ? '0' : '0.15'})`"
v-model:toggle-status="formData.status" v-model:toggle-status="formData.status"
@view="imageDialog = true" @view="imageDialog = true"
@ -2066,20 +2080,24 @@ watch(currentHq, () => {
:style="`background: hsla(var(${ :style="`background: hsla(var(${
formTypeBranch === 'headOffice' formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
: $q.dark.isActive : formData.virtual
? '--violet-10' ? '--blue-6'
: '--violet-11' : $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/0.15)`" }-hsl)/0.15)`"
> >
<q-icon <q-icon
size="15rem" size="3rem"
name="mdi-office-building-outline" name="mdi-office-building-outline"
:style="`color: hsla(var(${ :style="`color: hsla(var(${
formTypeBranch === 'headOffice' formTypeBranch === 'headOffice'
? '--pink-6' ? '--pink-6'
: $q.dark.isActive : formData.virtual
? '--violet-10' ? '--blue-6'
: '--violet-11' : $q.dark.isActive
? '--violet-10'
: '--violet-11'
}-hsl)/1)`" }-hsl)/1)`"
></q-icon> ></q-icon>
</div> </div>