135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { deleteItem, dialog } from 'src/stores/utils';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const inputWorkName = ref<HTMLInputElement[]>([]);
|
|
const newNameIndex = ref();
|
|
|
|
const testName = ref([
|
|
{ name: 'ทดสอบการขาย 1', isEdit: false },
|
|
{ name: 'ทดสอบการขาย 2', isEdit: false },
|
|
{ name: 'ทดสอบการขาย 3', isEdit: false },
|
|
{ name: 'ทดสอบการขาย 4', isEdit: false },
|
|
{ name: 'ทดสอบการขาย 5', isEdit: false },
|
|
]);
|
|
|
|
function addWorkName() {
|
|
testName.value.push({
|
|
name: '',
|
|
isEdit: true,
|
|
});
|
|
setTimeout(() => {
|
|
inputWorkName.value[testName.value.length - 1].focus();
|
|
}, 100);
|
|
}
|
|
|
|
function confirmDelete(items: unknown[], index: number) {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-alert',
|
|
title: t('deleteConfirmTitle'),
|
|
actionText: t('delete'),
|
|
message: t('deleteConfirmMessage'),
|
|
action: async () => {
|
|
deleteItem(items, index);
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="full-width column no-wrap full-height">
|
|
<div
|
|
v-if="true"
|
|
class="bordered rounded surface-1 flex col column justify-between"
|
|
>
|
|
<q-list class="full-width col scroll">
|
|
<q-item
|
|
class="items-center row q-px-lg"
|
|
v-for="(i, index) in testName"
|
|
:key="index"
|
|
>
|
|
<!-- outlined -->
|
|
<q-input
|
|
ref="inputWorkName"
|
|
dense
|
|
:borderless="!i.isEdit"
|
|
:readonly="!i.isEdit"
|
|
:outlined="i.isEdit"
|
|
class="col q-mr-md"
|
|
v-model="i.name"
|
|
placeholder="ชื่องาน"
|
|
></q-input>
|
|
<q-btn
|
|
v-if="!i.isEdit"
|
|
id="btn-edit-work-name"
|
|
icon="mdi-pencil-outline"
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
@click="i.isEdit = true"
|
|
>
|
|
<q-tooltip>Edit</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-else
|
|
id="btn-edit-work-name"
|
|
icon="mdi-check"
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
@click="i.isEdit = false"
|
|
>
|
|
<q-tooltip>Save</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="!i.isEdit"
|
|
id="btn-delete-work-name"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-ml-md"
|
|
color="negative"
|
|
@click="confirmDelete(testName, index)"
|
|
>
|
|
<q-tooltip>Delete</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
v-else
|
|
id="btn-edit-work-name"
|
|
icon="mdi-undo"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-ml-md"
|
|
color="negative"
|
|
@click="i.isEdit = false"
|
|
>
|
|
<q-tooltip>Cancel</q-tooltip>
|
|
</q-btn>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<div class="bordered-t full-width">
|
|
<q-item clickable @click="addWorkName">
|
|
<span class="q-px-lg flex items-center app-text-muted-2">
|
|
<q-icon name="mdi-plus" class="q-mr-md" />
|
|
เพิ่มงานใหม่
|
|
</span>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="bordered rounded surface-1 flex justify-center items-center col"
|
|
>
|
|
<NoData />
|
|
</div>
|
|
</div>
|
|
</template>
|