422 lines
12 KiB
Vue
422 lines
12 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { Option } from 'src/stores/options/types';
|
|
import { Attributes } from 'src/stores/product-service/types';
|
|
import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
|
|
|
|
import NoData from '../NoData.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const propertiesOption = defineModel<Option[]>('propertiesOption');
|
|
const formServiceProperties = defineModel<Attributes>('formServiceProperties');
|
|
|
|
const telMax = ref();
|
|
const pointNum = ref();
|
|
|
|
const tel = ref(false);
|
|
const comma = ref(false);
|
|
const point = ref(false);
|
|
const selection = ref(false);
|
|
|
|
const typeOption = ref([
|
|
{
|
|
label: 'Text',
|
|
value: 'string',
|
|
color: 'var(--pink-6-hsl)',
|
|
icon: 'mdi-alpha-t',
|
|
},
|
|
{
|
|
label: 'Number',
|
|
value: 'number',
|
|
color: 'var(--purple-11-hsl)',
|
|
icon: 'mdi-numeric',
|
|
},
|
|
{
|
|
label: 'Date',
|
|
value: 'date',
|
|
color: 'var(--green-9-hsl)',
|
|
icon: 'mdi-calendar-blank-outline',
|
|
},
|
|
{
|
|
label: 'Selection',
|
|
value: 'array',
|
|
color: 'var(--indigo-7-hsl)',
|
|
icon: 'mdi-code-array',
|
|
},
|
|
]);
|
|
|
|
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 shouldShowItem(opt: Option) {
|
|
if (formServiceProperties.value) {
|
|
const additionalFieldNames = new Set(
|
|
formServiceProperties.value.additional.map((o) => o.fieldName),
|
|
);
|
|
return !!opt && !additionalFieldNames.has(opt.value);
|
|
}
|
|
}
|
|
|
|
function confirmDelete(items: unknown[], index: number) {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-alert',
|
|
title: t('deleteConfirmTitle'),
|
|
actionText: t('delete'),
|
|
message: t('deleteConfirmMessage'),
|
|
action: async () => {
|
|
deleteItem(items, index);
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="full-width column no-wrap" style="height: 50vh">
|
|
<div class="row">
|
|
<q-btn-dropdown
|
|
icon="mdi-plus"
|
|
dense
|
|
unelevated
|
|
color="primary"
|
|
label="Properties"
|
|
class="q-px-sm q-mb-lg"
|
|
menu-anchor="bottom end"
|
|
>
|
|
<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 ===
|
|
propertiesOption.length
|
|
"
|
|
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
|
|
v-if="formServiceProperties?.additional.length === 0"
|
|
class="bordered rounded surface-1 flex justify-center items-center col"
|
|
>
|
|
<NoData use-field />
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
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'
|
|
"
|
|
>
|
|
<div class="col row items-center">
|
|
<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(formServiceProperties.additional, 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(formServiceProperties.additional, index)"
|
|
/>
|
|
|
|
<q-avatar
|
|
size="md"
|
|
class="q-mx-lg"
|
|
style="background-color: var(--surface-3)"
|
|
>
|
|
{{ index + 1 }}
|
|
</q-avatar>
|
|
|
|
<!-- type -->
|
|
<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>
|
|
|
|
<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})`"
|
|
/>
|
|
</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 === 'string'"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
|
|
<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 surface-3 rounded 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="selection" size="xs" />
|
|
เพิ่ม Selection
|
|
</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>
|
|
|
|
<q-btn
|
|
id="btn-delete-work-product"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
flat
|
|
round
|
|
color="negative"
|
|
class="q-ml-sm"
|
|
@click="confirmDelete(formServiceProperties.additional, index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.menu-border {
|
|
border-left: 1px solid var(--border-color);
|
|
border-right: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
border-bottom-left-radius: var(--radius-2);
|
|
border-bottom-right-radius: var(--radius-2);
|
|
}
|
|
</style>
|