From 6bbe62823d5f5fe94b6651998502295d2925ca79 Mon Sep 17 00:00:00 2001 From: Hayden <64056131+hay-kot@users.noreply.github.com> Date: Sat, 3 Sep 2022 01:17:57 -0800 Subject: [PATCH] style updates --- frontend/components/App/Header.vue | 88 +++++++++++---------- frontend/components/Base/ActionsDivider.vue | 31 ++++---- frontend/components/Base/Details.vue | 6 +- frontend/components/Base/SectionHeader.vue | 19 ++++- frontend/components/Form/Multiselect.vue | 2 +- frontend/components/Item/Card.vue | 30 +++++++ frontend/components/Item/CreateModal.vue | 16 +++- frontend/components/Label/Chip.vue | 28 +++++-- frontend/components/Location/Card.vue | 37 +++++++++ frontend/lib/api/classes/items.ts | 54 +++++++++++++ frontend/lib/api/classes/locations.ts | 3 + frontend/lib/api/user.ts | 3 + frontend/nuxt.config.ts | 4 + frontend/pages/home.vue | 82 +++++++++++++++---- frontend/pages/index.vue | 7 +- frontend/pages/label/[id].vue | 2 +- frontend/pages/location/[id].vue | 11 ++- frontend/public/favicon.svg | 1 + frontend/stores/auth.ts | 20 ++--- 19 files changed, 337 insertions(+), 107 deletions(-) create mode 100644 frontend/components/Item/Card.vue create mode 100644 frontend/components/Location/Card.vue create mode 100644 frontend/lib/api/classes/items.ts create mode 100644 frontend/public/favicon.svg diff --git a/frontend/components/App/Header.vue b/frontend/components/App/Header.vue index 03e0b31..54d2e0f 100644 --- a/frontend/components/App/Header.vue +++ b/frontend/components/App/Header.vue @@ -64,48 +64,52 @@ - -

- HomeB - - x -

-
- -
-
-
- -
    -
  • - -
    • -
+
+ + + +

+ HomeB + + x +

+
+
-
+
+
+ +
    +
  • + +
    • +
