Added Logo

Added Document Download
Added zipjs

spaces/app.vue

@@ -8,13 +8,13 @@ const router = useRouter()
 const route = useRoute()
 const supabase = useSupabaseClient()
 const tenants = (await supabase.from("tenants").select()).data
+const {loaded, profiles} = storeToRefs(useDataStore())
+const {fetchData, getProfileById} = useDataStore()
+const userProfile = user.value ? getProfileById(user.value.id) : {}
 
 
 
 
-const dataStore = useDataStore()
-const {loaded} = storeToRefs(useDataStore())
-const {fetchData} = dataStore
 fetchData()
 
 const navLinks = [
@@ -62,6 +62,11 @@ const navLinks = [
     label: "Inventar",
     to: "/inventory",
     icon: "i-heroicons-square-3-stack-3d"
+  },
+  {
+    label: "Jobs",
+    to: "/jobs",
+    icon: "i-heroicons-square-3-stack-3d"
   }
 ]
 
@@ -151,7 +156,7 @@ const items = [
   }], [{
     label: 'Settings',
     icon: 'i-heroicons-cog-8-tooth'
-  }], [{
+  }], /*[{
     label: 'Documentation',
     icon: 'i-heroicons-book-open'
   }, {
@@ -160,7 +165,7 @@ const items = [
   }, {
     label: 'Status',
     icon: 'i-heroicons-signal'
-  }], [{
+  }],*/ [{
     label: 'Sign out',
     icon: 'i-heroicons-arrow-left-on-rectangle',
     click: () => {
@@ -175,12 +180,17 @@ const items = [
 <template>
   <UHeader :links="navLinks">
     <template #logo>
-      spaces.software
+      <div id="logo">
+        <img src="/spaces.svg"/>
+      </div>
+
     </template>
     <template #right  v-if="user">
       <UColorModeButton/>
       <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
-        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+        <UAvatar
+            :alt="userProfile ? userProfile.firstName + ' ' + userProfile.lastName : '' "
+        />
 
         <template #account="{ item }">
           <div class="text-left">
@@ -201,6 +211,7 @@ const items = [
       </UDropdown>
     </template>
   </UHeader>
+  <UDivider />
   <div class="m-3" id="contentContainer">
     <NuxtPage
         v-if="loaded"
@@ -274,6 +285,11 @@ const items = [
 
 <style>
 
+#logo img{
+  height: 15vh;
+  width: auto;
+}
+
 #contentContainer {
   width: 95vw;
   height: 85vh;

spaces/package.json

@@ -32,6 +32,7 @@
     "@nuxtjs/strapi": "^1.9.3",
     "@pinia/nuxt": "^0.5.1",
     "@vicons/ionicons5": "^0.12.0",
+    "@zip.js/zip.js": "^2.7.32",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "jsprintmanager": "^6.0.3",

spaces/pages/customers/[mode]/[[id]].vue

@@ -150,7 +150,6 @@ setupPage()
           Bearbeiten
         </UButton>
         <UButton
-            @click="cancelEditorCreate"
             color="red"
             class="ml-2"
             disabled

spaces/pages/documents.vue

@@ -2,6 +2,11 @@
   <div>
     <div class="controlHeader">
       <UButton @click="uploadModalOpen = true">Hochladen</UButton>
+      <UButton
+          @click="downloadSelected"
+          class="ml-2"
+          :disabled="documents.filter(doc => doc.selected).length === 0"
+      >Herunterladen</UButton>
       <UModal
         v-model="uploadModalOpen"
       >
@@ -69,11 +74,11 @@
         fullscreen
       >
         <UCard class="h-full">
-
-          <embed
+          {{selectedDocument}}
+<!--          <embed
               class="bigPreview mb-3"
               :src="selectedDocument.url"
-          />
+          />-->
 
           <UBadge
             v-for="tag in selectedDocument.tags"
@@ -107,7 +112,7 @@
       >
         <template #item="{item}">
           <div class="documentList">
-            <div
+            <a
                 v-if="documents.filter(doc => doc.folder === item.label).length > 0"
                 v-for="document in documents.filter(doc => doc.folder === item.label)"
                 class="documentListItem"
@@ -122,6 +127,10 @@
               >
                 <UIcon name="i-heroicons-eye-solid" />
               </UButton>
+              <UToggle
+                v-model="document.selected"
+                class="ml-2"
+              />
 
               <!--              {{document.name}}<br>-->
               <!--              <UBadge
@@ -134,7 +143,7 @@
                                 variant="outline"
                             >{{document.state}}</UBadge>-->
 
-            </div>
+            </a>
             <div v-else>
               <p>Keine Dokumente in diesem Ordner</p>
               <UButton
@@ -153,6 +162,8 @@
 
 <script setup>
 
+import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
+
 definePageMeta({
   middleware: "auth"
 })
@@ -230,19 +241,24 @@ const uploadFile = async () => {
 
 const changeFolder = async () => {
   console.log("Change Folder")
-  console.log(selectedDocument.value.path)
+  console.log(selectedDocument.value)
 
   let filename = selectedDocument.value.path.split("/")[2]
+  let oldPath = selectedDocument.value.path
   let newPath = `${user.value.app_metadata.tenant}/${newFolder.value}/${filename}`
+  console.log(oldPath)
   console.log(newPath)
 
   const { data, error } = await supabase
       .storage
       .from('documents')
-      .move(selectedDocument.value.path, newPath )
+      .move(oldPath,newPath  )
 
-  console.log(data)
-  console.log(error)
+  if(error) {
+    console.log(error)
+  } else {
+    console.log(data)
+  }
 
 }
 
@@ -257,6 +273,67 @@ const openDocument = async (document) => {
   showDocumentModal.value = true
 
 }
+
+
+const downloadSelected = async () => {
+  const bucket = "documents";
+
+  let files = []
+  documents.value.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
+
+  console.log(files)
+
+// If there are no files in the folder, throw an error
+  if (!files || !files.length) {
+    throw new Error("No files to download");
+  }
+
+  const promises = [];
+
+// Download each file in the folder
+  files.forEach((file) => {
+    promises.push(
+        supabase.storage.from(bucket).download(`${file}`)
+    );
+  });
+
+// Wait for all the files to download
+  const response = await Promise.allSettled(promises);
+
+// Map the response to an array of objects containing the file name and blob
+  const downloadedFiles = response.map((result, index) => {
+    if (result.status === "fulfilled") {
+      return {
+        name: files[index],
+        blob: result.value.data,
+      };
+    }
+  });
+
+// Create a new zip file
+  const zipFileWriter = new BlobWriter("application/zip");
+  const zipWriter = new ZipWriter(zipFileWriter, { bufferedWrite: true });
+
+// Add each file to the zip file
+  downloadedFiles.forEach((downloadedFile) => {
+    if (downloadedFile) {
+      zipWriter.add(downloadedFile.name, new BlobReader(downloadedFile.blob));
+    }
+  });
+
+// Download the zip file
+  const url = URL.createObjectURL(await zipWriter.close());
+  const link = document.createElement("a");
+
+  link.href = url;
+  link.setAttribute("download", "documents.zip");
+
+  document.body.appendChild(link);
+
+  link.click();
+}
+
+
 </script>
 
 <style scoped>

spaces/pages/downloadFolder.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { BlobReader, BlobWriter, ZipWriter } from "@zip.js/zip.js";
+
+const downloadFolder = async (folder) => {
+  const supabaseClient = useSupabaseClient();
+
+  const bucket = "documents";
+
+// Get a list of all the files in the path /my-bucket/images
+  /*const { data: files, error } = await supabaseClient.storage
+      .from(bucket)
+      .list(folder);
+
+  if (error) {
+    throw error;
+  }*/
+
+  let files = [
+      "1/Eingang/Rechnung_VRB170A0249604_2023-12-06.pdf"
+  ]
+
+  console.log(files)
+
+// If there are no files in the folder, throw an error
+  if (!files || !files.length) {
+    throw new Error("No files to download");
+  }
+
+  const promises = [];
+
+// Download each file in the folder
+  files.forEach((file) => {
+    promises.push(
+        supabaseClient.storage.from(bucket).download(`${file}`)
+    );
+  });
+
+// Wait for all the files to download
+  const response = await Promise.allSettled(promises);
+
+// Map the response to an array of objects containing the file name and blob
+  const downloadedFiles = response.map((result, index) => {
+    if (result.status === "fulfilled") {
+      return {
+        name: files[index],
+        blob: result.value.data,
+      };
+    }
+  });
+
+// Create a new zip file
+  const zipFileWriter = new BlobWriter("application/zip");
+  const zipWriter = new ZipWriter(zipFileWriter, { bufferedWrite: true });
+
+// Add each file to the zip file
+  downloadedFiles.forEach((downloadedFile) => {
+    if (downloadedFile) {
+      zipWriter.add(downloadedFile.name, new BlobReader(downloadedFile.blob));
+    }
+  });
+
+// Download the zip file
+  const url = URL.createObjectURL(await zipWriter.close());
+  const link = document.createElement("a");
+
+  link.href = url;
+  link.setAttribute("download", "documents.zip");
+
+  document.body.appendChild(link);
+
+  link.click();
+}
+
+
+
+</script>
+
+<template>
+  <div>
+    <UButton
+      @click="downloadFolder('1/Eingang')"
+    >
+      Download
+    </UButton>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/jobs/[mode]/[[id]].vue

@@ -0,0 +1,218 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+//
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+//Store
+const {jobs, customers} = storeToRefs(useDataStore())
+const {fetchJobs, getJobById} = useDataStore()
+
+let currentItem = null
+
+
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  title: "",
+  customer: 0,
+
+})
+const states = ["Offen", "In Bearbeitung", "Erledigt"]
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem = getJobById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem
+
+
+
+}
+
+const createItem = async () => {
+  const {data,error} = await supabase
+      .from("jobs")
+      .insert([itemInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {
+      id: 0,
+      title: "",
+    }
+    toast.add({title: "Job erfolgreich erstellt"})
+    await fetchJobs()
+    router.push(`/jobs/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editItem = async () => {
+  router.push(`/jobs/edit/${currentItem.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  mode.value = "show"
+  itemInfo.value = {
+    id: 0,
+    infoData: {}
+  }
+}
+
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("jobs")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+  console.log(error)
+  mode.value = "show"
+  itemInfo.value = {
+    id: 0,
+    title: ""
+  }
+  toast.add({title: "Job erfolgreich gespeichert"})
+  fetchJobs()
+}
+
+
+
+setupPage()
+</script>
+
+<template>
+  <div>
+    <UCard v-if="currentItem && mode == 'show'" >
+      <template #header>
+        <UBadge>
+          {{currentItem.state}}
+        </UBadge>
+
+        {{currentItem.title}}
+      </template>
+
+      Beschreibung:<br>
+      {{currentItem.description}}<br>
+
+
+
+      <!--      Kontakte:<br>
+            &lt;!&ndash;        <ul>
+            <li v-for="contact in currentCustomer.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
+          </ul>&ndash;&gt;
+            &lt;!&ndash;        {{currentCustomer.contacts.data}}&ndash;&gt;
+            <br>
+            Projekte:<br>
+            &lt;!&ndash;        <ul>
+            <li v-for="project in currentCustomer.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
+          </ul>&ndash;&gt;-->
+
+
+
+      <template #footer>
+        <UButton
+            v-if="mode == 'show' && currentItem.id"
+            @click="editItem"
+        >
+          Bearbeiten
+        </UButton>
+        <UButton
+            color="red"
+            class="ml-2"
+            disabled
+        >
+          Archivieren
+        </UButton>
+        <!-- TODO: Kunde archivieren        -->
+      </template>
+
+
+
+    </UCard>
+    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+      <template #header>
+        {{itemInfo.title}}
+      </template>
+
+      <UFormGroup
+          label="Titel:"
+      >
+        <UInput
+            v-model="itemInfo.title"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Status:"
+      >
+        <USelectMenu
+            v-model="itemInfo.state"
+            :options="states"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Kundennummer:"
+      >
+        <USelectMenu
+            v-model="itemInfo.customer"
+            :options="customers"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            :search-attributes="['name']"
+        />
+      </UFormGroup>
+
+
+      <UFormGroup
+          label="Beschreibung:"
+      >
+        <UTextarea
+            v-model="itemInfo.description"
+        />
+      </UFormGroup>
+
+
+      <template #footer>
+        <UButton
+            v-if="mode == 'edit'"
+            @click="updateItem"
+        >
+          Speichern
+        </UButton>
+        <UButton
+            v-else-if="mode == 'create'"
+            @click="createItem"
+        >
+          Erstellen
+        </UButton>
+        <UButton
+            @click="cancelEditorCreate"
+            color="red"
+            class="ml-2"
+        >
+          Abbrechen
+        </UButton>
+      </template>
+
+    </UCard>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/jobs/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="main">
+
+    <UButton @click="router.push(`/jobs/create/`)">+ Job</UButton>
+
+    <UTable
+        :rows="jobs"
+        :columns="columns"
+        @select="selectJob"
+
+    />
+
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const router = useRouter()
+const {jobs } = storeToRefs(useDataStore())
+const mode = ref("show")
+
+const columns = [
+  {
+    key: "title",
+    label: "Titel",
+    sortable: true
+  },{
+    key: "state",
+    label: "Status",
+    sortable: true
+  },{
+    key: "customer",
+    label: "Kunde",
+    sortable: true
+  }
+]
+
+
+const selectJob = (job) => {
+  console.log(job)
+  router.push(`/jobs/show/${job.id} `)
+}
+</script>
+
+<style scoped>
+
+</style>

spaces/pages/timetracking.vue

@@ -6,7 +6,6 @@ definePageMeta({
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const toast = useToast()
-console.log(user)
 
 const {times, projects} = storeToRefs(useDataStore())
 const {fetchTimes, getTimeTypes} = useDataStore()
@@ -20,6 +19,38 @@ const timeInfo = ref({
   type: null
 })
 
+
+const columns = [
+  {
+    key: "user",
+    label: "Benutzer"
+  },
+  {
+    key:"start",
+    label:"Start"
+  },
+  {
+    key:"type",
+    label:"Typ"
+  },
+  {
+    key: "end",
+    label: "Ende"
+  },
+  {
+    key: "duration",
+    label: "Dauer"
+  },
+  {
+    key: "projectId",
+    label: "Projekt"
+  },
+  {
+    key: "notes",
+    label: "Notizen"
+  }
+]
+
 const runningTimeInfo = ref({
 
 })
@@ -43,7 +74,8 @@ const startTime = async () => {
     console.log(error)
   } else if(data) {
     timeInfo.value = data[0]
-    fetchTimes()
+    await fetchTimes()
+    runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
   }
 
   console.log(data)
@@ -77,10 +109,17 @@ const stopStartedTime = async () => {
   }
 }
 
+if(times.value.find(time => time.user == user.value.id && !time.end)) {
+  runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
+}
+
 const selectStartedTime = () => {
   runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
 }
 
+
+
+
 //selectStartedTime()
 
 </script>
@@ -101,12 +140,12 @@ const selectStartedTime = () => {
       >
         Stop
       </UButton>
-      <UButton
+      <!--<UButton
           class="controlButton"
           @click="selectStartedTime"
       >
         Zeit Wählen
-      </UButton>
+      </UButton>-->
       <UButton
           class="controlButton"
           @click="showAddTimeModal = true"
@@ -227,6 +266,7 @@ const selectStartedTime = () => {
       <UTable
           class="mt-3"
           v-if="times && user"
+          :columns="columns"
           :rows="times.filter(time => time.user === user.id)"
       />
 

spaces/stores/data.ts

@@ -28,6 +28,7 @@ export const useDataStore = defineStore('data', {
         products: [] as any[],
         movements: [] as any[],
         forms: [] as any[],
+        jobs: [] as any[],
         formSubmits: [] as any[],
         contacts: [] as any[],
         vehicles: [] as any[],
@@ -47,6 +48,7 @@ export const useDataStore = defineStore('data', {
             await this.fetchDocuments()
             await this.fetchMovements()
             await this.fetchTimes()
+            await this.fetchJobs()
             await this.fetchSpaces()
             await this.fetchVehicles()
             this.loaded = true
@@ -108,6 +110,10 @@ export const useDataStore = defineStore('data', {
             // @ts-ignore
             this.times = (await supabase.from("times").select()).data
         },
+        async fetchJobs() {
+            // @ts-ignore
+            this.jobs = (await supabase.from("jobs").select()).data
+        },
         async fetchDocuments() {
             // @ts-ignore
             this.documents = (await supabase.from("documents").select()).data
@@ -119,6 +125,7 @@ export const useDataStore = defineStore('data', {
         }
     },
     getters: {
+        getProfileById: (state) => (userUid:string) => state.profiles.find(profile => profile.id === userUid),
         getOpenTasksCount: (state) => state.tasks.filter(task => task.categorie != "Erledigt").length,
         movementsBySpace: (state) => (spaceId:number) => state.movements.filter(move => move.spaceId === spaceId),
         getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
@@ -136,6 +143,7 @@ export const useDataStore = defineStore('data', {
 
         },
         getCustomerById: (state) => (customerId:number) => state.customers.find(customer => customer.id === customerId),
+        getJobById: (state) => (jobId:number) => state.jobs.find(job => job.id === jobId),
         getTimesByProjectId: (state) => (projectId:number) => {
             let times = state.times.filter(time => time.projectId === projectId)
             console.log(times.length)
@@ -171,11 +179,16 @@ export const useDataStore = defineStore('data', {
             ]
         },
         getEvents: (state) => {
+
             return [
                 ...state.events.map(event => {
+                    let eventColor = state.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.type).color
+
                     return {
                         ...event,
-                        backgroundColor: state.ownTenant.calendarConfig.eventTypes.find(type => type.label === event.type).color
+                        borderColor: eventColor,
+                        textColor: eventColor,
+                        backgroundColor: "black"
                     }
                 }),
             ]