322 lines
8.7 KiB
Vue
322 lines
8.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
EditButton,
|
|
DeleteButton,
|
|
CancelButton,
|
|
SaveButton,
|
|
UndoButton,
|
|
} from 'components/button';
|
|
|
|
defineProps<{
|
|
title: string;
|
|
branchStatus?: string;
|
|
badgeLabel?: string;
|
|
customerLabel?: string;
|
|
badgeClass?: string;
|
|
maxWidth?: string;
|
|
width?: string;
|
|
height?: string;
|
|
bgColor?: string;
|
|
employee?: boolean;
|
|
edit?: boolean;
|
|
hideFooter?: boolean;
|
|
hideDelete?: boolean;
|
|
hideBtn?: boolean;
|
|
readonly?: boolean;
|
|
disabledSubmit?: boolean;
|
|
|
|
saveAmount?: number;
|
|
submitLabel?: string;
|
|
submitIcon?: string;
|
|
isEdit?: boolean;
|
|
tabsList?: { name: string; label: string }[];
|
|
hideCloseEvent?: boolean;
|
|
editData?: (...args: unknown[]) => void;
|
|
deleteData?: (...args: unknown[]) => void;
|
|
show?: (...args: unknown[]) => void;
|
|
submit?: (...args: unknown[]) => void;
|
|
close?: (...args: unknown[]) => void;
|
|
undo?: (...args: unknown[]) => void;
|
|
beforeClose?: (...args: unknown[]) => boolean;
|
|
}>();
|
|
|
|
const modal = defineModel('modal', { default: false });
|
|
const currentTab = defineModel<string>('currentTab');
|
|
|
|
async function onValidationError(ref: any) {
|
|
const el = ref.$el as Element;
|
|
el.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'center',
|
|
inline: 'nearest',
|
|
});
|
|
}
|
|
</script>
|
|
<template>
|
|
<q-dialog
|
|
:model-value="modal"
|
|
@update:model-value="(v) => (modal = beforeClose ? beforeClose() : v)"
|
|
@before-show="show"
|
|
@hide="hideCloseEvent !== undefined && hideCloseEvent ? '' : 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"
|
|
@validation-error="onValidationError"
|
|
>
|
|
<!-- header -->
|
|
<div
|
|
class="form-header"
|
|
:class="{
|
|
'q-py-sm q-px-lg': $q.screen.gt.sm,
|
|
'q-pa-xs': !$q.screen.gt.sm,
|
|
}"
|
|
>
|
|
<div class="row items-center">
|
|
<template v-if="!hideBtn">
|
|
<div v-if="!readonly && 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="!readonly && !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 && !hideDelete"
|
|
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>
|
|
</template>
|
|
|
|
<div style="width: 31.98px"></div>
|
|
<div class="col text-subtitle1 text-weight-bold text-center">
|
|
<slot name="iconTitle" />
|
|
{{ 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>
|
|
<slot name="top-append" />
|
|
<div>
|
|
<CancelButton
|
|
icon-only
|
|
id="btn-form-close"
|
|
@click="
|
|
() => {
|
|
modal = beforeClose ? beforeClose() : !modal;
|
|
close?.();
|
|
}
|
|
"
|
|
type="reset"
|
|
resetValidation
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- body -->
|
|
<div
|
|
class="col full-height column full-width"
|
|
:class="{
|
|
dark: $q.dark.isActive,
|
|
'surface-2': !employee,
|
|
'surface-tab': employee || tabsList,
|
|
}"
|
|
:style="`background: ${bgColor} !important`"
|
|
>
|
|
<div
|
|
v-if="tabsList && tabsList.length > 0"
|
|
class="row surface-0 q-px-md q-pt-md full-width"
|
|
style="border-bottom: 1px solid var(--brand-1)"
|
|
>
|
|
<q-tabs
|
|
inline-label
|
|
mobile-arrows
|
|
dense
|
|
class="full-width"
|
|
v-model="currentTab"
|
|
align="left"
|
|
>
|
|
<q-tab
|
|
v-for="tab in tabsList"
|
|
v-bind:key="tab.name"
|
|
:id="`tab-${tab.label}`"
|
|
class="text-capitalize"
|
|
:name="tab.name"
|
|
:label="$t(tab.label)"
|
|
/>
|
|
</q-tabs>
|
|
</div>
|
|
|
|
<div class="row col full-width scroll">
|
|
<!-- prepend -->
|
|
<div class="col" v-if="$slots.prepend">
|
|
<slot name="prepend"></slot>
|
|
</div>
|
|
|
|
<!-- center -->
|
|
<div class="col column full-height no-wrap">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<!-- append -->
|
|
<div class="col" v-if="$slots.append">
|
|
<slot name="append"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
<div
|
|
v-if="!hideFooter"
|
|
class="form-footer row items-center full-width justify-between surface-1"
|
|
:class="{ 'q-pa-md': $q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm }"
|
|
style="z-index: 3"
|
|
>
|
|
<div>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
<div class="row flex justify-end">
|
|
<CancelButton
|
|
id="btn-form-cancel"
|
|
outlined
|
|
@click="close"
|
|
v-close-popup
|
|
/>
|
|
<SaveButton
|
|
class="q-ml-md"
|
|
id="btn-form-submit"
|
|
type="submit"
|
|
solid
|
|
:disabled="disabledSubmit"
|
|
:icon="submitIcon"
|
|
:label="submitLabel"
|
|
:amount="saveAmount"
|
|
/>
|
|
</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>
|