feat: User inventory page

* Fixes #11 * Fixes #12 * Fixes #14 * Fixes #18 * Fixes #19 * Fixes #20 * Fixes #25
Perdolique · Jul 28, 2024 · 9a8da76 · 9a8da76
1 parent d0281ab
commit 9a8da76
Show file tree

Hide file tree

Showing 44 changed files with 6,640 additions and 8,283 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -5,25 +5,12 @@
   </NuxtLayout>
 </template>
 
-<script lang="ts" setup>
-  const { userState } = useUserState()
-  const { data } = await useFetch('/api/user')
-
-  if (data.value?.userId !== undefined) {
-    userState.value.userId = data.value.userId
-  }
-
-  if (data.value?.isAdmin === true) {
-    userState.value.isAdmin = true
-  }
-</script>
-
 <style lang="scss">
   @import "~/assets/styles/base";
 
   body {
     margin: 0;
     background-color: ghostwhite;
-    color: var(--color-blue-900);
+    color: var(--color-primary);
   }
 </style>
diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss
@@ -16,14 +16,14 @@
   --screen-desktop-l: #{$screen-desktop-l};
 
   // Spacings
-  --spacing-2: 2px;
-  --spacing-4: 4px;
-  --spacing-8: 8px;
-  --spacing-12: 12px;
-  --spacing-16: 16px;
-  --spacing-24: 24px;
-  --spacing-32: 32px;
-  --spacing-48: 48px;
+  --spacing-2: 0.125rem;
+  --spacing-4: 0.25rem;
+  --spacing-8: 0.5rem;
+  --spacing-12: 0.75rem;
+  --spacing-16: 1rem;
+  --spacing-24: 1.5rem;
+  --spacing-32: 2rem;
+  --spacing-48: 3rem;
 
   // Colors
   --color-blue-50: #f0fafb;
@@ -38,16 +38,37 @@
   --color-blue-900: #244555;
   --color-blue-950: #132c39;
   --color-white: #fff;
+  --color-primary: #244555;
+  --color-secondary: #666;
+
+  // Font sizes
+  --font-size-12: 0.75rem;
+  --font-size-16: 1rem;
+
+  // Font weights
+  --font-weight-medium: 500;
 
   // Borders
-  --border-radius-1: 8px;
-  --border-radius-2: 16px;
+  --border-radius-1: 0.5rem;
+  --border-radius-2: 1rem;
 
   // Inputs
-  --input-height: 48px;
-  --input-spacing-horizontal: 16px;
+  --input-height: 3rem;
+  --input-spacing-horizontal: 1rem;
+  --input-color-hover-bg: rgb(0 0 0 / 10%);
   --input-color-main: #287892;
-  --input-color-focus: #266278;
-  --input-color-text: #244555;
-  --input-color-placeholder: rgb(140, 140, 140);
+  --input-color-focus: #a26830;
+  --input-color-active: #7a4f24;
+  --input-color-text: #f0fafb;
+  --input-color-placeholder: #8c8c8c;
+
+  // Secondary inputs
+  --input-secondary-color-main: #f0fafb;
+  --input-secondary-color-text: #244555;
+  --input-secondary-color-focus: #d8f2f5;
+  --input-secondary-color-active: #b5e3ec;
+  --input-secondary-color-disabled: #2d95ad;
+
+  // Small inputs
+  --input-small-spacing: 1.5rem;
 }
diff --git a/app/components/CircleSpinner.vue b/app/components/CircleSpinner.vue
@@ -0,0 +1,30 @@
+<template>
+  <div :class="$style.component" />
+</template>
+
+<script lang="ts" setup>
+  const message = 'Woof';
+</script>
+
+<style module>
+  .component {
+    --spinner-size: 24px;
+
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    border: 3px solid rgb(0 0 0 / 15%);
+    border-top: 3px solid currentColor;
+    border-radius: 50%;
+    animation: spin 0.5s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      rotate: 0;
+    }
+
+    100% {
+      rotate: 360deg;
+    }
+  }
+</style>
diff --git a/app/components/NavigationBar.vue → app/components/PageHeader.vue b/app/components/NavigationBar.vue → app/components/PageHeader.vue
@@ -9,7 +9,14 @@
 
     <section :class="$style.links">
       <PerdLink
-        v-if="userState.isAdmin"
+        v-if="isAuthenticated"
+        to="/inventory"
+      >
+        Inventory
+      </PerdLink>
+
+      <PerdLink
+        v-if="user.isAdmin"
         to="/manager/equipment"
       >
         Equipment manager
@@ -18,7 +25,7 @@
 
     <section :class="$style.buttons">
       <PerdButton
-        v-if="isAuthorized"
+        v-if="isAuthenticated"
         @click="removeAuthSession"
       >
         Log out
@@ -28,16 +35,21 @@
 </template>
 
 <script lang="ts" setup>
-  const { userState, isAuthorized, resetUserState } = useUserState()
+  import PerdLink from '~/components/PerdLink.vue';
+  import PerdButton from '~/components/PerdButton.vue';
+
+  const { user, isAuthenticated, resetAuthentication } = useUserStore()
 
   async function removeAuthSession() {
     await $fetch('/api/auth/logout', {
-      method: 'post'
+      method: 'POST'
     })
 
-    resetUserState()
+    resetAuthentication()
 
-    navigateTo('/')
+    await navigateTo({
+      path: '/login'
+    })
   }
 </script>
 

