Restructured IncomingInvoices

Added Aspect Ration to DocumentDisplay.vue

pages/createDocument/index.vue

@@ -15,14 +15,9 @@
         </template>
       </UInput>
       <UButton
-          @click="router.push(`/createDocument/edit?type=quotes`)"
+          @click="router.push(`/createDocument/edit`)"
       >
-        + Angebot
-      </UButton>
-      <UButton
-          @click="router.push(`/createDocument/edit?type=invoices`)"
-      >
-        + Rechnung
+        + Dokument
       </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>
-      <span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
+      {{dataStore.documentTypesForCreation[row.type].labelSingle}}
     </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") {
-      router.push(`/receipts/incominginvoices/edit/${item.id} `)
-    } else if(item.state === "Gebucht") {
-      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}`)
-    }
+  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">
-      <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 class="w-2/5 mx-5">
 
       <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">
-        <InputGroup class="my-3">
+      <div v-else class=" scrollContainer">
+        <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'"
-            @click="itemInfo.expense = false"
+              :variant="!itemInfo.expense ? 'solid' : 'outline'"
+              @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 {
-  display: flex;
-  flex-direction: row;
-  height: 85vh;
-}
-
-.previewDoc {
-  min-width: 50vw;
-  min-height: 80vh;
-}
-
-.previewDoc object {
-  width: 90%;
-  height: 100%;
+.documentPreview {
+  width: 30vw;
+  aspect-ratio: 1 / 1.414;
 }
 
 
 
 .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))
 
 }