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,12 +55,44 @@ defineEmits<{
|
|||
(e: 'addProperties'): void;
|
||||
}>();
|
||||
|
||||
function addProperties() {
|
||||
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: null,
|
||||
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) {
|
||||
if (!formServiceProperties.value) return;
|
||||
|
|
@ -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,8 +210,8 @@ function shouldShowItem(opt: Option) {
|
|||
formServiceProperties?.additional &&
|
||||
formServiceProperties.additional.length > 0
|
||||
"
|
||||
class="q-gutter-y-md"
|
||||
>
|
||||
<transition-group tag="div" name="list" class="q-gutter-y-md">
|
||||
<div
|
||||
v-for="(p, index) in formServiceProperties.additional"
|
||||
:key="index"
|
||||
|
|
@ -113,24 +219,27 @@ function shouldShowItem(opt: Option) {
|
|||
:class="
|
||||
index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
|
||||
"
|
||||
:ref="`item-${index}`"
|
||||
>
|
||||
<q-btn
|
||||
id="btn-swap-work-product"
|
||||
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-swap-work-product"
|
||||
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)"
|
||||
/>
|
||||
|
||||
<q-avatar
|
||||
|
|
@ -141,59 +250,7 @@ function shouldShowItem(opt: Option) {
|
|||
{{ 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"
|
||||
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-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>
|
||||
|
||||
<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> -->
|
||||
|
||||
<!-- type -->
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -356,6 +413,7 @@ function shouldShowItem(opt: Option) {
|
|||
@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