2023-01-25 17:01:58 +00:00
|
|
|
<template>
|
2023-01-26 16:15:59 +00:00
|
|
|
<div
|
|
|
|
:class="[
|
|
|
|
'flex flex-col md:grid',
|
|
|
|
selectedSet ? 'md:grid-cols-4' : 'md:grid-cols-3',
|
|
|
|
]"
|
|
|
|
>
|
2023-01-25 17:01:58 +00:00
|
|
|
<div class="flex flex-col">
|
|
|
|
<button
|
|
|
|
v-for="room of rooms"
|
|
|
|
@click="emit('selectRoom', room)"
|
|
|
|
:class="[
|
|
|
|
selectedRoom?.id === room.id
|
|
|
|
? 'bg-blue-100 hover:bg-blue-200'
|
|
|
|
: 'hover:bg-blue-100',
|
|
|
|
'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
|
|
|
|
]"
|
|
|
|
>
|
|
|
|
<span>{{ room.displayName }}</span> <ChevronRightIcon class="h-4 w-4" />
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
2023-01-26 16:15:59 +00:00
|
|
|
<template v-if="selectedRoom?.id">
|
|
|
|
<div class="my-2 flex justify-center md:hidden">
|
|
|
|
<ChevronDoubleDownIcon class="h-6 w-6" />
|
|
|
|
</div>
|
2023-01-25 20:03:22 +00:00
|
|
|
|
2023-01-26 16:15:59 +00:00
|
|
|
<div class="flex flex-col">
|
2023-01-25 20:03:22 +00:00
|
|
|
<button
|
2023-01-26 16:15:59 +00:00
|
|
|
v-for="storage of storages"
|
|
|
|
@click="emit('selectStorage', storage)"
|
|
|
|
:class="[
|
|
|
|
(isSet(storage) && selectedSet?.id === storage.id) ||
|
|
|
|
(selectedStorage?.id === storage.id && !isSet(storage))
|
|
|
|
? 'bg-blue-100 hover:bg-blue-200'
|
|
|
|
: 'hover:bg-blue-100',
|
|
|
|
'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
|
|
|
|
]"
|
2023-01-25 20:03:22 +00:00
|
|
|
>
|
2023-01-26 16:15:59 +00:00
|
|
|
<span
|
|
|
|
>{{ storage.displayName }}
|
|
|
|
|
|
|
|
<span v-if="!isSet(storage)"
|
|
|
|
>({{ (storage as StorageListItem).itemCount }})</span
|
|
|
|
>
|
|
|
|
<span v-else>
|
|
|
|
(set) ({{
|
|
|
|
(storage as StorageSetListItem).storages.length
|
|
|
|
}})</span
|
|
|
|
>
|
|
|
|
</span>
|
|
|
|
<ChevronRightIcon class="h-4 w-4" />
|
2023-01-25 20:03:22 +00:00
|
|
|
</button>
|
2023-01-26 16:15:59 +00:00
|
|
|
|
|
|
|
<div class="mx-auto flex space-x-2 py-2">
|
|
|
|
<button
|
|
|
|
@click="emit('newStorage', false)"
|
|
|
|
class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
|
|
|
|
>
|
|
|
|
<PlusIcon class="h-4 w-4" /> <span>Add Storage</span>
|
|
|
|
</button>
|
|
|
|
<span>·</span>
|
|
|
|
<button
|
|
|
|
@click="emit('newStorage', true)"
|
|
|
|
class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
|
|
|
|
>
|
|
|
|
<PlusIcon class="h-4 w-4" /> <span>Add Storage Set</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
2023-01-25 20:03:22 +00:00
|
|
|
</div>
|
2023-01-26 16:15:59 +00:00
|
|
|
</template>
|
2023-01-25 17:01:58 +00:00
|
|
|
|
2023-01-26 16:15:59 +00:00
|
|
|
<template v-if="selectedSet">
|
|
|
|
<div class="my-2 flex justify-center md:hidden">
|
|
|
|
<ChevronDoubleDownIcon class="h-6 w-6" />
|
|
|
|
</div>
|
2023-01-25 20:03:22 +00:00
|
|
|
|
2023-01-26 16:15:59 +00:00
|
|
|
<div class="flex flex-col">
|
2023-01-25 20:03:22 +00:00
|
|
|
<button
|
2023-01-26 16:15:59 +00:00
|
|
|
v-for="storage of selectedSet.storages"
|
|
|
|
@click="emit('selectStorage', storage, selectedSet)"
|
|
|
|
:class="[
|
|
|
|
selectedStorage?.id === storage.id && !isSet(storage)
|
|
|
|
? 'bg-blue-100 hover:bg-blue-200'
|
|
|
|
: 'hover:bg-blue-100',
|
|
|
|
'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
|
|
|
|
]"
|
2023-01-25 20:03:22 +00:00
|
|
|
>
|
2023-01-26 16:15:59 +00:00
|
|
|
<span>{{ storage.displayName }} ({{ storage.itemCount }})</span>
|
|
|
|
<ChevronRightIcon class="h-4 w-4" />
|
2023-01-25 20:03:22 +00:00
|
|
|
</button>
|
2023-01-26 16:15:59 +00:00
|
|
|
|
|
|
|
<div class="mx-auto flex space-x-2 py-2">
|
|
|
|
<button
|
|
|
|
@click="emit('newStorage', selectedSet!)"
|
|
|
|
class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
|
|
|
|
>
|
|
|
|
<PlusIcon class="h-4 w-4" /> <span>Add Storage</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
2023-01-25 20:03:22 +00:00
|
|
|
</div>
|
2023-01-26 16:15:59 +00:00
|
|
|
</template>
|
2023-01-25 17:01:58 +00:00
|
|
|
|
2023-01-26 16:15:59 +00:00
|
|
|
<template v-if="selectedStorage?.items">
|
|
|
|
<div class="my-2 flex justify-center md:hidden">
|
|
|
|
<ChevronDoubleDownIcon class="h-6 w-6" />
|
|
|
|
</div>
|
2023-01-25 20:03:22 +00:00
|
|
|
|
2023-01-26 16:15:59 +00:00
|
|
|
<div class="flex flex-col">
|
2023-01-25 20:03:22 +00:00
|
|
|
<button
|
2023-01-26 16:15:59 +00:00
|
|
|
v-for="item of selectedStorage.items"
|
|
|
|
:class="[
|
|
|
|
'hover:bg-blue-100',
|
|
|
|
'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
|
|
|
|
]"
|
2023-01-25 20:03:22 +00:00
|
|
|
>
|
2023-01-26 16:15:59 +00:00
|
|
|
<span>{{ item.item.displayName }}</span>
|
|
|
|
<ChevronRightIcon class="h-4 w-4" />
|
2023-01-25 20:03:22 +00:00
|
|
|
</button>
|
2023-01-26 16:15:59 +00:00
|
|
|
|
|
|
|
<div class="mx-auto flex space-x-2 py-2">
|
|
|
|
<button
|
|
|
|
@click="emit('addItem', selectedStorage!)"
|
|
|
|
class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
|
|
|
|
>
|
|
|
|
<PlusIcon class="h-4 w-4" /> <span>Add Items</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
2023-01-25 20:03:22 +00:00
|
|
|
</div>
|
2023-01-26 16:15:59 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="my-2 mb-4 flex justify-center md:hidden"
|
|
|
|
v-if="selectedStorage?.items?.length"
|
|
|
|
>
|
|
|
|
<ChevronDoubleDownIcon class="h-6 w-6" />
|
2023-01-25 17:01:58 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2023-01-26 16:15:59 +00:00
|
|
|
import {
|
|
|
|
ChevronDoubleDownIcon,
|
|
|
|
ChevronRightIcon,
|
|
|
|
PlusIcon,
|
|
|
|
} from '@heroicons/vue/24/outline';
|
2023-01-25 17:01:58 +00:00
|
|
|
import isSet from '../../../utils/is-storage-set';
|
|
|
|
import {
|
|
|
|
StorageListItem,
|
|
|
|
StorageSetListItem,
|
|
|
|
StorageSharedType,
|
|
|
|
} from '../../../interfaces/storage.interfaces';
|
|
|
|
import { RoomLayoutObject } from '../../../interfaces/room.interfaces';
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
|
|
rooms: RoomLayoutObject[];
|
|
|
|
storages: StorageSharedType[];
|
|
|
|
selectedRoom?: RoomLayoutObject;
|
|
|
|
selectedSet?: StorageSetListItem;
|
|
|
|
selectedStorage?: StorageListItem;
|
|
|
|
}>();
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
2023-01-26 16:15:59 +00:00
|
|
|
(
|
|
|
|
e: 'selectStorage',
|
|
|
|
storage: StorageSharedType,
|
|
|
|
parentSet?: StorageSetListItem
|
|
|
|
): void;
|
2023-01-25 17:01:58 +00:00
|
|
|
(e: 'selectRoom', room: RoomLayoutObject): void;
|
2023-01-25 20:03:22 +00:00
|
|
|
(e: 'newStorage', set: boolean | StorageSetListItem): void;
|
|
|
|
(e: 'addItem', storage: StorageListItem): void;
|
2023-01-25 17:01:58 +00:00
|
|
|
}>();
|
|
|
|
</script>
|