forked from mirrors/homebox
feat: new dashboard implementation (#168)
* wip: charts.js experimental work * update lock file * wip: frontend redesign * wip: more UI fixes for consistency across themes * cleanup * improve UI log * style updates * fix lint errors
This commit is contained in:
Hayden
GitHub
parent
a3954dab0f
commit
6a8a25e3f8
42 changed files with 1690 additions and 296 deletions
|
|
@ -1,20 +1,174 @@
|
|||
<template>
|
||||
<div>
|
||||
<!--
|
||||
Confirmation Modal is a singleton used by all components so we render
|
||||
it here to ensure it's always available. Possibly could move this further
|
||||
up the tree
|
||||
-->
|
||||
<ModalConfirm />
|
||||
<AppImportDialog v-model="modals.import" />
|
||||
<ItemCreateModal v-model="modals.item" />
|
||||
<LabelCreateModal v-model="modals.label" />
|
||||
<LocationCreateModal v-model="modals.location" />
|
||||
<AppToast />
|
||||
<AppHeader />
|
||||
<main>
|
||||
<slot></slot>
|
||||
</main>
|
||||
<div class="drawer drawer-mobile">
|
||||
<input id="my-drawer-2" v-model="drawerToggle" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-content justify-center bg-base-300">
|
||||
<AppHeaderDecor class="-mt-10" />
|
||||
<slot></slot>
|
||||
|
||||
<!-- Button -->
|
||||
<label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden fixed bottom-2 right-2">
|
||||
<Icon name="mdi-menu" class="h-6 w-6" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="drawer-side shadow-lg">
|
||||
<label for="my-drawer-2" class="drawer-overlay"></label>
|
||||
|
||||
<!-- Top Section -->
|
||||
<div class="w-60 py-5 md:py-10 bg-base-200 flex flex-grow-1 flex-col">
|
||||
<div class="space-y-8">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<p>Welcome, {{ username }}</p>
|
||||
<NuxtLink class="avatar placeholder" to="/home">
|
||||
<div class="bg-base-300 text-neutral-content rounded-full w-24 p-4">
|
||||
<AppLogo />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="flex flex-col bg-base-200">
|
||||
<div class="mx-auto w-40 mb-6">
|
||||
<div class="dropdown overflow visible w-40">
|
||||
<label tabindex="0" class="btn btn-primary btn-block text-lg text-no-transform">
|
||||
<span>
|
||||
<Icon name="mdi-plus" class="mr-1 -ml-1" />
|
||||
</span>
|
||||
Create
|
||||
</label>
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
|
||||
<li v-for="btn in dropdown" :key="btn.name">
|
||||
<button @click="btn.action">
|
||||
{{ btn.name }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="flex flex-col mx-auto gap-2 w-40 menu">
|
||||
<li v-for="n in nav" :key="n.id" class="text-xl" @click="unfocus">
|
||||
<NuxtLink
|
||||
v-if="n.to"
|
||||
class="rounded-btn"
|
||||
:to="n.to"
|
||||
:class="{
|
||||
'bg-secondary text-secondary-content': n.active?.value,
|
||||
}"
|
||||
>
|
||||
<Icon :name="n.icon" class="h-6 w-6 mr-4" />
|
||||
{{ n.name }}
|
||||
</NuxtLink>
|
||||
<button v-else class="rounded-btn" @click="n.action">
|
||||
<Icon :name="n.icon" class="h-6 w-6 mr-4" />
|
||||
{{ n.name }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom -->
|
||||
<button class="mt-auto mx-2 hover:bg-base-300 p-3 rounded-btn" @click="logout">Sign Out</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useAuthStore } from "~~/stores/auth";
|
||||
import { useLabelStore } from "~~/stores/labels";
|
||||
import { useLocationStore } from "~~/stores/locations";
|
||||
|
||||
/**
|
||||
* Store Provider Initialization
|
||||
*/
|
||||
const username = computed(() => authStore.self?.name || "User");
|
||||
|
||||
const modals = reactive({
|
||||
item: false,
|
||||
location: false,
|
||||
label: false,
|
||||
import: false,
|
||||
});
|
||||
|
||||
const dropdown = [
|
||||
{
|
||||
name: "Item / Asset",
|
||||
action: () => {
|
||||
modals.item = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Location",
|
||||
action: () => {
|
||||
modals.location = true;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Label",
|
||||
action: () => {
|
||||
modals.label = true;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const drawerToggle = ref();
|
||||
|
||||
function unfocus() {
|
||||
// unfocus current element
|
||||
drawerToggle.value = false;
|
||||
}
|
||||
|
||||
const nav = [
|
||||
{
|
||||
icon: "mdi-home",
|
||||
active: computed(() => route.path === "/home"),
|
||||
id: 0,
|
||||
name: "Home",
|
||||
to: "/home",
|
||||
},
|
||||
{
|
||||
icon: "mdi-account",
|
||||
id: 1,
|
||||
active: computed(() => route.path === "/profile"),
|
||||
name: "Profile",
|
||||
to: "/profile",
|
||||
},
|
||||
{
|
||||
icon: "mdi-document",
|
||||
id: 3,
|
||||
active: computed(() => route.path === "/items"),
|
||||
name: "Items",
|
||||
to: "/items",
|
||||
},
|
||||
{
|
||||
icon: "mdi-database",
|
||||
id: 2,
|
||||
name: "Import",
|
||||
action: () => {
|
||||
modals.import = true;
|
||||
},
|
||||
},
|
||||
// {
|
||||
// icon: "mdi-database-export",
|
||||
// id: 5,
|
||||
// name: "Export",
|
||||
// action: () => {
|
||||
// console.log("Export");
|
||||
// },
|
||||
// },
|
||||
];
|
||||
|
||||
const labelStore = useLabelStore();
|
||||
const reLabel = /\/api\/v1\/labels\/.*/gm;
|
||||
|
|
@ -55,4 +209,16 @@
|
|||
rmLocationStoreObserver();
|
||||
eventBus.off(EventTypes.ClearStores, "stores");
|
||||
});
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const api = useUserApi();
|
||||
|
||||
async function logout() {
|
||||
const { error } = await authStore.logout(api);
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
navigateTo("/");
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue