Updated in Files and Archiving

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>