forked from mirrors/homebox
3d295b5132
* location tree API * test fixes * initial tree location elements * locations tree page * update meta-data * code-gen * store item display preferences * introduce basic table/card view elements * codegen * set parent location during location creation * add item support for tree query * refactor tree view * wip: location selector improvements * type gen * rename items -> search * remove various log statements * fix markdown rendering for description * update location selectors * fix tests * fix currency tests * formatting
65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
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>
|