homebox/frontend/components/Item/View/Selectable.vue

<script setup lang="ts">
  import { ViewType } from "~~/composables/use-preferences";
  import { ItemSummary } from "~~/lib/api/types/data-contracts";

  type Props = {
    view?: ViewType;
    items: ItemSummary[];
  };

  const preferences = useViewPreferences();

  const props = defineProps<Props>();
  const viewSet = computed(() => {
    return !!props.view;
  });

  const itemView = computed(() => {
    return props.view ?? preferences.value.itemDisplayView;
  });

  function setViewPreference(view: ViewType) {
    preferences.value.itemDisplayView = view;
  }
</script>

<template>
  <section>
    <BaseSectionHeader class="mb-5 flex justify-between items-center">
      Items

      <template #description>
        <div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
          <label tabindex="0" class="btn btn-ghost m-1">
            <Icon name="mdi-dots-vertical" class="h-7 w-7" />
          </label>
          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
            <li>
              <button @click="setViewPreference('card')">
                <Icon name="mdi-card-text-outline" class="h-5 w-5" />
                Card
              </button>
            </li>
            <li>
              <button @click="setViewPreference('table')">
                <Icon name="mdi-table" class="h-5 w-5" />
                Table
              </button>
            </li>
          </ul>
        </div>
      </template>
    </BaseSectionHeader>

    <template v-if="itemView === 'table'">
      <ItemViewTable :items="items" />
    </template>
    <template v-else>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <ItemCard v-for="item in items" :key="item.id" :item="item" />
      </div>
    </template>
  </section>
</template>

<style scoped></style>