move to nuxt

frontend/components/App/Header.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+  import { useAuthStore } from '~~/stores/auth';
+
+  const authStore = useAuthStore();
+  const api = useUserApi();
+
+  async function logout() {
+    const { error } = await authStore.logout(api);
+    if (error) {
+      return;
+    }
+
+    navigateTo('/');
+  }
+
+  const links = [
+    {
+      name: 'Home',
+      href: '/home',
+    },
+    {
+      name: 'Logout',
+      action: logout,
+      last: true,
+    },
+  ];
+
+  const dropdown = [
+    {
+      name: 'Location',
+      action: () => {
+        modal.value = true;
+      },
+    },
+    {
+      name: 'Item / Asset',
+      action: () => {},
+    },
+    {
+      name: 'Label',
+      action: () => {},
+    },
+  ];
+
+  // ----------------------------
+  // Location Stuff
+  // Should move to own component
+  const locationLoading = ref(false);
+  const locationForm = reactive({
+    name: '',
+    description: '',
+  });
+
+  const locationNameRef = ref(null);
+  const triggerFocus = ref(false);
+  const modal = ref(false);
+
+  whenever(
+    () => modal.value,
+    () => {
+      triggerFocus.value = true;
+    }
+  );
+
+  async function createLocation() {
+    locationLoading.value = true;
+    const { data } = await api.locations.create(locationForm);
+
+    if (data) {
+      navigateTo(`/location/${data.id}`);
+    }
+
+    locationLoading.value = false;
+    modal.value = false;
+    locationForm.name = '';
+    locationForm.description = '';
+    triggerFocus.value = false;
+  }
+</script>
+
+<template>
+  <ModalConfirm />
+  <BaseModal v-model="modal">
+    <template #title> Create Location </template>
+    <form @submit.prevent="createLocation">
+      <FormTextField
+        :trigger-focus="triggerFocus"
+        ref="locationNameRef"
+        :autofocus="true"
+        label="Location Name"
+        v-model="locationForm.name"
+      />
+      <FormTextField label="Location Description" v-model="locationForm.description" />
+      <div class="modal-action">
+        <BaseButton type="submit" :loading="locationLoading"> Create </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+  <BaseContainer is="header" class="py-6">
+    <h2 class="mt-1 text-4xl font-bold tracking-tight text-base-content sm:text-5xl lg:text-6xl">Homebox</h2>
+    <div class="ml-1 mt-2 text-lg text-base-content/50 space-x-2">
+      <template v-for="link in links">
+        <NuxtLink
+          v-if="!link.action"
+          class="hover:text-base-content transition-color duration-200 italic"
+          :to="link.href"
+        >
+          {{ link.name }}
+        </NuxtLink>
+        <button
+          for="location-form-modal"
+          v-else
+          @click="link.action"
+          class="hover:text-base-content transition-color duration-200 italic"
+        >
+          {{ link.name }}
+        </button>
+        <span v-if="!link.last"> / </span>
+      </template>
+    </div>
+    <div class="flex mt-6">
+      <div class="dropdown">
+        <label tabindex="0" class="btn btn-sm">
+          <span>
+            <Icon name="mdi-plus" class="w-5 h-5 mr-2" />
+          </span>
+          Create
+        </label>
+        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+          <li v-for="btn in dropdown">
+            <button @click="btn.action">
+              {{ btn.name }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </BaseContainer>
+</template>

frontend/components/App/Toast.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="force-above fixed top-2 right-2 w-[300px]">
+    <TransitionGroup name="notify" tag="div">
+      <div
+        v-for="(notify, index) in notifications.slice(0, 4)"
+        :key="notify.id"
+        class="my-2 w-[300px] rounded-md p-3 text-sm text-white opacity-75"
+        :class="{
+          'bg-primary': notify.type === 'info',
+          'bg-red-600': notify.type === 'error',
+          'bg-green-600': notify.type === 'success',
+        }"
+        @click="dropNotification(index)"
+      >
+        <div class="flex gap-1">
+          <template v-if="notify.type == 'success'">
+            <Icon name="heroicons-check" class="h-5 w-5" />
+          </template>
+          <template v-if="notify.type == 'info'">
+            <Icon name="heroicons-information-circle" class="h-5 w-5" />
+          </template>
+
+          <template v-if="notify.type == 'error'">
+            <Icon name="heroicons-bell-alert" class="h-5 w-5" />
+          </template>
+          {{ notify.message }}
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useNotifications } from '@/composables/use-notifier';
+
+  const { notifications, dropNotification } = useNotifications();
+</script>
+
+<style scoped>
+  .force-above {
+    z-index: 9999;
+  }
+
+  .notify-move,
+  .notify-enter-active,
+  .notify-leave-active {
+    transition: all 0.5s ease;
+  }
+  .notify-enter-from,
+  .notify-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  .notify-leave-active {
+    position: absolute;
+    transform: translateY(30px);
+  }
+</style>