360 lines
11 KiB
Vue
360 lines
11 KiB
Vue
<script setup lang="ts">
|
|
// import AppBox from 'components/app/AppBox.vue';
|
|
import { AddressForm } from 'components/form';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title: string;
|
|
titleFormAddress?: string;
|
|
addressTitle?: string;
|
|
addressTitleEN?: string;
|
|
addressSeparator?: boolean;
|
|
branchStatus?: string;
|
|
badgeLabel?: string;
|
|
customerLabel?: string;
|
|
badgeClass?: string;
|
|
noFooter?: boolean;
|
|
noAppBox?: boolean;
|
|
noPaddingTab?: boolean;
|
|
maxWidth?: string;
|
|
width?: string;
|
|
height?: string;
|
|
employee?: boolean;
|
|
noAddress?: boolean;
|
|
disabledRule?: boolean;
|
|
edit?: boolean;
|
|
|
|
isEdit?: boolean;
|
|
tabsList?: { name: string; label: string }[];
|
|
hiddenBtnSave?: boolean;
|
|
|
|
editData?: (...args: unknown[]) => void;
|
|
deleteData?: (...args: unknown[]) => void;
|
|
submit?: (...args: unknown[]) => void;
|
|
close?: (...args: unknown[]) => void;
|
|
undo?: (...args: unknown[]) => void;
|
|
}>(),
|
|
{
|
|
hiddenBtnSave: true,
|
|
},
|
|
);
|
|
|
|
const modal = defineModel('modal', { default: false });
|
|
const address = defineModel('address', { default: '' });
|
|
const addressEN = defineModel('addressEN', { default: '' });
|
|
const provinceId = defineModel<string | null | undefined>('provinceId');
|
|
const districtId = defineModel<string | null | undefined>('districtId');
|
|
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
|
const zipCode = defineModel<string>('zipCode', { default: '' });
|
|
const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
|
|
|
|
const currentTab = defineModel<string>('currentTab');
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="modal" @hide="close">
|
|
<div
|
|
class="surface-1"
|
|
style="padding: 0; border-radius: var(--radius-2); height: 100%"
|
|
:style="`max-width:${$q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%'}; width: ${$q.screen.xs ? '100%' : width ? width : '85%'}; height: ${height ? height : '85vh'} `"
|
|
>
|
|
<q-form
|
|
greedy
|
|
@submit.prevent
|
|
@validation-success="submit"
|
|
class="column full-height"
|
|
>
|
|
<!-- header -->
|
|
<div class="form-header q-py-sm q-px-lg">
|
|
<div class="row items-center">
|
|
<div v-if="isEdit && edit" class="row">
|
|
<q-btn
|
|
round
|
|
flat
|
|
id="closeDialog"
|
|
icon="mdi-arrow-left"
|
|
padding="xs"
|
|
class="q-mr-md"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
style="color: var(--brand-1)"
|
|
@click="undo"
|
|
/>
|
|
<div style="width: 31.98px"></div>
|
|
</div>
|
|
<div v-if="!isEdit && edit">
|
|
<q-btn
|
|
round
|
|
flat
|
|
id="editDialog"
|
|
icon="mdi-pencil-outline"
|
|
padding="xs"
|
|
class="q-mr-md"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
style="color: var(--brand-1)"
|
|
@click="editData"
|
|
/>
|
|
<q-btn
|
|
v-if="edit"
|
|
round
|
|
flat
|
|
id="deleteDialog"
|
|
icon="mdi-trash-can-outline"
|
|
padding="xs"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
style="color: hsl(var(--negative-bg))"
|
|
@click="deleteData"
|
|
/>
|
|
</div>
|
|
|
|
<div style="width: 31.98px"></div>
|
|
<div class="col text-subtitle1 text-weight-bold text-center">
|
|
{{ title }}
|
|
|
|
<text v-if="customerLabel">
|
|
:
|
|
<text
|
|
class="text-customer"
|
|
:class="{ 'dark-text': $q.dark.isActive }"
|
|
:style="`color: ${customerLabel === 'CORP' ? 'var(--purple-8)' : 'var(--green-9)'} `"
|
|
>
|
|
{{
|
|
$t(
|
|
customerLabel === 'CORP'
|
|
? 'customerLegalEntity'
|
|
: 'customerNaturalPerson',
|
|
)
|
|
}}
|
|
</text>
|
|
</text>
|
|
|
|
<text v-if="branchStatus">
|
|
{{ branchStatus }}
|
|
</text>
|
|
<text
|
|
v-if="badgeLabel"
|
|
class="badge-label q-px-sm text-caption"
|
|
:class="badgeClass"
|
|
>
|
|
{{ badgeLabel }}
|
|
</text>
|
|
</div>
|
|
<q-btn
|
|
round
|
|
flat
|
|
id="closeDialog"
|
|
icon="mdi-close"
|
|
padding="xs"
|
|
class="close-btn"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
@click.stop="close"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- body -->
|
|
<div
|
|
class="col full-height column full-width"
|
|
:class="{
|
|
dark: $q.dark.isActive,
|
|
'surface-2': !employee,
|
|
'surface-tab': employee || tabsList,
|
|
}"
|
|
>
|
|
<div
|
|
v-if="tabsList && tabsList.length > 0"
|
|
class="row surface-2 q-px-md q-pt-md full-width"
|
|
style="border-bottom: 1px solid var(--brand-1)"
|
|
>
|
|
<q-tabs
|
|
inline-label
|
|
mobile-arrows
|
|
dense
|
|
class="app-text-muted full-width"
|
|
v-model="currentTab"
|
|
active-class="active-tab"
|
|
indicator-color="transparent"
|
|
align="left"
|
|
>
|
|
<q-tab
|
|
:id="`tab-${tab.label}`"
|
|
v-for="tab in tabsList"
|
|
v-bind:key="tab.name"
|
|
class="content-tab text-capitalize"
|
|
:name="tab.name"
|
|
:label="$t(tab.label)"
|
|
/>
|
|
</q-tabs>
|
|
</div>
|
|
|
|
<div
|
|
class="row q-pa-lg scroll col full-width"
|
|
:class="{
|
|
dark: $q.dark.isActive,
|
|
'surface-2': !employee,
|
|
'surface-tab': employee || tabsList,
|
|
}"
|
|
>
|
|
<!-- prepend -->
|
|
<div
|
|
class="column"
|
|
:class="$q.screen.gt.sm ? 'col-2 q-pr-lg' : 'col-12'"
|
|
v-if="$slots.prepend && !$slots.append"
|
|
>
|
|
<slot name="prepend"></slot>
|
|
</div>
|
|
|
|
<div class="row col-12" v-if="$slots.body">
|
|
<slot name="body"></slot>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
|
|
<!-- center -->
|
|
<div
|
|
v-if="!noAppBox"
|
|
class="column surface-1 bordered rounded col"
|
|
:class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'} ${$q.screen.gt.sm && 'full-height scroll'}`"
|
|
style="padding-right: 0; padding-bottom: 16px"
|
|
>
|
|
<div
|
|
class="row col-12 q-col-gutter-y-md q-mb-md items-start full-height full-width"
|
|
:class="noPaddingTab ? '' : 'q-pr-md'"
|
|
>
|
|
<slot name="information"></slot>
|
|
<slot name="person"></slot>
|
|
<slot v-if="!noFooter" name="address">
|
|
<AddressForm
|
|
dense
|
|
outlined
|
|
prefix-id="default"
|
|
:employee="employee"
|
|
:title="titleFormAddress"
|
|
:separator="addressSeparator"
|
|
:disabledRule="disabledRule"
|
|
v-model:address="address"
|
|
v-model:addressEN="addressEN"
|
|
v-model:provinceId="provinceId"
|
|
v-model:districtId="districtId"
|
|
v-model:subDistrictId="subDistrictId"
|
|
v-model:zipCode="zipCode"
|
|
v-model:same-with-employer="sameWithEmployer"
|
|
:addressTitle="addressTitle || ''"
|
|
:addressTitleEN="addressTitleEN || ''"
|
|
v-if="!$slots.address && !noAddress"
|
|
/>
|
|
</slot>
|
|
<slot name="qr-code"></slot>
|
|
<slot name="location"></slot>
|
|
<slot name="by-type"></slot>
|
|
<div v-if="$q.screen.gt.xs" class="col-12"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- append -->
|
|
<q-item-section
|
|
class="column col-6"
|
|
v-if="$slots.append && !$slots.prepend"
|
|
>
|
|
<slot name="append"></slot>
|
|
</q-item-section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div
|
|
v-if="!noFooter"
|
|
class="form-footer row items-center full-width justify-between q-px-md q-py-md surface-1"
|
|
style="z-index: 3"
|
|
>
|
|
<div>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
<div class="row flex justify-end q-gutter-x-md">
|
|
<q-btn
|
|
id="cancelBtn"
|
|
unelevated
|
|
class="col btn-cancel-dialog"
|
|
color="grey-4"
|
|
text-color="grey-10"
|
|
@click="close"
|
|
:label="$t('cancel')"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
v-if="hiddenBtnSave"
|
|
dense
|
|
unelevated
|
|
id="submitBtn"
|
|
type="submit"
|
|
color="primary"
|
|
class="q-px-md"
|
|
:label="$t('save')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</div>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.close-btn {
|
|
color: hsl(var(--negative-bg));
|
|
background-color: hsla(var(--negative-bg) / 0.1);
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
}
|
|
}
|
|
|
|
.form-header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.form-body {
|
|
--_body-bg: var(--sand-0);
|
|
background-color: var(--_body-bg);
|
|
|
|
&.dark {
|
|
--_body-bg: var(--gray-10);
|
|
}
|
|
}
|
|
|
|
.form-footer {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.badge-label {
|
|
display: inline-block;
|
|
border-radius: var(--radius-6);
|
|
background-color: var(--surface-2);
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
.text-customer {
|
|
--_var-filter: grayscale(30%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark-text {
|
|
--_var-filter: grayscale(0%);
|
|
}
|
|
}
|
|
|
|
.active-tab {
|
|
color: var(--brand-1);
|
|
background-color: var(--surface-tab);
|
|
border-top: 1px solid var(--brand-1);
|
|
border-left: 1px solid var(--brand-1);
|
|
border-right: 1px solid var(--brand-1);
|
|
border-top-left-radius: var(--radius-2);
|
|
border-top-right-radius: var(--radius-2);
|
|
margin-bottom: -1.5px;
|
|
border-bottom: 3px solid var(--surface-tab);
|
|
}
|
|
|
|
.content-tab {
|
|
border-top-left-radius: var(--radius-2);
|
|
border-top-right-radius: var(--radius-2);
|
|
position: relative;
|
|
}
|
|
</style>
|