chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: kebab action

Browse source
This commit is contained in:
puriphatt 2024-08-27 11:46:26 +07:00
parent 5ec6d1c9d5
commit bc578d569c
11 changed files with 518 additions and 1357 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/components/03_customer-management/TableEmpoloyee.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import ToggleButton from '../button/ToggleButton.vue';
import { calculateAge, dateFormat } from 'src/utils/datetime';
import PersonCard from 'components/shared/PersonCard.vue';
import KebabAction from '../shared/KebabAction.vue';
const pageSize = defineModel<number>('pageSize', { default: 30 });
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>
<template>
@ -214,103 +221,14 @@ const prop = withDefaults(
@click.stop="$emit('view', props.row)"
/>
<q-btn
icon="mdi-dots-vertical"
:id="`btn-dots-${props.row.code}`"
size="sm"
dense
round
flat
@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>
<KebabAction
:id-name="props.row.code"
:status="props.row.status"
@view="$emit('view', props.row)"
@edit="$emit('edit', props.row)"
@delete="$emit('delete', props.row)"
@change-status="$emit('toggleStatus', props.row)"
/>
</q-td>
</q-tr>
</template>