diff --git a/app/components/PerdButton.vue b/app/components/PerdButton.vue
@@ -1,9 +1,24 @@
 <template>
-  <button :class="$style.button">
+  <button :class="[$style.button, {
+    small,
+    secondary
+  }]">
     <slot />
   </button>
 </template>
 
+<script lang="ts" setup>
+  interface Props {
+    readonly secondary?: boolean;
+    readonly small?: boolean;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    secondary: false,
+    small: false
+  });
+</script>
+
 <style module>
   .button {
     height: var(--input-height);
@@ -19,19 +34,44 @@
       background-color 0.15s ease-out,
       color 0.15s ease-out;
 
+    &:global(.secondary) {
+      background-color: var(--input-secondary-color-main);
+      color: var(--input-secondary-color-text);
+      border: 1px solid var(--input-secondary-color-text);
+    }
+
+    &:global(.small) {
+      height: var(--input-small-spacing);
+      font-size: var(--font-size-12);
+    }
+
     &:focus-visible,
     &:hover {
       background-color: var(--input-color-focus);
+
+      &:global(.secondary) {
+        background-color: var(--input-secondary-color-focus);
+      }
     }
 
     &:active {
-      background-color: var(--color-blue-800);
+      background-color: var(--input-color-active);
+
+      &:global(.secondary) {
+        background-color: var(--input-secondary-color-active);
+      }
     }
 
     &:disabled {
       color: var(--color-blue-700);
       background-color: var(--color-blue-100);
       cursor: not-allowed;
+
+      &:global(.secondary) {
+        color: var(--input-secondary-color-disabled);
+        background-color: var(--input-secondary-color-main);
+        border-color: var(--input-secondary-color-disabled);
+      }
     }
   }
 </style>
diff --git a/app/components/PerdInput.vue b/app/components/PerdInput.vue
@@ -55,13 +55,9 @@
     background-color: var(--color-white);
     border: 1px solid var(--input-color-main);
     border-radius: var(--border-radius-2);
-    outline: 1px solid transparent;
-    transition:
-      outline-color 0.15s ease-out,
-      border-color 0.15s ease-out;
+    transition: border-color 0.15s ease-out;
 
     &:has(.input:focus-visible) {
-      outline-color: var(--input-color-focus);
       border-color: var(--input-color-focus);
     }
   }
@@ -75,11 +71,12 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    color: var(--input-color-main);
+    color: var(--input-secondary-color-text);
     left: var(--input-spacing-horizontal);
     transform-origin: top left;
     user-select: none;
     transition:
+      color 0.15s linear,
       scale 0.15s linear,
       translate 0.15s linear;
 
@@ -88,6 +85,10 @@
       scale: 0.70;
       translate: 0 -5px;
     }
+
+    .input:focus-visible + & {
+      color: var(--input-color-focus);
+    }
   }
 
   .input {
@@ -101,7 +102,7 @@
     border: none;
     background: none;
     outline: none;
-    color: var(--input-color-text);
+    color: var(--input-secondary-color-text);
   }
 
   .input::placeholder {

diff --git a/app/components/PerdLink.vue b/app/components/PerdLink.vue
@@ -18,8 +18,13 @@
     color: var(--color-blue-700);
     transition: color 0.15s ease-out;
 
-    &:hover {
-      color: var(--color-blue-950);
+    &:hover,
+    &:focus-visible {
+      color: var(--input-color-focus);
+    }
+
+    &:active {
+      color: var(--input-color-active);
     }
   }
 </style>
diff --git a/app/components/PerdSearch/DefaultOption.vue b/app/components/PerdSearch/DefaultOption.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="$style.component"
+    @click="handleClick"
+  >
+    {{ displayValue }}
+  </div>
+</template>
+
+<script lang="ts" setup generic="Option">
+  interface Props {
+    readonly option: Option;
+    readonly displayField: string;
+  }
+
+  type Emits = (event: 'click', value: Option) => void
+
+  const props = defineProps<Props>();
+  const emit = defineEmits<Emits>();
+
+  const displayValue = computed(() => {
+    if (isRecord(props.option)) {
+      return props.option[props.displayField] ?? 'N/A';
+    }
+
+    return 'N/A';
+  })
+
+  function handleClick() {
+    emit('click', props.option);
+  }
+</script>
+
+<style module>
+  .component {
+    display: flex;
+    align-items: center;
+    height: var(--input-height);
+    padding: 0 var(--input-spacing-horizontal);
+    transition: background-color 0.15s ease-out;
+    cursor: pointer;
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--input-color-main) 15%, transparent)
+    }
+
+    &:global(.empty) {
+      color: var(--input-color-placeholder);
+
+      &:hover {
+        background-color: initial;
+        cursor: initial;
+      }
+    }
+  }
+</style>
diff --git a/app/components/PerdSearch/EmptyOption.vue b/app/components/PerdSearch/EmptyOption.vue
@@ -0,0 +1,15 @@
+<template>
+  <div :class="$style.component">
+    <slot />
+  </div>
+</template>
+
+<style module>
+  .component {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    color: var(--input-color-placeholder);
+    padding: 0 var(--input-spacing-horizontal);
+  }
+</style>