Many Changes

pages/banking/index.vue

@@ -1,6 +1,21 @@
 <template>
   <UDashboardNavbar title="Bankbuchungen">
-
+    <template #right>
+      <UInput
+          id="searchinput"
+          name="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>
+    </template>
   </UDashboardNavbar>
   <UDashboardToolbar>
     <template #left>
@@ -15,6 +30,11 @@
           Konto
         </template>
       </USelectMenu>
+      <UCheckbox
+          v-model="showOnlyNotAssigned"
+          class="my-auto ml-3"
+          label="Nur offene anzeigen"
+      />
     </template>
     <template #right>
       <USelectMenu
@@ -36,9 +56,10 @@
       :columns="columns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => {selectedStatement = i; showStatementModal = true}"
+      @select="(i) => router.push(`/banking/statements/edit/${i.id}`)"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
   >
+
     <template #account-data="{row}">
       {{row.account ? (dataStore.getBankAccountById(row.account).name ? dataStore.getBankAccountById(row.account).name :dataStore.getBankAccountById(row.account).iban) : ""}}
     </template>
@@ -69,40 +90,72 @@
     </template>
   </UTable>
 
-  <USlideover
+  <UModal
     v-model="showStatementModal"
+    class="no-doc-sroll"
   >
+
     <UCard class="h-full">
       <template #header>
-        <span v-if="selectedStatement.amount > 0">
-          {{selectedStatement.debName}}
-        </span>
-        <span v-else-if="selectedStatement.amount < 0">
-          {{selectedStatement.credName}}
-        </span>
+        <div class="flex items-center justify-between">
+          <span
+              v-if="selectedStatement.amount > 0"
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            {{selectedStatement.debName}}
+          </span>
+          <span
+              v-else-if="selectedStatement.amount < 0"
+              class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            {{selectedStatement.credName}}
+          </span>
+
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showStatementModal = false" />
+        </div>
       </template>
 
-      <div class="truncate">
-        <p>Betrag: {{String(selectedStatement.amount.toFixed(2)).replace(".",",")}} €</p>
-        <p>Buchungsdatum: {{dayjs(selectedStatement.date).format("DD.MM.YYYY")}}</p>
-        <p>Werstellungsdatum: {{dayjs(selectedStatement.valueDate).format("DD.MM.YYYY")}}</p>
-        <p>Partner: {{selectedStatement.amount > 0 ? selectedStatement.debName : selectedStatement.credName}}</p>
-        <p>Partner IBAN: {{selectedStatement.amount > 0 ? selectedStatement.debIban : selectedStatement.credIban}}</p>
-        <p>Konto: {{selectedStatement.account}}</p>
-        <p class="text-wrap">Beschreibung: <br>{{selectedStatement.text}}</p>
+      {{selectedStatement.id}}
+
+      <div class="flex flex-row">
+        <div class="w-1/2 truncate">
+          <p>Betrag: {{String(selectedStatement.amount.toFixed(2)).replace(".",",")}} €</p>
+          <p>Buchungsdatum: {{dayjs(selectedStatement.date).format("DD.MM.YYYY")}}</p>
+          <p>Werstellungsdatum: {{dayjs(selectedStatement.valueDate).format("DD.MM.YYYY")}}</p>
+          <p>Partner: {{selectedStatement.amount > 0 ? selectedStatement.debName : selectedStatement.credName}}</p>
+          <p>Partner IBAN: {{selectedStatement.amount > 0 ? selectedStatement.debIban : selectedStatement.credIban}}</p>
+          <p>Konto: {{selectedStatement.account}}</p>
+          <p class="text-wrap">Beschreibung: <br>{{selectedStatement.text}}</p>
+        </div>
+        <div class="w-full p-2 overflow-scroll">
+          <UCard
+              v-for="document in dataStore.getOpenDocuments()"
+          >
+
+
+            {{document.documentNumber ||document.reference}}
+            <!--        {{document}}-->
+          </UCard>
+        </div>
       </div>
 
-      <UFormGroup>
+
+
+
+
+
+
+<!--      <UFormGroup>
         <USelectMenu
           :options="dataStore.createddocuments"
         />
-      </UFormGroup>
+      </UFormGroup>-->
 
 
 
     </UCard>
 
-  </USlideover>
+  </UModal>
 </template>
 
 <script setup>
@@ -113,6 +166,19 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },
+  'escape': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    showStatementModal.value = false
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
 
@@ -151,9 +217,11 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 
 const searchString = ref('')
 const filterAccount = ref(dataStore.bankAccounts || [])
+const showOnlyNotAssigned = ref(true)
+
 
 const filteredRows = computed(() => {
-  return useSearch(searchString.value, dataStore.bankStatements.filter(i => filterAccount.value.find(x => x.id === i.account)))
+  return useSearch(searchString.value, dataStore.bankstatements.filter(i => filterAccount.value.find(x => x.id === i.account) && (showOnlyNotAssigned.value ? (!i.createdDocument && !i.incomingInvoice) : true)))
 })
 </script>