feat: manage work name & work properties
This commit is contained in:
puriphatt
parent
799d465600
commit
ff4297fb13
4 changed files with 174 additions and 34 deletions
|
|
@ -58,8 +58,8 @@ defineProps<{
|
|||
|
||||
defineEmits<{
|
||||
(e: 'addProduct'): void;
|
||||
(e: 'deleteWork'): void;
|
||||
(e: 'deleteProduct'): void;
|
||||
(e: 'manageWorkName'): void;
|
||||
(e: 'workProperties'): void;
|
||||
}>();
|
||||
|
||||
function addWork() {
|
||||
|
|
@ -116,6 +116,8 @@ function confirmDelete(items: unknown[], index: number) {
|
|||
@move-product-up="moveItemUp"
|
||||
@move-product-down="moveItemDown"
|
||||
@delete-product="confirmDelete"
|
||||
@manage-work-name="$emit('manageWorkName')"
|
||||
@work-properties="$emit('workProperties')"
|
||||
></WorkManagementComponent>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@ defineEmits<{
|
|||
(e: 'moveProductUp', items: unknown[], index: number): void;
|
||||
(e: 'moveProductDown', items: unknown[], index: number): void;
|
||||
(e: 'deleteProduct', items: unknown[], index: number): void;
|
||||
|
||||
(e: 'manageWorkName'): void;
|
||||
(e: 'workProperties'): void;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -61,37 +64,72 @@ defineEmits<{
|
|||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveWorkDown')"
|
||||
/>
|
||||
<q-input
|
||||
<div
|
||||
for="input-work-name"
|
||||
dense
|
||||
outlined
|
||||
borderless
|
||||
class="col"
|
||||
hide-bottom-space
|
||||
class="bordered col rounded q-py-sm q-px-md"
|
||||
:placeholder="$t('workName')"
|
||||
v-model="workName"
|
||||
:input-style="'color: hsl(var(--text-mute-2))'"
|
||||
style="background-color: var(--surface-1)"
|
||||
style="background-color: var(--surface-1); z-index: 2"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
round
|
||||
padding="0"
|
||||
style="background-color: var(--surface-tab)"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
style="color: var(--stone-7)"
|
||||
/>
|
||||
</q-btn>
|
||||
<span class="text-body2 q-pl-sm" style="color: var(--foreground)">
|
||||
{{ $t('workNo') }} {{ index + 1 }} :
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
round
|
||||
padding="0"
|
||||
style="background-color: var(--surface-tab)"
|
||||
@click.stop="$emit('workProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
style="color: var(--stone-7)"
|
||||
/>
|
||||
</q-btn>
|
||||
<span class="text-body2 q-pl-sm" style="color: var(--foreground)">
|
||||
{{ $t('workNo') }} {{ index + 1 }} :
|
||||
<span class="app-text-muted-2">{{ $t('workName') }}</span>
|
||||
</span>
|
||||
|
||||
<q-menu fit anchor="bottom left" self="top left">
|
||||
<q-item>
|
||||
<div class="full-width flex items-center justify-between">
|
||||
ชื่องาน
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
class="bordered q-px-sm"
|
||||
style="
|
||||
border-radius: var(--radius-2);
|
||||
color: hsl(var(--info-bg));
|
||||
"
|
||||
@click.stop="$emit('manageWorkName')"
|
||||
>
|
||||
<q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
|
||||
จัดการ
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<div class="full-width flex items-center">
|
||||
<q-icon
|
||||
v-if="false"
|
||||
name="mdi-checkbox-marked"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="mdi-checkbox-blank-outline"
|
||||
size="xs"
|
||||
style="color: hsl(var(--text-mute))"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
{{ 'asd' }}
|
||||
</div>
|
||||
</q-item>
|
||||
</q-menu>
|
||||
</div>
|
||||
<q-btn
|
||||
id="btn-delete-work"
|
||||
icon="mdi-trash-can-outline"
|
||||
|
|
|
|||
74
src/components/04_product-service/WorkNameManagement.vue
Normal file
74
src/components/04_product-service/WorkNameManagement.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const text = 'demo text';
|
||||
const isEdit = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<div class="full-width column no-wrap" style="height: 50vh">
|
||||
<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">
|
||||
<q-btn
|
||||
id="btn-delete-work-name"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="negative"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="!isEdit"
|
||||
id="btn-edit-work-name"
|
||||
icon="mdi-pencil-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-ml-md"
|
||||
color="primary"
|
||||
@click="isEdit = true"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
id="btn-edit-work-name"
|
||||
icon="mdi-check"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-ml-md"
|
||||
color="primary"
|
||||
@click="isEdit = false"
|
||||
/>
|
||||
<!-- outlined -->
|
||||
<q-input
|
||||
dense
|
||||
:borderless="!isEdit"
|
||||
:readonly="!isEdit"
|
||||
:outlined="isEdit"
|
||||
class="q-ml-xl col"
|
||||
v-model="text"
|
||||
placeholder="ชื่องาน"
|
||||
></q-input>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<div class="bordered-t full-width">
|
||||
<q-item clickable>
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue