refactor: kebab action
This commit is contained in:
puriphatt
parent
5ec6d1c9d5
commit
bc578d569c
11 changed files with 518 additions and 1357 deletions
|
|
@ -64,9 +64,7 @@ defineProps<{
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="branch-card__action">
|
<div class="branch-card__action">
|
||||||
<q-btn icon="mdi-dots-vertical" size="sm" dense round flat @click.stop>
|
<slot name="action" />
|
||||||
<slot name="action" />
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ToggleButton from '../button/ToggleButton.vue';
|
|
||||||
import { calculateAge, dateFormat } from 'src/utils/datetime';
|
import { calculateAge, dateFormat } from 'src/utils/datetime';
|
||||||
|
|
||||||
import PersonCard from 'components/shared/PersonCard.vue';
|
import PersonCard from 'components/shared/PersonCard.vue';
|
||||||
|
import KebabAction from '../shared/KebabAction.vue';
|
||||||
|
|
||||||
const pageSize = defineModel<number>('pageSize', { default: 30 });
|
const pageSize = defineModel<number>('pageSize', { default: 30 });
|
||||||
const currentPage = defineModel<number>('currentPage', { default: 1 });
|
const currentPage = defineModel<number>('currentPage', { default: 1 });
|
||||||
|
|
@ -30,6 +30,13 @@ const prop = withDefaults(
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
(e: 'view', data: any): void;
|
||||||
|
(e: 'edit', data: any): void;
|
||||||
|
(e: 'delete', data: any): void;
|
||||||
|
(e: 'toggleStatus', data: any): void;
|
||||||
|
}>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -214,103 +221,14 @@ const prop = withDefaults(
|
||||||
@click.stop="$emit('view', props.row)"
|
@click.stop="$emit('view', props.row)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-btn
|
<KebabAction
|
||||||
icon="mdi-dots-vertical"
|
:id-name="props.row.code"
|
||||||
:id="`btn-dots-${props.row.code}`"
|
:status="props.row.status"
|
||||||
size="sm"
|
@view="$emit('view', props.row)"
|
||||||
dense
|
@edit="$emit('edit', props.row)"
|
||||||
round
|
@delete="$emit('delete', props.row)"
|
||||||
flat
|
@change-status="$emit('toggleStatus', props.row)"
|
||||||
@click.stop
|
/>
|
||||||
:key="props.row.id"
|
|
||||||
>
|
|
||||||
<q-menu class="bordered">
|
|
||||||
<q-list v-close-popup>
|
|
||||||
<q-item
|
|
||||||
v-close-popup
|
|
||||||
:id="`view-detail-btn-${props.row.name}-view`"
|
|
||||||
@click.stop="() => $emit('view', props.row)"
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-edit`"
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="() => $emit('edit', props.row)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
||||||
dense
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted': props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="() => $emit('delete', props.row)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative': props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div class="q-pa-sm surface-2 rounded flex items-center">
|
|
||||||
<ToggleButton
|
|
||||||
:id="`view-detail-btn-${props.row.name}-status`"
|
|
||||||
two-way
|
|
||||||
:model-value="props.row.status !== 'INACTIVE'"
|
|
||||||
@click="() => $emit('toggleStatus', props.row)"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('switchOnLabel')
|
|
||||||
: $t('switchOffLabel')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { dateFormat } from 'src/utils/datetime';
|
import { dateFormat } from 'src/utils/datetime';
|
||||||
import { Status } from 'stores/types';
|
import { Status } from 'stores/types';
|
||||||
import ToggleButton from '../button/ToggleButton.vue';
|
import KebabAction from '../shared/KebabAction.vue';
|
||||||
withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
title?: string;
|
title?: string;
|
||||||
|
|
@ -52,102 +52,16 @@ withDefaults(
|
||||||
:style="`color:hsl(${color});background-color:var(--surface-1) `"
|
:style="`color:hsl(${color});background-color:var(--surface-1) `"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-btn
|
<KebabAction
|
||||||
|
:id-name="id"
|
||||||
|
:status="status"
|
||||||
|
class="absolute-top-right"
|
||||||
v-if="action"
|
v-if="action"
|
||||||
flat
|
@view="$emit('viewCard')"
|
||||||
round
|
@edit="$emit('updateCard')"
|
||||||
padding="sm"
|
@delete="$emit('deleteCard')"
|
||||||
class="absolute-top-right dots-btn"
|
@change-status="$emit('toggleStatus', id)"
|
||||||
icon="mdi-dots-vertical"
|
/>
|
||||||
style="z-index: 99; position: absolute; opacity: 1"
|
|
||||||
size="sm"
|
|
||||||
@click.stop=""
|
|
||||||
>
|
|
||||||
<q-menu class="bordered">
|
|
||||||
<q-list v-close-popup>
|
|
||||||
<q-item
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
$emit('viewCard');
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
v-if="!isDisabled && !noAction"
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
$emit('updateCard');
|
|
||||||
}
|
|
||||||
"
|
|
||||||
v-close-popup
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
v-if="!isDisabled && !noAction"
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
$emit('deleteCard');
|
|
||||||
}
|
|
||||||
"
|
|
||||||
v-close-popup
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3 app-text-negative"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div class="q-pa-sm surface-2 rounded flex items-center">
|
|
||||||
<ToggleButton
|
|
||||||
two-way
|
|
||||||
@click="$emit('toggleStatus', id)"
|
|
||||||
:model-value="!isDisabled"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
!isDisabled ? $t('general.open') : $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
|
<div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
|
||||||
import { dateFormat } from 'src/utils/datetime';
|
import { dateFormat } from 'src/utils/datetime';
|
||||||
|
|
||||||
import { formatNumberDecimal } from 'stores/utils';
|
import { formatNumberDecimal } from 'stores/utils';
|
||||||
import ToggleButton from '../button/ToggleButton.vue';
|
import KebabAction from '../shared/KebabAction.vue';
|
||||||
|
|
||||||
const addedProduct = ref<boolean>(false);
|
import { ServiceAndProduct } from 'stores/product-service/types';
|
||||||
|
|
||||||
import {
|
|
||||||
ServiceAndProduct,
|
|
||||||
ProductList,
|
|
||||||
Service,
|
|
||||||
} from 'stores/product-service/types';
|
|
||||||
|
|
||||||
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
|
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
|
||||||
|
|
||||||
|
|
@ -65,76 +58,15 @@ withDefaults(
|
||||||
<div
|
<div
|
||||||
v-if="action"
|
v-if="action"
|
||||||
class="col-1 relative-position"
|
class="col-1 relative-position"
|
||||||
style="left: 10px; bottom: 10px"
|
style="left: 0px; bottom: 0px"
|
||||||
>
|
>
|
||||||
<q-btn
|
<KebabAction
|
||||||
flat
|
class="absolute-top-right"
|
||||||
round
|
@view="$emit('menuViewDetail')"
|
||||||
padding="sm"
|
@edit="$emit('menuEdit')"
|
||||||
class="absolute-top-right dots-btn"
|
@delete="$emit('menuDelete')"
|
||||||
icon="mdi-dots-vertical"
|
@change-status="$emit('toggleStatus', data?.id)"
|
||||||
size="sm"
|
/>
|
||||||
@click.stop=""
|
|
||||||
>
|
|
||||||
<q-menu class="bordered">
|
|
||||||
<q-list v-close-popup>
|
|
||||||
<q-item
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="$emit('menuViewDetail')"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
|
||||||
v-if="!isDisabled"
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="$emit('menuEdit')"
|
|
||||||
v-close-popup
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div class="q-pa-sm surface-2 rounded flex items-center">
|
|
||||||
<ToggleButton
|
|
||||||
two-way
|
|
||||||
@click="$emit('toggleStatus', data?.id)"
|
|
||||||
:model-value="!isDisabled"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
!isDisabled ? $t('general.open') : $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-avatar
|
<q-avatar
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { BranchWithChildren } from 'stores/branch/types';
|
import { BranchWithChildren } from 'stores/branch/types';
|
||||||
import ToggleButton from './button/ToggleButton.vue';
|
import KebabAction from './shared/KebabAction.vue';
|
||||||
|
|
||||||
const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
|
const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
|
||||||
default: [],
|
default: [],
|
||||||
|
|
@ -123,107 +123,14 @@ defineEmits<{
|
||||||
flat
|
flat
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-btn
|
<KebabAction
|
||||||
v-if="action && !node.actionDisabled"
|
v-if="action && !node.actionDisabled"
|
||||||
icon="mdi-dots-vertical"
|
:id-name="node.name"
|
||||||
:id="`btn-tree-dots-${node.name}`"
|
@view="$emit('view', node)"
|
||||||
size="sm"
|
@edit="$emit('edit', node)"
|
||||||
dense
|
@delete="$emit('delete', node)"
|
||||||
round
|
@change-status="$emit('changeStatus', node)"
|
||||||
flat
|
/>
|
||||||
@click.stop
|
|
||||||
:key="node.id"
|
|
||||||
>
|
|
||||||
<q-menu class="bordered">
|
|
||||||
<q-list>
|
|
||||||
<q-item
|
|
||||||
v-close-popup
|
|
||||||
clickable
|
|
||||||
:id="`view-detail-btn-${node.name}-view`"
|
|
||||||
@click.stop="() => $emit('view', node)"
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
|
||||||
v-if="node.status !== 'INACTIVE'"
|
|
||||||
:id="`view-detail-btn-${node.name}-edit`"
|
|
||||||
v-close-popup
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click.stop="() => $emit('edit', node)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
v-close-popup
|
|
||||||
:id="`view-detail-btn-${node.name}-delete`"
|
|
||||||
dense
|
|
||||||
:clickable="node.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': node.status !== 'CREATED',
|
|
||||||
'app-text-muted': node.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click.stop="() => $emit('delete', node)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative': node.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div class="q-pa-sm surface-2 rounded flex items-center">
|
|
||||||
<ToggleButton
|
|
||||||
:id="`view-detail-btn-${node.name}-status`"
|
|
||||||
two-way
|
|
||||||
:model-value="node.status !== 'INACTIVE'"
|
|
||||||
@click="() => $emit('changeStatus', node)"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
node.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
125
src/components/shared/KebabAction.vue
Normal file
125
src/components/shared/KebabAction.vue
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ToggleButton from '../button/ToggleButton.vue';
|
||||||
|
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
idName: string;
|
||||||
|
status: string;
|
||||||
|
|
||||||
|
disableDelete?: boolean;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
idName: '',
|
||||||
|
status: 'ACTIVE',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
(e: 'view'): void;
|
||||||
|
(e: 'edit'): void;
|
||||||
|
(e: 'delete'): void;
|
||||||
|
(e: 'changeStatus'): void;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
size="sm"
|
||||||
|
icon="mdi-dots-vertical"
|
||||||
|
:id="`btn-kebab-action-${idName}`"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<q-menu class="bordered">
|
||||||
|
<q-list>
|
||||||
|
<q-item
|
||||||
|
v-close-popup
|
||||||
|
dense
|
||||||
|
clickable
|
||||||
|
class="row q-py-sm"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
:id="`btn-kebab-view-detail-${idName}`"
|
||||||
|
@click.stop="() => $emit('view')"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="xs"
|
||||||
|
class="col-3"
|
||||||
|
name="mdi-eye-outline"
|
||||||
|
style="color: hsl(var(--green-6-hsl))"
|
||||||
|
/>
|
||||||
|
<span class="col-9 q-px-md flex items-center">
|
||||||
|
{{ $t('general.viewDetail') }}
|
||||||
|
</span>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item
|
||||||
|
v-if="status !== 'INACTIVE'"
|
||||||
|
v-close-popup
|
||||||
|
dense
|
||||||
|
clickable
|
||||||
|
class="row q-py-sm"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
:id="`btn-kebab-edit-${idName}`"
|
||||||
|
@click.stop="() => $emit('edit')"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="xs"
|
||||||
|
class="col-3"
|
||||||
|
name="mdi-pencil-outline"
|
||||||
|
style="color: hsl(var(--cyan-6-hsl))"
|
||||||
|
/>
|
||||||
|
<span class="col-9 q-px-md flex items-center">
|
||||||
|
{{ $t('general.edit') }}
|
||||||
|
</span>
|
||||||
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
v-if="status !== 'INACTIVE'"
|
||||||
|
v-close-popup
|
||||||
|
dense
|
||||||
|
class="row"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
:clickable="!disableDelete"
|
||||||
|
:id="`btn-kebab-delete-${idName}`"
|
||||||
|
:class="{
|
||||||
|
'surface-3': disableDelete,
|
||||||
|
'app-text-muted': disableDelete,
|
||||||
|
}"
|
||||||
|
@click.stop="() => $emit('delete')"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
size="xs"
|
||||||
|
name="mdi-trash-can-outline"
|
||||||
|
class="col-3"
|
||||||
|
:class="{
|
||||||
|
'app-text-negative': !disableDelete,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<span class="col-9 q-px-md flex items-center">
|
||||||
|
{{ $t('general.delete') }}
|
||||||
|
</span>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item dense>
|
||||||
|
<q-item-section class="q-py-sm">
|
||||||
|
<div class="q-pa-sm surface-2 rounded flex items-center">
|
||||||
|
<ToggleButton
|
||||||
|
two-way
|
||||||
|
:id="`btn-kebab-status-${idName}`"
|
||||||
|
:model-value="status !== 'INACTIVE'"
|
||||||
|
@click="() => $emit('changeStatus')"
|
||||||
|
/>
|
||||||
|
<span class="q-pl-md">
|
||||||
|
{{
|
||||||
|
status !== 'INACTIVE'
|
||||||
|
? $t('general.open')
|
||||||
|
: $t('general.close')
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
|
@ -3,7 +3,7 @@ import { Icon } from '@iconify/vue';
|
||||||
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
import AppCircle from 'components/app/AppCircle.vue';
|
import AppCircle from 'components/app/AppCircle.vue';
|
||||||
import ToggleButton from '../button/ToggleButton.vue';
|
import KebabAction from './KebabAction.vue';
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
data: {
|
data: {
|
||||||
|
|
@ -74,91 +74,18 @@ defineEmits<{
|
||||||
@click.stop="$emit('history')"
|
@click.stop="$emit('history')"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-btn
|
<KebabAction
|
||||||
:id="`btn-dots-${prefixId}`"
|
:id-name="prefixId"
|
||||||
:key="data.code"
|
:status="disabled ? 'INACTIVE' : 'ACTIVE'"
|
||||||
flat
|
@view="
|
||||||
round
|
separateEnter
|
||||||
padding="xs"
|
? $emit('viewCard', 'INFO')
|
||||||
class="app-text-muted-2"
|
: $emit('enterCard', 'INFO')
|
||||||
icon="mdi-dots-vertical"
|
"
|
||||||
size="sm"
|
@edit="$emit('updateCard', 'INFO', true)"
|
||||||
@click.stop
|
@delete="$emit('deleteCard')"
|
||||||
>
|
@change-status="$emit('toggleStatus', disabled === false)"
|
||||||
<q-menu class="bordered">
|
/>
|
||||||
<q-list v-close-popup>
|
|
||||||
<q-item
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
v-close-popup
|
|
||||||
@click.stop="
|
|
||||||
separateEnter
|
|
||||||
? $emit('viewCard', 'INFO')
|
|
||||||
: $emit('enterCard', 'INFO')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="$emit('updateCard', 'INFO', true)"
|
|
||||||
v-close-popup
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
@click="$emit('deleteCard')"
|
|
||||||
v-close-popup
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3 app-text-negative"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div class="q-pa-sm surface-2 rounded flex items-center">
|
|
||||||
<ToggleButton
|
|
||||||
two-way
|
|
||||||
:model-value="!disabled"
|
|
||||||
@click="$emit('toggleStatus', disabled === false)"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{ !disabled ? $t('general.open') : $t('general.close') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- profile -->
|
<!-- profile -->
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@ import ImageUploadDialog from 'components/ImageUploadDialog.vue';
|
||||||
import FormBank from 'components/01_branch-management/FormBank.vue';
|
import FormBank from 'components/01_branch-management/FormBank.vue';
|
||||||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
||||||
import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
|
import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
|
||||||
|
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||||
import { User } from 'src/stores/user/types';
|
import { User } from 'src/stores/user/types';
|
||||||
import {
|
import {
|
||||||
EditButton,
|
EditButton,
|
||||||
|
|
@ -479,10 +480,10 @@ function triggerDelete(id: string) {
|
||||||
dialog({
|
dialog({
|
||||||
color: 'negative',
|
color: 'negative',
|
||||||
icon: 'mdi-alert',
|
icon: 'mdi-alert',
|
||||||
title: t('deleteConfirmTitle'),
|
title: t('dialog.title.confirmDelete'),
|
||||||
actionText: t('agree'),
|
actionText: t('general.delete'),
|
||||||
persistent: true,
|
persistent: true,
|
||||||
message: t('deleteConfirmMessage'),
|
message: t('dialog.message.confirmDelete'),
|
||||||
action: async () => {
|
action: async () => {
|
||||||
await branchStore.deleteById(id);
|
await branchStore.deleteById(id);
|
||||||
await branchStore.fetchList({ pageSize: 99999 });
|
await branchStore.fetchList({ pageSize: 99999 });
|
||||||
|
|
@ -1189,155 +1190,56 @@ watch(currentHq, () => {
|
||||||
}}
|
}}
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td>
|
<q-td>
|
||||||
<q-btn
|
<KebabAction
|
||||||
icon="mdi-dots-vertical"
|
:status="props.row.status"
|
||||||
:id="`btn-dots-${props.row.code}`"
|
:idName="props.row.code"
|
||||||
size="sm"
|
@view="
|
||||||
dense
|
if (props.row.isHeadOffice) {
|
||||||
round
|
triggerEdit(
|
||||||
flat
|
'drawer',
|
||||||
@click.stop
|
props.row.id,
|
||||||
>
|
'headOffice',
|
||||||
<q-menu class="bordered">
|
props.row.code,
|
||||||
<q-list v-close-popup>
|
);
|
||||||
<q-item
|
} else {
|
||||||
:id="`view-detail-btn-${props.row.name}-view`"
|
triggerEdit(
|
||||||
@click.stop="
|
'drawer',
|
||||||
if (props.row.isHeadOffice) {
|
props.row.id,
|
||||||
triggerEdit(
|
'subBranch',
|
||||||
'drawer',
|
);
|
||||||
props.row.id,
|
}
|
||||||
'headOffice',
|
"
|
||||||
props.row.code,
|
@edit="
|
||||||
);
|
async () => {
|
||||||
} else {
|
if (props.row.isHeadOffice) {
|
||||||
triggerEdit(
|
await triggerEdit(
|
||||||
'drawer',
|
'drawer',
|
||||||
props.row.id,
|
props.row.id,
|
||||||
'subBranch',
|
'headOffice',
|
||||||
);
|
props.row.code,
|
||||||
}
|
);
|
||||||
"
|
} else {
|
||||||
v-close-popup
|
await triggerEdit(
|
||||||
clickable
|
'drawer',
|
||||||
dense
|
props.row.id,
|
||||||
class="row q-py-sm"
|
'subBranch',
|
||||||
style="white-space: nowrap"
|
);
|
||||||
>
|
}
|
||||||
<q-icon
|
formType = 'edit';
|
||||||
name="mdi-eye-outline"
|
}
|
||||||
class="col-3"
|
"
|
||||||
size="xs"
|
@delete="triggerDelete(props.row.id)"
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
@changeStatus="
|
||||||
/>
|
async () => {
|
||||||
<span class="col-9 q-px-md flex items-center">
|
const res = await triggerChangeStatus(
|
||||||
{{ $t('general.viewDetail') }}
|
props.row.id,
|
||||||
</span>
|
props.row.status,
|
||||||
</q-item>
|
);
|
||||||
|
|
||||||
<q-item
|
if (res) props.row.status = res.status;
|
||||||
:id="`view-detail-btn-${props.row.name}-edit`"
|
}
|
||||||
v-close-popup
|
"
|
||||||
clickable
|
/>
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
if (props.row.isHeadOffice) {
|
|
||||||
await triggerEdit(
|
|
||||||
'drawer',
|
|
||||||
props.row.id,
|
|
||||||
'headOffice',
|
|
||||||
props.row.code,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await triggerEdit(
|
|
||||||
'drawer',
|
|
||||||
props.row.id,
|
|
||||||
'subBranch',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
formType = 'edit';
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
||||||
dense
|
|
||||||
v-close-popup
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted':
|
|
||||||
props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="triggerDelete(props.row.id)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative':
|
|
||||||
props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div
|
|
||||||
class="q-pa-sm surface-2 rounded flex items-center"
|
|
||||||
>
|
|
||||||
<ToggleButton
|
|
||||||
two-way
|
|
||||||
:id="`view-detail-btn-${props.row.name}-status`"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
const res =
|
|
||||||
await triggerChangeStatus(
|
|
||||||
props.row.id,
|
|
||||||
props.row.status,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (res)
|
|
||||||
props.row.status = res.status;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
:model-value="
|
|
||||||
props.row.status === 'CREATED' ||
|
|
||||||
props.row.status === 'ACTIVE'
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -1409,145 +1311,56 @@ watch(currentHq, () => {
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<template v-slot:action>
|
<template v-slot:action>
|
||||||
<q-menu class="bordered">
|
<KebabAction
|
||||||
<q-list>
|
:status="props.row.status"
|
||||||
<q-item
|
:idName="props.row.code"
|
||||||
:id="`view-detail-btn-${props.row.name}-view`"
|
@view="
|
||||||
@click.stop="
|
if (props.row.isHeadOffice) {
|
||||||
if (props.row.isHeadOffice) {
|
triggerEdit(
|
||||||
triggerEdit(
|
'drawer',
|
||||||
'drawer',
|
props.row.id,
|
||||||
props.row.id,
|
'headOffice',
|
||||||
'headOffice',
|
props.row.code,
|
||||||
props.row.code,
|
);
|
||||||
);
|
} else {
|
||||||
} else {
|
triggerEdit(
|
||||||
triggerEdit(
|
'drawer',
|
||||||
'drawer',
|
props.row.id,
|
||||||
props.row.id,
|
'subBranch',
|
||||||
'subBranch',
|
);
|
||||||
);
|
}
|
||||||
}
|
"
|
||||||
"
|
@edit="
|
||||||
v-close-popup
|
async () => {
|
||||||
clickable
|
if (props.row.isHeadOffice) {
|
||||||
dense
|
await triggerEdit(
|
||||||
class="row q-py-sm"
|
'drawer',
|
||||||
style="white-space: nowrap"
|
props.row.id,
|
||||||
>
|
'headOffice',
|
||||||
<q-icon
|
props.row.code,
|
||||||
name="mdi-eye-outline"
|
);
|
||||||
class="col-3"
|
} else {
|
||||||
size="xs"
|
await triggerEdit(
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
'drawer',
|
||||||
/>
|
props.row.id,
|
||||||
<span class="col-9 q-px-md flex items-center">
|
'subBranch',
|
||||||
{{ $t('general.viewDetail') }}
|
);
|
||||||
</span>
|
}
|
||||||
</q-item>
|
formType = 'edit';
|
||||||
|
}
|
||||||
|
"
|
||||||
|
@delete="triggerDelete(props.row.id)"
|
||||||
|
@change-status="
|
||||||
|
async () => {
|
||||||
|
const res = await triggerChangeStatus(
|
||||||
|
props.row.id,
|
||||||
|
props.row.status,
|
||||||
|
);
|
||||||
|
|
||||||
<q-item
|
if (res) props.row.status = res.status;
|
||||||
:id="`view-detail-btn-${props.row.name}-edit`"
|
}
|
||||||
v-close-popup
|
"
|
||||||
clickable
|
/>
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
if (props.row.isHeadOffice) {
|
|
||||||
await triggerEdit(
|
|
||||||
'drawer',
|
|
||||||
props.row.id,
|
|
||||||
'headOffice',
|
|
||||||
props.row.code,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await triggerEdit(
|
|
||||||
'drawer',
|
|
||||||
props.row.id,
|
|
||||||
'subBranch',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
formType = 'edit';
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
||||||
dense
|
|
||||||
v-close-popup
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted':
|
|
||||||
props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="triggerDelete(props.row.id)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative':
|
|
||||||
props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('generaldelete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div
|
|
||||||
class="q-pa-sm surface-2 rounded flex items-center"
|
|
||||||
>
|
|
||||||
<ToggleButton
|
|
||||||
:id="`view-detail-btn-${props.row.name}-status`"
|
|
||||||
two-way
|
|
||||||
:model-value="
|
|
||||||
props.row.status === 'CREATED' ||
|
|
||||||
props.row.status === 'ACTIVE'
|
|
||||||
"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
const res =
|
|
||||||
await triggerChangeStatus(
|
|
||||||
props.row.id,
|
|
||||||
props.row.status,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (res)
|
|
||||||
props.row.status = res.status;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</template>
|
</template>
|
||||||
</BranchCard>
|
</BranchCard>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1622,7 +1435,7 @@ watch(currentHq, () => {
|
||||||
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
||||||
id="branch-form"
|
id="branch-form"
|
||||||
>
|
>
|
||||||
<div class="col">
|
<div class="col" v-if="$q.screen.gt.sm">
|
||||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||||
<SideMenu
|
<SideMenu
|
||||||
:menu="[
|
:menu="[
|
||||||
|
|
@ -1661,7 +1474,7 @@ watch(currentHq, () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
<div class="col-md-10 col-12 q-pa-md q-gutter-y-xl">
|
||||||
<FormBranchInformation
|
<FormBranchInformation
|
||||||
id="form-information"
|
id="form-information"
|
||||||
v-model:abbreviation="formData.code"
|
v-model:abbreviation="formData.code"
|
||||||
|
|
@ -1842,6 +1655,7 @@ watch(currentHq, () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
v-if="$q.screen.gt.sm"
|
||||||
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
|
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
|
||||||
>
|
>
|
||||||
<SideMenu
|
<SideMenu
|
||||||
|
|
@ -1880,7 +1694,8 @@ watch(currentHq, () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height"
|
class="col-12 col-md-10 q-py-md q-pr-md full-height"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
id="branch-info"
|
id="branch-info"
|
||||||
style="overflow-y: auto"
|
style="overflow-y: auto"
|
||||||
>
|
>
|
||||||
|
|
@ -1952,6 +1767,7 @@ watch(currentHq, () => {
|
||||||
inputFile.click();
|
inputFile.click();
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
|
class="q-mb-xl"
|
||||||
/>
|
/>
|
||||||
<FormBank
|
<FormBank
|
||||||
id="info-bank"
|
id="info-bank"
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ import SideMenu from 'components/SideMenu.vue';
|
||||||
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
|
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
|
||||||
import { AddressForm } from 'components/form';
|
import { AddressForm } from 'components/form';
|
||||||
import DialogForm from 'components/DialogForm.vue';
|
import DialogForm from 'components/DialogForm.vue';
|
||||||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||||
|
|
||||||
const { locale, t } = useI18n();
|
const { locale, t } = useI18n();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
@ -496,10 +496,10 @@ async function onDelete(id: string) {
|
||||||
dialog({
|
dialog({
|
||||||
color: 'negative',
|
color: 'negative',
|
||||||
icon: 'mdi-trash-can-outline',
|
icon: 'mdi-trash-can-outline',
|
||||||
title: t('deleteConfirmTitle'),
|
title: t('dialog.title.confirmDelete'),
|
||||||
actionText: t('agree'),
|
actionText: t('general.delete'),
|
||||||
persistent: true,
|
persistent: true,
|
||||||
message: t('deleteConfirmMessage'),
|
message: t('dialog.message.confirmDelete'),
|
||||||
action: async () => {
|
action: async () => {
|
||||||
await userStore.deleteById(id);
|
await userStore.deleteById(id);
|
||||||
|
|
||||||
|
|
@ -1276,124 +1276,26 @@ watch(
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
<KebabAction
|
||||||
<q-btn
|
:id-name="props.row.username"
|
||||||
:id="`btn-dots-${props.row.username}`"
|
:status="props.row.status"
|
||||||
icon="mdi-dots-vertical"
|
@view="
|
||||||
size="sm"
|
() => {
|
||||||
dense
|
openDialog('INFO', props.row.id);
|
||||||
round
|
}
|
||||||
flat
|
"
|
||||||
@click.stop
|
@edit="
|
||||||
:key="props.row.id"
|
() => {
|
||||||
>
|
openDialog('INFO', props.row.id, true);
|
||||||
<q-menu class="bordered">
|
}
|
||||||
<q-list v-close-popup>
|
"
|
||||||
<q-item
|
@delete="onDelete(props.row.id)"
|
||||||
:id="`view-detail-btn-${props.row.username}-view`"
|
@change-status="
|
||||||
@click.stop="
|
async () => {
|
||||||
() => {
|
triggerChangeStatus(props.row.id, props.row.status);
|
||||||
openDialog('INFO', props.row.id);
|
}
|
||||||
}
|
"
|
||||||
"
|
/>
|
||||||
v-close-popup
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.username}-edit`"
|
|
||||||
v-close-popup
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
openDialog('INFO', props.row.id, true);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.username}-delete`"
|
|
||||||
dense
|
|
||||||
v-close-popup
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted': props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="onDelete(props.row.id)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative':
|
|
||||||
props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div
|
|
||||||
class="q-pa-sm surface-2 rounded flex items-center"
|
|
||||||
>
|
|
||||||
<ToggleButton
|
|
||||||
:id="`view-detail-btn-${props.row.username}-status`"
|
|
||||||
two-way
|
|
||||||
:model-value="props.row.status !== 'INACTIVE'"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
triggerChangeStatus(
|
|
||||||
props.row.id,
|
|
||||||
props.row.status,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -1737,8 +1639,9 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm relative-position"
|
class="col-12 col-md-10 q-py-md q-pr-md relative-position"
|
||||||
id="user-form-content"
|
id="user-form-content"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<FormInformation
|
<FormInformation
|
||||||
|
|
@ -1815,7 +1718,6 @@ watch(
|
||||||
v-model:agencyFile="agencyFile"
|
v-model:agencyFile="agencyFile"
|
||||||
v-model:agencyFileList="agencyFileList"
|
v-model:agencyFileList="agencyFileList"
|
||||||
v-model:userId="userId"
|
v-model:userId="userId"
|
||||||
class="q-mb-xl"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1987,7 +1889,6 @@ watch(
|
||||||
v-model:checkpoint="formData.checkpoint"
|
v-model:checkpoint="formData.checkpoint"
|
||||||
v-model:checkpointEN="formData.checkpointEN"
|
v-model:checkpointEN="formData.checkpointEN"
|
||||||
v-model:agencyFile="agencyFile"
|
v-model:agencyFile="agencyFile"
|
||||||
class="q-mb-xl"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@ import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmplo
|
||||||
import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
|
import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
|
||||||
import useOptionStore from 'stores/options';
|
import useOptionStore from 'stores/options';
|
||||||
import { DialogContainer, DialogHeader } from 'components/dialog';
|
import { DialogContainer, DialogHeader } from 'components/dialog';
|
||||||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||||
|
|
||||||
const { t, locale } = useI18n();
|
const { t, locale } = useI18n();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
@ -267,10 +267,10 @@ function deleteCustomerById(id: string) {
|
||||||
dialog({
|
dialog({
|
||||||
color: 'negative',
|
color: 'negative',
|
||||||
icon: 'mdi-alert',
|
icon: 'mdi-alert',
|
||||||
title: t('deleteConfirmTitle'),
|
title: t('dialog.title.confirmDelete'),
|
||||||
actionText: t('ok'),
|
actionText: t('general.delete'),
|
||||||
persistent: true,
|
persistent: true,
|
||||||
message: t('deleteConfirmMessage'),
|
message: t('dialog.message.confirmDelete'),
|
||||||
action: async () => {
|
action: async () => {
|
||||||
await customerStore.deleteById(id);
|
await customerStore.deleteById(id);
|
||||||
|
|
||||||
|
|
@ -287,10 +287,10 @@ async function deleteCustomerBranchById(id: string) {
|
||||||
dialog({
|
dialog({
|
||||||
color: 'negative',
|
color: 'negative',
|
||||||
icon: 'mdi-alert',
|
icon: 'mdi-alert',
|
||||||
title: t('deleteConfirmTitle'),
|
title: t('dialog.title.confirmDelete'),
|
||||||
actionText: t('ok'),
|
actionText: t('general.delete'),
|
||||||
persistent: true,
|
persistent: true,
|
||||||
message: t('deleteConfirmMessage'),
|
message: t('dialog.message.confirmDelete'),
|
||||||
action: async () => {
|
action: async () => {
|
||||||
await customerStore.deleteBranchById(id);
|
await customerStore.deleteBranchById(id);
|
||||||
flowStore.rotate();
|
flowStore.rotate();
|
||||||
|
|
@ -385,13 +385,13 @@ async function triggerChangeStatus(id: string, status: string) {
|
||||||
color: status !== 'INACTIVE' ? 'warning' : 'info',
|
color: status !== 'INACTIVE' ? 'warning' : 'info',
|
||||||
icon:
|
icon:
|
||||||
status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
|
status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
|
||||||
title: t('confirmChangeStatusTitle'),
|
title: t('dialog.title.confirmChangeStatus'),
|
||||||
actionText:
|
actionText:
|
||||||
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
|
status !== 'INACTIVE' ? t('general.close') : t('general.open'),
|
||||||
message:
|
message:
|
||||||
status !== 'INACTIVE'
|
status !== 'INACTIVE'
|
||||||
? t('confirmChangeStatusOffMessage')
|
? t('dialog.message.confirmChangeStatusOff')
|
||||||
: t('confirmChangeStatusOnMessage'),
|
: t('dialog.message.confirmChangeStatusOn'),
|
||||||
action: async () => {
|
action: async () => {
|
||||||
if (currentTab.value === 'employee') {
|
if (currentTab.value === 'employee') {
|
||||||
await toggleStatusEmployee(id, status === 'INACTIVE' ? false : true)
|
await toggleStatusEmployee(id, status === 'INACTIVE' ? false : true)
|
||||||
|
|
@ -428,10 +428,10 @@ async function deleteEmployeeById(opts: {
|
||||||
dialog({
|
dialog({
|
||||||
color: 'negative',
|
color: 'negative',
|
||||||
icon: 'mdi-alert',
|
icon: 'mdi-alert',
|
||||||
title: t('deleteConfirmTitle'),
|
title: t('dialog.title.confirmDelete'),
|
||||||
actionText: t('ok'),
|
actionText: t('general.delete'),
|
||||||
persistent: true,
|
persistent: true,
|
||||||
message: t('deleteConfirmMessage'),
|
message: t('dialog.message.confirmDelete'),
|
||||||
action: async () => {
|
action: async () => {
|
||||||
if (opts.type === 'healthCheck') {
|
if (opts.type === 'healthCheck') {
|
||||||
await employeeFormStore.deleteHealthCheck();
|
await employeeFormStore.deleteHealthCheck();
|
||||||
|
|
@ -1172,130 +1172,33 @@ const emptyCreateDialog = ref(false);
|
||||||
@click.stop="editCustomerForm(props.row.id)"
|
@click.stop="editCustomerForm(props.row.id)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-btn
|
<KebabAction
|
||||||
icon="mdi-dots-vertical"
|
:id-name="props.row.code"
|
||||||
:id="`btn-dots-${props.row.code}`"
|
:status="props.row.status"
|
||||||
size="sm"
|
@view="
|
||||||
dense
|
() => {
|
||||||
round
|
const { branch, ...payload } = props.row;
|
||||||
flat
|
currentCustomer = payload;
|
||||||
@click.stop
|
editCustomerForm(props.row.id);
|
||||||
:key="props.row.id"
|
}
|
||||||
>
|
"
|
||||||
<q-menu class="bordered">
|
@edit="
|
||||||
<q-list v-close-popup>
|
async () => {
|
||||||
<q-item
|
await editCustomerForm(props.row.id);
|
||||||
:id="`view-detail-btn-${props.row.name}-view`"
|
customerFormState.dialogType = 'edit';
|
||||||
@click.stop="
|
customerFormState.readonly = false;
|
||||||
() => {
|
}
|
||||||
const { branch, ...payload } = props.row;
|
"
|
||||||
currentCustomer = payload;
|
@delete="deleteCustomerById(props.row.id)"
|
||||||
editCustomerForm(props.row.id);
|
@change-status="
|
||||||
}
|
async () => {
|
||||||
"
|
triggerChangeStatus(
|
||||||
v-close-popup
|
props.row.id,
|
||||||
clickable
|
props.row.status,
|
||||||
dense
|
);
|
||||||
class="row q-py-sm"
|
}
|
||||||
style="white-space: nowrap"
|
"
|
||||||
>
|
/>
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-edit`"
|
|
||||||
v-close-popup
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
await editCustomerForm(props.row.id);
|
|
||||||
customerFormState.dialogType = 'edit';
|
|
||||||
customerFormState.readonly = false;
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
||||||
dense
|
|
||||||
v-close-popup
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted':
|
|
||||||
props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="deleteCustomerById(props.row.id)"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative':
|
|
||||||
props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div
|
|
||||||
class="q-pa-sm surface-2 rounded flex items-center"
|
|
||||||
>
|
|
||||||
<ToggleButton
|
|
||||||
:id="`view-detail-btn-${props.row.name}-status`"
|
|
||||||
two-way
|
|
||||||
:model-value="
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
triggerChangeStatus(
|
|
||||||
props.row.id,
|
|
||||||
props.row.status,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
|
|
||||||
|
|
@ -1315,12 +1218,25 @@ const emptyCreateDialog = ref(false);
|
||||||
@view="
|
@view="
|
||||||
(item: any) => {
|
(item: any) => {
|
||||||
employeeFormState.drawerModal = true;
|
employeeFormState.drawerModal = true;
|
||||||
//employeeFormState.isEmployeeEdit = true;
|
employeeFormState.isEmployeeEdit = false;
|
||||||
employeeFormStore.assignFormDataEmployee(
|
employeeFormStore.assignFormDataEmployee(
|
||||||
item.id,
|
item.id,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
|
@edit="
|
||||||
|
(item: any) => editEmployeeFormPersonal(item.id)
|
||||||
|
"
|
||||||
|
@delete="
|
||||||
|
(item: any) => {
|
||||||
|
deleteEmployeeById({ id: item.id });
|
||||||
|
}
|
||||||
|
"
|
||||||
|
@toggle-status="
|
||||||
|
async (item: any) => {
|
||||||
|
triggerChangeStatus(item.id, item.status);
|
||||||
|
}
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ import DialogForm from 'components/DialogForm.vue';
|
||||||
import ProfileBanner from 'components/ProfileBanner.vue';
|
import ProfileBanner from 'components/ProfileBanner.vue';
|
||||||
import SideMenu from 'components/SideMenu.vue';
|
import SideMenu from 'components/SideMenu.vue';
|
||||||
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
|
import ImageUploadDialog from 'components/ImageUploadDialog.vue';
|
||||||
|
import KebabAction from 'src/components/shared/KebabAction.vue';
|
||||||
import {
|
import {
|
||||||
EditButton,
|
EditButton,
|
||||||
DeleteButton,
|
DeleteButton,
|
||||||
|
|
@ -2075,181 +2076,74 @@ watch([currentStatusList, productMode], () => {
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-btn
|
<KebabAction
|
||||||
icon="mdi-dots-vertical"
|
:disable-delete="props.row.status !== 'CREATED'"
|
||||||
:id="`btn-dots-${props.row.name}`"
|
:status="props.row.status"
|
||||||
size="sm"
|
:idName="props.row.name"
|
||||||
dense
|
@view="
|
||||||
round
|
() => {
|
||||||
flat
|
if (productMode === 'type') {
|
||||||
@click.stop
|
editByTree = 'type';
|
||||||
:key="props.row.id"
|
currentStatusProduct =
|
||||||
v-if="actionDisplay"
|
props.row.status === 'INACTIVE';
|
||||||
>
|
clearFormGroup();
|
||||||
<q-menu class="bordered">
|
currentIdType = props.row.id;
|
||||||
<q-list v-close-popup>
|
assignFormDataGroup(props.row);
|
||||||
<q-item
|
isEdit = false;
|
||||||
v-close-popup
|
drawerInfo = true;
|
||||||
clickable
|
}
|
||||||
:id="`view-detail-btn-${props.row.name}-view`"
|
if (productMode === 'group') {
|
||||||
@click.stop="
|
editByTree = 'group';
|
||||||
() => {
|
currentStatusProduct =
|
||||||
if (productMode === 'type') {
|
props.row.status === 'INACTIVE';
|
||||||
editByTree = 'type';
|
clearFormGroup();
|
||||||
currentStatusProduct =
|
assignFormDataGroup(props.row);
|
||||||
props.row.status === 'INACTIVE';
|
isEdit = false;
|
||||||
clearFormGroup();
|
currentIdGrop = props.row.id;
|
||||||
currentIdType = props.row.id;
|
drawerInfo = true;
|
||||||
assignFormDataGroup(props.row);
|
}
|
||||||
isEdit = false;
|
}
|
||||||
drawerInfo = true;
|
"
|
||||||
}
|
@edit="
|
||||||
if (productMode === 'group') {
|
() => {
|
||||||
editByTree = 'group';
|
if (productMode === 'type') {
|
||||||
currentStatusProduct =
|
editByTree = 'type';
|
||||||
props.row.status === 'INACTIVE';
|
clearFormGroup();
|
||||||
clearFormGroup();
|
currentIdType = props.row.id;
|
||||||
assignFormDataGroup(props.row);
|
assignFormDataGroup(props.row);
|
||||||
isEdit = false;
|
isEdit = true;
|
||||||
currentIdGrop = props.row.id;
|
drawerInfo = true;
|
||||||
drawerInfo = true;
|
}
|
||||||
}
|
if (productMode === 'group') {
|
||||||
}
|
editByTree = 'group';
|
||||||
"
|
clearFormGroup();
|
||||||
dense
|
assignFormDataGroup(props.row);
|
||||||
class="row q-py-sm"
|
isEdit = true;
|
||||||
style="white-space: nowrap"
|
currentIdGrop = props.row.id;
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-eye-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.viewDetail') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
drawerInfo = true;
|
||||||
v-if="
|
}
|
||||||
props.row.status !== 'INACTIVE' &&
|
}
|
||||||
currentNoAction
|
"
|
||||||
"
|
@delete="
|
||||||
:id="`view-detail-btn-${props.row.name}-edit`"
|
() => {
|
||||||
v-close-popup
|
if (productMode === 'type') {
|
||||||
clickable
|
deleteProductById(props.row.id);
|
||||||
dense
|
}
|
||||||
class="row q-py-sm"
|
if (productMode === 'group') {
|
||||||
style="white-space: nowrap"
|
deleteProductById(props.row.id);
|
||||||
@click="
|
}
|
||||||
() => {
|
}
|
||||||
if (productMode === 'type') {
|
"
|
||||||
editByTree = 'type';
|
@changeStatus="
|
||||||
clearFormGroup();
|
async () => {
|
||||||
currentIdType = props.row.id;
|
triggerChangeStatus(
|
||||||
assignFormDataGroup(props.row);
|
props.row.id,
|
||||||
isEdit = true;
|
props.row.status,
|
||||||
drawerInfo = true;
|
);
|
||||||
}
|
}
|
||||||
if (productMode === 'group') {
|
"
|
||||||
editByTree = 'group';
|
/>
|
||||||
clearFormGroup();
|
|
||||||
assignFormDataGroup(props.row);
|
|
||||||
isEdit = true;
|
|
||||||
currentIdGrop = props.row.id;
|
|
||||||
|
|
||||||
drawerInfo = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item
|
|
||||||
v-close-popup
|
|
||||||
v-if="
|
|
||||||
props.row.status !== 'INACTIVE' &&
|
|
||||||
currentNoAction
|
|
||||||
"
|
|
||||||
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
||||||
dense
|
|
||||||
:disable="props.row.status !== 'CREATED'"
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted':
|
|
||||||
props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (productMode === 'type') {
|
|
||||||
deleteProductById(props.row.id);
|
|
||||||
}
|
|
||||||
if (productMode === 'group') {
|
|
||||||
deleteProductById(props.row.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative':
|
|
||||||
props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div
|
|
||||||
class="q-pa-sm surface-2 rounded flex items-center"
|
|
||||||
>
|
|
||||||
<ToggleButton
|
|
||||||
two-way
|
|
||||||
:id="`view-detail-btn-${props.row.name}-status`"
|
|
||||||
:model-value="
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
triggerChangeStatus(
|
|
||||||
props.row.id,
|
|
||||||
props.row.status,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -2999,165 +2893,62 @@ watch([currentStatusList, productMode], () => {
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
<KebabAction
|
||||||
<q-btn
|
:status="props.row.status"
|
||||||
icon="mdi-dots-vertical"
|
:idName="props.row.name"
|
||||||
:id="`btn-dots-${props.row.name}`"
|
@view="
|
||||||
size="sm"
|
async () => {
|
||||||
dense
|
await fetchListOfOptionBranch();
|
||||||
round
|
if (props.row.type === 'product') {
|
||||||
flat
|
currentIdProduct = props.row.id;
|
||||||
@click.stop
|
assignFormDataProduct(props.row);
|
||||||
v-if="actionDisplay"
|
dialogProductEdit = true;
|
||||||
>
|
}
|
||||||
<q-menu class="bordered">
|
if (props.row.type === 'service') {
|
||||||
<q-list v-close-popup>
|
currentIdService = props.row.id;
|
||||||
<q-item
|
infoServiceEdit = false;
|
||||||
:id="`view-detail-btn-${props.row.name}-view`"
|
assignFormDataProductService(props.row.id);
|
||||||
@click.stop="
|
dialogServiceEdit = true;
|
||||||
async () => {
|
}
|
||||||
await fetchListOfOptionBranch();
|
}
|
||||||
if (props.row.type === 'product') {
|
"
|
||||||
currentIdProduct = props.row.id;
|
@edit="
|
||||||
assignFormDataProduct(props.row);
|
async () => {
|
||||||
dialogProductEdit = true;
|
await fetchListOfOptionBranch();
|
||||||
}
|
if (props.row.type === 'product') {
|
||||||
if (props.row.type === 'service') {
|
currentIdProduct = props.row.id;
|
||||||
currentIdService = props.row.id;
|
infoProductEdit = true;
|
||||||
infoServiceEdit = false;
|
assignFormDataProduct(props.row);
|
||||||
assignFormDataProductService(
|
dialogProductEdit = true;
|
||||||
props.row.id,
|
}
|
||||||
);
|
if (props.row.type === 'service') {
|
||||||
dialogServiceEdit = true;
|
currentIdService = props.row.id;
|
||||||
}
|
infoServiceEdit = true;
|
||||||
}
|
assignFormDataProductService(props.row.id);
|
||||||
"
|
dialogServiceEdit = true;
|
||||||
v-close-popup
|
}
|
||||||
clickable
|
}
|
||||||
dense
|
"
|
||||||
class="row q-py-sm"
|
@delete="
|
||||||
style="white-space: nowrap"
|
() => {
|
||||||
>
|
if (props.row.type === 'product') {
|
||||||
<q-icon
|
deleteProductConfirm(props.row.id);
|
||||||
name="mdi-eye-outline"
|
}
|
||||||
class="col-3"
|
if (props.row.type === 'service') {
|
||||||
size="xs"
|
deleteServiceConfirm(props.row.id);
|
||||||
style="color: hsl(var(--green-6-hsl))"
|
}
|
||||||
/>
|
}
|
||||||
<span class="col-9 q-px-md flex items-center">
|
"
|
||||||
{{ $t('general.viewDetail') }}
|
@changeStatus="
|
||||||
</span>
|
() => {
|
||||||
</q-item>
|
triggerChangeStatus(
|
||||||
|
props.row.id,
|
||||||
<q-item
|
props.row.status,
|
||||||
:id="`view-detail-btn-${props.row.name}-edit`"
|
props.row.type,
|
||||||
v-close-popup
|
);
|
||||||
clickable
|
}
|
||||||
dense
|
"
|
||||||
class="row q-py-sm"
|
/>
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
async () => {
|
|
||||||
await fetchListOfOptionBranch();
|
|
||||||
if (props.row.type === 'product') {
|
|
||||||
currentIdProduct = props.row.id;
|
|
||||||
infoProductEdit = true;
|
|
||||||
assignFormDataProduct(props.row);
|
|
||||||
dialogProductEdit = true;
|
|
||||||
}
|
|
||||||
if (props.row.type === 'service') {
|
|
||||||
currentIdService = props.row.id;
|
|
||||||
infoServiceEdit = true;
|
|
||||||
assignFormDataProductService(
|
|
||||||
props.row.id,
|
|
||||||
);
|
|
||||||
dialogServiceEdit = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-pencil-outline"
|
|
||||||
class="col-3"
|
|
||||||
size="xs"
|
|
||||||
style="color: hsl(var(--cyan-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.edit') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
<q-item
|
|
||||||
:id="`view-detail-btn-${props.row.name}-delete`"
|
|
||||||
dense
|
|
||||||
v-close-popup
|
|
||||||
:clickable="props.row.status === 'CREATED'"
|
|
||||||
class="row"
|
|
||||||
:class="{
|
|
||||||
'surface-3': props.row.status !== 'CREATED',
|
|
||||||
'app-text-muted':
|
|
||||||
props.row.status !== 'CREATED',
|
|
||||||
}"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (props.row.type === 'product') {
|
|
||||||
deleteProductConfirm(props.row.id);
|
|
||||||
}
|
|
||||||
if (props.row.type === 'service') {
|
|
||||||
deleteServiceConfirm(props.row.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
:class="{
|
|
||||||
'app-text-negative':
|
|
||||||
props.row.status === 'CREATED',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('general.delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
|
||||||
<q-item-section class="q-py-sm">
|
|
||||||
<div
|
|
||||||
class="q-pa-sm surface-2 rounded flex items-center"
|
|
||||||
>
|
|
||||||
<ToggleButton
|
|
||||||
two-way
|
|
||||||
:id="`view-detail-btn-${props.row.name}-status`"
|
|
||||||
:model-value="
|
|
||||||
props.row.status === 'CREATED' ||
|
|
||||||
props.row.status === 'ACTIVE'
|
|
||||||
"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
triggerChangeStatus(
|
|
||||||
props.row.id,
|
|
||||||
props.row.status,
|
|
||||||
props.row.type,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="q-pl-md">
|
|
||||||
{{
|
|
||||||
props.row.status !== 'INACTIVE'
|
|
||||||
? $t('general.open')
|
|
||||||
: $t('general.close')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-menu>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -3209,6 +3000,16 @@ watch([currentStatusList, productMode], () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
|
@menuDelete="
|
||||||
|
() => {
|
||||||
|
if (row.type === 'product') {
|
||||||
|
deleteProductConfirm(row.id);
|
||||||
|
}
|
||||||
|
if (row.type === 'service') {
|
||||||
|
deleteServiceConfirm(row.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -3374,8 +3175,9 @@ watch([currentStatusList, productMode], () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
class="col-12 col-md-10 q-py-md q-pr-md"
|
||||||
id="customer-form-content"
|
id="customer-form-content"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<BasicInformation
|
<BasicInformation
|
||||||
|
|
@ -3546,8 +3348,9 @@ watch([currentStatusList, productMode], () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height"
|
class="col-12 col-md-10 q-py-md q-pr-md full-height"
|
||||||
id="group-info"
|
id="group-info"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
style="overflow-y: auto"
|
style="overflow-y: auto"
|
||||||
>
|
>
|
||||||
<BasicInformation
|
<BasicInformation
|
||||||
|
|
@ -3848,8 +3651,9 @@ watch([currentStatusList, productMode], () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
class="col-12 col-md-10 q-py-md q-pr-md"
|
||||||
id="customer-form-content"
|
id="customer-form-content"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<BasicInfoProduct
|
<BasicInfoProduct
|
||||||
|
|
@ -4023,7 +3827,8 @@ watch([currentStatusList, productMode], () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
class="col-12 col-md-10 q-py-md q-pr-md"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
id="customer-form-content"
|
id="customer-form-content"
|
||||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||||
>
|
>
|
||||||
|
|
@ -4156,8 +3961,9 @@ watch([currentStatusList, productMode], () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
class="col-12 col-md-10 q-py-md q-pr-md"
|
||||||
id="customer-form-content"
|
id="customer-form-content"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<BasicInformation
|
<BasicInformation
|
||||||
|
|
@ -4435,8 +4241,9 @@ watch([currentStatusList, productMode], () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
class="col-12 col-md-10 q-py-md q-pr-md"
|
||||||
id="customer-form-content"
|
id="customer-form-content"
|
||||||
|
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<BasicInformation
|
<BasicInformation
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue