From 0bab558c759e528c2a03643e3f029efa9f2713d5 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 7 Jan 2025 12:42:00 +0100
Subject: [PATCH] Updated in Files and Archiving

---
 components/ButtonWithConfirm.vue    |  30 ++--
 components/DocumentDisplay.vue      | 268 ++--------------------------
 components/DocumentDisplayModal.vue | 123 +++++++++++--
 components/DocumentList.vue         |   2 +
 composables/useFiles.js             |  14 +-
 5 files changed, 151 insertions(+), 286 deletions(-)

diff --git a/components/ButtonWithConfirm.vue b/components/ButtonWithConfirm.vue
index fb17fb5..fe10c44 100644
--- a/components/ButtonWithConfirm.vue
+++ b/components/ButtonWithConfirm.vue
@@ -18,6 +18,7 @@ const {color,variant} = props
 const showModal = ref(false)
 
 const emitConfirm = () => {
+  showModal.value = false
   emit('confirmed')
 }
 </script>
@@ -38,19 +39,22 @@ const emitConfirm = () => {
       <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>
+          <UButtonGroup>
+            <UButton
+                color="rose"
+                variant="outline"
+                @click="showModal = false"
+            >
+              Abbrechen
+            </UButton>
+            <UButton
+                @click="emitConfirm"
+                class="ml-2"
+            >
+              Bestätigen
+            </UButton>
+          </UButtonGroup>
+
         </div>
       </template>
     </UCard>
diff --git a/components/DocumentDisplay.vue b/components/DocumentDisplay.vue
index cdb2702..d88a3ba 100644
--- a/components/DocumentDisplay.vue
+++ b/components/DocumentDisplay.vue
@@ -1,8 +1,11 @@
 <script setup>
 
+import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
+
 const toast = useToast()
 const supabase = useSupabaseClient()
 const dataStore = useDataStore()
+const modal = useModal()
 const profileStore = useProfileStore()
 const router = useRouter()
 const props = defineProps({
@@ -20,89 +23,22 @@ const props = defineProps({
 
 })
 
-let {documentData, openShowModal:openShowModalProp, returnEmit } = props;
-const tags = dataStore.getDocumentTags
-const openShowModal = ref(false)
+let {documentData, returnEmit } = props;
 
 
-
-
-//Functions
-const openDocument = async () => {
-  //selectedDocument.value = doc
-  openShowModal.value = true
-  console.log("open")
+const showFile = (file) => {
+  console.log(file)
+  modal.open(DocumentDisplayModal,{
+    documentData: file
+  })
 }
 
-const updateDocument = async () => {
-  console.log("Update")
 
-  const {url, ...objData} = documentData
-  delete objData.url
-
-
-  const {data,error} = await supabase
-      .from("documents")
-      .update(objData)
-      .eq('id',objData.id)
-      .select()
-
-  if(error) {
-    console.log(error)
-  } else {
-    toast.add({title: "Dokument aktualisiert"})
-    //openShowModal.value = false
-  }
-
-}
-
-const archiveDocument = () => {
-  //documentData.tags.push("Archiviert")
-  //updateDocument()
-}
-
-const resourceOptions = ref([
-    {label: 'Projekt', value: 'project', optionAttr: "name"},
-  {label: 'Kunde', value: 'customer', optionAttr: "name"},
-  {label: 'Lieferant', value: 'vendor', optionAttr: "name"},
-  {label: 'Fahrzeug', value: 'vehicle', optionAttr: "licensePlate"},
-  {label: 'Objekt', value: 'plant', optionAttr: "name"},
-  {label: 'Vertrag', value: 'contract', optionAttr: "name"},
-  {label: 'Produkt', value: 'product', optionAttr: "name"}
-])
-const resourceToAssign = ref("project")
-const itemOptions = ref([])
-const idToAssign = ref(null)
-const getItemsBySelectedResource = () => {
-  if(resourceToAssign.value === "project") {
-    itemOptions.value = dataStore.projects
-  } else if(resourceToAssign.value === "customer") {
-    itemOptions.value = dataStore.customers
-  } else if(resourceToAssign.value === "vendor") {
-    itemOptions.value = dataStore.vendors
-  } else if(resourceToAssign.value === "vehicle") {
-    itemOptions.value = dataStore.vehicles
-  } else if(resourceToAssign.value === "product") {
-    itemOptions.value = dataStore.products
-  } else if(resourceToAssign.value === "plant") {
-    itemOptions.value = dataStore.plants
-  } else if(resourceToAssign.value === "contract") {
-    itemOptions.value = dataStore.contracts
-  } else {
-    itemOptions.value =  []
-  }
-}
-getItemsBySelectedResource()
-
-const updateDocumentAssignment = async () => {
-  documentData[resourceToAssign.value] = idToAssign.value
-  await updateDocument()
-}
 
 </script>
 
 <template>
-  <div :id="`docDisplay-${documentData.id}`"  class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : openShowModal = true">
+  <div :id="`docDisplay-${documentData.id}`"  class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : showFile(documentData)">
     <iframe
         :src="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
         class="previewEmbed"
@@ -125,182 +61,7 @@ const updateDocumentAssignment = async () => {
 
       ><span class="text-nowrap">{{ tag.name }}</span></UBadge>
     </InputGroup>
-
-
-<!--    <UButton
-        @click="openDocument"
-        class="mt-3"
-        icon=""
-    >
-      <UIcon name="i-heroicons-eye-solid" />
-    </UButton>-->
-<!--    <UToggle
-        v-model="documentData.selected"
-        class="ml-2"
-    />-->
-<!--    <UBadge
-      v-if="documentData.vendorInvoice"
-    >{{dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
-    <UBadge
-      v-if="documentData.inDatev"
-    >DATEV</UBadge>-->
   </div>
-
-
-
-  <USlideover
-      v-model="openShowModal"
-      fullscreen
-  >
-    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex flex-row justify-between">
-          <div class="flex items-center gap-2">
-            <UBadge
-                v-for="tag in documentData.filetags"
-            >
-              {{tag.name}}
-            </UBadge>
-          </div>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openShowModal = false" />
-        </div>
-
-      </template>
-
-      <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
-        <object
-            class="bigPreview"
-            :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
-            type="application/pdf"
-            v-if="!documentData.filetags.includes('Bild')"
-
-        />
-        <img
-          class=" w-full"
-          :src="documentData.url"
-          alt=""
-          v-else
-        />
-      </UContainer>
-
-      <template #footer>
-
-        <UButtonGroup>
-<!--          <UButton
-            @click="archiveDocument"
-          >
-            Archivieren
-          </UButton>-->
-          <UButton
-            :to="documentData.url"
-            variant="outline"
-            icon="i-heroicons-arrow-top-right-on-square"
-            target="_blank"
-          >
-            Öffnen
-          </UButton>
-        </UButtonGroup>
-
-        <UFormGroup
-          label="Tags ändern:"
-        >
-          <USelectMenu
-              :options="tags"
-              v-model="documentData.filetags"
-              @change="updateDocument"
-              multiple
-          >
-            <template #label>
-              {{documentData.filetags.length}} ausgewählt
-            </template>
-          </USelectMenu>
-        </UFormGroup>
-
-        <p>Dokument zuweisen:</p>
-        <UFormGroup
-          label="Resource auswählen"
-        >
-          <USelectMenu
-              :options="resourceOptions"
-              v-model="resourceToAssign"
-              value-attribute="value"
-              option-attribute="label"
-              @change="getItemsBySelectedResource"
-          >
-
-          </USelectMenu>
-        </UFormGroup>
-        <UFormGroup
-          label="Eintrag auswählen:"
-        >
-
-        </UFormGroup>
-
-        <USelectMenu
-          :options="itemOptions"
-          v-model="idToAssign"
-          :option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
-          value-attribute="id"
-          @change="updateDocumentAssignment"
-        ></USelectMenu>
-
-
-<!--        <UFormGroup
-            label="Projekt zuweisen:"
-        >
-          <USelectMenu
-              :options="dataStore.projects"
-              option-attribute="name"
-              value-attribute="id"
-              v-model="documentData.project"
-              @change="updateDocument"
-              searchable
-              :search-attributes="['name']"
-          >
-            <template #label>
-              {{dataStore.projects.find(item => item.id === documentData.project) ? dataStore.projects.find(item => item.id === documentData.project).name : "Kein Projekt ausgewählt" }}
-            </template>
-          </USelectMenu>
-        </UFormGroup>
-
-        <UFormGroup
-            label="Kunde zuweisen:"
-        >
-          <USelectMenu
-              :options="dataStore.customers"
-              option-attribute="name"
-              value-attribute="id"
-              v-model="documentData.customer"
-              @change="updateDocument"
-              searchable
-              :search-attributes="['name']"
-          >
-            <template #label>
-              {{dataStore.customers.find(item => item.id === documentData.customer) ? dataStore.customers.find(item => item.id === documentData.customer).name : "Kein Kunde ausgewählt" }}
-            </template>
-          </USelectMenu>
-        </UFormGroup>-->
-
-
-      </template>
-    </UCard>
-
-
-<!--    <UCard class="h-full">
-
-
-
-
-
-
-
-
-
-
-
-
-    </UCard>-->
-  </USlideover>
 </template>
 
 <style scoped>
@@ -332,13 +93,4 @@ const updateDocumentAssignment = async () => {
   display: none;
 }
 
-.bigPreview {
-  width: 100%;
-  aspect-ratio: 1/ 1.414;
-}
-
-.previewImg {
-  object-fit: contain;
-}
-
 </style>
\ No newline at end of file
diff --git a/components/DocumentDisplayModal.vue b/components/DocumentDisplayModal.vue
index 67aefd5..a22210c 100644
--- a/components/DocumentDisplayModal.vue
+++ b/components/DocumentDisplayModal.vue
@@ -19,6 +19,8 @@ const props = defineProps({
 
 })
 
+const emit = defineEmits(["updateNeeded"])
+
 const folders = ref([])
 const setup = async () => {
   const {data} = await supabase.from("folders").select().eq("tenant",useProfileStore().currentTenant)
@@ -61,12 +63,23 @@ const openDocument = async () => {
 }
 
 const updateDocument = async () => {
-  console.log("Update")
-
   const {url, ...objData} = props.documentData
   delete objData.url
   delete objData.filetags
 
+  if(objData.project) objData.project = objData.project.id
+  if(objData.customer) objData.customer = objData.customer.id
+  if(objData.contract) objData.contract = objData.contract.id
+  if(objData.vendor) objData.vendor = objData.vendor.id
+  if(objData.plant) objData.plant = objData.plant.id
+  if(objData.createddocument) objData.createddocument = objData.createddocument.id
+  if(objData.vehicle) objData.vehicle = objData.vehicle.id
+  if(objData.product) objData.product = objData.product.id
+  if(objData.profile) objData.profile = objData.profile.id
+  if(objData.check) objData.check = objData.check.id
+  if(objData.inventoryitem) objData.inventoryitem = objData.inventoryitem.id
+
+
   const {data,error} = await supabase
       .from("files")
       .update(objData)
@@ -81,9 +94,19 @@ const updateDocument = async () => {
   }
 }
 
-const archiveDocument = () => {
-  //documentData.tags.push("Archiviert")
-  //updateDocument()
+const archiveDocument = async () => {
+  props.documentData.archived = true
+  await updateDocument()
+
+  const {data,error} = await supabase.from("historyitems").insert({
+    createdBy: useProfileStore().activeProfile.id,
+    tenant: useProfileStore().currentTenant,
+    text: "Datei archiviert",
+    file: props.documentData.id
+  })
+
+  modal.close()
+  emit("update")
 }
 
 const resourceOptions = ref([
@@ -179,11 +202,20 @@ const moveFile = async () => {
         </div>
         <div class="w-2/3 p-5">
           <UButtonGroup>
-            <!--          <UButton
-                        @click="archiveDocument"
-                      >
-                        Archivieren
-                      </UButton>-->
+            <ButtonWithConfirm
+                color="rose"
+                variant="outline"
+                @confirmed="archiveDocument"
+            >
+              <template #button>
+                Archivieren
+              </template>
+              <template #header>
+                <span class="text-md text-black font-bold">Archivieren bestätigen</span>
+              </template>
+              Möchten Sie die Datei wirklich archivieren?
+            </ButtonWithConfirm>
+
             <UButton
                 :to="props.documentData.url"
                 variant="outline"
@@ -194,6 +226,77 @@ const moveFile = async () => {
             </UButton>
           </UButtonGroup>
 
+          <UDivider>Zuweisungen</UDivider>
+
+          <table class="w-full">
+            <tr v-if="props.documentData.project">
+              <td>Projekt</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/projects/show/${props.documentData.project.id}`">{{props.documentData.project.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.customer">
+              <td>Kunde</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/customers/show/${props.documentData.customer.id}`">{{props.documentData.customer.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.vendor">
+              <td>Lieferant</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/vendors/show/${props.documentData.vendor.id}`">{{props.documentData.vendor.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.createddocument">
+              <td>Ausgangsbeleg</td>
+              <td>
+                <nuxt-link :to="`/createddocuments/show/${props.documentData.createddocument.id}`">{{props.documentData.createddocument.documentNumber}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.plant">
+              <td>Objekt</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/plants/show/${props.documentData.plant.id}`">{{props.documentData.plant.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.contract">
+              <td>Vertrag</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/contracts/show/${props.documentData.contract.id}`">{{props.documentData.contract.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.vehicle">
+              <td>Fahrzeug</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/vehicles/show/${props.documentData.vehicle.id}`">{{props.documentData.vehicle.licensePlate}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.product">
+              <td>Artikel</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/products/show/${props.documentData.product.id}`">{{props.documentData.product.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.inventoryitem">
+              <td>Inventarartikel</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/inventoryitem/show/${props.documentData.inventoryitem.id}`">{{props.documentData.inventoryitem.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.check">
+              <td>Überprüfung</td>
+              <td>
+                <nuxt-link :to="`/standardEntity/checks/show/${props.documentData.check.id}`">{{props.documentData.check.name}}</nuxt-link>
+              </td>
+            </tr>
+            <tr v-if="props.documentData.profile">
+              <td>Mitarbeiter</td>
+              <td>
+                <nuxt-link :to="`/profiles/show/${props.documentData.profile.id}`">{{props.documentData.profile.fullName}}</nuxt-link>
+              </td>
+            </tr>
+          </table>
+
           <UDivider class="my-3">Datei zuweisen</UDivider>
 
           <UFormGroup
diff --git a/components/DocumentList.vue b/components/DocumentList.vue
index b52ddf9..69709bf 100644
--- a/components/DocumentList.vue
+++ b/components/DocumentList.vue
@@ -10,6 +10,7 @@ const props = defineProps({
 })
 const dataStore = useDataStore()
 
+const emit = defineEmits(["updateNeeded"])
 
 </script>
 
@@ -21,6 +22,7 @@ const dataStore = useDataStore()
         :key="item.id"
         @clicked="(info) => $emit('selectDocument', info)"
         :return-emit="returnDocumentId"
+        @updatedNeeded="emit('updatedNeeded')"
     />
   </div>
 </template>
diff --git a/composables/useFiles.js b/composables/useFiles.js
index b79346a..a64dafc 100644
--- a/composables/useFiles.js
+++ b/composables/useFiles.js
@@ -92,16 +92,18 @@ export const useFiles = () => {
         if(sortColumn !== null ) {
             data = (await supabase
                 .from("files")
-                .select('*, filetags(*)')
+                .select('*, filetags(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)')
                 .eq("tenant", profileStore.currentTenant)
                 .not("path","is",null)
+                .not("archived","is",true)
                 .order(sortColumn, {ascending: true})).data
         } else {
             data = (await supabase
                 .from("files")
-                .select('*, filetags(*)')
+                .select('*, filetags(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)')
                 .eq("tenant", profileStore.currentTenant)
-                .not("path","is",null)).data
+                .not("path","is",null)
+                .not("archived","is",true)).data
 
         }
 
@@ -133,17 +135,19 @@ export const useFiles = () => {
         if(sortColumn !== null ) {
             data = (await supabase
                 .from("files")
-                .select('*, filetags(*)')
+                .select('*, filetags(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)')
                 .in("id",documentIds)
                 .eq("tenant", profileStore.currentTenant)
                 .not("path","is",null)
+                .not("archived","is",true)
                 .order(sortColumn, {ascending: true})).data
         } else {
             data = (await supabase
                 .from("files")
-                .select('*, filetags(*)')
+                .select('*, filetags(*), project(*), vendor(*), customer(*), contract(*), plant(*), createddocument(*), vehicle(*), product(*), profile(*), check(*), inventoryitem(*)')
                 .in("id",documentIds)
                 .not("path","is",null)
+                .not("archived","is",true)
                 .eq("tenant", profileStore.currentTenant)).data
 
         }