fix: add & move properties

This commit is contained in:
puriphatt 2024-06-19 10:55:07 +00:00
parent 40e89268b6
commit 52baaca35e
2 changed files with 297 additions and 235 deletions

View file

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Option } from 'src/stores/options/types'; import { Option } from 'src/stores/options/types';
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { Attributes } from 'src/stores/product-service/types'; import { Attributes, AdditionalType } from 'src/stores/product-service/types';
import NoData from '../NoData.vue'; import NoData from '../NoData.vue';
const propertiesOption = defineModel<Option[]>('propertiesOption'); const propertiesOption = defineModel<Option[]>('propertiesOption');
@ -55,11 +55,43 @@ defineEmits<{
(e: 'addProperties'): void; (e: 'addProperties'): void;
}>(); }>();
function addProperties() { function manageProperties(properties?: string) {
formServiceProperties.value?.additional.push({ if (properties === 'all' && propertiesOption.value) {
fieldName: null, if (
type: null, formServiceProperties.value?.additional.length ===
}); propertiesOption.value.length
) {
formServiceProperties.value.additional = [];
return;
}
propertiesOption.value.forEach((ops) => {
const exists = formServiceProperties.value?.additional.some(
(prop) => prop.fieldName === ops.value,
);
if (!exists) {
formServiceProperties.value?.additional.push({
fieldName: ops.value,
type: null,
});
}
});
return;
}
if (formServiceProperties.value) {
const propertyIndex = formServiceProperties.value.additional.findIndex(
(prop) => prop.fieldName === properties,
);
if (propertyIndex !== -1) {
formServiceProperties.value.additional.splice(propertyIndex, 1);
} else {
formServiceProperties.value.additional.push({
fieldName: properties ?? null,
type: null,
});
}
}
} }
function deleteItem(index: number) { function deleteItem(index: number) {
@ -77,19 +109,93 @@ function shouldShowItem(opt: Option) {
return !!opt && !additionalFieldNames.has(opt.value); return !!opt && !additionalFieldNames.has(opt.value);
} }
} }
function swapItems(
arr: { fieldName: string | null; type: AdditionalType | null }[],
index1: number,
index2: number,
) {
[arr[index1], arr[index2]] = [arr[index2], arr[index1]];
}
function moveItemUp(index: number) {
if (!formServiceProperties.value || index <= 0) return;
swapItems(formServiceProperties.value.additional, index, index - 1);
}
function moveItemDown(index: number) {
if (
!formServiceProperties.value ||
index >= formServiceProperties.value.additional.length - 1
)
return;
swapItems(formServiceProperties.value.additional, index, index + 1);
}
</script> </script>
<template> <template>
<div class="full-width column no-wrap" style="height: 30vw"> <div class="full-width column no-wrap" style="height: 30vw">
<div> <div class="row">
<q-btn <q-btn-dropdown
icon="mdi-plus"
dense dense
unelevated unelevated
class="q-px-sm q-mb-lg"
label="Properties"
icon="mdi-plus"
color="primary" color="primary"
@click="addProperties" label="Properties"
/> class="q-px-sm q-mb-lg"
>
<q-list dense v-if="formServiceProperties && propertiesOption">
<q-item clickable @click="manageProperties('all')">
<div class="full-width flex items-center">
<q-icon
v-if="formServiceProperties.additional.length === 18"
name="mdi-checkbox-marked"
size="xs"
class="q-mr-sm"
color="primary"
/>
<q-icon
v-else
name="mdi-checkbox-blank-outline"
size="xs"
class="q-mr-sm"
style="color: hsl(var(--text-mute))"
/>
เลอกทงหมด
</div>
</q-item>
<q-separator />
<q-item
v-for="(ops, index) in propertiesOption"
clickable
:key="index"
@click="manageProperties(ops.value)"
>
<div class="full-width flex items-center">
<q-icon
v-if="
formServiceProperties &&
formServiceProperties.additional.some(
(add) => add.fieldName === ops.value,
)
"
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"
/>
{{ ops.label }}
</div>
</q-item>
</q-list>
</q-btn-dropdown>
</div> </div>
<div <div
@ -104,258 +210,210 @@ function shouldShowItem(opt: Option) {
formServiceProperties?.additional && formServiceProperties?.additional &&
formServiceProperties.additional.length > 0 formServiceProperties.additional.length > 0
" "
class="q-gutter-y-md"
> >
<div <transition-group tag="div" name="list" class="q-gutter-y-md">
v-for="(p, index) in formServiceProperties.additional" <div
:key="index" v-for="(p, index) in formServiceProperties.additional"
class="bordered surface-1 rounded q-py-sm q-px-md row items-start" :key="index"
:class=" class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
index === formServiceProperties.additional.length - 1 && 'q-mb-lg' :class="
" index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
>
<q-btn
id="btn-swap-work-product"
icon="mdi-arrow-up"
dense
flat
round
:disable="index === 0"
style="color: hsl(var(--text-mute-2))"
/>
<q-btn
id="btn-swap-work-product"
icon="mdi-arrow-down"
dense
flat
round
:disable="index === formServiceProperties.additional.length - 1"
style="color: hsl(var(--text-mute-2))"
/>
<q-avatar
size="md"
class="q-mx-lg"
style="background-color: var(--surface-3)"
>
{{ index + 1 }}
</q-avatar>
<!-- <q-select
dense
multiple
outlined
emit-value
map-options
hide-bottom-space
:display-value="
formServiceProperties.additional[index].fieldName ?? ''
" "
class="col q-mr-md" :ref="`item-${index}`"
label="Properties Name"
:option-value="
(v) =>
p.fieldName !== null
? {
fieldName: v.value,
type: null,
}
: (p.fieldName = v.value)
"
:options="propertiesOption"
v-model="formServiceProperties.additional"
> >
<template v-slot:before-options> <q-btn
<q-item id="btn-move-up-product"
class="row items-center col-12" icon="mdi-arrow-up"
clickable dense
@click="selectAll = !selectAll" flat
> round
<q-checkbox size="sm" class="q-pr-md" v-model="selectAll" /> :disable="index === 0"
เลอกทงหมด style="color: hsl(var(--text-mute-2))"
</q-item> @click="moveItemUp(index)"
<q-separator /> />
</template> <q-btn
id="btn-move-down-product"
icon="mdi-arrow-down"
dense
flat
round
:disable="index === formServiceProperties.additional.length - 1"
style="color: hsl(var(--text-mute-2))"
@click="moveItemDown(index)"
/>
<template v-slot:option="scope"> <q-avatar
<q-item size="md"
v-if="scope.opt" class="q-mx-lg"
v-bind="scope.itemProps" style="background-color: var(--surface-3)"
class="row items-center col-12" >
> {{ index + 1 }}
<q-checkbox </q-avatar>
size="sm"
class="q-pr-md"
v-model="scope.selected"
v-bind="scope.itemProps"
/>
{{ scope.opt.label }}
</q-item>
</template>
</q-select> -->
<q-select <!-- type -->
dense
outlined
emit-value
map-options
hide-bottom-space
class="col q-mr-md"
label="Properties Name"
option-label="label"
option-value="value"
:options="propertiesOption"
v-model="p.fieldName"
>
<template v-slot:option="scope">
<q-item
v-if="scope.opt && shouldShowItem(scope.opt)"
v-bind="scope.itemProps"
class="row items-center col-12"
>
{{ scope.opt.label }}
</q-item>
</template>
</q-select>
<div class="col">
<q-select <q-select
dense dense
outlined outlined
emit-value emit-value
map-options map-options
hide-bottom-space hide-bottom-space
label="Type" class="col q-mr-md"
label="Properties Name"
option-label="label"
option-value="value" option-value="value"
:options="typeOption" :options="propertiesOption"
v-model="p.type" v-model="p.fieldName"
> >
<template v-slot:option="scope"> <template v-slot:option="scope">
<q-item <q-item
v-if="scope.opt" v-if="scope.opt && shouldShowItem(scope.opt)"
v-bind="scope.itemProps" v-bind="scope.itemProps"
class="row items-center col-12" class="row items-center col-12"
> >
<q-avatar
size="sm"
class="q-mr-md"
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
>
<q-icon
size="20px"
:name="scope.opt.icon"
:style="`color: hsl(${scope.opt.color})`"
/>
</q-avatar>
{{ scope.opt.label }} {{ scope.opt.label }}
</q-item> </q-item>
</template> </template>
<template v-slot:selected-item="scope">
<div v-if="scope.opt" class="row items-center col-12">
<q-avatar
size="xs"
class="q-mr-sm"
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
>
<q-icon
size="14px"
:name="scope.opt.icon"
:style="`color: hsl(${scope.opt.color})`"
/>
</q-avatar>
{{ scope.opt.label }}
</div>
</template>
</q-select> </q-select>
<div <div class="col">
v-if="p.type === 'number'" <q-select
class="menu-border q-pt-md q-pb-sm" dense
style="margin-top: -20px" outlined
> emit-value
<q-item> map-options
<q-item-section class="column"> hide-bottom-space
<span class="app-text-muted-2">เพมเต</span> label="Type"
<div class="q-gutter-y-sm"> option-value="value"
<div class="row items-center"> :options="typeOption"
<div class="col-7 surface-3 rounded q-mr-sm q-py-xs"> v-model="p.type"
<q-checkbox v-model="tel" size="xs" /> >
เบอรโทร <template v-slot:option="scope">
</div> <q-item
<q-input v-if="scope.opt"
v-model="telMax" v-bind="scope.itemProps"
class="col" class="row items-center col-12"
dense >
outlined <q-avatar
label="จำนวนหลัก" size="sm"
class="q-mr-md"
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
>
<q-icon
size="20px"
:name="scope.opt.icon"
:style="`color: hsl(${scope.opt.color})`"
/> />
</div> </q-avatar>
{{ scope.opt.label }}
</q-item>
</template>
<div class="row items-center"> <template v-slot:selected-item="scope">
<div v-if="scope.opt" class="row items-center col-12">
<q-avatar
size="xs"
class="q-mr-sm"
:style="`background-color: hsla(${scope.opt.color}/0.2)`"
>
<q-icon
size="14px"
:name="scope.opt.icon"
:style="`color: hsl(${scope.opt.color})`"
/>
</q-avatar>
{{ scope.opt.label }}
</div>
</template>
</q-select>
<div
v-if="p.type === 'number'"
class="menu-border q-pt-md q-pb-sm"
style="margin-top: -20px"
>
<q-item>
<q-item-section class="column">
<span class="app-text-muted-2">เพมเต</span>
<div class="q-gutter-y-sm">
<div class="row items-center">
<div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
<q-checkbox v-model="tel" size="xs" />
เบอรโทร
</div>
<q-input
v-model="telMax"
class="col"
dense
outlined
label="จำนวนหลัก"
/>
</div>
<div class="row items-center">
<div class="col surface-3 rounded q-mr-sm q-py-xs">
<q-checkbox v-model="comma" size="xs" />
ใส comma
</div>
</div>
<div class="row items-center">
<div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
<q-checkbox v-model="point" size="xs" />
ทศนยม
</div>
<q-input
v-model="pointNum"
class="col"
dense
outlined
label="ตำแหน่ง"
/>
</div>
</div>
</q-item-section>
</q-item>
</div>
<div
v-if="p.type === 'array'"
class="menu-border q-pt-md q-pb-sm"
style="margin-top: -20px"
>
<q-item>
<q-item-section class="column">
<span class="app-text-muted-2">เพมเต</span>
<div class="row items-center justify-between">
<div class="col surface-3 rounded q-mr-sm q-py-xs"> <div class="col surface-3 rounded q-mr-sm q-py-xs">
<q-checkbox v-model="comma" size="xs" /> <q-checkbox v-model="tel" size="xs" />
ใส comma เพ list
</div>
<div class="col-1">
<q-btn
dense
flat
icon="mdi-plus"
class="bordered"
text-color="grey"
/>
</div> </div>
</div> </div>
</q-item-section>
<div class="row items-center"> </q-item>
<div class="col-7 surface-3 rounded q-mr-sm q-py-xs"> </div>
<q-checkbox v-model="point" size="xs" />
ทศนยม
</div>
<q-input
v-model="pointNum"
class="col"
dense
outlined
label="ตำแหน่ง"
/>
</div>
</div>
</q-item-section>
</q-item>
</div> </div>
<div <q-btn
v-if="p.type === 'array'" id="btn-delete-work-product"
class="menu-border q-pt-md q-pb-sm" icon="mdi-trash-can-outline"
style="margin-top: -20px" dense
> flat
<q-item> round
<q-item-section class="column"> color="negative"
<span class="app-text-muted-2">เพมเต</span> class="q-ml-sm"
<div class="row items-center justify-between"> @click="deleteItem(index)"
<div class="col surface-3 rounded q-mr-sm q-py-xs"> />
<q-checkbox v-model="tel" size="xs" />
เพ list
</div>
<div class="col-1">
<q-btn
dense
flat
icon="mdi-plus"
class="bordered"
text-color="grey"
/>
</div>
</div>
</q-item-section>
</q-item>
</div>
</div> </div>
</transition-group>
<q-btn
id="btn-delete-work-product"
icon="mdi-trash-can-outline"
dense
flat
round
color="negative"
class="q-ml-sm"
@click="deleteItem(index)"
/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -367,4 +425,8 @@ function shouldShowItem(opt: Option) {
border-bottom-left-radius: var(--radius-2); border-bottom-left-radius: var(--radius-2);
border-bottom-right-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2);
} }
// .list-move {
// transition: all 0.2s ease;
// }
</style> </style>

View file

@ -48,7 +48,7 @@ export interface Attributes {
}[]; }[];
} }
type AdditionalType = 'string' | 'number' | 'date' | 'array'; export type AdditionalType = 'string' | 'number' | 'date' | 'array';
// Product // Product
export interface ServiceById { export interface ServiceById {