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

feat: manage work name & work properties

Browse source
This commit is contained in:
puriphatt 2024-06-20 09:10:34 +00:00
parent 799d465600
commit ff4297fb13
4 changed files with 174 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/components/04_product-service/WorkManagementComponent.vue
View file

@ -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"