Restructured IncomingInvoices

Added Aspect Ration to DocumentDisplay.vue

components/DocumentDisplay.vue

@@ -12,11 +12,14 @@ const props = defineProps({
   openShowModal: {
     type: Boolean,
     required: false,
+  },
+  returnEmit: {
+    type: Boolean
   }
 
 })
 
-let {documentData, openShowModal:openShowModalProp } = props;
+let {documentData, openShowModal:openShowModalProp, returnEmit } = props;
 const tags = dataStore.getDocumentTags
 const openShowModal = ref(false)
 
@@ -128,7 +131,7 @@ const updateDocumentAssignment = async () => {
 </script>
 
 <template>
-  <div class="documentListItem" @click="openDocument">
+  <div class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : openDocument">
     <object
         :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
         class="previewEmbed"
@@ -155,7 +158,6 @@ const updateDocumentAssignment = async () => {
         v-model="documentData.selected"
         class="ml-2"
     />-->
-    <br>
 <!--    <UBadge
       v-if="documentData.vendorInvoice"
     >{{dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
@@ -183,8 +185,8 @@ const updateDocumentAssignment = async () => {
 
       <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
         <object
-            class="h-full w-full"
+            class="bigPreview"
-            :data="documentData.url"
+            :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
             type="application/pdf"
             v-if="!documentData.tags.includes('Bild')"
         />
@@ -323,7 +325,7 @@ const updateDocumentAssignment = async () => {
 .documentListItem {
   display:block;
   width: 15vw;
-  height: 33vh;
+  aspect-ratio: 1 / 1.414;
   padding:1em;
   margin: 0.7em;
   border: 1px solid lightgrey;
@@ -337,7 +339,7 @@ const updateDocumentAssignment = async () => {
 
 .previewEmbed {
   width: 100%;
-  height: 100%;
+  aspect-ratio: 1 / 1.414;
   overflow: hidden !important;
   pointer-events: none !important;
   -ms-overflow-style: none;  /* IE and Edge */
@@ -348,4 +350,9 @@ const updateDocumentAssignment = async () => {
   display: none;
 }
 
+.bigPreview {
+  width: 100%;
+  aspect-ratio: 1/ 1.414;
+}
+
 </style>

components/DocumentList.vue

@@ -3,12 +3,14 @@ const props = defineProps({
   documents: {
     type: Array,
     required:true
+  },
+  returnDocumentId: {
+    type: Boolean,
   }
 })
 const dataStore = useDataStore()
 
 
-
 </script>
 
 <template>
@@ -17,6 +19,8 @@ const dataStore = useDataStore()
         v-for="item in documents"
         :document-data="item"
         :key="item.id"
+        @clicked="(info) => $emit('selectDocument', info)"
+        :return-emit="returnDocumentId"
     />
   </div>
 </template>

layouts/default.vue

@@ -270,8 +270,12 @@ let links = computed(() => {
       icon: "i-heroicons-chart-bar-square",
       children: [
         {
-          label: "Belege",
+          label: "Ausgangsbelege",
-          to: "/receipts",
+          to: "/createDocument",
+          icon: "i-heroicons-document-text"
+        },{
+          label: "Eingangsbelege",
+          to: "/incomingInvoices",
           icon: "i-heroicons-document-text"
         },
         {

package-lock.json

@@ -34,6 +34,7 @@
         "base64-arraybuffer": "^1.0.2",
         "buffer": "^6.0.3",
         "client-oauth2": "^4.3.3",
+        "date-fns": "^3.6.0",
         "dayjs": "^1.11.10",
         "handlebars": "^4.7.8",
         "jsprintmanager": "^6.0.3",
@@ -6034,6 +6035,21 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/@vueuse/components": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
@@ -8039,18 +8055,12 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.30.0",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
       "funding": {
-        "type": "opencollective",
+        "type": "github",
-        "url": "https://opencollective.com/date-fns"
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/date-fns-tz": {
@@ -17900,6 +17910,21 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/v-calendar/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/v-calendar/node_modules/date-fns-tz": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",

package.json

@@ -47,6 +47,7 @@
     "base64-arraybuffer": "^1.0.2",
     "buffer": "^6.0.3",
     "client-oauth2": "^4.3.3",
+    "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "handlebars": "^4.7.8",
     "jsprintmanager": "^6.0.3",

pages/createDocument/index.vue

@@ -15,14 +15,9 @@
         </template>
       </UInput>
       <UButton
-          @click="router.push(`/createDocument/edit?type=quotes`)"
+          @click="router.push(`/createDocument/edit`)"
       >
-        + Angebot
+        + Dokument
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit?type=invoices`)"
-      >
-        + Rechnung
       </UButton>
     </template>
   </UDashboardNavbar>
@@ -72,8 +67,7 @@
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
   >
     <template #type-data="{row}">
-      <span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
+      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
-      <span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
     </template>
     <template #state-data="{row}">
         <span
@@ -142,6 +136,9 @@ defineShortcuts({
     //console.log(searchinput)
     //searchinput.value.focus()
     document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push('/createDocument/edit')
   }
 })
 
@@ -210,24 +207,17 @@ const types = computed(() => templateTypes.filter((type) => selectedTypes.value.
 const selectItem = (item) => {
   console.log(item)
 
-  if(item.type === "incomingInvoice"){
+  if(item.state === "Entwurf"){
-    if(item.state === "Entwurf") {
+    router.push(`/createDocument/edit/${item.id}`)
-      router.push(`/receipts/incominginvoices/edit/${item.id} `)
+  } else if(item.state !== "Entwurf") {
-    } else if(item.state === "Gebucht") {
+    router.push(`/createDocument/show/${item.id}`)
-      router.push(`/receipts/incominginvoices/show/${item.id}`)
-    }
-  } else {
-    if(item.state === "Entwurf"){
-      router.push(`/createDocument/edit/${item.id}`)
-    } else if(item.state !== "Entwurf") {
-      router.push(`/createDocument/show/${item.id}`)
-    }
   }
 
 
 
 
 
+
 }
 
 const getRowAmount = (row) => {
@@ -245,7 +235,7 @@ const getRowAmount = (row) => {
 const searchString = ref('')
 const showDrafts = ref(false)
 const filteredRows = computed(() => {
-  let items = [...dataStore.incominginvoices.map(i => {return {...i, type: "incomingInvoice"}}),...dataStore.createddocuments]
+  let items = dataStore.createddocuments
 
   items = items.filter(i => types.value.find(x => x.key === i.type))
 

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

@@ -16,37 +16,16 @@ const toast = useToast()
 const {vendors} = storeToRefs(useDataStore())
 const {fetchVendorInvoices} = useDataStore()
 
-let currentVendorInvoice = ref(null)
+const availableDocuments = computed(() => {
+  return dataStore.documents.filter(i => i.tags.includes('Eingangsrechnung' && dataStore.incominginvoices.filter(x => x.document === i).length === 0))
+})
+
+
 //let currentDocument  = ref(null)
 //Working
 const mode = ref(route.params.mode || "show")
 const useNetMode = ref(true)
 
-
-
-
-//Functions
-const setupPage = async () => {
-  if(mode.value === "show" || mode.value === "edit"){
-    currentVendorInvoice.value = await dataStore.getIncomingInvoiceById(Number(useRoute().params.id))
-    //currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.value.document)
-  }
-
-  if(mode.value === "edit") itemInfo.value = currentVendorInvoice.value
-}
-
-const currentDocument = computed(() => {
-  if(currentVendorInvoice.value) {
-    return dataStore.getDocumentById(currentVendorInvoice.value.document)
-
-  } else {
-    return null
-  }
-
-})
-
-
-
 const itemInfo = ref({
   vendor: 0,
   expense: true,
@@ -61,12 +40,38 @@ const itemInfo = ref({
       account: null,
       amountNet: null,
       amountTax: null,
-      taxType: null,
+      taxType: "19",
       costCentre: null
     }
   ]
 })
 
+
+
+
+//Functions
+const setupPage = async () => {
+  if((mode.value === "show" || mode.value === "edit" ) && route.params.id){
+    itemInfo.value = await dataStore.getIncomingInvoiceById(Number(route.params.id))
+    //currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.value.document)
+  }
+  console.log(itemInfo.value)
+
+}
+
+const currentDocument = computed(() => {
+  if(itemInfo.value) {
+    return dataStore.getDocumentById(itemInfo.value.document)
+
+  } else {
+    return null
+  }
+
+})
+
+
+
+
 const taxOptions = ref([
   {
     label: "19% USt",
@@ -123,7 +128,7 @@ const totalCalculated = computed(() => {
 
 const setState = async (newState) => {
   if(mode.value === 'show') {
-    await dataStore.updateItem('incominginvoices',{...currentVendorInvoice.value, state: newState})
+    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
   } else if(mode.value === 'edit') {
     await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
   }
@@ -136,59 +141,96 @@ setupPage()
 </script>
 
 <template>
-  <div id="main">
+  <UDashboardNavbar :title="itemInfo ? 'Eingangsbeleg bearbeiten' : 'Eingangsbeleg erstellen'">
+    <template #right>
+      <UButton
+          @click="dataStore.createNewItem('incominginvoices',itemInfo)"
+          v-if="mode === 'edit' && !itemInfo.id"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          @click="dataStore.updateItem('incominginvoices',itemInfo)"
+          v-if="mode === 'edit' && itemInfo.id"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          :disabled="itemInfo.state !== 'Entwurf'"
+          @click="router.push(`/incominginvoices/edit/${itemInfo.id}`)"
+          v-if="mode !== 'edit'"
+      >
+        Bearbeiten
+      </UButton>
+      <UButton
+          @click="setState('Entwurf')"
+          v-if="itemInfo.state !== 'Entwurf'"
+          color="cyan"
+      >
+        Status zu Entwurf
+      </UButton>
+      <UButton
+          @click="setState('Gebucht')"
+          v-if="itemInfo.state !== 'Gebucht'"
+          color="rose"
+      >
+        Status auf Gebucht
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <div v-if="!itemInfo.document">
+    <div v-if="availableDocuments.length === 0" class="w-1/2 mx-auto text-center">
+      <p class="text-2xl mt-5">Keine Dokumente zur Auswahl vefügbar</p>
+      <UButton
+        @click="router.push(`/documents`)"
+        class="mt-5"
+        variant="outline"
+      >
+        Zu den Dokumenten
+      </UButton>
+    </div>
+
+
+    <DocumentList
+        v-else
+        :documents="availableDocuments"
+        :return-document-id="true"
+        @selectDocument="(documentId) => itemInfo.document = documentId"
+    />
+  </div>
+  <div
+      v-else
+      class="flex justify-between mt-5"
+  >
     <object
         v-if="currentDocument ? currentDocument.url : false"
         :data="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
         type="application/pdf"
-        class="h-100 w-full mx-5"
+        class="mx-5 documentPreview"
     />
-    <div class="w-4/5">
+    <div class="w-2/5 mx-5">
-      <InputGroup class="mt-3" v-if="currentVendorInvoice">
-        <UButton
-            @click="dataStore.updateItem('incominginvoices',itemInfo)"
-            v-if="mode === 'edit'"
-        >
-          Speichern
-        </UButton>
-        <UButton
-          :disabled="currentVendorInvoice.state !== 'Entwurf'"
-          @click="router.push(`/incominginvoices/edit/${currentVendorInvoice.id}`)"
-          v-if="mode !== 'edit'"
-        >
-          Bearbeiten
-        </UButton>
-        <UButton
-            @click="setState('Entwurf')"
-            v-if="currentVendorInvoice.state !== 'Entwurf'"
-            color="cyan"
-        >
-          Status zu Entwurf
-        </UButton>
-        <UButton
-            @click="setState('Gebucht')"
-            v-if="currentVendorInvoice.state !== 'Gebucht'"
-            color="rose"
-        >
-          Status auf Gebucht
-        </UButton>
-      </InputGroup>
 
       <div v-if="mode === 'show'">
-        {{currentVendorInvoice}}
+        {{itemInfo}}
+
+        <HistoryDisplay
+            type="incomingInvoice"
+            v-if="itemInfo"
+            :element-id="itemInfo.id"
+        />
       </div>
 
-      <div v-else-if="mode === 'edit'" class=" scrollContainer">
+      <div v-else class=" scrollContainer">
-        <InputGroup class="my-3">
+        <InputGroup class="mb-3">
           <UButton
               :variant="itemInfo.expense ? 'solid' : 'outline'"
-            @click="itemInfo.expense = true"
+              @click="itemInfo.expense = true"
           >
             Ausgabe
           </UButton>
           <UButton
-            :variant="!itemInfo.expense ? 'solid' : 'outline'"
+              :variant="!itemInfo.expense ? 'solid' : 'outline'"
-            @click="itemInfo.expense = false"
+              @click="itemInfo.expense = false"
           >
             Einnahme
           </UButton>
@@ -263,7 +305,7 @@ setupPage()
           Brutto
           <UToggle
               v-model="useNetMode"
-              @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: null}]"
+              @update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: '19'}]"
           />
           Netto
         </InputGroup>
@@ -409,41 +451,28 @@ setupPage()
           </UButton>
 
         </div>
-        <HistoryDisplay
+
-            type="incomingInvoice"
-            v-if="currentVendorInvoice"
-            :element-id="currentVendorInvoice.id"
-        />
       </div>
     </div>
-
   </div>
 
+
+
 </template>
 
 <style scoped>
-#main {
+.documentPreview {
-  display: flex;
+  width: 30vw;
-  flex-direction: row;
+  aspect-ratio: 1 / 1.414;
-  height: 85vh;
-}
-
-.previewDoc {
-  min-width: 50vw;
-  min-height: 80vh;
-}
-
-.previewDoc object {
-  width: 90%;
-  height: 100%;
 }
 
 
 
 .scrollContainer {
   overflow-y: scroll;
+  padding-left: 1em;
+  padding-right: 1em;
   height: 75vh;
-  margin-top: 1em;
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
 }

pages/incomingInvoices/index.vue

@@ -0,0 +1,119 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  '+': () => {
+    router.push("/incomingInvoices/edit")
+  }
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+
+
+const templateColumns = [
+  {
+    key: 'title',
+    label: "Titel:",
+    sortable: true
+  },
+  {
+    key: "start",
+    label: "Start",
+    sortable: true
+  },
+  {
+    key: "end",
+    label: "Ende"
+  },
+  {
+    key: "resources",
+    label: "Resourcen"
+  },
+  {
+    key: "project",
+    label: "Projekt"
+  }
+]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
+const searchString = ref('')
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return dataStore.incominginvoices
+  }
+
+  return dataStore.incominginvoices.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Eingangsbelege">
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+
+      <UButton @click="router.push(`/incomingInvoices/edit`)">+ Beleg</UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
+
+  <UDashboardPanelContent>
+    <UTable
+        :rows="filteredRows"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="(i) => router.push(`/incomingInvoices/show/${i.id}`) "
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+    >
+
+    </UTable>
+  </UDashboardPanelContent>
+
+</template>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -10,23 +10,9 @@
               </UChip>
             </UButton>
           </UTooltip>
-
-<!--          <UDropdown :items="items">
-            <UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
-          </UDropdown>-->
         </template>
       </UDashboardNavbar>
 
-<!--      <UDashboardToolbar>
-        <template #left>
-          &lt;!&ndash; ~/components/home/HomeDateRangePicker.vue &ndash;&gt;
-&lt;!&ndash;          <HomeDateRangePicker v-model="range" class="-ml-2.5" />&ndash;&gt;
-
-          &lt;!&ndash; ~/components/home/HomePeriodSelect.vue &ndash;&gt;
-&lt;!&ndash;          <HomePeriodSelect v-model="period" :range="range" />&ndash;&gt;
-        </template>
-      </UDashboardToolbar>-->
-
       <UDashboardPanelContent>
         <UDashboardCard
             title="Anwesenheiten"
@@ -34,6 +20,24 @@
         >
           <p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
         </UDashboardCard>
+<!--        <UDashboardCard
+          title="Offene Aufgaben"
+          v-if="dataStore.getOpenTasksCount > 0"
+          class="w-1/2 h-1/2"
+        >
+          <UTable
+            :rows="dataStore.tasks.filter(i => i.categorie !== 'Erledigt' && (i.profile === dataStore.activeProfile.id ||!i.profile))"
+            :columns="[
+                {
+                  key: 'categorie',
+                  label: 'Kategorie'
+                },{
+                  key: 'name',
+                  label: 'Name'
+                },
+            ]"
+          ></UTable>
+        </UDashboardCard>-->
 
       </UDashboardPanelContent>
     </UDashboardPanel>
@@ -59,9 +63,6 @@ const items = [[{
 }]]
 
 
-const {getOpenTasksCount} = useDataStore()
-const openTasks = getOpenTasksCount
-
 const supabase = useSupabaseClient()
 
 const user = useSupabaseUser()
@@ -69,16 +70,5 @@ const user = useSupabaseUser()
 </script>
 
 <style scoped>
-/*.cardHolder {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}
 
-.card{
-  width: 22vw;
-  height: 40vh;
-  border: 1px solid white
-}*/
 </style>

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

@@ -28,7 +28,7 @@ const setupPage = () => {
   }
 
   if (mode.value === "edit") itemInfo.value = currentItem.value
-  if(currentItem.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
+  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
 
 }
 

stores/data.js

@@ -93,7 +93,8 @@ export const useDataStore = defineStore('data', () => {
         },
         incominginvoices: {
             label: "Eingangsrechnungen",
-            labelSingle: "Eingangsrechnung"
+            labelSingle: "Eingangsrechnung",
+            redirect:true
         },
         inventoryitems: {
             label: "Inventarartikel",