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

refactor: component dialog, select input, select zone, tree view

Browse source
This commit is contained in:
puriphatt 2024-10-02 15:06:39 +07:00
parent 5d292c5a5c
commit 51f41abc4b
4 changed files with 109 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/shared/SelectZone.vue
View file

@ -7,23 +7,50 @@ const props = withDefaults(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
items: any;
color?: string;
borderSearchSection?: boolean;
itemClass?: string;
noPadding?: boolean;
noItemsIcon?: string;
noItemsLabel?: string;
}>(),
{
items: () => [],
color: 'var(--brand-1)',
noItemsIcon: 'mdi-close',
itemClass: 'col-md-2 col-sm-6 col-12',
},
);
function select(item: unknown) {
if (selectedItem.value.includes(item)) {
let index = selectedItem.value.indexOf(item);
selectedItem.value.splice(index, 1);
} else selectedItem.value.push(item);
defineExpose({ select });
function select(item?: unknown, all?: boolean) {
if (all) {
if (props.items.every((item) => selectedItem.value.includes(item))) {
selectedItem.value = selectedItem.value.filter(
(item) => !props.items.includes(item),
);
} else {
props.items.forEach((i) => {
const productExists = selectedItem.value.some((item) => item === i);
if (!productExists) {
selectedItem.value.push(i);
}
});
}
} else {
if (selectedItem.value.includes(item)) {
const index = selectedItem.value.indexOf(item);
selectedItem.value.splice(index, 1);
} else selectedItem.value.push(item);
}
}
</script>
<template>
<section class="full-width column q-pa-md">
<header class="row items-center no-wrap q-mb-md">
<section class="full-width column">
<header
class="row items-center no-wrap q-px-md q-py-sm"
:class="{ 'bordered surface-3 ': borderSearchSection }"
>
<div class="col"><slot name="top"></slot></div>
<q-input
for="input-search"
@ -40,14 +67,11 @@ function select(item: unknown) {
</template>
</q-input>
</header>
<slot name="tab"></slot>
<section class="col">
<div class="row q-col-gutter-md">
<div
v-for="(item, i) in items"
:key="i"
class="col-md-2 col-sm-6 col-12"
>
<section class="col q-ma-md">
<div v-if="items.length > 0" class="row q-col-gutter-md">
<div v-for="(item, i) in items" :key="i" :class="`${itemClass}`">
<div
class="rounded cursor-pointer relative-position"
:style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
@ -64,6 +88,14 @@ function select(item: unknown) {
</div>
</div>
</div>
<div v-else class="flex justify-center full-height">
<span class="col column items-center justify-center app-text-muted">
<q-avatar style="background: var(--surface-0)" class="q-mb-md">
<q-icon :name="noItemsIcon" />
</q-avatar>
{{ noItemsLabel || $t('general.noData') }}
</span>
</div>
</section>
</section>
</template>