refactor: branch form
This commit is contained in:
puriphatt
Net
parent
a1f691a613
commit
fb076fc074
15 changed files with 651 additions and 274 deletions
286
src/components/DialogForm.vue
Normal file
286
src/components/DialogForm.vue
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
<script setup lang="ts">
|
||||
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 }[];
|
||||
|
||||
editData?: (...args: unknown[]) => void;
|
||||
deleteData?: (...args: unknown[]) => void;
|
||||
submit?: (...args: unknown[]) => void;
|
||||
close?: (...args: unknown[]) => void;
|
||||
undo?: (...args: unknown[]) => void;
|
||||
}>();
|
||||
|
||||
const modal = defineModel('modal', { default: false });
|
||||
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="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 col full-width scroll">
|
||||
<!-- prepend -->
|
||||
<div class="col" v-if="$slots.prepend">
|
||||
<slot name="prepend"></slot>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="col column full-height">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<!-- append -->
|
||||
<div class="col" v-if="$slots.append">
|
||||
<slot name="append"></slot>
|
||||
</div>
|
||||
</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
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue