refactor: branch form
This commit is contained in:
puriphatt
Net
parent
a1f691a613
commit
fb076fc074
15 changed files with 651 additions and 274 deletions
|
|
@ -17,17 +17,26 @@ defineProps<{
|
|||
</script>
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-md-3 col-12 app-text-muted q-pb-sm">
|
||||
• {{ $t(`${title}`) }}
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-phone"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`${title}`) }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-5 col-12"
|
||||
class="col-md-3 col-12"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputEmailHq')
|
||||
|
|
@ -35,7 +44,11 @@ defineProps<{
|
|||
"
|
||||
v-model="email"
|
||||
for="input-email"
|
||||
/>
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon color="primary" name="mdi-email" size="xs" class="q-mr-xs" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
|
|
@ -43,7 +56,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-7 col-12"
|
||||
class="col-md-3 col-12"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputTelephoneHq')
|
||||
|
|
@ -51,7 +64,11 @@ defineProps<{
|
|||
"
|
||||
v-model="telephoneNo"
|
||||
for="input-telephone-no"
|
||||
/>
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon color="primary" name="mdi-phone" size="xs" class="q-mr-xs" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
|
|
@ -59,7 +76,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-5 col-12"
|
||||
class="col-md-3 col-12"
|
||||
:label="$t('formDialogInputContactName')"
|
||||
v-model="contactName"
|
||||
for="input-contact-name"
|
||||
|
|
@ -71,11 +88,15 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputTelephoneContact')"
|
||||
v-model="contact"
|
||||
for="input-contact"
|
||||
/>
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon color="primary" name="mdi-phone" size="xs" class="q-mr-xs" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
|
|
@ -83,16 +104,11 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
class="col-3"
|
||||
label="Line ID"
|
||||
v-model="lineId"
|
||||
for="input-line-id"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,25 +11,34 @@ defineProps<{
|
|||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
view?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-md-3 col-12 app-text-muted q-pb-sm">
|
||||
• {{ $t(`${title}`) }}
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-office-building-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`${title}`) }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
:disable="!readonly"
|
||||
hide-bottom-space
|
||||
:class="{
|
||||
'col-12': $q.screen.xs,
|
||||
'col-6': typeBranch == 'headOffice',
|
||||
'col-3': typeBranch == 'headOffice',
|
||||
'col-4': typeBranch != 'headOffice',
|
||||
}"
|
||||
:label="$t('formDialogInputCode')"
|
||||
|
|
@ -46,7 +55,7 @@ defineProps<{
|
|||
hide-bottom-space
|
||||
:class="{
|
||||
'col-12': $q.screen.xs,
|
||||
'col-6': typeBranch == 'headOffice',
|
||||
'col-3': typeBranch == 'headOffice',
|
||||
'col-4': typeBranch != 'headOffice',
|
||||
}"
|
||||
:label="$t('branchLabelCode')"
|
||||
|
|
@ -62,7 +71,7 @@ defineProps<{
|
|||
hide-bottom-space
|
||||
:class="{
|
||||
'col-12': $q.screen.xs,
|
||||
'col-6': typeBranch === 'headOffice',
|
||||
'col-3': typeBranch === 'headOffice',
|
||||
'col-4': typeBranch !== 'headOffice',
|
||||
}"
|
||||
:label="$t('formDialogInputTaxNo')"
|
||||
|
|
@ -81,7 +90,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
class="col-3"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHq')
|
||||
|
|
@ -103,7 +112,7 @@ defineProps<{
|
|||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
class="col-3"
|
||||
v-model="nameEN"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
|
|
@ -119,10 +128,5 @@ defineProps<{
|
|||
for="input-name-en"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -18,52 +18,57 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-md-3 col-12 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div
|
||||
class="col-md-9 col-12 bordered rounded row no-padding"
|
||||
:class="{ 'q-mt-lg': !$q.screen.xs, 'q-mt-sm': $q.screen.xs }"
|
||||
>
|
||||
<div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
|
||||
|
||||
<div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">
|
||||
<iframe
|
||||
:src="`https://maps.google.com/maps?q=${latitude}, ${longitude}&z=15&output=embed`"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
style="border: 0"
|
||||
></iframe>
|
||||
<div class="col-12">
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-map-legend"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`${title}`) }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="col-12 flex flex-center"
|
||||
style="
|
||||
height: 100px;
|
||||
background-image: url(/map.png);
|
||||
background-position: center center;
|
||||
background-size: 1500px 850px;
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
||||
<div class="col-12 bordered rounded column">
|
||||
<div class="q-pl-md q-py-sm app-text-muted bordered-b">location</div>
|
||||
|
||||
<div v-if="!!longitude && !!latitude" class="col flex flex-center">
|
||||
<iframe
|
||||
:src="`https://maps.google.com/maps?q=${latitude}, ${longitude}&z=15&output=embed`"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
style="border: 0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="col-12 flex flex-center"
|
||||
style="
|
||||
background: var(--blue-5);
|
||||
color: var(--blue-0);
|
||||
font-size: 12px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-image: url(/map.png);
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
"
|
||||
unelevated
|
||||
rounded
|
||||
:label="$t('formDialogBtnLocation')"
|
||||
@click="getLocation()"
|
||||
id="btn-get-location"
|
||||
/>
|
||||
>
|
||||
<q-btn
|
||||
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
||||
style="
|
||||
background: var(--blue-5);
|
||||
color: var(--blue-0);
|
||||
font-size: 12px;
|
||||
width: 150px;
|
||||
"
|
||||
unelevated
|
||||
rounded
|
||||
:label="$t('formDialogBtnLocation')"
|
||||
@click="getLocation()"
|
||||
id="btn-get-location"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -16,57 +16,71 @@ defineEmits<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
|
||||
<div
|
||||
:class="{
|
||||
'dark-form-show-qr-code': $q.dark.isActive,
|
||||
'q-mt-lg': !$q.screen.xs,
|
||||
'q-mt-sm': $q.screen.xs,
|
||||
}"
|
||||
class="col-md-9 col-12 row branch-form-show-qr-code"
|
||||
>
|
||||
<div class="col-12 flex flex-center">
|
||||
<q-img v-if="qr" :src="qr as string" style="width: 150px; height: 150px">
|
||||
<template #error>
|
||||
<div
|
||||
style="background: none"
|
||||
class="full-width full-height items-center justify-center flex"
|
||||
>
|
||||
<q-img src="/no-data.png" width="5rem" />
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
|
||||
<q-btn
|
||||
@click="$emit('upload')"
|
||||
class="branch-form-btn-qr-code"
|
||||
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
|
||||
v-else
|
||||
unelevated
|
||||
:color="$q.dark.isActive ? 'black' : 'grey-2'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'grey-5'"
|
||||
>
|
||||
<Icon icon="teenyicons:add-outline" width="30px" height="50px" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12 flex flex-center q-py-md">
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
||||
style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
|
||||
unelevated
|
||||
rounded
|
||||
:label="$t('formDialogUploadQrCode')"
|
||||
@click="$emit('upload')"
|
||||
id="btn-upload-qr-code"
|
||||
<div class="row col-12">
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-qrcode"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="{
|
||||
'dark-form-show-qr-code': $q.dark.isActive,
|
||||
}"
|
||||
class="col-12 row branch-form-show-qr-code"
|
||||
>
|
||||
<div class="col-12 flex flex-center q-py-md">
|
||||
<q-img
|
||||
v-if="qr"
|
||||
:src="qr as string"
|
||||
style="width: 150px; height: 150px"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
style="background: none"
|
||||
class="full-width full-height items-center justify-center flex"
|
||||
>
|
||||
<q-img src="/no-data.png" width="5rem" />
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
|
||||
<q-btn
|
||||
@click="$emit('upload')"
|
||||
class="branch-form-btn-qr-code"
|
||||
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
|
||||
v-else
|
||||
unelevated
|
||||
:color="$q.dark.isActive ? 'black' : 'grey-2'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'grey-5'"
|
||||
>
|
||||
<Icon icon="teenyicons:add-outline" width="30px" height="50px" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12 flex flex-center q-pb-md">
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
||||
style="
|
||||
background: var(--blue-5);
|
||||
color: var(--blue-0);
|
||||
font-size: 12px;
|
||||
"
|
||||
unelevated
|
||||
rounded
|
||||
:label="$t('formDialogUploadQrCode')"
|
||||
@click="$emit('upload')"
|
||||
id="btn-upload-qr-code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue