62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
|
<StandardLayout>
|
|
<PageHead bordered
|
|
><h1 class="text-2xl font-bold">{{ $t('dashboard.title') }}</h1></PageHead
|
|
>
|
|
|
|
<p>{{ $t('dashboard.intro', { name: user.name }) }}</p>
|
|
|
|
<template v-if="expiringItems?.length">
|
|
<PageHead class="mt-4"
|
|
><h2 class="text-xl font-bold">
|
|
{{ $t('dashboard.expiringSoon') }}
|
|
</h2></PageHead
|
|
>
|
|
|
|
<div
|
|
class="flex flex-nowrap gap-1 overflow-x-scroll px-1 py-1 md:overflow-hidden"
|
|
>
|
|
<StoredItemCard
|
|
v-for="item of expiringItems"
|
|
:stored-item="item"
|
|
class="whitespace-nowrap rounded-md bg-white px-2 py-2 shadow-md ring-1 ring-black ring-opacity-5"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<PageHead class="mt-4">
|
|
<h2 class="text-xl font-bold">{{ $t('common.buildings') }}</h2>
|
|
</PageHead>
|
|
|
|
<div
|
|
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
|
|
v-if="buildings?.length"
|
|
>
|
|
<BuildingListItem v-for="building of buildings" :building="building" />
|
|
</div>
|
|
</StandardLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { useUserStore } from '../store/user.store';
|
|
import StandardLayout from '../components/StandardLayout.vue';
|
|
import PageHead from '../components/PageHead.vue';
|
|
import { useBuildingStore } from '../store/building.store';
|
|
import { storeToRefs } from 'pinia';
|
|
import BuildingListItem from './building/BuildingListItem.vue';
|
|
import { useStorageStore } from '../store/storage.store';
|
|
import StoredItemCard from '../components/item/StoredItemCard.vue';
|
|
|
|
const userStore = useUserStore();
|
|
const storageStore = useStorageStore();
|
|
const buildingStore = useBuildingStore();
|
|
const { buildings, loadingBuildings } = storeToRefs(buildingStore);
|
|
const { expiringItems, loadingExpiringItems } = storeToRefs(storageStore);
|
|
const user = ref(userStore.user);
|
|
|
|
onMounted(() => {
|
|
storageStore.getExpiringItems();
|
|
});
|
|
</script>
|