+
+
+ diff --git a/frontend/components/Base/ActionsDivider.vue b/frontend/components/Base/ActionsDivider.vue index 0affe50..a6ab6df 100644 --- a/frontend/components/Base/ActionsDivider.vue +++ b/frontend/components/Base/ActionsDivider.vue @@ -1,21 +1,18 @@ + + diff --git a/frontend/components/Base/Details.vue b/frontend/components/Base/Details.vue index 679e3e5..5521b1e 100644 --- a/frontend/components/Base/Details.vue +++ b/frontend/components/Base/Details.vue @@ -1,7 +1,7 @@ + + + + diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue index 5a7dd1d..e1bbd23 100644 --- a/frontend/components/Item/CreateModal.vue +++ b/frontend/components/Item/CreateModal.vue @@ -26,6 +26,7 @@ diff --git a/frontend/components/Location/Card.vue b/frontend/components/Location/Card.vue new file mode 100644 index 0000000..e13be66 --- /dev/null +++ b/frontend/components/Location/Card.vue @@ -0,0 +1,37 @@ + + + diff --git a/frontend/lib/api/classes/items.ts b/frontend/lib/api/classes/items.ts new file mode 100644 index 0000000..cba979e --- /dev/null +++ b/frontend/lib/api/classes/items.ts @@ -0,0 +1,54 @@ +import { BaseAPI, UrlBuilder } from '../base'; +import { Label } from './labels'; +import { Location } from './locations'; +import { Results } from './types'; + +export interface ItemCreate { + name: string; + description: string; + locationId: string; + labelIds: string[]; +} + +export interface Item { + createdAt: string; + description: string; + id: string; + labels: Label[]; + location: Location; + manufacturer: string; + modelNumber: string; + name: string; + notes: string; + purchaseFrom: string; + purchasePrice: number; + purchaseTime: string; + serialNumber: string; + soldNotes: string; + soldPrice: number; + soldTime: string; + soldTo: string; + updatedAt: string; +} + +export class ItemsApi extends BaseAPI { + async getAll() { + return this.http.get>(UrlBuilder('/items')); + } + + async create(item: ItemCreate) { + return this.http.post(UrlBuilder('/items'), item); + } + + async get(id: string) { + return this.http.get(UrlBuilder(`/items/${id}`)); + } + + async delete(id: string) { + return this.http.delete(UrlBuilder(`/items/${id}`)); + } + + async update(id: string, item: ItemCreate) { + return this.http.put(UrlBuilder(`/items/${id}`), item); + } +} diff --git a/frontend/lib/api/classes/locations.ts b/frontend/lib/api/classes/locations.ts index cff7904..f696744 100644 --- a/frontend/lib/api/classes/locations.ts +++ b/frontend/lib/api/classes/locations.ts @@ -1,4 +1,5 @@ import { BaseAPI, UrlBuilder } from '../base'; +import { Item } from './items'; import { Details, OutType, Results } from './types'; export type LocationCreate = Details; @@ -6,6 +7,8 @@ export type LocationCreate = Details; export type Location = LocationCreate & OutType & { groupId: string; + items: Item[]; + itemCount: number; }; export type LocationUpdate = LocationCreate; diff --git a/frontend/lib/api/user.ts b/frontend/lib/api/user.ts index ee39f1c..9df5ab5 100644 --- a/frontend/lib/api/user.ts +++ b/frontend/lib/api/user.ts @@ -1,5 +1,6 @@ import { Requests } from '~~/lib/requests'; import { BaseAPI, UrlBuilder } from './base'; +import { ItemsApi } from './classes/items'; import { LabelsApi } from './classes/labels'; import { LocationsApi } from './classes/locations'; @@ -17,11 +18,13 @@ export type User = { export class UserApi extends BaseAPI { locations: LocationsApi; labels: LabelsApi; + items: ItemsApi; constructor(requests: Requests) { super(requests); this.locations = new LocationsApi(requests); this.labels = new LabelsApi(requests); + this.items = new ItemsApi(requests); Object.freeze(this); } diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts index 898fc65..cabf97e 100644 --- a/frontend/nuxt.config.ts +++ b/frontend/nuxt.config.ts @@ -4,6 +4,10 @@ import { defineNuxtConfig } from 'nuxt'; export default defineNuxtConfig({ ssr: false, modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt', '@vueuse/nuxt'], + meta: { + title: 'Homebox', + link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }], + }, vite: { server: { proxy: { diff --git a/frontend/pages/home.vue b/frontend/pages/home.vue index 23f7dfe..540c8d3 100644 --- a/frontend/pages/home.vue +++ b/frontend/pages/home.vue @@ -17,33 +17,85 @@ const { data } = await api.labels.getAll(); return data.items; }); + + const { data: items } = useAsyncData('items', async () => { + const { data } = await api.items.getAll(); + return data.items; + }); + + const totalItems = computed(() => items.value?.length || 0); + const totalLocations = computed(() => locations.value?.length || 0); + const totalLabels = computed(() => labels.value?.length || 0); + + const stats = [ + { + label: 'Locations', + value: totalLocations, + }, + { + label: 'Items', + value: totalItems, + }, + { + label: 'Labels', + value: totalLabels, + }, + ]; diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg new file mode 100644 index 0000000..83cb12b --- /dev/null +++ b/frontend/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/stores/auth.ts b/frontend/stores/auth.ts index f2f1b43..5d9f30e 100644 --- a/frontend/stores/auth.ts +++ b/frontend/stores/auth.ts @@ -1,19 +1,19 @@ -import { UserApi } from "~~/lib/api/user"; -import { defineStore } from "pinia"; -import { useLocalStorage } from "@vueuse/core"; +import { UserApi } from '~~/lib/api/user'; +import { defineStore } from 'pinia'; +import { useLocalStorage } from '@vueuse/core'; -export const useAuthStore = defineStore("auth", { +export const useAuthStore = defineStore('auth', { state: () => ({ - token: useLocalStorage("pinia/auth/token", ""), - expires: useLocalStorage("pinia/auth/expires", ""), + token: useLocalStorage('pinia/auth/token', ''), + expires: useLocalStorage('pinia/auth/expires', ''), }), getters: { - isTokenExpired: (state) => { + isTokenExpired: state => { if (!state.expires) { return true; } - if (typeof state.expires === "string") { + if (typeof state.expires === 'string') { return new Date(state.expires) < new Date(); } @@ -28,8 +28,8 @@ export const useAuthStore = defineStore("auth", { return result; } - this.token = ""; - this.expires = ""; + this.token = ''; + this.expires = ''; return result; },