fix: add & move properties
This commit is contained in:
puriphatt
parent
40e89268b6
commit
52baaca35e
2 changed files with 297 additions and 235 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { Option } from 'src/stores/options/types';
|
||||
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';
|
||||
|
||||
const propertiesOption = defineModel<Option[]>('propertiesOption');
|
||||
|
|
@ -55,11 +55,43 @@ defineEmits<{
|
|||
(e: 'addProperties'): void;
|
||||
}>();
|
||||
|
||||
function addProperties() {
|
||||
formServiceProperties.value?.additional.push({
|
||||
fieldName: null,
|
||||
type: null,
|
||||
});
|
||||
function manageProperties(properties?: string) {
|
||||
if (properties === 'all' && propertiesOption.value) {
|
||||
if (
|
||||
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) {
|
||||
|
|
@ -77,19 +109,93 @@ function shouldShowItem(opt: Option) {
|
|||
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>
|
||||
<template>
|
||||
<div class="full-width column no-wrap" style="height: 30vw">
|
||||
<div>
|
||||
<q-btn
|
||||
<div class="row">
|
||||
<q-btn-dropdown
|
||||
icon="mdi-plus"
|
||||
dense
|
||||
unelevated
|
||||
class="q-px-sm q-mb-lg"
|
||||
label="Properties"
|
||||
icon="mdi-plus"
|
||||
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
|
||||
|
|
@ -104,258 +210,210 @@ function shouldShowItem(opt: Option) {
|
|||
formServiceProperties?.additional &&
|
||||
formServiceProperties.additional.length > 0
|
||||
"
|
||||
class="q-gutter-y-md"
|
||||
>
|
||||
<div
|
||||
v-for="(p, index) in formServiceProperties.additional"
|
||||
:key="index"
|
||||
class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
|
||||
: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 ?? ''
|
||||
<transition-group tag="div" name="list" class="q-gutter-y-md">
|
||||
<div
|
||||
v-for="(p, index) in formServiceProperties.additional"
|
||||
:key="index"
|
||||
class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
|
||||
:class="
|
||||
index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
|
||||
"
|
||||
class="col q-mr-md"
|
||||
label="Properties Name"
|
||||
:option-value="
|
||||
(v) =>
|
||||
p.fieldName !== null
|
||||
? {
|
||||
fieldName: v.value,
|
||||
type: null,
|
||||
}
|
||||
: (p.fieldName = v.value)
|
||||
"
|
||||
:options="propertiesOption"
|
||||
v-model="formServiceProperties.additional"
|
||||
:ref="`item-${index}`"
|
||||
>
|
||||
<template v-slot:before-options>
|
||||
<q-item
|
||||
class="row items-center col-12"
|
||||
clickable
|
||||
@click="selectAll = !selectAll"
|
||||
>
|
||||
<q-checkbox size="sm" class="q-pr-md" v-model="selectAll" />
|
||||
เลือกทั้งหมด
|
||||
</q-item>
|
||||
<q-separator />
|
||||
</template>
|
||||
<q-btn
|
||||
id="btn-move-up-product"
|
||||
icon="mdi-arrow-up"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="index === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click="moveItemUp(index)"
|
||||
/>
|
||||
<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-item
|
||||
v-if="scope.opt"
|
||||
v-bind="scope.itemProps"
|
||||
class="row items-center col-12"
|
||||
>
|
||||
<q-checkbox
|
||||
size="sm"
|
||||
class="q-pr-md"
|
||||
v-model="scope.selected"
|
||||
v-bind="scope.itemProps"
|
||||
/>
|
||||
{{ scope.opt.label }}
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select> -->
|
||||
<q-avatar
|
||||
size="md"
|
||||
class="q-mx-lg"
|
||||
style="background-color: var(--surface-3)"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</q-avatar>
|
||||
|
||||
<q-select
|
||||
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">
|
||||
<!-- type -->
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
label="Type"
|
||||
class="col q-mr-md"
|
||||
label="Properties Name"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:options="typeOption"
|
||||
v-model="p.type"
|
||||
:options="propertiesOption"
|
||||
v-model="p.fieldName"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
<q-item
|
||||
v-if="scope.opt"
|
||||
v-if="scope.opt && shouldShowItem(scope.opt)"
|
||||
v-bind="scope.itemProps"
|
||||
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 }}
|
||||
</q-item>
|
||||
</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>
|
||||
|
||||
<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 class="col">
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
label="Type"
|
||||
option-value="value"
|
||||
:options="typeOption"
|
||||
v-model="p.type"
|
||||
>
|
||||
<template v-slot:option="scope">
|
||||
<q-item
|
||||
v-if="scope.opt"
|
||||
v-bind="scope.itemProps"
|
||||
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})`"
|
||||
/>
|
||||
</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">
|
||||
<q-checkbox v-model="comma" size="xs" />
|
||||
ใส่ comma
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -367,4 +425,8 @@ function shouldShowItem(opt: Option) {
|
|||
border-bottom-left-radius: var(--radius-2);
|
||||
border-bottom-right-radius: var(--radius-2);
|
||||
}
|
||||
|
||||
// .list-move {
|
||||
// transition: all 0.2s ease;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export interface Attributes {
|
|||
}[];
|
||||
}
|
||||
|
||||
type AdditionalType = 'string' | 'number' | 'date' | 'array';
|
||||
export type AdditionalType = 'string' | 'number' | 'date' | 'array';
|
||||
// Product
|
||||
|
||||
export interface ServiceById {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue