mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-18 13:06:32 +00:00
Code Issues Projects Releases Packages Wiki Activity

frontend: cleanup

Browse source 
* dummy commit

* cleanup workflows

* setup and run eslint

* add linter to CI

* use eslint for formatting

* reorder rules

* drop editor config
This commit is contained in:
Hayden 2022-09-09 14:46:53 -08:00 committed by GitHub
parent 78fa714297
commit 75c633dcb5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
65 changed files with 2048 additions and 641 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.github/workflows/go.yaml → .github/workflows/partial-backend.yaml vendored
View file

@ -32,6 +32,3 @@ jobs:
- name: Test - name: Test
run: task api:coverage run: task api:coverage
- name: Upload coverage to Codecov
run: cd backend && bash <(curl -s https://codecov.io/bash)

4
.github/workflows/frontend.yaml → .github/workflows/partial-frontend.yaml vendored
View file

@ -32,5 +32,9 @@ jobs:
run: pnpm install run: pnpm install
working-directory: frontend working-directory: frontend
- name: Run linter 👀
run: pnpm lint
working-directory: "frontend"
- name: Run Integration Tests - name: Run Integration Tests
run: task test:ci run: task test:ci

4
.github/workflows/publish.yaml vendored
View file

@ -11,11 +11,11 @@ env:
jobs: jobs:
backend-tests: backend-tests:
name: "Backend Server Tests" name: "Backend Server Tests"
uses: hay-kot/homebox/.github/workflows/go.yaml@main uses: hay-kot/homebox/.github/workflows/partial-backend.yaml@main
frontend-tests: frontend-tests:
name: "Frontend and End-to-End Tests" name: "Frontend and End-to-End Tests"
uses: hay-kot/homebox/.github/workflows/frontend.yaml@main uses: hay-kot/homebox/.github/workflows/partial-frontend.yaml@main
deploy: deploy:
name: "Deploy Nightly to Fly.io" name: "Deploy Nightly to Fly.io"

4
.github/workflows/pull-requests.yaml vendored
View file

@ -8,8 +8,8 @@ on:
jobs: jobs:
backend-tests: backend-tests:
name: "Backend Server Tests" name: "Backend Server Tests"
uses: hay-kot/homebox/.github/workflows/go.yaml@main uses: hay-kot/homebox/.github/workflows/partial-backend.yaml@main
frontend-tests: frontend-tests:
name: "Frontend and End-to-End Tests" name: "Frontend and End-to-End Tests"
uses: hay-kot/homebox/.github/workflows/frontend.yaml@main uses: hay-kot/homebox/.github/workflows/partial-frontend.yaml@main

1
README.md
View file

@ -8,6 +8,7 @@
</p> </p>
## MVP Todo ## MVP Todo
- [x] Locations - [x] Locations

12
frontend/.editorconfig
View file

@ -1,12 +0,0 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
[*.{js,jsx,html,sass,vue,ts,tsx,json}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

51
frontend/.eslintrc.js Normal file
View file

@ -0,0 +1,51 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:vue/essential",
"plugin:@typescript-eslint/recommended",
"@nuxtjs/eslint-config-typescript",
"plugin:vue/vue3-recommended",
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
},
plugins: ["vue", "@typescript-eslint"],
rules: {
"no-console": 0,
"no-unused-vars": "off",
"vue/multi-word-component-names": "off",
"vue/no-setup-props-destructure": 0,
"vue/no-multiple-template-root": 0,
"vue/no-v-model-argument": 0,
"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/no-unused-vars": [
"error",
{
ignoreRestSiblings: true,
destructuredArrayIgnorePattern: "_",
caughtErrors: "none",
},
],
"prettier/prettier": [
"warn",
{
arrowParens: "avoid",
semi: true,
tabWidth: 2,
useTabs: false,
vueIndentScriptAndStyle: true,
singleQuote: false,
trailingComma: "es5",
printWidth: 120,
},
],
},
};

10
frontend/.prettierrc
View file

@ -1,10 +0,0 @@
{
"arrowParens": "avoid",
"semi": true,
"tabWidth": 2,
"useTabs": false,
"vueIndentScriptAndStyle": true,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120
}

28
frontend/components/App/Header.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useAuthStore } from '~~/stores/auth'; import { useAuthStore } from "~~/stores/auth";
const authStore = useAuthStore(); const authStore = useAuthStore();
const api = useUserApi(); const api = useUserApi();
@ -10,16 +10,16 @@
return; return;
} }
navigateTo('/'); navigateTo("/");
} }
const links = [ const links = [
{ {
name: 'Home', name: "Home",
href: '/home', href: "/home",
}, },
{ {
name: 'Logout', name: "Logout",
action: logout, action: logout,
last: true, last: true,
}, },
@ -33,19 +33,19 @@
const dropdown = [ const dropdown = [
{ {
name: 'Item / Asset', name: "Item / Asset",
action: () => { action: () => {
modals.item = true; modals.item = true;
}, },
}, },
{ {
name: 'Location', name: "Location",
action: () => { action: () => {
modals.location = true; modals.location = true;
}, },
}, },
{ {
name: 'Label', name: "Label",
action: () => { action: () => {
modals.label = true; modals.label = true;
}, },
@ -66,7 +66,7 @@
<div class="bg-neutral absolute shadow-xl top-0 h-[50vh] max-h-96 sm:h-[28vh] -z-10 w-full"></div> <div class="bg-neutral absolute shadow-xl top-0 h-[50vh] max-h-96 sm:h-[28vh] -z-10 w-full"></div>
<BaseContainer is="header" class="py-6 max-w-none"> <BaseContainer cmp="header" class="py-6 max-w-none">
<BaseContainer> <BaseContainer>
<h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex"> <h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
HomeB HomeB
@ -77,20 +77,22 @@
<template v-for="link in links"> <template v-for="link in links">
<NuxtLink <NuxtLink
v-if="!link.action" v-if="!link.action"
:key="link.name"
class="hover:text-base-content transition-color duration-200 italic" class="hover:text-base-content transition-color duration-200 italic"
:to="link.href" :to="link.href"
> >
{{ link.name }} {{ link.name }}
</NuxtLink> </NuxtLink>
<button <button
for="location-form-modal"
v-else v-else
@click="link.action" :key="link.name + 'link'"
for="location-form-modal"
class="hover:text-base-content transition-color duration-200 italic" class="hover:text-base-content transition-color duration-200 italic"
@click="link.action"
> >
{{ link.name }} {{ link.name }}
</button> </button>
<span v-if="!link.last"> / </span> <span v-if="!link.last" :key="link.name"> / </span>
</template> </template>
</div> </div>
<div class="flex mt-6"> <div class="flex mt-6">
@ -102,7 +104,7 @@
Create Create
</label> </label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"> <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li v-for="btn in dropdown"> <li v-for="btn in dropdown" :key="btn.name">
<button @click="btn.action"> <button @click="btn.action">
{{ btn.name }} {{ btn.name }}
</button> </button>

2
frontend/components/App/Toast.vue
View file

@ -31,7 +31,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useNotifications } from '@/composables/use-notifier'; import { useNotifications } from "@/composables/use-notifier";
const { notifications, dropNotification } = useNotifications(); const { notifications, dropNotification } = useNotifications();
</script> </script>

4
frontend/components/Base/ActionsDivider.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="divider"> <div class="divider">
<div class="btn-group min-w-[180px] flex-nowrap"> <div class="btn-group min-w-[180px] flex-nowrap">
<button @click="$emit('edit')" name="options" class="btn btn-sm btn-primary"> <button name="options" class="btn btn-sm btn-primary" @click="$emit('edit')">
<Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" /> <Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" />
<span> Edit </span> <span> Edit </span>
</button> </button>
<button @click="$emit('delete')" name="options" class="btn btn-sm btn-primary"> <button name="options" class="btn btn-sm btn-primary" @click="$emit('delete')">
<Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" /> <Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" />
<span> Delete </span> <span> Delete </span>
</button> </button>

17
frontend/components/Base/Button.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<NuxtLink <NuxtLink
v-if="to" v-if="to"
:to="to"
v-bind="attributes" v-bind="attributes"
class="btn"
ref="submitBtn" ref="submitBtn"
:to="to"
class="btn"
:class="{ :class="{
loading: loading, loading: loading,
'btn-sm': size === 'sm', 'btn-sm': size === 'sm',
@ -19,8 +19,8 @@
<button <button
v-else v-else
v-bind="attributes" v-bind="attributes"
class="btn"
ref="submitBtn" ref="submitBtn"
class="btn"
:class="{ :class="{
loading: loading, loading: loading,
'btn-sm': size === 'sm', 'btn-sm': size === 'sm',
@ -35,7 +35,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
type Sizes = 'sm' | 'md' | 'lg'; type Sizes = "sm" | "md" | "lg";
const props = defineProps({ const props = defineProps({
loading: { loading: {
@ -48,7 +48,7 @@
}, },
size: { size: {
type: String as () => Sizes, type: String as () => Sizes,
default: 'md', default: "md",
}, },
to: { to: {
type: String as () => string | null, type: String as () => string | null,
@ -67,13 +67,6 @@
}; };
}); });
const is = computed(() => {
if (props.to) {
return 'a';
}
return 'button';
});
const submitBtn = ref(null); const submitBtn = ref(null);
const isHover = useElementHover(submitBtn); const isHover = useElementHover(submitBtn);
</script> </script>

6
frontend/components/Base/Container.vue
View file

@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
defineProps({ defineProps({
is: { cmp: {
type: String, type: String,
default: 'div', default: "div",
}, },
}); });
</script> </script>
<template> <template>
<component :is="is" class="container max-w-6xl mx-auto px-4"> <component :is="cmp" class="container max-w-6xl mx-auto px-4">
<slot /> <slot />
</component> </component>
</template> </template>

2
frontend/components/Base/Details.vue
View file

@ -10,7 +10,7 @@
</div> </div>
<div class="border-t border-gray-300 px-4 py-5 sm:p-0"> <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-300"> <dl class="sm:divide-y sm:divide-gray-300">
<div v-for="(dValue, dKey) in details" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div v-for="(dValue, dKey) in details" :key="dKey" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500"> <dt class="text-sm font-medium text-gray-500">
{{ dKey }} {{ dKey }}
</dt> </dt>

10
frontend/components/Base/Modal.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="z-[999]"> <div class="z-[999]">
<input type="checkbox" :id="modalId" class="modal-toggle" v-model="modal" /> <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle overflow-visible"> <div class="modal modal-bottom sm:modal-middle overflow-visible">
<div class="modal-box overflow-visible relative"> <div class="modal-box overflow-visible relative">
<button @click="close" :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2">✕</button> <button :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2" @click="close">✕</button>
<h3 class="font-bold text-lg"> <h3 class="font-bold text-lg">
<slot name="title"></slot> <slot name="title"></slot>
@ -15,7 +15,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const emit = defineEmits(['cancel', 'update:modelValue']); const emit = defineEmits(["cancel", "update:modelValue"]);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Boolean, type: Boolean,
@ -34,12 +34,12 @@
function close() { function close() {
if (props.readonly) { if (props.readonly) {
emit('cancel'); emit("cancel");
return; return;
} }
modal.value = false; modal.value = false;
} }
const modalId = useId(); const modalId = useId();
const modal = useVModel(props, 'modelValue', emit); const modal = useVModel(props, "modelValue", emit);
</script> </script>

25
frontend/components/Form/DatePicker.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="dropdown dropdown-end w-full" ref="label"> <div ref="label" class="dropdown dropdown-end w-full">
<FormTextField tabindex="0" label="Date" v-model="dateText" :inline="inline" readonly /> <FormTextField v-model="dateText" tabindex="0" label="Date" :inline="inline" readonly />
<div @blur="resetTime" tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64"> <div tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64" @blur="resetTime">
<div class="card-body"> <div class="card-body">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<button class="btn btn-xs" @click="prevMonth"> <button class="btn btn-xs" @click="prevMonth">
@ -13,7 +13,7 @@
</button> </button>
</div> </div>
<div class="grid grid-cols-7 gap-2"> <div class="grid grid-cols-7 gap-2">
<div v-for="d in daysIdx"> <div v-for="d in daysIdx" :key="d">
<p class="text-center"> <p class="text-center">
{{ d }} {{ d }}
</p> </p>
@ -21,12 +21,13 @@
<template v-for="day in days"> <template v-for="day in days">
<button <button
v-if="day.number != ''" v-if="day.number != ''"
:key="day.number"
class="text-center btn-xs btn btn-outline" class="text-center btn-xs btn btn-outline"
@click="select($event, day.date)" @click="select($event, day.date)"
> >
{{ day.number }} {{ day.number }}
</button> </button>
<div v-else></div> <div v-else :key="`${day.number}-empty`"></div>
</template> </template>
</div> </div>
</div> </div>
@ -35,7 +36,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const emit = defineEmits(['update:modelValue', 'update:text']); const emit = defineEmits(["update:modelValue", "update:text"]);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -49,12 +50,12 @@
}, },
}); });
const selected = useVModel(props, 'modelValue', emit); const selected = useVModel(props, "modelValue", emit);
const dateText = computed(() => { const dateText = computed(() => {
if (selected.value) { if (selected.value) {
return selected.value.toLocaleDateString(); return selected.value.toLocaleDateString();
} }
return ''; return "";
}); });
const time = ref(new Date()); const time = ref(new Date());
@ -68,7 +69,7 @@
}); });
const month = computed(() => { const month = computed(() => {
return time.value.toLocaleString('default', { month: 'long' }); return time.value.toLocaleString("default", { month: "long" });
}); });
const year = computed(() => { const year = computed(() => {
@ -86,14 +87,14 @@
} }
const daysIdx = computed(() => { const daysIdx = computed(() => {
return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
}); });
function select(e: MouseEvent, day: Date) { function select(e: MouseEvent, day: Date) {
console.log(day); console.log(day);
selected.value = day; selected.value = day;
console.log(selected.value); console.log(selected.value);
// @ts-ignore // @ts-ignore - this is a vue3 bug
e.target.blur(); e.target.blur();
resetTime(); resetTime();
} }
@ -116,7 +117,7 @@
for (let i = 0; i < firstDay; i++) { for (let i = 0; i < firstDay; i++) {
days.push({ days.push({
number: '', number: "",
date: new Date(), date: new Date(),
}); });
} }

17
frontend/components/Form/Multiselect.vue
View file

@ -1,11 +1,13 @@
<template> <template>
<div class="form-control w-full" ref="menu"> <div ref="menu" class="form-control w-full">
<label class="label"> <label class="label">
<span class="label-text">{{ label }}</span> <span class="label-text">{{ label }}</span>
</label> </label>
<div class="dropdown dropdown-top sm:dropdown-end"> <div class="dropdown dropdown-top sm:dropdown-end">
<div tabindex="0" class="w-full min-h-[48px] flex gap-2 p-4 flex-wrap border border-gray-400 rounded-lg"> <div tabindex="0" class="w-full min-h-[48px] flex gap-2 p-4 flex-wrap border border-gray-400 rounded-lg">
<span class="badge" v-for="itm in value"> {{ name != '' ? itm[name] : itm }} </span> <span v-for="itm in value" :key="name != '' ? itm[name] : itm" class="badge">
{{ name != "" ? itm[name] : itm }}
</span>
</div> </div>
<ul <ul
tabindex="0" tabindex="0"
@ -13,12 +15,13 @@
> >
<li <li
v-for="(obj, idx) in items" v-for="(obj, idx) in items"
:key="idx"
:class="{ :class="{
bordered: selectedIndexes[idx], bordered: selectedIndexes[idx],
}" }"
> >
<button type="button" @click="toggle(idx)"> <button type="button" @click="toggle(idx)">
{{ name != '' ? obj[name] : obj }} {{ name != "" ? obj[name] : obj }}
</button> </button>
</li> </li>
</ul> </ul>
@ -27,11 +30,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(["update:modelValue"]);
const props = defineProps({ const props = defineProps({
label: { label: {
type: String, type: String,
default: '', default: "",
}, },
modelValue: { modelValue: {
type: Array as () => any[], type: Array as () => any[],
@ -43,7 +46,7 @@
}, },
name: { name: {
type: String, type: String,
default: 'name', default: "name",
}, },
selectFirst: { selectFirst: {
type: Boolean, type: Boolean,
@ -74,5 +77,5 @@
} }
); );
const value = useVModel(props, 'modelValue', emit); const value = useVModel(props, "modelValue", emit);
</script> </script>

14
frontend/components/Form/Select.vue
View file

@ -3,10 +3,10 @@
<label class="label"> <label class="label">
<span class="label-text">{{ label }}</span> <span class="label-text">{{ label }}</span>
</label> </label>
<select class="select select-bordered" v-model="value"> <select v-model="value" class="select select-bordered">
<option disabled selected>Pick one</option> <option disabled selected>Pick one</option>
<option v-for="obj in items" :value="obj"> <option v-for="obj in items" :key="name != '' ? obj[name] : obj" :value="obj">
{{ name != '' ? obj[name] : obj }} {{ name != "" ? obj[name] : obj }}
</option> </option>
</select> </select>
<!-- <label class="label"> <!-- <label class="label">
@ -17,11 +17,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(["update:modelValue"]);
const props = defineProps({ const props = defineProps({
label: { label: {
type: String, type: String,
default: '', default: "",
}, },
modelValue: { modelValue: {
type: Object as any, type: Object as any,
@ -33,7 +33,7 @@
}, },
name: { name: {
type: String, type: String,
default: 'name', default: "name",
}, },
selectFirst: { selectFirst: {
type: Boolean, type: Boolean,
@ -50,5 +50,5 @@
} }
); );
const value = useVModel(props, 'modelValue', emit); const value = useVModel(props, "modelValue", emit);
</script> </script>

19
frontend/components/Form/TextArea.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="form-control" v-if="!inline"> <div v-if="!inline" class="form-control">
<label class="label"> <label class="label">
<span class="label-text">{{ label }}</span> <span class="label-text">{{ label }}</span>
</label> </label>
<textarea class="textarea textarea-bordered h-24" v-model="value" :placeholder="placeholder" /> <textarea v-model="value" class="textarea textarea-bordered h-24" :placeholder="placeholder" />
<label v-if="limit" class="label"> <label v-if="limit" class="label">
<span class="label-text-alt"></span> <span class="label-text-alt"></span>
<span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span> <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
@ -13,12 +13,17 @@
<label class="label"> <label class="label">
<span class="label-text">{{ label }}</span> <span class="label-text">{{ label }}</span>
</label> </label>
<textarea class="textarea textarea-bordered col-span-3 mt-3 h-24" auto-grow v-model="value" :placeholder="placeholder" /> <textarea
v-model="value"
class="textarea textarea-bordered col-span-3 mt-3 h-24"
auto-grow
:placeholder="placeholder"
/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(["update:modelValue"]);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: [String], type: [String],
@ -30,7 +35,7 @@
}, },
type: { type: {
type: String, type: String,
default: 'text', default: "text",
}, },
limit: { limit: {
type: [Number, String], type: [Number, String],
@ -38,7 +43,7 @@
}, },
placeholder: { placeholder: {
type: String, type: String,
default: '', default: "",
}, },
inline: { inline: {
type: Boolean, type: Boolean,
@ -46,7 +51,7 @@
}, },
}); });
const value = useVModel(props, 'modelValue', emit); const value = useVModel(props, "modelValue", emit);
const valueLen = computed(() => { const valueLen = computed(() => {
return value.value ? value.value.length : 0; return value.value ? value.value.length : 0;
}); });

10
frontend/components/Form/TextField.vue
View file

@ -3,13 +3,13 @@
<label class="label"> <label class="label">
<span class="label-text">{{ label }}</span> <span class="label-text">{{ label }}</span>
</label> </label>
<input ref="input" :type="type" v-model="value" class="input input-bordered w-full" /> <input ref="input" v-model="value" :type="type" class="input input-bordered w-full" />
</div> </div>
<div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4"> <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
<label class="label"> <label class="label">
<span class="label-text">{{ label }}</span> <span class="label-text">{{ label }}</span>
</label> </label>
<input class="input input-bordered col-span-3 w-full mt-2" v-model="value" /> <input v-model="value" class="input input-bordered col-span-3 w-full mt-2" />
</div> </div>
</template> </template>
@ -17,7 +17,7 @@
const props = defineProps({ const props = defineProps({
label: { label: {
type: String, type: String,
default: '', default: "",
}, },
modelValue: { modelValue: {
type: [String, Number], type: [String, Number],
@ -25,7 +25,7 @@
}, },
type: { type: {
type: String, type: String,
default: 'text', default: "text",
}, },
triggerFocus: { triggerFocus: {
type: Boolean, type: Boolean,
@ -48,5 +48,5 @@
} }
); );
const value = useVModel(props, 'modelValue'); const value = useVModel(props, "modelValue");
</script> </script>

10
frontend/components/Icon.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Ref } from 'vue'; import type { Ref } from "vue";
import type { IconifyIcon } from '@iconify/vue'; import type { IconifyIcon } from "@iconify/vue";
import { Icon as Iconify, loadIcon } from '@iconify/vue'; import { Icon as Iconify, loadIcon } from "@iconify/vue";
const nuxtApp = useNuxtApp(); const nuxtApp = useNuxtApp();
const props = defineProps({ const props = defineProps({
@ -14,12 +14,12 @@
const icon: Ref<IconifyIcon | null> = ref(null); const icon: Ref<IconifyIcon | null> = ref(null);
const component = computed(() => nuxtApp.vueApp.component(props.name)); const component = computed(() => nuxtApp.vueApp.component(props.name));
icon.value = await loadIcon(props.name).catch(_ => null); icon.value = await loadIcon(props.name).catch(() => null);
watch( watch(
() => props.name, () => props.name,
async () => { async () => {
icon.value = await loadIcon(props.name).catch(_ => null); icon.value = await loadIcon(props.name).catch(() => null);
} }
); );
</script> </script>

9
frontend/components/Item/Card.vue
View file

@ -10,14 +10,19 @@
</h2> </h2>
<p>{{ description }}</p> <p>{{ description }}</p>
<div class="flex gap-2 flex-wrap justify-end"> <div class="flex gap-2 flex-wrap justify-end">
<LabelChip v-for="label in item.labels" :label="label" class="badge-primary group-hover:badge-secondary" /> <LabelChip
v-for="label in item.labels"
:key="label.id"
:label="label"
class="badge-primary group-hover:badge-secondary"
/>
</div> </div>
</div> </div>
</NuxtLink> </NuxtLink>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Item } from '~~/lib/api/classes/items'; import { Item } from "~~/lib/api/classes/items";
const props = defineProps({ const props = defineProps({
item: { item: {

30
frontend/components/Item/CreateModal.vue
View file

@ -2,16 +2,16 @@
<BaseModal v-model="modal"> <BaseModal v-model="modal">
<template #title> Create Item </template> <template #title> Create Item </template>
<form @submit.prevent="create"> <form @submit.prevent="create">
<FormSelect label="Location" v-model="form.location" :items="locations ?? []" select-first /> <FormSelect v-model="form.location" label="Location" :items="locations ?? []" select-first />
<FormTextField <FormTextField
:trigger-focus="focused"
ref="locationNameRef" ref="locationNameRef"
v-model="form.name"
:trigger-focus="focused"
:autofocus="true" :autofocus="true"
label="Item Name" label="Item Name"
v-model="form.name"
/> />
<FormTextField label="Item Description" v-model="form.description" /> <FormTextField v-model="form.description" label="Item Description" />
<FormMultiselect label="Labels" v-model="form.labels" :items="labels ?? []" /> <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
<div class="modal-action"> <div class="modal-action">
<BaseButton ref="submitBtn" type="submit" :loading="loading"> <BaseButton ref="submitBtn" type="submit" :loading="loading">
<template #icon> <template #icon>
@ -26,7 +26,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { type Location } from '~~/lib/api/classes/locations'; import { type Location } from "~~/lib/api/classes/locations";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Boolean, type: Boolean,
@ -36,21 +36,21 @@
const submitBtn = ref(null); const submitBtn = ref(null);
const modal = useVModel(props, 'modelValue'); const modal = useVModel(props, "modelValue");
const loading = ref(false); const loading = ref(false);
const focused = ref(false); const focused = ref(false);
const form = reactive({ const form = reactive({
location: {} as Location, location: {} as Location,
name: '', name: "",
description: '', description: "",
color: '', // Future! color: "", // Future!
labels: [], labels: [],
}); });
function reset() { function reset() {
form.name = ''; form.name = "";
form.description = ''; form.description = "";
form.color = ''; form.color = "";
focused.value = false; focused.value = false;
modal.value = false; modal.value = false;
loading.value = false; loading.value = false;
@ -87,13 +87,13 @@
labelIds: form.labels.map(l => l.id) as string[], labelIds: form.labels.map(l => l.id) as string[],
}; };
const { data, error } = await api.items.create(out); const { error } = await api.items.create(out);
if (error) { if (error) {
toast.error("Couldn't create label"); toast.error("Couldn't create label");
return; return;
} }
toast.success('Item created'); toast.success("Item created");
reset(); reset();
} }
</script> </script>

8
frontend/components/Label/Chip.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
export type sizes = 'sm' | 'md' | 'lg'; import { Label } from "~~/lib/api/classes/labels";
import { Label } from '~~/lib/api/classes/labels'; export type sizes = "sm" | "md" | "lg";
defineProps({ defineProps({
label: { label: {
type: Object as () => Label, type: Object as () => Label,
@ -9,7 +9,7 @@
}, },
size: { size: {
type: String as () => sizes, type: String as () => sizes,
default: 'md', default: "md",
}, },
}); });
@ -22,12 +22,12 @@
<template> <template>
<NuxtLink <NuxtLink
ref="badge"
class="badge" class="badge"
:class="{ :class="{
'p-3': size !== 'sm', 'p-3': size !== 'sm',
'p-2 badge-sm': size === 'sm', 'p-2 badge-sm': size === 'sm',
}" }"
ref="badge"
:to="`/label/${label.id}`" :to="`/label/${label.id}`"
> >
<label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''"> <label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">

24
frontend/components/Label/CreateModal.vue
View file

@ -3,13 +3,13 @@
<template #title> Create Label </template> <template #title> Create Label </template>
<form @submit.prevent="create"> <form @submit.prevent="create">
<FormTextField <FormTextField
:trigger-focus="focused"
ref="locationNameRef" ref="locationNameRef"
v-model="form.name"
:trigger-focus="focused"
:autofocus="true" :autofocus="true"
label="Label Name" label="Label Name"
v-model="form.name"
/> />
<FormTextField label="Label Description" v-model="form.description" /> <FormTextField v-model="form.description" label="Label Description" />
<div class="modal-action"> <div class="modal-action">
<BaseButton type="submit" :loading="loading"> Create </BaseButton> <BaseButton type="submit" :loading="loading"> Create </BaseButton>
</div> </div>
@ -25,19 +25,19 @@
}, },
}); });
const modal = useVModel(props, 'modelValue'); const modal = useVModel(props, "modelValue");
const loading = ref(false); const loading = ref(false);
const focused = ref(false); const focused = ref(false);
const form = reactive({ const form = reactive({
name: '', name: "",
description: '', description: "",
color: '', // Future! color: "", // Future!
}); });
function reset() { function reset() {
form.name = ''; form.name = "";
form.description = ''; form.description = "";
form.color = ''; form.color = "";
focused.value = false; focused.value = false;
modal.value = false; modal.value = false;
loading.value = false; loading.value = false;
@ -54,13 +54,13 @@
const toast = useNotifier(); const toast = useNotifier();
async function create() { async function create() {
const { data, error } = await api.labels.create(form); const { error } = await api.labels.create(form);
if (error) { if (error) {
toast.error("Couldn't create label"); toast.error("Couldn't create label");
return; return;
} }
toast.success('Label created'); toast.success("Label created");
reset(); reset();
} }
</script> </script>

2
frontend/components/Location/Card.vue
View file

@ -26,7 +26,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Location } from '~~/lib/api/classes/locations'; import { Location } from "~~/lib/api/classes/locations";
defineProps({ defineProps({
location: { location: {

18
frontend/components/Location/CreateModal.vue
View file

@ -3,13 +3,13 @@
<template #title> Create Location </template> <template #title> Create Location </template>
<form @submit.prevent="create"> <form @submit.prevent="create">
<FormTextField <FormTextField
:trigger-focus="focused"
ref="locationNameRef" ref="locationNameRef"
v-model="form.name"
:trigger-focus="focused"
:autofocus="true" :autofocus="true"
label="Location Name" label="Location Name"
v-model="form.name"
/> />
<FormTextField label="Location Description" v-model="form.description" /> <FormTextField v-model="form.description" label="Location Description" />
<div class="modal-action"> <div class="modal-action">
<BaseButton type="submit" :loading="loading"> Create </BaseButton> <BaseButton type="submit" :loading="loading"> Create </BaseButton>
</div> </div>
@ -25,12 +25,12 @@
}, },
}); });
const modal = useVModel(props, 'modelValue'); const modal = useVModel(props, "modelValue");
const loading = ref(false); const loading = ref(false);
const focused = ref(false); const focused = ref(false);
const form = reactive({ const form = reactive({
name: '', name: "",
description: '', description: "",
}); });
whenever( whenever(
@ -41,8 +41,8 @@
); );
function reset() { function reset() {
form.name = ''; form.name = "";
form.description = ''; form.description = "";
focused.value = false; focused.value = false;
modal.value = false; modal.value = false;
loading.value = false; loading.value = false;
@ -61,7 +61,7 @@
} }
if (data) { if (data) {
toast.success('Location created'); toast.success("Location created");
navigateTo(`/location/${data.id}`); navigateTo(`/location/${data.id}`);
} }

2
frontend/components/ModalConfirm.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<BaseModal @cancel="cancel(false)" v-model="isRevealed" readonly> <BaseModal v-model="isRevealed" readonly @cancel="cancel(false)">
<template #title> Confirm </template> <template #title> Confirm </template>
<div> <div>
<p>{{ text }}</p> <p>{{ text }}</p>

12
frontend/composables/use-api.ts
View file

@ -1,21 +1,21 @@
import { PublicApi } from '~~/lib/api/public'; import { PublicApi } from "~~/lib/api/public";
import { UserApi } from '~~/lib/api/user'; import { UserApi } from "~~/lib/api/user";
import { Requests } from '~~/lib/requests'; import { Requests } from "~~/lib/requests";
import { useAuthStore } from '~~/stores/auth'; import { useAuthStore } from "~~/stores/auth";
function logger(r: Response) { function logger(r: Response) {
console.log(`${r.status} ${r.url} ${r.statusText}`); console.log(`${r.status} ${r.url} ${r.statusText}`);
} }
export function usePublicApi(): PublicApi { export function usePublicApi(): PublicApi {
const requests = new Requests('', '', {}); const requests = new Requests("", "", {});
return new PublicApi(requests); return new PublicApi(requests);
} }
export function useUserApi(): UserApi { export function useUserApi(): UserApi {
const authStore = useAuthStore(); const authStore = useAuthStore();
const requests = new Requests('', () => authStore.token, {}); const requests = new Requests("", () => authStore.token, {});
requests.addResponseInterceptor(logger); requests.addResponseInterceptor(logger);
requests.addResponseInterceptor(r => { requests.addResponseInterceptor(r => {
if (r.status === 401) { if (r.status === 401) {

10
frontend/composables/use-confirm.ts
View file

@ -1,13 +1,13 @@
import { UseConfirmDialogReturn } from '@vueuse/core'; import { UseConfirmDialogReturn } from "@vueuse/core";
import { Ref } from 'vue'; import { Ref } from "vue";
type Store = UseConfirmDialogReturn<any, Boolean, Boolean> & { type Store = UseConfirmDialogReturn<any, boolean, boolean> & {
text: Ref<string>; text: Ref<string>;
setup: boolean; setup: boolean;
}; };
const store: Partial<Store> = { const store: Partial<Store> = {
text: ref('Are you sure you want to delete this item? '), text: ref("Are you sure you want to delete this item? "),
setup: false, setup: false,
}; };
@ -21,7 +21,7 @@ const store: Partial<Store> = {
export function useConfirm(): Store { export function useConfirm(): Store {
if (!store.setup) { if (!store.setup) {
store.setup = true; store.setup = true;
const { isRevealed, reveal, confirm, cancel } = useConfirmDialog<any, Boolean, Boolean>(); const { isRevealed, reveal, confirm, cancel } = useConfirmDialog<any, boolean, boolean>();
store.isRevealed = isRevealed; store.isRevealed = isRevealed;
store.reveal = reveal; store.reveal = reveal;
store.confirm = confirm; store.confirm = confirm;

28
frontend/composables/use-ids.ts
View file

@ -1,19 +1,17 @@
function slugify(text: string) { function slugify(text: string) {
return text return text
.toString() .toString()
.toLowerCase() .toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with - .replace(/\s+/g, "-") // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars .replace(/[^\w-]+/g, "") // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single - .replace(/--+/g, "-") // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text .replace(/^-+/, "") // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text .replace(/-+$/, ""); // Trim - from end of text
} }
function idGenerator(): string { function idGenerator(): string {
const id = const id = Math.random().toString(32).substring(2, 6) + Math.random().toString(36).substring(2, 6);
Math.random().toString(32).substring(2, 6) + return slugify(id);
Math.random().toString(36).substring(2, 6);
return slugify(id);
} }
/** /**
@ -22,10 +20,10 @@ function idGenerator(): string {
* random string. * random string.
*/ */
export function useFormIds(label: string): string { export function useFormIds(label: string): string {
const slug = label ? slugify(label) : idGenerator(); const slug = label ? slugify(label) : idGenerator();
return `${slug}-${idGenerator()}`; return `${slug}-${idGenerator()}`;
} }
export function useId(): string { export function useId(): string {
return idGenerator(); return idGenerator();
} }

82
frontend/composables/use-notifier.ts
View file

@ -1,57 +1,55 @@
import { useId } from './use-ids'; import { useId } from "./use-ids";
interface Notification { interface Notification {
id: string; id: string;
message: string; message: string;
type: 'success' | 'error' | 'info'; type: "success" | "error" | "info";
} }
const notifications = ref<Notification[]>([]); const notifications = ref<Notification[]>([]);
function addNotification(notification: Notification) { function addNotification(notification: Notification) {
notifications.value.unshift(notification); notifications.value.unshift(notification);
if (notifications.value.length > 4) { if (notifications.value.length > 4) {
notifications.value.pop(); notifications.value.pop();
} else { } else {
setTimeout(() => { setTimeout(() => {
// Remove notification with ID // Remove notification with ID
notifications.value = notifications.value.filter( notifications.value = notifications.value.filter(n => n.id !== notification.id);
n => n.id !== notification.id }, 5000);
); }
}, 5000);
}
} }
export function useNotifications() { export function useNotifications() {
return { return {
notifications, notifications,
dropNotification: (idx: number) => notifications.value.splice(idx, 1), dropNotification: (idx: number) => notifications.value.splice(idx, 1),
}; };
} }
export function useNotifier() { export function useNotifier() {
return { return {
success: (message: string) => { success: (message: string) => {
addNotification({ addNotification({
id: useId(), id: useId(),
message, message,
type: 'success', type: "success",
}); });
}, },
error: (message: string) => { error: (message: string) => {
addNotification({ addNotification({
id: useId(), id: useId(),
message, message,
type: 'error', type: "error",
}); });
}, },
info: (message: string) => { info: (message: string) => {
addNotification({ addNotification({
id: useId(), id: useId(),
message, message,
type: 'info', type: "info",
}); });
}, },
}; };
} }

4
frontend/composables/use-preferences.ts
View file

@ -1,4 +1,4 @@
import { Ref } from 'vue'; import { Ref } from "vue";
export type LocationViewPreferences = { export type LocationViewPreferences = {
showDetails: boolean; showDetails: boolean;
@ -11,7 +11,7 @@ export type LocationViewPreferences = {
*/ */
export function useViewPreferences(): Ref<LocationViewPreferences> { export function useViewPreferences(): Ref<LocationViewPreferences> {
const results = useLocalStorage( const results = useLocalStorage(
'homebox/preferences/location', "homebox/preferences/location",
{ {
showDetails: true, showDetails: true,
showEmpty: true, showEmpty: true,

2
frontend/composables/use-strings.ts
View file

@ -1,5 +1,5 @@
export function truncate(str: string, length: number) { export function truncate(str: string, length: number) {
return str.length > length ? str.substring(0, length) + '...' : str; return str.length > length ? str.substring(0, length) + "..." : str;
} }
export function capitalize(str: string) { export function capitalize(str: string) {

22
frontend/lib/api/__test__/public.test.ts
View file

@ -1,8 +1,8 @@
import { describe, test, expect } from 'vitest'; import { describe, test, expect } from "vitest";
import { client, userClient } from './test-utils'; import { client, userClient } from "./test-utils";
describe('[GET] /api/v1/status', () => { describe("[GET] /api/v1/status", () => {
test('server should respond', async () => { test("server should respond", async () => {
const api = client(); const api = client();
const { response, data } = await api.status(); const { response, data } = await api.status();
expect(response.status).toBe(200); expect(response.status).toBe(200);
@ -10,23 +10,23 @@ describe('[GET] /api/v1/status', () => {
}); });
}); });
describe('first time user workflow (register, login)', () => { describe("first time user workflow (register, login)", () => {
const api = client(); const api = client();
const userData = { const userData = {
groupName: 'test-group', groupName: "test-group",
user: { user: {
email: 'test-user@email.com', email: "test-user@email.com",
name: 'test-user', name: "test-user",
password: 'test-password', password: "test-password",
}, },
}; };
test('user should be able to register', async () => { test("user should be able to register", async () => {
const { response } = await api.register(userData); const { response } = await api.register(userData);
expect(response.status).toBe(204); expect(response.status).toBe(204);
}); });
test('user should be able to login', async () => { test("user should be able to login", async () => {
const { response, data } = await api.login(userData.user.email, userData.user.password); const { response, data } = await api.login(userData.user.email, userData.user.password);
expect(response.status).toBe(200); expect(response.status).toBe(200);
expect(data.token).toBeTruthy(); expect(data.token).toBeTruthy();

30
frontend/lib/api/__test__/test-utils.ts
View file

@ -1,24 +1,24 @@
import { beforeAll, expect } from 'vitest'; import { beforeAll, expect } from "vitest";
import { Requests } from '../../requests'; import { Requests } from "../../requests";
import { overrideParts } from '../base/urls'; import { overrideParts } from "../base/urls";
import { PublicApi } from '../public'; import { PublicApi } from "../public";
import * as config from '../../../test/config'; import * as config from "../../../test/config";
import { UserApi } from '../user'; import { UserApi } from "../user";
export function client() { export function client() {
overrideParts(config.BASE_URL, '/api/v1'); overrideParts(config.BASE_URL, "/api/v1");
const requests = new Requests(''); const requests = new Requests("");
return new PublicApi(requests); return new PublicApi(requests);
} }
export function userClient(token: string) { export function userClient(token: string) {
overrideParts(config.BASE_URL, '/api/v1'); overrideParts(config.BASE_URL, "/api/v1");
const requests = new Requests('', token); const requests = new Requests("", token);
return new UserApi(requests); return new UserApi(requests);
} }
const cache = { const cache = {
token: '', token: "",
}; };
/* /*
@ -30,11 +30,11 @@ export async function sharedUserClient(): Promise<UserApi> {
return userClient(cache.token); return userClient(cache.token);
} }
const testUser = { const testUser = {
groupName: 'test-group', groupName: "test-group",
user: { user: {
email: '__test__@__test__.com', email: "__test__@__test__.com",
name: '__test__', name: "__test__",
password: '__test__', password: "__test__",
}, },
}; };

30
frontend/lib/api/__test__/user/labels.test.ts
View file

@ -1,9 +1,9 @@
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from "vitest";
import { Label } from '../../classes/labels'; import { Label } from "../../classes/labels";
import { UserApi } from '../../user'; import { UserApi } from "../../user";
import { sharedUserClient } from '../test-utils'; import { sharedUserClient } from "../test-utils";
describe('locations lifecycle (create, update, delete)', () => { describe("locations lifecycle (create, update, delete)", () => {
let increment = 0; let increment = 0;
/** /**
@ -14,7 +14,7 @@ describe('locations lifecycle (create, update, delete)', () => {
const { response, data } = await api.labels.create({ const { response, data } = await api.labels.create({
name: `__test__.label.name_${increment}`, name: `__test__.label.name_${increment}`,
description: `__test__.label.description_${increment}`, description: `__test__.label.description_${increment}`,
color: '', color: "",
}); });
expect(response.status).toBe(201); expect(response.status).toBe(201);
increment++; increment++;
@ -26,13 +26,13 @@ describe('locations lifecycle (create, update, delete)', () => {
return [data, cleanup]; return [data, cleanup];
} }
test('user should be able to create a label', async () => { test("user should be able to create a label", async () => {
const api = await sharedUserClient(); const api = await sharedUserClient();
const labelData = { const labelData = {
name: 'test-label', name: "test-label",
description: 'test-description', description: "test-description",
color: '', color: "",
}; };
const { response, data } = await api.labels.create(labelData); const { response, data } = await api.labels.create(labelData);
@ -53,14 +53,14 @@ describe('locations lifecycle (create, update, delete)', () => {
expect(deleteResponse.status).toBe(204); expect(deleteResponse.status).toBe(204);
}); });
test('user should be able to update a label', async () => { test("user should be able to update a label", async () => {
const api = await sharedUserClient(); const api = await sharedUserClient();
const [label, cleanup] = await useLabel(api); const [label, cleanup] = await useLabel(api);
const labelData = { const labelData = {
name: 'test-label', name: "test-label",
description: 'test-description', description: "test-description",
color: '', color: "",
}; };
const { response, data } = await api.labels.update(label.id, labelData); const { response, data } = await api.labels.update(label.id, labelData);
@ -78,7 +78,7 @@ describe('locations lifecycle (create, update, delete)', () => {
await cleanup(); await cleanup();
}); });
test('user should be able to delete a label', async () => { test("user should be able to delete a label", async () => {
const api = await sharedUserClient(); const api = await sharedUserClient();
const [label, _] = await useLabel(api); const [label, _] = await useLabel(api);

24
frontend/lib/api/__test__/user/locations.test.ts
View file

@ -1,9 +1,9 @@
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from "vitest";
import { Location } from '../../classes/locations'; import { Location } from "../../classes/locations";
import { UserApi } from '../../user'; import { UserApi } from "../../user";
import { sharedUserClient } from '../test-utils'; import { sharedUserClient } from "../test-utils";
describe('locations lifecycle (create, update, delete)', () => { describe("locations lifecycle (create, update, delete)", () => {
let increment = 0; let increment = 0;
/** /**
@ -26,12 +26,12 @@ describe('locations lifecycle (create, update, delete)', () => {
return [data, cleanup]; return [data, cleanup];
} }
test('user should be able to create a location', async () => { test("user should be able to create a location", async () => {
const api = await sharedUserClient(); const api = await sharedUserClient();
const locationData = { const locationData = {
name: 'test-location', name: "test-location",
description: 'test-description', description: "test-description",
}; };
const { response, data } = await api.locations.create(locationData); const { response, data } = await api.locations.create(locationData);
@ -52,13 +52,13 @@ describe('locations lifecycle (create, update, delete)', () => {
expect(deleteResponse.status).toBe(204); expect(deleteResponse.status).toBe(204);
}); });
test('user should be able to update a location', async () => { test("user should be able to update a location", async () => {
const api = await sharedUserClient(); const api = await sharedUserClient();
const [location, cleanup] = await useLocation(api); const [location, cleanup] = await useLocation(api);
const updateData = { const updateData = {
name: 'test-location-updated', name: "test-location-updated",
description: 'test-description-updated', description: "test-description-updated",
}; };
const { response } = await api.locations.update(location.id, updateData); const { response } = await api.locations.update(location.id, updateData);
@ -75,7 +75,7 @@ describe('locations lifecycle (create, update, delete)', () => {
await cleanup(); await cleanup();
}); });
test('user should be able to delete a location', async () => { test("user should be able to delete a location", async () => {
const api = await sharedUserClient(); const api = await sharedUserClient();
const [location, _] = await useLocation(api); const [location, _] = await useLocation(api);

2
frontend/lib/api/base/base-api.ts
View file

@ -1,4 +1,4 @@
import { Requests } from '../../requests'; import { Requests } from "../../requests";
// < // <
// TGetResult, // TGetResult,
// TPostData, // TPostData,

30
frontend/lib/api/base/index.test.ts
View file

@ -1,24 +1,24 @@
import { describe, expect, it } from 'vitest'; import { describe, expect, it } from "vitest";
import { route } from '.'; import { route } from ".";
describe('UrlBuilder', () => { describe("UrlBuilder", () => {
it('basic query parameter', () => { it("basic query parameter", () => {
const result = route('/test', { a: 'b' }); const result = route("/test", { a: "b" });
expect(result).toBe('/api/v1/test?a=b'); expect(result).toBe("/api/v1/test?a=b");
}); });
it('multiple query parameters', () => { it("multiple query parameters", () => {
const result = route('/test', { a: 'b', c: 'd' }); const result = route("/test", { a: "b", c: "d" });
expect(result).toBe('/api/v1/test?a=b&c=d'); expect(result).toBe("/api/v1/test?a=b&c=d");
}); });
it('no query parameters', () => { it("no query parameters", () => {
const result = route('/test'); const result = route("/test");
expect(result).toBe('/api/v1/test'); expect(result).toBe("/api/v1/test");
}); });
it('list-like query parameters', () => { it("list-like query parameters", () => {
const result = route('/test', { a: ['b', 'c'] }); const result = route("/test", { a: ["b", "c"] });
expect(result).toBe('/api/v1/test?a=b&a=c'); expect(result).toBe("/api/v1/test?a=b&a=c");
}); });
}); });

4
frontend/lib/api/base/index.ts
View file

@ -1,2 +1,2 @@
export { BaseAPI } from './base-api'; export { BaseAPI } from "./base-api";
export { route } from './urls'; export { route } from "./urls";

6
frontend/lib/api/base/urls.ts
View file

@ -1,6 +1,6 @@
const parts = { const parts = {
host: 'http://localhost.com', host: "http://localhost.com",
prefix: '/api/v1', prefix: "/api/v1",
}; };
export function overrideParts(host: string, prefix: string) { export function overrideParts(host: string, prefix: string) {
@ -32,5 +32,5 @@ export function route(rest: string, params: Record<string, QueryValue> = {}): st
} }
} }
return url.toString().replace('http://localhost.com', ''); return url.toString().replace("http://localhost.com", "");
} }

26
frontend/lib/api/classes/items.ts
View file

@ -1,7 +1,7 @@
import { BaseAPI, route } from '../base'; import { BaseAPI, route } from "../base";
import { Label } from './labels'; import { Label } from "./labels";
import { Location } from './locations'; import { Location } from "./locations";
import { Results } from './types'; import { Results } from "./types";
export interface ItemCreate { export interface ItemCreate {
name: string; name: string;
@ -35,12 +35,12 @@ export interface Item {
} }
export class ItemsApi extends BaseAPI { export class ItemsApi extends BaseAPI {
async getAll() { getAll() {
return this.http.get<Results<Item>>({ url: route('/items') }); return this.http.get<Results<Item>>({ url: route("/items") });
} }
async create(item: ItemCreate) { create(item: ItemCreate) {
return this.http.post<ItemCreate, Item>({ url: route('/items'), body: item }); return this.http.post<ItemCreate, Item>({ url: route("/items"), body: item });
} }
async get(id: string) { async get(id: string) {
@ -58,18 +58,18 @@ export class ItemsApi extends BaseAPI {
return payload; return payload;
} }
async delete(id: string) { delete(id: string) {
return this.http.delete<void>({ url: route(`/items/${id}`) }); return this.http.delete<void>({ url: route(`/items/${id}`) });
} }
async update(id: string, item: ItemCreate) { update(id: string, item: ItemCreate) {
return this.http.put<ItemCreate, Item>({ url: route(`/items/${id}`), body: item }); return this.http.put<ItemCreate, Item>({ url: route(`/items/${id}`), body: item });
} }
async import(file: File) { import(file: File) {
const formData = new FormData(); const formData = new FormData();
formData.append('csv', file); formData.append("csv", file);
return this.http.post<FormData, void>({ url: route('/items/import'), data: formData }); return this.http.post<FormData, void>({ url: route("/items/import"), data: formData });
} }
} }

20
frontend/lib/api/classes/labels.ts
View file

@ -1,6 +1,6 @@
import { BaseAPI, route } from '../base'; import { BaseAPI, route } from "../base";
import { Item } from './items'; import { Item } from "./items";
import { Details, OutType, Results } from './types'; import { Details, OutType, Results } from "./types";
export type LabelCreate = Details & { export type LabelCreate = Details & {
color: string; color: string;
@ -15,23 +15,23 @@ export type Label = LabelCreate &
}; };
export class LabelsApi extends BaseAPI { export class LabelsApi extends BaseAPI {
async getAll() { getAll() {
return this.http.get<Results<Label>>({ url: route('/labels') }); return this.http.get<Results<Label>>({ url: route("/labels") });
} }
async create(body: LabelCreate) { create(body: LabelCreate) {
return this.http.post<LabelCreate, Label>({ url: route('/labels'), body }); return this.http.post<LabelCreate, Label>({ url: route("/labels"), body });
} }
async get(id: string) { get(id: string) {
return this.http.get<Label>({ url: route(`/labels/${id}`) }); return this.http.get<Label>({ url: route(`/labels/${id}`) });
} }
async delete(id: string) { delete(id: string) {
return this.http.delete<void>({ url: route(`/labels/${id}`) }); return this.http.delete<void>({ url: route(`/labels/${id}`) });
} }
async update(id: string, body: LabelUpdate) { update(id: string, body: LabelUpdate) {
return this.http.put<LabelUpdate, Label>({ url: route(`/labels/${id}`), body }); return this.http.put<LabelUpdate, Label>({ url: route(`/labels/${id}`), body });
} }
} }

21
frontend/lib/api/classes/locations.ts
View file

@ -1,6 +1,6 @@
import { BaseAPI, route } from '../base'; import { BaseAPI, route } from "../base";
import { Item } from './items'; import { Item } from "./items";
import { Details, OutType, Results } from './types'; import { Details, OutType, Results } from "./types";
export type LocationCreate = Details; export type LocationCreate = Details;
@ -14,22 +14,23 @@ export type Location = LocationCreate &
export type LocationUpdate = LocationCreate; export type LocationUpdate = LocationCreate;
export class LocationsApi extends BaseAPI { export class LocationsApi extends BaseAPI {
async getAll() { getAll() {
return this.http.get<Results<Location>>({ url: route('/locations') }); return this.http.get<Results<Location>>({ url: route("/locations") });
} }
async create(body: LocationCreate) { create(body: LocationCreate) {
return this.http.post<LocationCreate, Location>({ url: route('/locations'), body }); return this.http.post<LocationCreate, Location>({ url: route("/locations"), body });
} }
async get(id: string) { get(id: string) {
return this.http.get<Location>({ url: route(`/locations/${id}`) }); return this.http.get<Location>({ url: route(`/locations/${id}`) });
} }
async delete(id: string) {
delete(id: string) {
return this.http.delete<void>({ url: route(`/locations/${id}`) }); return this.http.delete<void>({ url: route(`/locations/${id}`) });
} }
async update(id: string, body: LocationUpdate) { update(id: string, body: LocationUpdate) {
return this.http.put<LocationUpdate, Location>({ url: route(`/locations/${id}`), body }); return this.http.put<LocationUpdate, Location>({ url: route(`/locations/${id}`), body });
} }
} }

8
frontend/lib/api/public.ts
View file

@ -1,4 +1,4 @@
import { BaseAPI, route } from './base'; import { BaseAPI, route } from "./base";
export type LoginResult = { export type LoginResult = {
token: string; token: string;
@ -28,12 +28,12 @@ export type StatusResult = {
export class PublicApi extends BaseAPI { export class PublicApi extends BaseAPI {
public status() { public status() {
return this.http.get<StatusResult>({ url: route('/status') }); return this.http.get<StatusResult>({ url: route("/status") });
} }
public login(username: string, password: string) { public login(username: string, password: string) {
return this.http.post<LoginPayload, LoginResult>({ return this.http.post<LoginPayload, LoginResult>({
url: route('/users/login'), url: route("/users/login"),
body: { body: {
username, username,
password, password,
@ -42,6 +42,6 @@ export class PublicApi extends BaseAPI {
} }
public register(body: RegisterPayload) { public register(body: RegisterPayload) {
return this.http.post<RegisterPayload, LoginResult>({ url: route('/users/register'), body }); return this.http.post<RegisterPayload, LoginResult>({ url: route("/users/register"), body });
} }
} }

16
frontend/lib/api/user.ts
View file

@ -1,8 +1,8 @@
import { Requests } from '~~/lib/requests'; import { BaseAPI, route } from "./base";
import { BaseAPI, route } from './base'; import { ItemsApi } from "./classes/items";
import { ItemsApi } from './classes/items'; import { LabelsApi } from "./classes/labels";
import { LabelsApi } from './classes/labels'; import { LocationsApi } from "./classes/locations";
import { LocationsApi } from './classes/locations'; import { Requests } from "~~/lib/requests";
export type Result<T> = { export type Result<T> = {
item: T; item: T;
@ -30,14 +30,14 @@ export class UserApi extends BaseAPI {
} }
public self() { public self() {
return this.http.get<Result<User>>({ url: route('/users/self') }); return this.http.get<Result<User>>({ url: route("/users/self") });
} }
public logout() { public logout() {
return this.http.post<object, void>({ url: route('/users/logout') }); return this.http.post<object, void>({ url: route("/users/logout") });
} }
public deleteAccount() { public deleteAccount() {
return this.http.delete<void>({ url: route('/users/self') }); return this.http.delete<void>({ url: route("/users/self") });
} }
} }

2
frontend/lib/requests/index.ts
View file

@ -1 +1 @@
export { Requests, type TResponse } from './requests'; export { Requests, type TResponse } from "./requests";

20
frontend/lib/requests/requests.ts
View file

@ -1,8 +1,8 @@
export enum Method { export enum Method {
GET = 'GET', GET = "GET",
POST = 'POST', POST = "POST",
PUT = 'PUT', PUT = "PUT",
DELETE = 'DELETE', DELETE = "DELETE",
} }
export type RequestInterceptor = (r: Response) => void; export type RequestInterceptor = (r: Response) => void;
@ -40,9 +40,9 @@ export class Requests {
return this.baseUrl + rest; return this.baseUrl + rest;
} }
constructor(baseUrl: string, token: string | (() => string) = '', headers: Record<string, string> = {}) { constructor(baseUrl: string, token: string | (() => string) = "", headers: Record<string, string> = {}) {
this.baseUrl = baseUrl; this.baseUrl = baseUrl;
this.token = typeof token === 'string' ? () => token : token; this.token = typeof token === "string" ? () => token : token;
this.headers = headers; this.headers = headers;
} }
@ -72,19 +72,19 @@ export class Requests {
headers: { headers: {
...rargs.headers, ...rargs.headers,
...this.headers, ...this.headers,
}, } as Record<string, string>,
}; };
const token = this.token(); const token = this.token();
if (token !== '' && payload.headers !== undefined) { if (token !== "" && payload.headers !== undefined) {
payload.headers['Authorization'] = token; payload.headers["Authorization"] = token; // eslint-disable-line dot-notation
} }
if (this.methodSupportsBody(method)) { if (this.methodSupportsBody(method)) {
if (rargs.data) { if (rargs.data) {
payload.body = rargs.data; payload.body = rargs.data;
} else { } else {
payload.headers['Content-Type'] = 'application/json'; payload.headers["Content-Type"] = "application/json";
payload.body = JSON.stringify(rargs.body); payload.body = JSON.stringify(rargs.body);
} }
} }

14
frontend/nuxt.config.ts
View file

@ -1,20 +1,20 @@
import { defineNuxtConfig } from 'nuxt'; import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config // https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({ export default defineNuxtConfig({
target: 'static', target: "static",
ssr: false, ssr: false,
modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt', '@vueuse/nuxt'], modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"],
meta: { meta: {
title: 'Homebox', title: "Homebox",
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.svg" }],
}, },
outDir: '../backend/app/api/public',
vite: { vite: {
server: { server: {
proxy: { proxy: {
'/api': 'http://localhost:7745', "/api": "http://localhost:7745",
}, },
}, },
plugins: [],
}, },
}); });

12
frontend/package.json
View file

@ -5,13 +5,25 @@
"dev": "nuxt dev", "dev": "nuxt dev",
"preview": "nuxt preview", "preview": "nuxt preview",
"postinstall": "nuxt prepare", "postinstall": "nuxt prepare",
"lint": "eslint --ext \".ts,.js,.vue\" --ignore-path ../.gitignore .",
"lint:fix": "eslint --ext \".ts,.js,.vue\" --ignore-path ../.gitignore . --fix",
"test:ci": "TEST_SHUTDOWN_API_SERVER=true vitest --run --config ./test/vitest.config.ts", "test:ci": "TEST_SHUTDOWN_API_SERVER=true vitest --run --config ./test/vitest.config.ts",
"test:local": "TEST_SHUTDOWN_API_SERVER=false && vitest --run --config ./test/vitest.config.ts", "test:local": "TEST_SHUTDOWN_API_SERVER=false && vitest --run --config ./test/vitest.config.ts",
"test:watch": " TEST_SHUTDOWN_API_SERVER=false vitest --config ./test/vitest.config.ts" "test:watch": " TEST_SHUTDOWN_API_SERVER=false vitest --config ./test/vitest.config.ts"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/eslint-config-typescript": "^11.0.0",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.4.0",
"isomorphic-fetch": "^3.0.0", "isomorphic-fetch": "^3.0.0",
"nuxt": "3.0.0-rc.8", "nuxt": "3.0.0-rc.8",
"prettier": "^2.7.1",
"typescript": "^4.8.3",
"vite-plugin-eslint": "^1.8.1",
"vitest": "^0.22.1" "vitest": "^0.22.1"
}, },
"dependencies": { "dependencies": {

12
frontend/pages/[...all].vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
useHead({ useHead({
title: "404. Not Found", title: "404. Not Found",
}); });
definePageMeta({ definePageMeta({
layout: "404", layout: "404",
}); });
</script> </script>
<template> <template>

32
frontend/pages/home.vue
View file

@ -1,24 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({ definePageMeta({
layout: 'home', layout: "home",
}); });
useHead({ useHead({
title: 'Homebox | Home', title: "Homebox | Home",
}); });
const api = useUserApi(); const api = useUserApi();
const { data: locations } = useAsyncData('locations', async () => { const { data: locations } = useAsyncData("locations", async () => {
const { data } = await api.locations.getAll(); const { data } = await api.locations.getAll();
return data.items; return data.items;
}); });
const { data: labels } = useAsyncData('labels', async () => { const { data: labels } = useAsyncData("labels", async () => {
const { data } = await api.labels.getAll(); const { data } = await api.labels.getAll();
return data.items; return data.items;
}); });
const { data: items } = useAsyncData('items', async () => { const { data: items } = useAsyncData("items", async () => {
const { data } = await api.items.getAll(); const { data } = await api.items.getAll();
return data.items; return data.items;
}); });
@ -29,15 +29,15 @@
const stats = [ const stats = [
{ {
label: 'Locations', label: "Locations",
value: totalLocations, value: totalLocations,
}, },
{ {
label: 'Items', label: "Items",
value: totalItems, value: totalItems,
}, },
{ {
label: 'Labels', label: "Labels",
value: totalLabels, value: totalLabels,
}, },
]; ];
@ -55,7 +55,7 @@
function setFile(e: Event & { target: HTMLInputElement }) { function setFile(e: Event & { target: HTMLInputElement }) {
importCsv.value = e.target.files[0]; importCsv.value = e.target.files[0];
console.log('importCsv.value', importCsv.value); console.log("importCsv.value", importCsv.value);
} }
const toast = useNotifier(); const toast = useNotifier();
@ -74,7 +74,7 @@
const { error } = await api.items.import(importCsv.value); const { error } = await api.items.import(importCsv.value);
if (error) { if (error) {
toast.error('Import failed. Please try again later.'); toast.error("Import failed. Please try again later.");
} }
// Reset // Reset
@ -114,7 +114,7 @@
<section aria-labelledby="profile-overview-title" class="mt-8"> <section aria-labelledby="profile-overview-title" class="mt-8">
<div class="overflow-hidden rounded-lg bg-white shadow"> <div class="overflow-hidden rounded-lg bg-white shadow">
<h2 class="sr-only" id="profile-overview-title">Profile Overview</h2> <h2 id="profile-overview-title" class="sr-only">Profile Overview</h2>
<div class="bg-white p-6"> <div class="bg-white p-6">
<div class="sm:flex sm:items-center sm:justify-between"> <div class="sm:flex sm:items-center sm:justify-between">
<div class="sm:flex sm:space-x-5"> <div class="sm:flex sm:space-x-5">
@ -138,7 +138,7 @@
> >
<div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium"> <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-900">{{ stat.value.value }}</span>
{{ ' ' }} {{ " " }}
<span class="text-gray-600">{{ stat.label }}</span> <span class="text-gray-600">{{ stat.label }}</span>
</div> </div>
</div> </div>
@ -148,7 +148,7 @@
<section> <section>
<BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader> <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
<div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
<LocationCard v-for="location in locations" :location="location" /> <LocationCard v-for="location in locations" :key="location.id" :location="location" />
</div> </div>
</section> </section>
@ -157,7 +157,7 @@
Items Items
<template #description> <template #description>
<div class="tooltip" data-tip="Import CSV File"> <div class="tooltip" data-tip="Import CSV File">
<button @click="openDialog" class="btn btn-primary btn-sm"> <button class="btn btn-primary btn-sm" @click="openDialog">
<Icon name="mdi-database" class="mr-2"></Icon> <Icon name="mdi-database" class="mr-2"></Icon>
Import Import
</button> </button>
@ -165,14 +165,14 @@
</template> </template>
</BaseSectionHeader> </BaseSectionHeader>
<div class="grid sm:grid-cols-2 gap-4"> <div class="grid sm:grid-cols-2 gap-4">
<ItemCard v-for="item in items" :item="item" /> <ItemCard v-for="item in items" :key="item.id" :item="item" />
</div> </div>
</section> </section>
<section> <section>
<BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader> <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
<div class="flex gap-2 flex-wrap"> <div class="flex gap-2 flex-wrap">
<LabelChip v-for="label in labels" size="lg" :label="label" /> <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
</div> </div>
</section> </section>
</BaseContainer> </BaseContainer>

62
frontend/pages/index.vue
View file

@ -1,43 +1,43 @@
<script setup lang="ts"> <script setup lang="ts">
import TextField from '@/components/Form/TextField.vue'; import TextField from "@/components/Form/TextField.vue";
import { useNotifier } from '@/composables/use-notifier'; import { useNotifier } from "@/composables/use-notifier";
import { usePublicApi } from '@/composables/use-api'; import { usePublicApi } from "@/composables/use-api";
import { useAuthStore } from '~~/stores/auth'; import { useAuthStore } from "~~/stores/auth";
useHead({ useHead({
title: 'Homebox | Organize and Tag Your Stuff', title: "Homebox | Organize and Tag Your Stuff",
}); });
definePageMeta({ definePageMeta({
layout: 'empty', layout: "empty",
}); });
const authStore = useAuthStore(); const authStore = useAuthStore();
if (!authStore.isTokenExpired) { if (!authStore.isTokenExpired) {
navigateTo('/home'); navigateTo("/home");
} }
const registerFields = [ const registerFields = [
{ {
label: "What's your name?", label: "What's your name?",
value: '', value: "",
}, },
{ {
label: "What's your email?", label: "What's your email?",
value: '', value: "",
}, },
{ {
label: 'Name your group', label: "Name your group",
value: '', value: "",
}, },
{ {
label: 'Set your password', label: "Set your password",
value: '', value: "",
type: 'password', type: "password",
}, },
{ {
label: 'Confirm your password', label: "Confirm your password",
value: '', value: "",
type: 'password', type: "password",
}, },
]; ];
@ -57,11 +57,11 @@
}); });
if (error) { if (error) {
toast.error('Problem registering user'); toast.error("Problem registering user");
return; return;
} }
toast.success('User registered'); toast.success("User registered");
loading.value = false; loading.value = false;
loginFields[0].value = registerFields[1].value; loginFields[0].value = registerFields[1].value;
@ -70,13 +70,13 @@
const loginFields = [ const loginFields = [
{ {
label: 'Email', label: "Email",
value: '', value: "",
}, },
{ {
label: 'Password', label: "Password",
value: '', value: "",
type: 'password', type: "password",
}, },
]; ];
@ -88,16 +88,16 @@
const { data, error } = await api.login(loginFields[0].value, loginFields[1].value); const { data, error } = await api.login(loginFields[0].value, loginFields[1].value);
if (error) { if (error) {
toast.error('Invalid email or password'); toast.error("Invalid email or password");
} else { } else {
toast.success('Logged in successfully'); toast.success("Logged in successfully");
authStore.$patch({ authStore.$patch({
token: data.token, token: data.token,
expires: data.expiresAt, expires: data.expiresAt,
}); });
navigateTo('/home'); navigateTo("/home");
} }
loading.value = false; loading.value = false;
} }
@ -161,9 +161,9 @@
</h2> </h2>
<TextField <TextField
v-for="field in registerFields" v-for="field in registerFields"
:key="field.label"
v-model="field.value" v-model="field.value"
:label="field.label" :label="field.label"
:key="field.label"
:type="field.type" :type="field.type"
/> />
<div class="card-actions justify-end"> <div class="card-actions justify-end">
@ -188,9 +188,9 @@
</h2> </h2>
<TextField <TextField
v-for="field in loginFields" v-for="field in loginFields"
:key="field.label"
v-model="field.value" v-model="field.value"
:label="field.label" :label="field.label"
:key="field.label"
:type="field.type" :type="field.type"
/> />
<div class="card-actions justify-end mt-2"> <div class="card-actions justify-end mt-2">
@ -204,10 +204,10 @@
</Transition> </Transition>
<div class="text-center mt-6"> <div class="text-center mt-6">
<button <button
@click="toggleLogin"
class="text-base-content text-lg hover:bg-primary hover:text-primary-content px-3 py-1 rounded-xl transition-colors duration-200" class="text-base-content text-lg hover:bg-primary hover:text-primary-content px-3 py-1 rounded-xl transition-colors duration-200"
@click="toggleLogin"
> >
{{ registerForm ? 'Already a User? Login' : 'Not a User? Register' }} {{ registerForm ? "Already a User? Login" : "Not a User? Register" }}
</button> </button>
</div> </div>
</div> </div>

86
frontend/pages/item/[id]/edit.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({ definePageMeta({
layout: 'home', layout: "home",
}); });
const route = useRoute(); const route = useRoute();
@ -12,85 +12,85 @@
const { data: item } = useAsyncData(async () => { const { data: item } = useAsyncData(async () => {
const { data, error } = await api.items.get(itemId.value); const { data, error } = await api.items.get(itemId.value);
if (error) { if (error) {
toast.error('Failed to load item'); toast.error("Failed to load item");
navigateTo('/home'); navigateTo("/home");
return; return;
} }
return data; return data;
}); });
type FormField = { type FormField = {
type: 'text' | 'textarea' | 'select' | 'date'; type: "text" | "textarea" | "select" | "date";
label: string; label: string;
ref: string; ref: string;
}; };
const mainFields: FormField[] = [ const mainFields: FormField[] = [
{ {
type: 'text', type: "text",
label: 'Name', label: "Name",
ref: 'name', ref: "name",
}, },
{ {
type: 'textarea', type: "textarea",
label: 'Description', label: "Description",
ref: 'description', ref: "description",
}, },
{ {
type: 'text', type: "text",
label: 'Serial Number', label: "Serial Number",
ref: 'serialNumber', ref: "serialNumber",
}, },
{ {
type: 'text', type: "text",
label: 'Model Number', label: "Model Number",
ref: 'modelNumber', ref: "modelNumber",
}, },
{ {
type: 'text', type: "text",
label: 'Manufacturer', label: "Manufacturer",
ref: 'manufacturer', ref: "manufacturer",
}, },
{ {
type: 'textarea', type: "textarea",
label: 'Notes', label: "Notes",
ref: 'notes', ref: "notes",
}, },
]; ];
const purchaseFields: FormField[] = [ const purchaseFields: FormField[] = [
{ {
type: 'text', type: "text",
label: 'Purchased From', label: "Purchased From",
ref: 'purchaseFrom', ref: "purchaseFrom",
}, },
{ {
type: 'text', type: "text",
label: 'Purchased Price', label: "Purchased Price",
ref: 'purchasePrice', ref: "purchasePrice",
}, },
{ {
type: 'date', type: "date",
label: 'Purchased At', label: "Purchased At",
ref: 'purchaseTime', ref: "purchaseTime",
}, },
]; ];
const soldFields = [ const soldFields = [
{ {
type: 'text', type: "text",
label: 'Sold To', label: "Sold To",
ref: 'soldTo', ref: "soldTo",
}, },
{ {
type: 'text', type: "text",
label: 'Sold Price', label: "Sold Price",
ref: 'soldPrice', ref: "soldPrice",
}, },
{ {
type: 'date', type: "date",
label: 'Sold At', label: "Sold At",
ref: 'soldTime', ref: "soldTime",
}, },
]; ];
</script> </script>
@ -103,7 +103,7 @@
<h3 class="text-lg font-medium leading-6">Item Details</h3> <h3 class="text-lg font-medium leading-6">Item Details</h3>
</div> </div>
<div class="border-t border-gray-300 sm:p-0"> <div class="border-t border-gray-300 sm:p-0">
<div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in mainFields"> <div v-for="field in mainFields" :key="field.ref" class="sm:divide-y sm:divide-gray-300 grid grid-cols-1">
<div class="pt-2 pb-4 sm:px-6 border-b border-gray-300"> <div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
<FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline /> <FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
<FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline /> <FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
@ -118,7 +118,7 @@
<h3 class="text-lg font-medium leading-6">Purchase Details</h3> <h3 class="text-lg font-medium leading-6">Purchase Details</h3>
</div> </div>
<div class="border-t border-gray-300 sm:p-0"> <div class="border-t border-gray-300 sm:p-0">
<div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in purchaseFields"> <div v-for="field in purchaseFields" :key="field.ref" class="sm:divide-y sm:divide-gray-300 grid grid-cols-1">
<div class="pt-2 pb-4 sm:px-6 border-b border-gray-300"> <div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
<FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline /> <FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
<FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline /> <FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
@ -133,7 +133,7 @@
<h3 class="text-lg font-medium leading-6">Sold Details</h3> <h3 class="text-lg font-medium leading-6">Sold Details</h3>
</div> </div>
<div class="border-t border-gray-300 sm:p-0"> <div class="border-t border-gray-300 sm:p-0">
<div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in soldFields"> <div v-for="field in soldFields" :key="field.ref" class="sm:divide-y sm:divide-gray-300 grid grid-cols-1">
<div class="pt-2 pb-4 sm:px-6 border-b border-gray-300"> <div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
<FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline /> <FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
<FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline /> <FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />

54
frontend/pages/item/[id]/index.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
definePageMeta({ definePageMeta({
layout: 'home', layout: "home",
}); });
const route = useRoute(); const route = useRoute();
@ -13,8 +13,8 @@
const { data: item } = useAsyncData(async () => { const { data: item } = useAsyncData(async () => {
const { data, error } = await api.items.get(itemId.value); const { data, error } = await api.items.get(itemId.value);
if (error) { if (error) {
toast.error('Failed to load item'); toast.error("Failed to load item");
navigateTo('/home'); navigateTo("/home");
return; return;
} }
return data; return data;
@ -22,12 +22,12 @@
const itemSummary = computed(() => { const itemSummary = computed(() => {
return { return {
Description: item.value?.description || '', Description: item.value?.description || "",
'Serial Number': item.value?.serialNumber || '', "Serial Number": item.value?.serialNumber || "",
'Model Number': item.value?.modelNumber || '', "Model Number": item.value?.modelNumber || "",
Manufacturer: item.value?.manufacturer || '', Manufacturer: item.value?.manufacturer || "",
Notes: item.value?.notes || '', Notes: item.value?.notes || "",
Attachments: '', // TODO: Attachments Attachments: "", // TODO: Attachments
}; };
}); });
@ -42,12 +42,12 @@
const payload = {}; const payload = {};
if (item.value.lifetimeWarranty) { if (item.value.lifetimeWarranty) {
payload['Lifetime Warranty'] = 'Yes'; payload["Lifetime Warranty"] = "Yes";
} else { } else {
payload['Warranty Expires'] = item.value?.warrantyExpires || ''; payload["Warranty Expires"] = item.value?.warrantyExpires || "";
} }
payload['Warranty Details'] = item.value?.warrantyDetails || ''; payload["Warranty Details"] = item.value?.warrantyDetails || "";
return payload; return payload;
}); });
@ -61,9 +61,9 @@
const purchaseDetails = computed(() => { const purchaseDetails = computed(() => {
return { return {
'Purchased From': item.value?.purchaseFrom || '', "Purchased From": item.value?.purchaseFrom || "",
'Purchased Price': item.value?.purchasePrice || '', "Purchased Price": item.value?.purchasePrice || "",
'Purchased At': item.value?.purchaseTime || '', "Purchased At": item.value?.purchaseTime || "",
}; };
}); });
@ -77,16 +77,16 @@
const soldDetails = computed(() => { const soldDetails = computed(() => {
return { return {
'Sold To': item.value?.soldTo || '', "Sold To": item.value?.soldTo || "",
'Sold Price': item.value?.soldPrice || '', "Sold Price": item.value?.soldPrice || "",
'Sold At': item.value?.soldTime || '', "Sold At": item.value?.soldTime || "",
}; };
}); });
const confirm = useConfirm(); const confirm = useConfirm();
async function deleteItem() { async function deleteItem() {
const confirmed = await confirm.reveal('Are you sure you want to delete this item?'); const confirmed = await confirm.reveal("Are you sure you want to delete this item?");
if (!confirmed.data) { if (!confirmed.data) {
return; return;
@ -94,11 +94,11 @@
const { error } = await api.items.delete(itemId.value); const { error } = await api.items.delete(itemId.value);
if (error) { if (error) {
toast.error('Failed to delete item'); toast.error("Failed to delete item");
return; return;
} }
toast.success('Item deleted'); toast.success("Item deleted");
navigateTo('/home'); navigateTo("/home");
} }
</script> </script>
@ -118,11 +118,11 @@
</span> </span>
<template #after> <template #after>
<div class="flex flex-wrap gap-3 mt-3"> <div class="flex flex-wrap gap-3 mt-3">
<LabelChip class="badge-primary" v-for="label in item.labels" :label="label"></LabelChip> <LabelChip v-for="label in item.labels" :key="label.id" class="badge-primary" :label="label" />
</div> </div>
<div class="modal-action"> <div class="modal-action">
<label class="label cursor-pointer mr-auto"> <label class="label cursor-pointer mr-auto">
<input type="checkbox" v-model="preferences.showEmpty" class="toggle toggle-primary" /> <input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
<span class="label-text ml-4"> Show Empty </span> <span class="label-text ml-4"> Show Empty </span>
</label> </label>
<BaseButton size="sm" :to="`/item/${itemId}/edit`"> <BaseButton size="sm" :to="`/item/${itemId}/edit`">
@ -164,13 +164,13 @@
</ul> </ul>
</template> </template>
</BaseDetails> </BaseDetails>
<BaseDetails :details="purchaseDetails" v-if="showPurchase"> <BaseDetails v-if="showPurchase" :details="purchaseDetails">
<template #title> Purchase Details </template> <template #title> Purchase Details </template>
</BaseDetails> </BaseDetails>
<BaseDetails :details="warrantyDetails" v-if="showWarranty"> <BaseDetails v-if="showWarranty" :details="warrantyDetails">
<template #title> Warranty </template> <template #title> Warranty </template>
</BaseDetails> </BaseDetails>
<BaseDetails :details="soldDetails" v-if="showSold"> <BaseDetails v-if="showSold" :details="soldDetails">
<template #title> Sold </template> <template #title> Sold </template>
</BaseDetails> </BaseDetails>
</div> </div>

70
frontend/pages/item/new.vue
View file

@ -1,6 +1,6 @@
<script setup> <script setup>
definePageMeta({ definePageMeta({
layout: 'home', layout: "home",
}); });
const show = reactive({ const show = reactive({
@ -11,83 +11,85 @@
}); });
const form = reactive({ const form = reactive({
name: '', name: "",
description: '', description: "",
notes: '', notes: "",
// Item Identification // Item Identification
serialNumber: '', serialNumber: "",
modelNumber: '', modelNumber: "",
manufacturer: '', manufacturer: "",
// Purchase Information // Purchase Information
purchaseTime: '', purchaseTime: "",
purchasePrice: '', purchasePrice: "",
purchaseFrom: '', purchaseFrom: "",
// Sold Information // Sold Information
soldTime: '', soldTime: "",
soldPrice: '', soldPrice: "",
soldTo: '', soldTo: "",
soldNotes: '', soldNotes: "",
}); });
function submit() {} function submit() {
console.log("Submitted!");
}
</script> </script>
<template> <template>
<BaseContainer is="section"> <BaseContainer cmp="section">
<BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader> <BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader>
<form @submit.prevent="submit" class="max-w-3xl mx-auto my-5 space-y-6"> <form class="max-w-3xl mx-auto my-5 space-y-6" @submit.prevent="submit">
<div class="divider collapse-title px-0 cursor-pointer">Required Information</div> <div class="divider collapse-title px-0 cursor-pointer">Required Information</div>
<div class="bg-base-200 card"> <div class="bg-base-200 card">
<div class="card-body"> <div class="card-body">
<FormTextField label="Name" v-model="form.name" /> <FormTextField v-model="form.name" label="Name" />
<FormTextArea label="Description" v-model="form.description" limit="1000" /> <FormTextArea v-model="form.description" label="Description" limit="1000" />
</div> </div>
</div> </div>
<div class="divider"> <div class="divider">
<button class="btn btn-sm" @click="show.identification = !show.identification">Product Information</button> <button class="btn btn-sm" @click="show.identification = !show.identification">Product Information</button>
</div> </div>
<div class="card bg-base-200" v-if="show.identification"> <div v-if="show.identification" class="card bg-base-200">
<div class="card-body grid md:grid-cols-2"> <div class="card-body grid md:grid-cols-2">
<FormTextField label="Serial Number" v-model="form.serialNumber" /> <FormTextField v-model="form.serialNumber" label="Serial Number" />
<FormTextField label="Model Number" v-model="form.modelNumber" /> <FormTextField v-model="form.modelNumber" label="Model Number" />
<FormTextField label="Manufacturer" v-model="form.manufacturer" /> <FormTextField v-model="form.manufacturer" label="Manufacturer" />
</div> </div>
</div> </div>
<div class=""> <div class="">
<button class="btn btn-sm" @click="show.purchase = !show.purchase">Purchase Information</button> <button class="btn btn-sm" @click="show.purchase = !show.purchase">Purchase Information</button>
<div class="divider"></div> <div class="divider"></div>
</div> </div>
<div class="card bg-base-200" v-if="show.purchase"> <div v-if="show.purchase" class="card bg-base-200">
<div class="card-body grid md:grid-cols-2"> <div class="card-body grid md:grid-cols-2">
<FormTextField label="Purchase Time" v-model="form.purchaseTime" /> <FormTextField v-model="form.purchaseTime" label="Purchase Time" />
<FormTextField label="Purchase Price" v-model="form.purchasePrice" /> <FormTextField v-model="form.purchasePrice" label="Purchase Price" />
<FormTextField label="Purchase From" v-model="form.purchaseFrom" /> <FormTextField v-model="form.purchaseFrom" label="Purchase From" />
</div> </div>
</div> </div>
<div class="divider"> <div class="divider">
<button class="btn btn-sm" @click="show.sold = !show.sold">Sold Information</button> <button class="btn btn-sm" @click="show.sold = !show.sold">Sold Information</button>
</div> </div>
<div class="card bg-base-200" v-if="show.sold"> <div v-if="show.sold" class="card bg-base-200">
<div class="card-body"> <div class="card-body">
<div class="grid md:grid-cols-2 gap-2"> <div class="grid md:grid-cols-2 gap-2">
<FormTextField label="Sold Time" v-model="form.soldTime" /> <FormTextField v-model="form.soldTime" label="Sold Time" />
<FormTextField label="Sold Price" v-model="form.soldPrice" /> <FormTextField v-model="form.soldPrice" label="Sold Price" />
<FormTextField label="Sold To" v-model="form.soldTo" /> <FormTextField v-model="form.soldTo" label="Sold To" />
</div> </div>
<FormTextArea label="Sold Notes" v-model="form.soldNotes" limit="1000" /> <FormTextArea v-model="form.soldNotes" label="Sold Notes" limit="1000" />
</div> </div>
</div> </div>
<div class="divider"> <div class="divider">
<button class="btn btn-sm" @click="show.extras = !show.extras">Extras</button> <button class="btn btn-sm" @click="show.extras = !show.extras">Extras</button>
</div> </div>
<div class="card bg-base-200" v-if="show.extras"> <div v-if="show.extras" class="card bg-base-200">
<div class="card-body"> <div class="card-body">
<FormTextArea label="Notes" v-model="form.notes" limit="1000" /> <FormTextArea v-model="form.notes" label="Notes" limit="1000" />
</div> </div>
</div> </div>
</form> </form>

56
frontend/pages/label/[id].vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import ActionsDivider from '../../components/Base/ActionsDivider.vue'; import ActionsDivider from "../../components/Base/ActionsDivider.vue";
definePageMeta({ definePageMeta({
layout: 'home', layout: "home",
}); });
const route = useRoute(); const route = useRoute();
@ -16,8 +16,8 @@
const { data: label } = useAsyncData(labelId.value, async () => { const { data: label } = useAsyncData(labelId.value, async () => {
const { data, error } = await api.labels.get(labelId.value); const { data, error } = await api.labels.get(labelId.value);
if (error) { if (error) {
toast.error('Failed to load label'); toast.error("Failed to load label");
navigateTo('/home'); navigateTo("/home");
return; return;
} }
return data; return data;
@ -25,25 +25,25 @@
function maybeTimeAgo(date?: string): string { function maybeTimeAgo(date?: string): string {
if (!date) { if (!date) {
return '??'; return "??";
} }
const time = new Date(date); const time = new Date(date);
return `${useTimeAgo(time).value} (${useDateFormat(time, 'MM-DD-YYYY').value})`; return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
} }
const details = computed(() => { const details = computed(() => {
const dt = { const dt = {
Name: label.value?.name || '', Name: label.value?.name || "",
Description: label.value?.description || '', Description: label.value?.description || "",
}; };
if (preferences.value.showDetails) { if (preferences.value.showDetails) {
dt['Created At'] = maybeTimeAgo(label.value?.createdAt); dt["Created At"] = maybeTimeAgo(label.value?.createdAt);
dt['Updated At'] = maybeTimeAgo(label.value?.updatedAt); dt["Updated At"] = maybeTimeAgo(label.value?.updatedAt);
dt['Database ID'] = label.value?.id || ''; dt["Database ID"] = label.value?.id || "";
dt['Group Id'] = label.value?.groupId || ''; dt["Group Id"] = label.value?.groupId || "";
} }
return dt; return dt;
@ -52,7 +52,7 @@
const { reveal } = useConfirm(); const { reveal } = useConfirm();
async function confirmDelete() { async function confirmDelete() {
const { isCanceled } = await reveal('Are you sure you want to delete this label? This action cannot be undone.'); const { isCanceled } = await reveal("Are you sure you want to delete this label? This action cannot be undone.");
if (isCanceled) { if (isCanceled) {
return; return;
@ -61,24 +61,24 @@
const { error } = await api.labels.delete(labelId.value); const { error } = await api.labels.delete(labelId.value);
if (error) { if (error) {
toast.error('Failed to delete label'); toast.error("Failed to delete label");
return; return;
} }
toast.success('Label deleted'); toast.success("Label deleted");
navigateTo('/home'); navigateTo("/home");
} }
const updateModal = ref(false); const updateModal = ref(false);
const updating = ref(false); const updating = ref(false);
const updateData = reactive({ const updateData = reactive({
name: '', name: "",
description: '', description: "",
color: '', color: "",
}); });
function openUpdate() { function openUpdate() {
updateData.name = label.value?.name || ''; updateData.name = label.value?.name || "";
updateData.description = label.value?.description || ''; updateData.description = label.value?.description || "";
updateModal.value = true; updateModal.value = true;
} }
@ -87,11 +87,11 @@
const { error, data } = await api.labels.update(labelId.value, updateData); const { error, data } = await api.labels.update(labelId.value, updateData);
if (error) { if (error) {
toast.error('Failed to update label'); toast.error("Failed to update label");
return; return;
} }
toast.success('Label updated'); toast.success("Label updated");
label.value = data; label.value = data;
updateModal.value = false; updateModal.value = false;
updating.value = false; updating.value = false;
@ -103,8 +103,8 @@
<BaseModal v-model="updateModal"> <BaseModal v-model="updateModal">
<template #title> Update Label </template> <template #title> Update Label </template>
<form v-if="label" @submit.prevent="update"> <form v-if="label" @submit.prevent="update">
<FormTextField :autofocus="true" label="Label Name" v-model="updateData.name" /> <FormTextField v-model="updateData.name" :autofocus="true" label="Label Name" />
<FormTextField label="Label Description" v-model="updateData.description" /> <FormTextField v-model="updateData.description" label="Label Description" />
<div class="modal-action"> <div class="modal-action">
<BaseButton type="submit" :loading="updating"> Update </BaseButton> <BaseButton type="submit" :loading="updating"> Update </BaseButton>
</div> </div>
@ -112,14 +112,14 @@
</BaseModal> </BaseModal>
<section> <section>
<BaseSectionHeader class="mb-5" dark> <BaseSectionHeader class="mb-5" dark>
{{ label ? label.name : '' }} {{ label ? label.name : "" }}
</BaseSectionHeader> </BaseSectionHeader>
<BaseDetails class="mb-2" :details="details"> <BaseDetails class="mb-2" :details="details">
<template #title> Label Details </template> <template #title> Label Details </template>
</BaseDetails> </BaseDetails>
<div class="form-control ml-auto mr-2 max-w-[130px]"> <div class="form-control ml-auto mr-2 max-w-[130px]">
<label class="label cursor-pointer"> <label class="label cursor-pointer">
<input type="checkbox" v-model.checked="preferences.showDetails" class="checkbox" /> <input v-model="preferences.showDetails" type="checkbox" class="toggle" />
<span class="label-text"> Detailed View </span> <span class="label-text"> Detailed View </span>
</label> </label>
</div> </div>
@ -129,7 +129,7 @@
<section v-if="label"> <section v-if="label">
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader> <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
<div class="grid gap-2 grid-cols-2"> <div class="grid gap-2 grid-cols-2">
<ItemCard v-for="item in label.items" :item="item" :key="item.id" /> <ItemCard v-for="item in label.items" :key="item.id" :item="item" />
</div> </div>
</section> </section>
</BaseContainer> </BaseContainer>

54
frontend/pages/location/[id].vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import ActionsDivider from '../../components/Base/ActionsDivider.vue'; import ActionsDivider from "../../components/Base/ActionsDivider.vue";
definePageMeta({ definePageMeta({
layout: 'home', layout: "home",
}); });
const route = useRoute(); const route = useRoute();
@ -16,8 +16,8 @@
const { data: location } = useAsyncData(locationId.value, async () => { const { data: location } = useAsyncData(locationId.value, async () => {
const { data, error } = await api.locations.get(locationId.value); const { data, error } = await api.locations.get(locationId.value);
if (error) { if (error) {
toast.error('Failed to load location'); toast.error("Failed to load location");
navigateTo('/home'); navigateTo("/home");
return; return;
} }
return data; return data;
@ -25,25 +25,25 @@
function maybeTimeAgo(date?: string): string { function maybeTimeAgo(date?: string): string {
if (!date) { if (!date) {
return '??'; return "??";
} }
const time = new Date(date); const time = new Date(date);
return `${useTimeAgo(time).value} (${useDateFormat(time, 'MM-DD-YYYY').value})`; return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
} }
const details = computed(() => { const details = computed(() => {
const dt = { const dt = {
Name: location.value?.name || '', Name: location.value?.name || "",
Description: location.value?.description || '', Description: location.value?.description || "",
}; };
if (preferences.value.showDetails) { if (preferences.value.showDetails) {
dt['Created At'] = maybeTimeAgo(location.value?.createdAt); dt["Created At"] = maybeTimeAgo(location.value?.createdAt);
dt['Updated At'] = maybeTimeAgo(location.value?.updatedAt); dt["Updated At"] = maybeTimeAgo(location.value?.updatedAt);
dt['Database ID'] = location.value?.id || ''; dt["Database ID"] = location.value?.id || "";
dt['Group Id'] = location.value?.groupId || ''; dt["Group Id"] = location.value?.groupId || "";
} }
return dt; return dt;
@ -52,7 +52,7 @@
const { reveal } = useConfirm(); const { reveal } = useConfirm();
async function confirmDelete() { async function confirmDelete() {
const { isCanceled } = await reveal('Are you sure you want to delete this location? This action cannot be undone.'); const { isCanceled } = await reveal("Are you sure you want to delete this location? This action cannot be undone.");
if (isCanceled) { if (isCanceled) {
return; return;
@ -61,23 +61,23 @@
const { error } = await api.locations.delete(locationId.value); const { error } = await api.locations.delete(locationId.value);
if (error) { if (error) {
toast.error('Failed to delete location'); toast.error("Failed to delete location");
return; return;
} }
toast.success('Location deleted'); toast.success("Location deleted");
navigateTo('/home'); navigateTo("/home");
} }
const updateModal = ref(false); const updateModal = ref(false);
const updating = ref(false); const updating = ref(false);
const updateData = reactive({ const updateData = reactive({
name: '', name: "",
description: '', description: "",
}); });
function openUpdate() { function openUpdate() {
updateData.name = location.value?.name || ''; updateData.name = location.value?.name || "";
updateData.description = location.value?.description || ''; updateData.description = location.value?.description || "";
updateModal.value = true; updateModal.value = true;
} }
@ -86,11 +86,11 @@
const { error, data } = await api.locations.update(locationId.value, updateData); const { error, data } = await api.locations.update(locationId.value, updateData);
if (error) { if (error) {
toast.error('Failed to update location'); toast.error("Failed to update location");
return; return;
} }
toast.success('Location updated'); toast.success("Location updated");
location.value = data; location.value = data;
updateModal.value = false; updateModal.value = false;
updating.value = false; updating.value = false;
@ -102,8 +102,8 @@
<BaseModal v-model="updateModal"> <BaseModal v-model="updateModal">
<template #title> Update Location </template> <template #title> Update Location </template>
<form v-if="location" @submit.prevent="update"> <form v-if="location" @submit.prevent="update">
<FormTextField :autofocus="true" label="Location Name" v-model="updateData.name" /> <FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
<FormTextField label="Location Description" v-model="updateData.description" /> <FormTextField v-model="updateData.description" label="Location Description" />
<div class="modal-action"> <div class="modal-action">
<BaseButton type="submit" :loading="updating"> Update </BaseButton> <BaseButton type="submit" :loading="updating"> Update </BaseButton>
</div> </div>
@ -111,14 +111,14 @@
</BaseModal> </BaseModal>
<section> <section>
<BaseSectionHeader class="mb-5" dark> <BaseSectionHeader class="mb-5" dark>
{{ location ? location.name : '' }} {{ location ? location.name : "" }}
</BaseSectionHeader> </BaseSectionHeader>
<BaseDetails class="mb-2" :details="details"> <BaseDetails class="mb-2" :details="details">
<template #title> Location Details </template> <template #title> Location Details </template>
</BaseDetails> </BaseDetails>
<div class="form-control ml-auto mr-2 max-w-[130px]"> <div class="form-control ml-auto mr-2 max-w-[130px]">
<label class="label cursor-pointer"> <label class="label cursor-pointer">
<input type="checkbox" v-model.checked="preferences.showDetails" class="checkbox" /> <input v-model="preferences.showDetails" type="checkbox" class="toggle" />
<span class="label-text"> Detailed View </span> <span class="label-text"> Detailed View </span>
</label> </label>
</div> </div>
@ -128,7 +128,7 @@
<section v-if="location"> <section v-if="location">
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader> <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
<div class="grid gap-2 grid-cols-2"> <div class="grid gap-2 grid-cols-2">
<ItemCard v-for="item in location.items" :item="item" :key="item.id" /> <ItemCard v-for="item in location.items" :key="item.id" :item="item" />
</div> </div>
</section> </section>
</BaseContainer> </BaseContainer>

1413
frontend/pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

2
frontend/postcss.config.js
View file

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

24
frontend/stores/auth.ts
View file

@ -1,11 +1,11 @@
import { UserApi } from '~~/lib/api/user'; import { defineStore } from "pinia";
import { defineStore } from 'pinia'; import { useLocalStorage } from "@vueuse/core";
import { useLocalStorage } from '@vueuse/core'; import { UserApi } from "~~/lib/api/user";
export const useAuthStore = defineStore('auth', { export const useAuthStore = defineStore("auth", {
state: () => ({ state: () => ({
token: useLocalStorage('pinia/auth/token', ''), token: useLocalStorage("pinia/auth/token", ""),
expires: useLocalStorage('pinia/auth/expires', ''), expires: useLocalStorage("pinia/auth/expires", ""),
}), }),
getters: { getters: {
isTokenExpired: state => { isTokenExpired: state => {
@ -13,7 +13,7 @@ export const useAuthStore = defineStore('auth', {
return true; return true;
} }
if (typeof state.expires === 'string') { if (typeof state.expires === "string") {
return new Date(state.expires) < new Date(); return new Date(state.expires) < new Date();
} }
@ -28,8 +28,8 @@ export const useAuthStore = defineStore('auth', {
return result; return result;
} }
this.token = ''; this.token = "";
this.expires = ''; this.expires = "";
return result; return result;
}, },
@ -38,9 +38,9 @@ export const useAuthStore = defineStore('auth', {
* must clear it's local session, usually when a 401 is received. * must clear it's local session, usually when a 401 is received.
*/ */
clearSession() { clearSession() {
this.token = ''; this.token = "";
this.expires = ''; this.expires = "";
navigateTo('/'); navigateTo("/");
}, },
}, },
}); });

10
frontend/tailwind.config.js
View file

@ -1,15 +1,11 @@
module.exports = { module.exports = {
content: ['./app.vue', './{components,pages,layouts}/**/*.{vue,js,ts,jsx,tsx}'], content: ["./app.vue", "./{components,pages,layouts}/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: 'class', // or 'media' or 'class' darkMode: "class", // or 'media' or 'class'
theme: { theme: {
extend: {}, extend: {},
}, },
variants: { variants: {
extend: {}, extend: {},
}, },
plugins: [ plugins: [require("@tailwindcss/aspect-ratio"), require("@tailwindcss/typography"), require("daisyui")],
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('daisyui'),
],
}; };

1
frontend/test/config.ts
View file

@ -1,4 +1,3 @@
export const PORT = "7745"; export const PORT = "7745";
export const HOST = "http://127.0.0.1"; export const HOST = "http://127.0.0.1";
export const BASE_URL = HOST + ":" + PORT; export const BASE_URL = HOST + ":" + PORT;

10
frontend/test/setup.ts
View file

@ -1,8 +1,8 @@
import { exec } from 'child_process'; import { exec } from "child_process";
import * as config from './config'; import * as config from "./config";
export const setup = () => { export const setup = () => {
console.log('Starting Client Tests'); console.log("Starting Client Tests");
console.log({ console.log({
PORT: config.PORT, PORT: config.PORT,
HOST: config.HOST, HOST: config.HOST,
@ -12,8 +12,8 @@ export const setup = () => {
export const teardown = () => { export const teardown = () => {
if (process.env.TEST_SHUTDOWN_API_SERVER) { if (process.env.TEST_SHUTDOWN_API_SERVER) {
const pc = exec('pkill -SIGTERM api'); // Kill background API process const pc = exec("pkill -SIGTERM api"); // Kill background API process
pc.stdout.on('data', data => { pc.stdout.on("data", data => {
console.log(`stdout: ${data}`); console.log(`stdout: ${data}`);
}); });
} }