fix: form dialog & work name management dialog

This commit is contained in:
puriphatt 2024-06-21 07:28:32 +00:00
parent 5253bdc9fa
commit f7fa614ffe
3 changed files with 159 additions and 129 deletions

View file

@ -41,7 +41,7 @@ function confirmDelete(items: unknown[], index: number) {
}
</script>
<template>
<div class="full-width column no-wrap" style="height: 50vh">
<div class="full-width column no-wrap full-height">
<div
v-if="true"
class="bordered rounded surface-1 flex col column justify-between"
@ -52,37 +52,6 @@ function confirmDelete(items: unknown[], index: number) {
v-for="(i, index) in testName"
:key="index"
>
<q-btn
id="btn-delete-work-name"
icon="mdi-trash-can-outline"
dense
flat
round
color="negative"
@click="confirmDelete(testName, index)"
/>
<q-btn
v-if="!i.isEdit"
id="btn-edit-work-name"
icon="mdi-pencil-outline"
dense
flat
round
class="q-ml-md"
color="primary"
@click="i.isEdit = true"
/>
<q-btn
v-else
id="btn-edit-work-name"
icon="mdi-check"
dense
flat
round
class="q-ml-md"
color="primary"
@click="i.isEdit = false"
/>
<!-- outlined -->
<q-input
ref="inputWorkName"
@ -90,10 +59,60 @@ function confirmDelete(items: unknown[], index: number) {
:borderless="!i.isEdit"
:readonly="!i.isEdit"
:outlined="i.isEdit"
class="q-ml-xl col"
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>