homemanager-fe/src/views/building/floors/ItemSelector.vue

<template>
  <div
    :class="[
      'flex flex-col md:grid',
      selectedSet ? 'md:grid-cols-4' : 'md: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>

    <template v-if="selectedRoom?.id">
      <div class="my-2 flex justify-center md:hidden">
        <ChevronDoubleDownIcon class="h-6 w-6" />
      </div>

      <div class="flex flex-col">
        <button
          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',
          ]"
        >
          <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 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>
      </div>
    </template>

    <template v-if="selectedSet">
      <div class="my-2 flex justify-center md:hidden">
        <ChevronDoubleDownIcon class="h-6 w-6" />
      </div>

      <div class="flex flex-col">
        <button
          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',
          ]"
        >
          <span>{{ storage.displayName }} ({{ storage.itemCount }})</span>
          <ChevronRightIcon class="h-4 w-4" />
        </button>

        <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>
      </div>
    </template>

    <template v-if="selectedStorage?.items">
      <div class="my-2 flex justify-center md:hidden">
        <ChevronDoubleDownIcon class="h-6 w-6" />
      </div>

      <div class="flex flex-col">
        <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 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>
      </div>
    </template>

    <div
      class="my-2 mb-4 flex justify-center md:hidden"
      v-if="selectedStorage?.items?.length"
    >
      <ChevronDoubleDownIcon class="h-6 w-6" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ChevronDoubleDownIcon,
  ChevronRightIcon,
  PlusIcon,
} 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,
    parentSet?: StorageSetListItem
  ): void;
  (e: 'selectRoom', room: RoomLayoutObject): void;
  (e: 'newStorage', set: boolean | StorageSetListItem): void;
  (e: 'addItem', storage: StorageListItem): void;
}>();
</script>