Add equipment types management

app/app.vue

@@ -1,9 +1,9 @@
 <template>
+  <PerdToaster />
+
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
-
-  <PerdToaster />
 </template>
 
 <script lang="ts" setup>

app/components/equipment/EmptyContent.vue → app/components/EmptyState.vue

@@ -1,16 +1,22 @@
 <template>
   <div :class="$style.component">
     <Icon
-      name="tabler:backpack"
+      :name="icon"
       size="1.5em"
     />
 
-    <span>
-      Inventory is empty
-    </span>
+    <slot />
   </div>
 </template>
 
+<script lang="ts" setup>
+  interface Props {
+    readonly icon: string;
+  }
+
+  defineProps<Props>();
+</script>
+
 <style module>
   .component {
     display: flex;
@@ -20,5 +26,7 @@
     padding: var(--spacing-32);
     color: var(--input-color-main);
     background-color: var(--element-color-background);
+    border: 1px solid var(--input-color-main);
+    border-radius: var(--border-radius-16);
   }
 </style>

app/components/PerdToaster.vue

@@ -51,5 +51,6 @@
     top: 0;
     right: 0;
     padding: var(--spacing-24);
+    z-index: 3;
   }
 </style>

app/components/dialogs/CreateChecklistDialog.vue → app/components/dialogs/InputDialog.vue

@@ -3,17 +3,19 @@
     <form
       method="dialog"
       :class="$style.content"
-      @submit.prevent="handleSubmit"
+      @submit="handleSubmit"
     >
-      <div :class="$style.header">Create new checklist</div>
+      <div :class="$style.header">
+        {{ headerText }}
+      </div>
 
       <input
         required
         autofocus
-        placeholder="Checklist name"
-        v-model="checklistName"
+        v-model="input"
+        :placeholder="placeholder"
         :class="$style.input"
-        :maxlength="limits.maxChecklistNameLength"
+        :maxlength="maxlength"
         type="text"
       />
 
@@ -27,33 +29,30 @@
         </PerdButton>
 
         <PerdButton>
-          Create
+          {{ addButtonText }}
         </PerdButton>
       </div>
     </form>
-
-    <div :class="[$style.loader, { visible: loading }]">
-      <FidgetSpinner size="36px" />
-    </div>
   </ModalDialog>
 </template>
 
 <script lang="ts" setup>
-  import { limits } from '~~/constants';
   import PerdButton from '~/components/PerdButton.vue'
-  import FidgetSpinner from '~/components/FidgetSpinner.vue'
   import ModalDialog from './ModalDialog.vue'
 
   interface Props {
-    readonly loading: boolean;
+    readonly headerText: string
+    readonly placeholder: string
+    readonly addButtonText: string
+    readonly maxlength: number
   }
 
-  type Emits = (event: 'submit', checklistName: string) => void
+  type Emits = (event: 'submit', input: string) => void
 
   defineProps<Props>()
 
   const emit = defineEmits<Emits>()
-  const checklistName = ref('')
+  const input = ref('')
 
   const isOpened = defineModel<boolean>({
     required: true
@@ -64,15 +63,15 @@
   }
 
   function handleSubmit(event: Event) {
-    if (checklistName.value !== '') {
-      emit('submit', checklistName.value)
+    if (input.value !== '') {
+      emit('submit', input.value)
     }
   }
 
-  // Reset checklist name when dialog is opened
+  // Reset form when dialog is opened
   watch(isOpened, (value) => {
     if (value) {
-      checklistName.value = ''
+      input.value = ''
     }
   })
 </script>
@@ -106,27 +105,4 @@
     grid-auto-flow: column;
     column-gap: var(--spacing-16);
   }
-
-  .loader {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    inset: 0;
-    justify-content: center;
-    align-items: center;
-    background-color: rgb(0 0 0 / 35%);
-    border-radius: var(--border-radius-24);
-    transition:
-      opacity 0.3s ease-out,
-      display 0.3s ease-out allow-discrete;
-
-    &:global(.visible) {
-      opacity: 1;
-      display: flex;
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-  }
 </style>

app/components/equipment/EquipmentTable.vue

@@ -1,10 +1,7 @@
 <template>
   <div :class="$style.component">
     <table :class="$style.table">
-      <thead
-        v-if="hasItems"
-        :class="$style.header"
-      >
+      <thead :class="$style.header">
         <tr :class="$style.row">
           <th :class="[$style.cell, 'name']">
             Name
@@ -19,50 +16,39 @@
       </thead>
 
       <tbody :class="$style.body">
-        <template v-if="hasItems">
-          <tr
-            v-for="item in equipment"
-            :key="item.id"
-            :class="$style.row"
-          >
-            <td :class="[$style.cell, 'name']">
-              {{ item.name }}
-            </td>
-
-            <td :class="[$style.cell, 'weight']">
-              {{ item.weight }}
-            </td>
-
-            <td :class="[$style.cell, 'actions']">
-              <div :class="$style.action">
-                <PerdButton
-                  small
-                  secondary
-                  icon="tabler:trash"
-                  @click="removeItem(item)"
-                >
-                  Retire
-                </PerdButton>
-              </div>
-            </td>
-          </tr>
-        </template>
-
-        <template v-else>
-          <tr>
-            <td colspan="3">
-              <EmptyContent />
-            </td>
-          </tr>
-        </template>
+        <tr
+          v-for="item in equipment"
+          :key="item.id"
+          :class="$style.row"
+        >
+          <td :class="[$style.cell, 'name']">
+            {{ item.name }}
+          </td>
+
+          <td :class="[$style.cell, 'weight']">
+            {{ item.weight }}
+          </td>
+
+          <td :class="[$style.cell, 'actions']">
+            <div :class="$style.action">
+              <PerdButton
+                small
+                secondary
+                icon="tabler:trash"
+                @click="removeItem(item)"
+              >
+                Retire
+              </PerdButton>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
 </template>
 
 <script lang="ts" setup generic="Item extends EquipmentItem">
   import PerdButton from '~/components/PerdButton.vue';
-  import EmptyContent from './EmptyContent.vue';
 
   export interface EquipmentItem {
     readonly id: number;
@@ -78,7 +64,6 @@
 
   const { equipment } = defineProps<Props>()
   const emit = defineEmits<Emits>()
-  const hasItems = computed(() => equipment.length > 0)
 
   async function removeItem(item: Item) {
     emit('remove', item)

app/composables/use-equipment-types-data.ts

@@ -0,0 +1,27 @@
+interface EquipmentType {
+  readonly id: number
+  readonly name: string
+}
+
+export default async function useEquipmentTypesData() {
+  const types = ref<EquipmentType[]>([])
+
+  const sortedTypes = computed(
+    () => types.value.sort((typeA, typeB) => typeA.name.localeCompare(typeB.name))
+  )
+
+  const { data } = await useFetch('/api/equipment/type')
+
+  if (data.value !== undefined) {
+    types.value = data.value
+  }
+
+  function addType(type: EquipmentType) {
+    types.value.push(type)
+  }
+
+  return {
+    addType,
+    types: sortedTypes
+  }
+}