Add equipment types management

Fixes #155
Perdolique · Sep 25, 2024 · eaf9641 · eaf9641
1 parent 894060d
commit eaf9641
Show file tree

Hide file tree

Showing 21 changed files with 1,408 additions and 216 deletions.
diff --git a/app/components/equipment/EmptyContent.vue → app/components/EmptyState.vue b/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>
diff --git a/app/components/dialogs/AddEquipmentTypeDialog.vue b/app/components/dialogs/AddEquipmentTypeDialog.vue
@@ -0,0 +1,100 @@
+<template>
+  <ModalDialog v-model="isOpened">
+    <form
+      method="dialog"
+      :class="$style.content"
+      @submit="handleSubmit"
+    >
+      <div :class="$style.header">
+        Add new equipment type
+      </div>
+
+      <input
+        required
+        autofocus
+        placeholder="Sleeping bag"
+        v-model="typeName"
+        :class="$style.input"
+        :maxlength="limits.maxEquipmentTypeNameLength"
+        type="text"
+      />
+
+      <div :class="$style.buttons">
+        <PerdButton
+          secondary
+          type="button"
+          @click="handleCancelClick"
+        >
+          Cancel
+        </PerdButton>
+
+        <PerdButton>
+          Add type
+        </PerdButton>
+      </div>
+    </form>
+  </ModalDialog>
+</template>
+
+<script lang="ts" setup>
+  import { limits } from '~~/constants';
+  import PerdButton from '~/components/PerdButton.vue'
+  import ModalDialog from './ModalDialog.vue'
+
+  type Emits = (event: 'submit', typeName: string) => void
+
+  const emit = defineEmits<Emits>()
+  const typeName = ref('')
+
+  const isOpened = defineModel<boolean>({
+    required: true
+  })
+
+  function handleCancelClick() {
+    isOpened.value = false
+  }
+
+  function handleSubmit(event: Event) {
+    if (typeName.value !== '') {
+      emit('submit', typeName.value)
+    }
+  }
+
+  // Reset form when dialog is opened
+  watch(isOpened, (value) => {
+    if (value) {
+      typeName.value = ''
+    }
+  })
+</script>
+
+<style module>
+  .content {
+    display: grid;
+    row-gap: var(--spacing-24);
+    background-color: var(--dialog-color-background);
+    padding: var(--dialog-padding);
+    border-radius: var(--dialog-border-radius);
+    border: 1px solid var(--dialog-color-border);
+  }
+
+  .header {
+    font-size: var(--font-size-20);
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+  }
+
+  .input {
+    text-align: center;
+  }
+
+  .input::placeholder {
+    user-select: none;
+  }
+
+  .buttons {
+    display: grid;
+    grid-auto-flow: column;
+    column-gap: var(--spacing-16);
+  }
+</style>
diff --git a/app/components/equipment/EquipmentTable.vue b/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)

diff --git a/app/composables/use-equipment-search.ts b/app/composables/use-equipment-search.ts
diff --git a/app/composables/use-equipment-types-data.ts b/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
+  }
+}
diff --git a/app/pages/inventory.vue b/app/pages/inventory.vue
@@ -17,16 +17,25 @@
     </PerdSearch>
 
     <EquipmentTable
+      v-if="hasItems"
       :equipment="equipment"
       @remove="removeItem"
     />
+
+    <EmptyState
+      v-else
+      icon="tabler:backpack"
+    >
+      Inventory is empty
+    </EmptyState>
   </div>
 </template>
 
 <script lang="ts" setup>
   import EquipmentTable from '~/components/equipment/EquipmentTable.vue';
   import SearchOptionAdd from '~/components/PerdSearch/SearchOptionAdd.vue';
   import PerdSearch from '~/components/PerdSearch/PerdSearch.vue';
+  import EmptyState from '~/components/EmptyState.vue';
 
   interface EquipmentItem {
     readonly id: number;
@@ -42,6 +51,7 @@
   const isSearching = ref(false);
   const options = ref<EquipmentItem[]>([]);
   const { equipment, updateEquipment } = await useUserEquipment()
+  const hasItems = computed(() => equipment.value.length > 0)
 
   async function search(searchString: string) {
     try {