Added Archiving

components/ButtonWithConfirm.vue

@@ -0,0 +1,62 @@
+<script setup>
+const emit = defineEmits(['confirmed'])
+
+const props = defineProps({
+  color: {
+    type: String,
+    required:false
+  },
+  variant: {
+    type: String,
+    required:false
+  }
+
+})
+
+const {color,variant} = props
+
+const showModal = ref(false)
+
+const emitConfirm = () => {
+  emit('confirmed')
+}
+</script>
+
+<template>
+  <UButton
+    :color="color"
+    :variant="variant"
+    @click="showModal = true"
+  >
+    <slot name="button"></slot>
+  </UButton>
+  <UModal v-model="showModal">
+    <UCard>
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <slot/>
+      <template #footer>
+        <div class="text-right">
+          <UButton
+              color="rose"
+              variant="outline"
+              @click="showModal = false"
+          >
+            Abbrechen
+          </UButton>
+          <UButton
+              @click="emitConfirm"
+              class="ml-2"
+          >
+            Bestätigen
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>

composables/useSearch.js

@@ -4,4 +4,12 @@ export const useSearch = (searchString,items) => {
     }
 
     return items.filter(i => JSON.stringify(i).toLowerCase().includes(searchString.toLowerCase()))
+}
+
+export const useListFilter = (searchString,items,showArchived = false) => {
+    if(!searchString) {
+        return items.filter(i => !i.archived)
+    }
+
+    return items.filter(i => JSON.stringify(i).toLowerCase().includes(searchString.toLowerCase()) && !i.archived)
 }

pages/inventoryitems/[mode]/[[id]].vue

@@ -59,6 +59,20 @@ setupPage()
       >{{itemInfo.id ? `Inventarartikel: ${itemInfo.name}` : (mode === 'create' ? 'Inventarartikel erstellen' : 'Inventarartikel bearbeiten')}}</h1>
     </template>
     <template #right>
+      <ButtonWithConfirm
+          color="rose"
+          variant="outline"
+          @confirmed="dataStore.updateItem('inventoryitems',{...itemInfo, archived: true})"
+          v-if="mode === 'edit'"
+      >
+        <template #button>
+          Archivieren
+        </template>
+        <template #header>
+          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
+        </template>
+        Möchten Sie den Inventarartikel {{itemInfo.name}} wirklich archivieren?
+      </ButtonWithConfirm>
       <UButton
           v-if="mode === 'edit'"
           @click="dataStore.updateItem('inventoryitems',itemInfo)"
@@ -108,6 +122,14 @@ setupPage()
       <div v-if="item.label === 'Informationen'" class="flex-row flex mt-5">
         <div class="w-1/2 mr-5">
           <UCard>
+            <UAlert
+                v-if="itemInfo.archived"
+                color="rose"
+                variant="outline"
+                title="Objekt archiviert"
+                icon="i-heroicons-light-bulb"
+                class="mb-5"
+            />
             <table class="w-full">
               <tr>
                 <td>Name: </td>

pages/plants/[mode]/[[id]].vue

@@ -78,6 +78,20 @@ setupPage()
       >{{itemInfo ? `Objekt: ${itemInfo.name}` : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')}}</h1>
     </template>
     <template #right>
+      <ButtonWithConfirm
+          color="rose"
+          variant="outline"
+          @confirmed="dataStore.updateItem('plants',{...itemInfo, archived: true})"
+          v-if="mode === 'edit'"
+      >
+        <template #button>
+          Archivieren
+        </template>
+        <template #header>
+          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
+        </template>
+        Möchten Sie das Objekt {{itemInfo.name}} wirklich archivieren?
+      </ButtonWithConfirm>
       <UButton
           v-if="mode === 'edit'"
           @click="dataStore.updateItem('plants',itemInfo)"
@@ -114,6 +128,14 @@ setupPage()
     <template #item="{item}">
       <div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
         <UCard class="w-1/2 mr-5">
+          <UAlert
+              v-if="itemInfo.archived"
+              color="rose"
+              variant="outline"
+              title="Objekt archiviert"
+              icon="i-heroicons-light-bulb"
+              class="mb-5"
+          />
           <div class="text-wrap">
             <table>
               <tr>

pages/plants/index.vue

@@ -62,6 +62,8 @@
 
 <script setup>
 
+import {useListFilter} from "~/composables/useSearch.js";
+
 definePageMeta({
   middleware: "auth"
 })
@@ -127,7 +129,7 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  return useSearch(searchString.value, items.value)
+  return useListFilter(searchString.value, items.value)
 })
 
 </script>