mirror of
https://github.com/hay-kot/homebox.git
synced 2025-07-25 20:10:27 +00:00
chore: cleanup (#27)
* implement password score UI and functions * update strings tests to use `test`instead of `it` * update typing * refactor login/register UI+Logic * fix width on switches to properly display * fetch and store self in store * (WIP) unify card styles * update labels page * bump nuxt * use form area * use text area for description * unify confirm API * unify UI around pages * change header background height
This commit is contained in:
Hayden
GitHub
parent
b34cb2bbeb
commit
2e82398e5c
24 changed files with 1313 additions and 1934 deletions
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { useAuthStore } from "~~/stores/auth";
|
||||
import { useItemStore } from "~~/stores/items";
|
||||
import { useLabelStore } from "~~/stores/labels";
|
||||
import { useLocationStore } from "~~/stores/locations";
|
||||
|
|
@ -12,6 +13,19 @@
|
|||
|
||||
const api = useUserApi();
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
if (auth.self === null) {
|
||||
const { data, error } = await api.self();
|
||||
if (error) {
|
||||
navigateTo("/login");
|
||||
}
|
||||
|
||||
auth.$patch({ self: data.item });
|
||||
|
||||
console.log(auth.self);
|
||||
}
|
||||
|
||||
const itemsStore = useItemStore();
|
||||
const items = computed(() => itemsStore.items);
|
||||
|
||||
|
|
@ -87,7 +101,7 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<BaseContainer class="space-y-16 pb-16">
|
||||
<div>
|
||||
<BaseModal v-model="importDialog">
|
||||
<template #title> Import CSV File </template>
|
||||
<p>
|
||||
|
|
@ -98,6 +112,7 @@
|
|||
<form @submit.prevent="submitCsvFile">
|
||||
<div class="flex flex-col gap-2 py-6">
|
||||
<input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
|
||||
|
||||
<BaseButton type="button" @click="uploadCsv">
|
||||
<Icon class="h-5 w-5 mr-2" name="mdi-upload" />
|
||||
Upload
|
||||
|
|
@ -112,69 +127,58 @@
|
|||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
|
||||
<section aria-labelledby="profile-overview-title" class="mt-8">
|
||||
<div class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<h2 id="profile-overview-title" class="sr-only">Profile Overview</h2>
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">Welcome back,</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">Username</p>
|
||||
<p class="text-sm font-medium text-gray-600">User</p>
|
||||
<BaseContainer class="flex flex-col gap-16 pb-16">
|
||||
<section>
|
||||
<BaseCard>
|
||||
<template #title> Welcome Back, {{ auth.self ? auth.self.name : "Username" }} </template>
|
||||
<template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template>
|
||||
<template #title-actions>
|
||||
<div class="flex justify-end gap-2">
|
||||
<div class="tooltip" data-tip="Import CSV File">
|
||||
<button class="btn btn-primary btn-sm" @click="openDialog">
|
||||
<Icon name="mdi-database" class="mr-2"></Icon>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
<BaseButton type="button" size="sm">
|
||||
<Icon class="h-5 w-5 mr-2" name="mdi-person" />
|
||||
Profile
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
|
||||
>View profile</a
|
||||
>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 divide-y divide-gray-300 border-t border-gray-300 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
>
|
||||
<div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
|
||||
<span class="text-gray-900">{{ stat.value.value }}</span>
|
||||
{{ " " }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 divide-y divide-gray-200 border-t border-gray-200 bg-gray-50 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
>
|
||||
<div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
|
||||
<span class="text-gray-900">{{ stat.value.value }}</span>
|
||||
{{ " " }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
|
||||
<LocationCard v-for="location in locations" :key="location.id" :location="location" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
|
||||
<LocationCard v-for="location in locations" :key="location.id" :location="location" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5">
|
||||
Items
|
||||
<template #description>
|
||||
<div class="tooltip" data-tip="Import CSV File">
|
||||
<button class="btn btn-primary btn-sm" @click="openDialog">
|
||||
<Icon name="mdi-database" class="mr-2"></Icon>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
<div class="grid sm:grid-cols-2 gap-4">
|
||||
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue