95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<template>
|
|
<div :class="['grid', selectedSet ? 'grid-cols-4' : 'grid-cols-3']">
|
|
<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>
|
|
|
|
<div class="flex flex-col" v-if="selectedRoom?.id">
|
|
<button
|
|
v-for="storage of storages"
|
|
@click="emit('selectStorage', storage)"
|
|
:class="[
|
|
selectedSet?.id === storage.id || selectedStorage?.id === storage.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
|
|
>{{ 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" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col" v-if="selectedSet">
|
|
<button
|
|
v-for="storage of selectedSet.storages"
|
|
@click="emit('selectStorage', storage)"
|
|
:class="[
|
|
'hover:bg-blue-100',
|
|
'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
|
|
]"
|
|
>
|
|
<span>{{ storage.displayName }} ({{ storage.itemCount }})</span>
|
|
<ChevronRightIcon class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col" v-if="selectedStorage?.items">
|
|
<button
|
|
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',
|
|
]"
|
|
>
|
|
<span>{{ item.item.displayName }}</span>
|
|
<ChevronRightIcon class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ChevronRightIcon } from '@heroicons/vue/24/outline';
|
|
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<{
|
|
(e: 'selectStorage', storage: StorageSharedType): void;
|
|
(e: 'selectRoom', room: RoomLayoutObject): void;
|
|
}>();
|
|
</script>
|