335 lines
9.3 KiB
Vue
335 lines
9.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import DialogForm from 'src/components/DialogForm.vue';
|
||
|
|
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||
|
|
import ProfileBanner from 'src/components/ProfileBanner.vue';
|
||
|
|
import SideMenu from 'src/components/SideMenu.vue';
|
||
|
|
import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
|
||
|
|
import AddressForm from 'src/components/form/AddressForm.vue';
|
||
|
|
import {
|
||
|
|
UndoButton,
|
||
|
|
SaveButton,
|
||
|
|
EditButton,
|
||
|
|
DeleteButton,
|
||
|
|
} from 'src/components/button';
|
||
|
|
import { InstitutionPayload } from 'src/stores/institution/types';
|
||
|
|
|
||
|
|
const model = defineModel<boolean>({ required: true, default: false });
|
||
|
|
const drawerModel = defineModel<boolean>('drawerModel', {
|
||
|
|
required: true,
|
||
|
|
default: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
readonly?: boolean;
|
||
|
|
isEdit?: boolean;
|
||
|
|
}>(),
|
||
|
|
{ readonly: false, isEdit: false },
|
||
|
|
);
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
(e: 'submit'): void;
|
||
|
|
(e: 'close'): void;
|
||
|
|
(e: 'changeStatus'): void;
|
||
|
|
(e: 'drawerUndo'): void;
|
||
|
|
(e: 'drawerEdit'): void;
|
||
|
|
(e: 'drawerDelete'): void;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const data = defineModel<InstitutionPayload>('data', {
|
||
|
|
required: true,
|
||
|
|
default: {
|
||
|
|
group: '',
|
||
|
|
name: '',
|
||
|
|
nameEN: '',
|
||
|
|
code: '',
|
||
|
|
addressEN: '',
|
||
|
|
address: '',
|
||
|
|
soi: '',
|
||
|
|
soiEN: '',
|
||
|
|
moo: '',
|
||
|
|
mooEN: '',
|
||
|
|
street: '',
|
||
|
|
streetEN: '',
|
||
|
|
subDistrictId: '',
|
||
|
|
districtId: '',
|
||
|
|
provinceId: '',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<DialogForm
|
||
|
|
hide-footer
|
||
|
|
:title="$t('general.add', { text: $t('agencies.title') })"
|
||
|
|
v-model:modal="model"
|
||
|
|
:submit="() => $emit('submit')"
|
||
|
|
:close="() => $emit('close')"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
:class="{
|
||
|
|
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||
|
|
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<ProfileBanner
|
||
|
|
no-image-action
|
||
|
|
readonly
|
||
|
|
active
|
||
|
|
hide-fade
|
||
|
|
hide-active
|
||
|
|
:icon="'ph-building-office'"
|
||
|
|
:title="data.name"
|
||
|
|
:caption="data.code"
|
||
|
|
:color="`hsla(var(--green-8-hsl)/1)`"
|
||
|
|
:bg-color="`hsla(var(--green-8-hsl)/0.1)`"
|
||
|
|
/>
|
||
|
|
<!-- v-model:toggle-status="currentStatusGroupType"
|
||
|
|
@update:toggle-status="
|
||
|
|
() => {
|
||
|
|
currentStatusGroupType =
|
||
|
|
currentStatusGroupType === 'CREATED' ? 'INACTIVE' : 'CREATED';
|
||
|
|
}
|
||
|
|
" -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="col surface-1 rounded bordered scroll row relative-position"
|
||
|
|
:class="{
|
||
|
|
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
|
||
|
|
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
id="group-form"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="col"
|
||
|
|
style="height: 100%; max-height: 100; overflow-y: auto"
|
||
|
|
v-if="$q.screen.gt.sm"
|
||
|
|
>
|
||
|
|
<div class="q-py-md q-pl-md q-pr-sm">
|
||
|
|
<SideMenu
|
||
|
|
:menu="[
|
||
|
|
{
|
||
|
|
name: $t('form.field.basicInformation'),
|
||
|
|
anchor: 'agencies-basic-info',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: $t('general.address'),
|
||
|
|
anchor: 'agencies-address-info',
|
||
|
|
},
|
||
|
|
]"
|
||
|
|
background="transparent"
|
||
|
|
:active="{
|
||
|
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||
|
|
foreground: 'var(--blue-6)',
|
||
|
|
}"
|
||
|
|
scroll-element="#agencies-form-content"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="col-12 col-md-10"
|
||
|
|
id="agencies-form-content"
|
||
|
|
:class="{
|
||
|
|
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||
|
|
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="q-py-md q-px-lg"
|
||
|
|
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||
|
|
>
|
||
|
|
<div class="surface-1 row rounded">
|
||
|
|
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<FormBasicInfoAgencies
|
||
|
|
id="agencies-basic-info"
|
||
|
|
class="q-mb-xl"
|
||
|
|
v-model:group="data.group"
|
||
|
|
v-model:name="data.name"
|
||
|
|
v-model:name-en="data.nameEN"
|
||
|
|
/>
|
||
|
|
<AddressForm
|
||
|
|
id="agencies-address-info"
|
||
|
|
dense
|
||
|
|
:prefix-id="''"
|
||
|
|
v-model:address="data.address"
|
||
|
|
v-model:address-en="data.addressEN"
|
||
|
|
v-model:moo="data.moo"
|
||
|
|
v-model:moo-en="data.mooEN"
|
||
|
|
v-model:soi="data.soi"
|
||
|
|
v-model:soi-en="data.soiEN"
|
||
|
|
v-model:street="data.street"
|
||
|
|
v-model:street-en="data.streetEN"
|
||
|
|
v-model:province-id="data.provinceId"
|
||
|
|
v-model:district-id="data.districtId"
|
||
|
|
v-model:sub-district-id="data.subDistrictId"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</DialogForm>
|
||
|
|
|
||
|
|
<DrawerInfo
|
||
|
|
bg-on
|
||
|
|
hide-action
|
||
|
|
:is-edit="isEdit"
|
||
|
|
:title="data.name"
|
||
|
|
v-model:drawerOpen="drawerModel"
|
||
|
|
:submit="() => $emit('submit')"
|
||
|
|
:close="() => $emit('close')"
|
||
|
|
>
|
||
|
|
<div class="col column full-height">
|
||
|
|
<div
|
||
|
|
:class="{
|
||
|
|
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||
|
|
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<ProfileBanner
|
||
|
|
no-image-action
|
||
|
|
readonly
|
||
|
|
active
|
||
|
|
hide-fade
|
||
|
|
hide-active
|
||
|
|
:icon="'ph-building-office'"
|
||
|
|
:title="data.name"
|
||
|
|
:caption="data.code"
|
||
|
|
:color="`hsla(var(${'--green-8'}-hsl)/1)`"
|
||
|
|
:bg-color="`hsla(var(${'--green-8'}-hsl)/0.1)`"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style="flex: 1; width: 100%; overflow-y: auto"
|
||
|
|
id="drawer-user-form"
|
||
|
|
:class="{
|
||
|
|
'q-px-lg q-pb-lg': $q.screen.gt.sm,
|
||
|
|
'q-px-md q-pb-sm': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="rounded row"
|
||
|
|
:class="{
|
||
|
|
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||
|
|
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||
|
|
>
|
||
|
|
<div v-if="true" class="surface-1 row rounded">
|
||
|
|
<UndoButton
|
||
|
|
v-if="isEdit"
|
||
|
|
id="btn-info-basic-undo"
|
||
|
|
icon-only
|
||
|
|
@click="
|
||
|
|
() => {
|
||
|
|
$emit('drawerUndo');
|
||
|
|
}
|
||
|
|
"
|
||
|
|
type="button"
|
||
|
|
/>
|
||
|
|
<SaveButton
|
||
|
|
v-if="isEdit"
|
||
|
|
id="btn-info-basic-save"
|
||
|
|
icon-only
|
||
|
|
type="submit"
|
||
|
|
/>
|
||
|
|
<EditButton
|
||
|
|
v-if="!isEdit"
|
||
|
|
id="btn-info-basic-edit"
|
||
|
|
icon-only
|
||
|
|
@click="
|
||
|
|
() => {
|
||
|
|
$emit('drawerEdit');
|
||
|
|
// infoDrawerEdit = true;
|
||
|
|
// isImageEdit = true;
|
||
|
|
}
|
||
|
|
"
|
||
|
|
type="button"
|
||
|
|
/>
|
||
|
|
<DeleteButton
|
||
|
|
v-if="!isEdit"
|
||
|
|
id="btn-info-basic-delete"
|
||
|
|
icon-only
|
||
|
|
@click="
|
||
|
|
() => {
|
||
|
|
$emit('drawerDelete');
|
||
|
|
}
|
||
|
|
"
|
||
|
|
type="button"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="col"
|
||
|
|
style="height: 100%; overflow-y: auto"
|
||
|
|
v-if="$q.screen.gt.sm"
|
||
|
|
>
|
||
|
|
<div class="q-py-md q-pl-md q-pr-sm">
|
||
|
|
<SideMenu
|
||
|
|
:menu="[
|
||
|
|
{
|
||
|
|
name: $t('form.field.basicInformation'),
|
||
|
|
anchor: 'agencies-basic-info',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: $t('general.address'),
|
||
|
|
anchor: 'agencies-address-info',
|
||
|
|
},
|
||
|
|
]"
|
||
|
|
background="transparent"
|
||
|
|
:active="{
|
||
|
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||
|
|
foreground: 'var(--blue-6)',
|
||
|
|
}"
|
||
|
|
scroll-element="#agencies-form-content"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="col-12 col-md-10 relative-position"
|
||
|
|
:class="{
|
||
|
|
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||
|
|
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||
|
|
}"
|
||
|
|
id="user-form-content"
|
||
|
|
style="height: 100%; max-height: 100; overflow-y: auto"
|
||
|
|
>
|
||
|
|
<FormBasicInfoAgencies
|
||
|
|
id="agencies-basic-info"
|
||
|
|
:readonly
|
||
|
|
onDrawer
|
||
|
|
class="q-mb-xl"
|
||
|
|
v-model:group="data.group"
|
||
|
|
v-model:name="data.name"
|
||
|
|
v-model:name-en="data.nameEN"
|
||
|
|
/>
|
||
|
|
<AddressForm
|
||
|
|
id="agencies-address-info"
|
||
|
|
dense
|
||
|
|
:readonly
|
||
|
|
:prefix-id="data.code ? data.code : ''"
|
||
|
|
v-model:address="data.address"
|
||
|
|
v-model:address-en="data.addressEN"
|
||
|
|
v-model:moo="data.moo"
|
||
|
|
v-model:moo-en="data.mooEN"
|
||
|
|
v-model:soi="data.soi"
|
||
|
|
v-model:soi-en="data.soiEN"
|
||
|
|
v-model:street="data.street"
|
||
|
|
v-model:street-en="data.streetEN"
|
||
|
|
v-model:province-id="data.provinceId"
|
||
|
|
v-model:district-id="data.districtId"
|
||
|
|
v-model:sub-district-id="data.subDistrictId"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</DrawerInfo>
|
||
|
|
</template>
|
||
|
|
<style scoped></style>
|