mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-24 06:28:34 +01:00
4e260c5a8b
* fix: add empty state to locations list * fix: add empty states for homepage lists * fix: add empty state to notifiers list * fix: update profile notifiers to use translation, add en and pt-pt copy * chore: tweak copy for notifier empty state * fix: add new empty state for search page * fix: update new empty states to use translation strings * chore: eslint fixes, translation * fix: translation key --------- Co-authored-by: Matt Kilgore <matthew@kilgore.dev>
69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import type { ViewType } from "~~/composables/use-preferences";
|
|
import type { ItemSummary } from "~~/lib/api/types/data-contracts";
|
|
import MdiDotsVertical from "~icons/mdi/dots-vertical";
|
|
import MdiCardTextOutline from "~icons/mdi/card-text-outline";
|
|
import MdiTable from "~icons/mdi/table";
|
|
|
|
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-2 flex items-center justify-between">
|
|
{{ $t("components.item.view.selectable.items") }}
|
|
<template #description>
|
|
<div v-if="!viewSet" class="dropdown dropdown-left dropdown-hover">
|
|
<label tabindex="0" class="btn btn-ghost m-1">
|
|
<MdiDotsVertical class="size-7" />
|
|
</label>
|
|
<ul tabindex="0" class="dropdown-content menu rounded-box w-32 bg-base-100 p-2 shadow">
|
|
<li>
|
|
<button @click="setViewPreference('card')">
|
|
<MdiCardTextOutline class="size-5" />
|
|
{{ $t("components.item.view.selectable.card") }}
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button @click="setViewPreference('table')">
|
|
<MdiTable class="size-5" />
|
|
{{ $t("components.item.view.selectable.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 gap-4 sm:grid-cols-2 md:grid-cols-3">
|
|
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
|
<div class="hidden first:block">{{ $t("components.item.view.selectable.no_items") }}</div>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped></style>
|