81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<PageHead bordered>
|
|
<h2 class="text-2xl font-bold">{{ storage.displayName }}</h2>
|
|
|
|
<Menu
|
|
title="Actions"
|
|
:options="[
|
|
{
|
|
title: 'Add new item',
|
|
onClick: addNewItem,
|
|
},
|
|
]"
|
|
/>
|
|
</PageHead>
|
|
|
|
<span class="text-xl font-bold text-gray-400" v-if="!storage.items?.length"
|
|
>No items in storage.</span
|
|
>
|
|
<div class="grid gap-2 md:grid-cols-2" v-else>
|
|
<StoredItemCard
|
|
v-for="stored of storage.items || []"
|
|
class="rounded-md bg-white px-2 py-2 shadow-md ring-1 ring-black ring-opacity-5"
|
|
size="lg"
|
|
:stored-item="stored"
|
|
>
|
|
<template #actions>
|
|
<Menu
|
|
title=""
|
|
button-class="px-0.5 py-0.5"
|
|
:options="[
|
|
{ title: 'Change details' },
|
|
{ title: 'Add transaction' },
|
|
]"
|
|
>
|
|
<EllipsisVerticalIcon class="h-5 w-5" />
|
|
</Menu>
|
|
</template>
|
|
</StoredItemCard>
|
|
</div>
|
|
|
|
<NewItemModal ref="newItem" @added="newStoredItemAdded" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
|
|
import { ref } from 'vue';
|
|
import NewItemModal from '../../../../components/item/NewItemModal.vue';
|
|
import StoredItemCard from '../../../../components/item/StoredItemCard.vue';
|
|
import Menu from '../../../../components/menu/Menu.vue';
|
|
import PageHead from '../../../../components/PageHead.vue';
|
|
import { BuildingListItem } from '../../../../interfaces/building.interfaces';
|
|
import {
|
|
StorageListItem,
|
|
StoredItem,
|
|
} from '../../../../interfaces/storage.interfaces';
|
|
|
|
const newItem = ref<InstanceType<typeof NewItemModal>>();
|
|
const props = defineProps<{
|
|
storage: StorageListItem;
|
|
building: BuildingListItem;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'storageAdded', item: StoredItem): void;
|
|
}>();
|
|
|
|
const newStoredItemAdded = (item: StoredItem) => {
|
|
emit('storageAdded', item);
|
|
};
|
|
|
|
const addNewItem = () => {
|
|
newItem.value?.openModal(props.building, props.storage);
|
|
};
|
|
|
|
defineExpose({
|
|
addNewItem,
|
|
});
|
|
</script>
|