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

refactor: add new data employee

Browse source
This commit is contained in:
Thanaphon Frappet 2024-10-07 12:55:39 +07:00
parent 204f3ccacd
commit 70cbc4b1d2
2 changed files with 83 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@ const props = withDefaults(
defineProps<{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
items: any;
newItems: any;
color?: string;
borderSearchSection?: boolean;
itemClass?: string;
@ -15,6 +16,7 @@ const props = withDefaults(
}>(),
{
items: () => [],
newItems: () => [],
color: 'var(--brand-1)',
noItemsIcon: 'mdi-close',
itemClass: 'col-md-2 col-sm-6 col-12',
@ -83,24 +85,57 @@ function assignSelect(to: unknown[], from: unknown[]) {
<slot name="tab"></slot>
<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'}`"
@click="() => select(item)"
>
<div v-if="items.length > 0 || newItems.length > 0" class="column">
<!-- NOTE: START - item -->
<div class="row q-col-gutter-md">
<div v-for="(item, i) in items" :key="i" :class="`${itemClass}`">
<div
v-if="selectedItem.includes(item)"
class="badge absolute-top-right flex justify-center q-ma-sm"
:style="`background-color: ${color}`"
class="rounded cursor-pointer relative-position"
:style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
@click="() => select(item)"
>
{{ selectedItem.indexOf(item) + 1 }}
<div
v-if="selectedItem.includes(item)"
class="badge absolute-top-right flex justify-center q-ma-sm"
:style="`background-color: ${color}`"
>
{{ selectedItem.indexOf(item) + 1 }}
</div>
<slot name="data" :item="item"></slot>
</div>
</div>
</div>
<!-- NOTE: END - item -->
<q-separator
v-if="newItems.length !== 0"
dark
inset
:class="{ 'q-mb-md': !$q.screen.lt.md, 'q-my-md': $q.screen.lt.md }"
/>
<!-- NOTE: START - newItem -->
<div v-if="newItems.length !== 0" class="row q-col-gutter-md">
<div v-for="(item, i) in newItems" :key="i" :class="`${itemClass}`">
<div
class="rounded cursor-pointer relative-position"
:style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
@click="() => select(item)"
>
<div
v-if="selectedItem.includes(item)"
class="badge absolute-top-right flex justify-center q-ma-sm"
:style="`background-color: ${color}`"
>
{{ selectedItem.indexOf(item) + 1 }}
</div>
<slot name="newData" :item="item"></slot>
</div>
<slot name="data" :item="item"></slot>
</div>
</div>
</div>
<!-- NOTE: END - newItem -->
<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">