From 7cb20febbfd61e1f27306ffe0ca344740522eebb Mon Sep 17 00:00:00 2001
From: Stefan van Herwijnen <stefan@devliert.info>
Date: Wed, 2 Oct 2024 17:12:24 +0200
Subject: [PATCH] feat: allow searching for invoice clientDetails name

---
 packages/api/package.json                     |  4 +-
 packages/api/src/trpc/admin/invoices.ts       | 10 +++-
 packages/app/package.json                     |  2 +-
 packages/app/src/pages/admin/BillsPage.vue    | 20 ++++++--
 packages/app/src/pages/admin/InvoicesPage.vue | 19 ++++++-
 packages/app/src/pages/admin/ReceiptsPage.vue | 20 +++++++-
 pnpm-lock.yaml                                | 50 ++++++++-----------
 7 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/packages/api/package.json b/packages/api/package.json
index 170187b..4691884 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -50,9 +50,9 @@
     "@fastify/cors": "^10.0.1",
     "@fastify/middie": "9.0.2",
     "@fastify/static": "8.0.1",
-    "@modular-api/api": "^0.5.0",
+    "@modular-api/api": "^0.5.1",
     "@modular-api/fastify-cart": "^0.3.0",
-    "@modular-api/fastify-checkout": "^0.4.0",
+    "@modular-api/fastify-checkout": "^0.4.1",
     "@modular-api/fastify-oidc": "^0.6.0",
     "@mollie/api-client": "^4.0.0",
     "@slimfact/app": "^0.1.0",
diff --git a/packages/api/src/trpc/admin/invoices.ts b/packages/api/src/trpc/admin/invoices.ts
index 1a55f5d..304f994 100644
--- a/packages/api/src/trpc/admin/invoices.ts
+++ b/packages/api/src/trpc/admin/invoices.ts
@@ -234,6 +234,12 @@ export const adminInvoiceRoutes = ({
         .object({
           companyId: z.number().nullable().optional(),
           clientId: z.number().nullable().optional(),
+          clientDetails: z
+            .object({
+              name: z.string().nullable()
+            })
+            .nullable()
+            .optional(),
           status: z.nativeEnum(InvoiceStatus).nullable(),
           pagination: z
             .object({
@@ -252,11 +258,13 @@ export const adminInvoiceRoutes = ({
         .optional()
     )
     .query(async ({ input }) => {
-      const { companyId, clientId, status, pagination } = input || {}
+      const { companyId, clientId, clientDetails, status, pagination } =
+        input || {}
       if (fastify.checkout?.invoiceHandler) {
         const invoices = await fastify.checkout.invoiceHandler.getInvoices({
           companyId,
           clientId,
+          clientDetails,
           status,
           options: {
             withPayments: true,
diff --git a/packages/app/package.json b/packages/app/package.json
index 0e28cc1..888e365 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@modular-api/fastify-cart": "^0.3.0",
-    "@modular-api/fastify-checkout": "^0.4.0",
+    "@modular-api/fastify-checkout": "^0.4.1",
     "@modular-api/quasar-components": "^0.3.0",
     "@quasar/extras": "1.16.12",
     "@quasar/quasar-ui-qcalendar": "4.0.0-beta.16",
diff --git a/packages/app/src/pages/admin/BillsPage.vue b/packages/app/src/pages/admin/BillsPage.vue
index ef6a556..8023077 100644
--- a/packages/app/src/pages/admin/BillsPage.vue
+++ b/packages/app/src/pages/admin/BillsPage.vue
@@ -22,7 +22,9 @@
               v-model="clientId"
               :filtered-options="filteredClients"
               clearable
+              use-input
               @filter="onFilterClients"
+              @new-value="onNewValueClients"
             />
             <!-- <invoice-status-select v-model="status" /> -->
           </div>
@@ -90,7 +92,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted, reactive, computed } from 'vue'
+import { ref, nextTick, onMounted, reactive, computed, watch } from 'vue'
 import { createUseTrpc } from '../../trpc.js'
 import { ResourcePage, ResponsiveDialog } from '@simsustech/quasar-components'
 import { EmailInput } from '@simsustech/quasar-components/form'
@@ -104,7 +106,7 @@ import {
 import { PaymentMethod } from '@modular-api/fastify-checkout/types'
 import { InvoiceStatus } from '@slimfact/api/zod'
 
-import { useQuasar } from 'quasar'
+import { useQuasar, QSelect } from 'quasar'
 import CompanySelect from '../../components/company/CompanySelect.vue'
 import ClientSelect from '../../components/client/ClientSelect.vue'
 import PriceInputDialog from 'src/components/PriceInputDialog.vue'
@@ -117,7 +119,9 @@ const lang = useLang()
 const companyId = ref(NaN)
 const clientId = ref(NaN)
 const status = ref<InvoiceStatus | null>(InvoiceStatus.BILL)
-
+const clientDetails = ref({
+  name: null as string | null
+})
 const page = ref(1)
 const rowsPerPage = ref(5)
 const total = computed(() => invoices.value?.at(0)?.total || 0)
@@ -137,6 +141,7 @@ const { data: invoices, execute } = useQuery('admin.getInvoices', {
   args: reactive({
     companyId,
     clientId,
+    clientDetails,
     status,
     pagination
   })
@@ -384,6 +389,15 @@ const sendBill: InstanceType<
   }
 }
 
+const onNewValueClients: QSelect['$props']['onNewValue'] = (input) => {
+  clientId.value = NaN
+  clientDetails.value.name = input
+}
+
+watch(clientId, (newVal) => {
+  if (newVal) clientDetails.value.name = null
+})
+
 const ready = ref<boolean>(false)
 onMounted(async () => {
   await execute()
diff --git a/packages/app/src/pages/admin/InvoicesPage.vue b/packages/app/src/pages/admin/InvoicesPage.vue
index 3c028ad..aff00cc 100644
--- a/packages/app/src/pages/admin/InvoicesPage.vue
+++ b/packages/app/src/pages/admin/InvoicesPage.vue
@@ -23,7 +23,9 @@
               v-model="clientId"
               :filtered-options="filteredClients"
               clearable
+              use-input
               @filter="onFilterClients"
+              @new-value="onNewValueClients"
             />
             <!-- <invoice-status-select v-model="status" /> -->
           </div>
@@ -95,7 +97,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted, reactive, computed } from 'vue'
+import { ref, nextTick, onMounted, reactive, computed, watch } from 'vue'
 import { createUseTrpc } from '../../trpc.js'
 import { ResourcePage, ResponsiveDialog } from '@simsustech/quasar-components'
 import { EmailInput } from '@simsustech/quasar-components/form'
@@ -109,7 +111,7 @@ import {
 import { PaymentMethod } from '@modular-api/fastify-checkout/types'
 import { InvoiceStatus } from '@slimfact/api/zod'
 
-import { useQuasar } from 'quasar'
+import { useQuasar, QSelect } from 'quasar'
 import CompanySelect from '../../components/company/CompanySelect.vue'
 import ClientSelect from '../../components/client/ClientSelect.vue'
 import InvoiceStatusToggle from '../../components/invoice/InvoiceStatusToggle.vue'
@@ -121,6 +123,9 @@ const lang = useLang()
 
 const companyId = ref(NaN)
 const clientId = ref(NaN)
+const clientDetails = ref({
+  name: null as string | null
+})
 const status = ref<InvoiceStatus | null>(null)
 
 const page = ref(1)
@@ -142,6 +147,7 @@ const { data: invoices, execute } = useQuery('admin.getInvoices', {
   args: reactive({
     companyId,
     clientId,
+    clientDetails,
     status,
     pagination
   })
@@ -469,6 +475,15 @@ const openCancelDialog: InstanceType<
     })
 }
 
+const onNewValueClients: QSelect['$props']['onNewValue'] = (input) => {
+  clientId.value = NaN
+  clientDetails.value.name = input
+}
+
+watch(clientId, (newVal) => {
+  if (newVal) clientDetails.value.name = null
+})
+
 const ready = ref<boolean>(false)
 onMounted(async () => {
   await execute()
diff --git a/packages/app/src/pages/admin/ReceiptsPage.vue b/packages/app/src/pages/admin/ReceiptsPage.vue
index c1677d0..fd4eb33 100644
--- a/packages/app/src/pages/admin/ReceiptsPage.vue
+++ b/packages/app/src/pages/admin/ReceiptsPage.vue
@@ -17,7 +17,9 @@
               v-model="clientId"
               :filtered-options="filteredClients"
               clearable
+              use-input
               @filter="onFilterClients"
+              @new-value="onNewValueClients"
             />
             <!-- <invoice-status-select v-model="status" /> -->
           </div>
@@ -58,7 +60,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from 'vue'
+import { ref, onMounted, reactive, computed, watch } from 'vue'
 import { createUseTrpc } from '../../trpc.js'
 import { ResourcePage, ResponsiveDialog } from '@simsustech/quasar-components'
 import { EmailInput } from '@simsustech/quasar-components/form'
@@ -72,6 +74,7 @@ import {
 import CompanySelect from '../../components/company/CompanySelect.vue'
 import ClientSelect from '../../components/client/ClientSelect.vue'
 import { InvoiceStatus } from '@slimfact/api/zod'
+import { QSelect } from 'quasar'
 
 const { useQuery, useMutation } = await createUseTrpc()
 
@@ -79,6 +82,9 @@ const lang = useLang()
 
 const companyId = ref(NaN)
 const clientId = ref(NaN)
+const clientDetails = ref({
+  name: null as string | null
+})
 const status = ref<InvoiceStatus>(InvoiceStatus.RECEIPT)
 
 const page = ref(1)
@@ -100,6 +106,7 @@ const { data: invoices, execute } = useQuery('admin.getInvoices', {
   args: reactive({
     companyId,
     clientId,
+    clientDetails,
     status,
     pagination
   })
@@ -158,7 +165,7 @@ const openSendInvoiceDialog = (): InstanceType<
       result.data.value?.subject &&
       result.data.value?.body
     ) {
-      sendInvoiceEmailType.value = type
+      sendInvoiceEmailType.value = 'sendInvoice'
       sendInvoiceEmailId.value = data.id
       sendInvoiceEmailSubject.value = result.data.value.subject
       sendInvoiceEmailBody.value = result.data.value.body
@@ -204,6 +211,15 @@ const sendInvoice: InstanceType<
   }
 }
 
+const onNewValueClients: QSelect['$props']['onNewValue'] = (input) => {
+  clientId.value = NaN
+  clientDetails.value.name = input
+}
+
+watch(clientId, (newVal) => {
+  if (newVal) clientDetails.value.name = null
+})
+
 const ready = ref<boolean>(false)
 onMounted(async () => {
   await execute()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8af5032..2453b4a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,14 +49,14 @@ importers:
         specifier: 8.0.1
         version: 8.0.1
       '@modular-api/api':
-        specifier: ^0.5.0
-        version: 0.5.0(bcrypt@5.1.1)(fastify@5.0.0)(handlebars@4.7.8)(kysely@0.27.4)(openid-client@5.7.0)(otplib@12.0.1)(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))
+        specifier: ^0.5.1
+        version: 0.5.1(bcrypt@5.1.1)(fastify@5.0.0)(handlebars@4.7.8)(kysely@0.27.4)(openid-client@5.7.0)(otplib@12.0.1)(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))
       '@modular-api/fastify-cart':
         specifier: ^0.3.0
         version: 0.3.0(kysely@0.27.4)
       '@modular-api/fastify-checkout':
-        specifier: ^0.4.0
-        version: 0.4.0(kysely@0.27.4)
+        specifier: ^0.4.1
+        version: 0.4.1(kysely@0.27.4)
       '@modular-api/fastify-oidc':
         specifier: ^0.6.0
         version: 0.6.0(@fastify/static@8.0.1)(bcrypt@5.1.1)(fastify@5.0.0)(handlebars@4.7.8)(kysely@0.27.4)(otplib@12.0.1)(typescript@5.6.2)
@@ -204,8 +204,8 @@ importers:
         specifier: ^0.3.0
         version: 0.3.0(kysely@0.27.4)
       '@modular-api/fastify-checkout':
-        specifier: ^0.4.0
-        version: 0.4.0(kysely@0.27.4)
+        specifier: ^0.4.1
+        version: 0.4.1(kysely@0.27.4)
       '@modular-api/quasar-components':
         specifier: ^0.3.0
         version: 0.3.0(quasar@2.17.0)
@@ -1759,8 +1759,8 @@ packages:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
-  '@modular-api/api@0.5.0':
-    resolution: {integrity: sha512-RvOYBDz/xoWYOt0l9c0Jo0vzacA9tM5VDihQFJiX3cnXMEg+DtnydId0h80pBzxMuJTBGCz1DJbx5rj3cZBJcA==}
+  '@modular-api/api@0.5.1':
+    resolution: {integrity: sha512-mOj1xcvjoz5hkdsbqp0SoPQbn/XVXT1+wNrQB7uONqff1gOhuTGTAi52qW0XDUtS7tAui8kh8d94a7Zptq4SbQ==}
     peerDependencies:
       kysely: ^0.27.4
       openid-client: ^5.6.5
@@ -1770,8 +1770,8 @@ packages:
     peerDependencies:
       kysely: ^0.27.4
 
-  '@modular-api/fastify-checkout@0.4.0':
-    resolution: {integrity: sha512-en00Hcqp18f/gCCrm3a2m0TO2H0YS/8zhYqSdxX+Kmum3C195LHxb+6924Fl/84SRvucbdLXQo/1uxAmcYy2NQ==}
+  '@modular-api/fastify-checkout@0.4.1':
+    resolution: {integrity: sha512-RQrzeAdubYdiwgpYgYo2n2Ev2I8GGpnsBJ6Bh7dTIDT+/88JJjgBT9sDTB6VMOTgSIGf915+HEQvx46cIP0f3A==}
     peerDependencies:
       kysely: ^0.27.4
 
@@ -2043,11 +2043,11 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
-  '@types/express-serve-static-core@4.19.5':
-    resolution: {integrity: sha512-y6W03tvrACO72aijJ5uF02FRq5cgDR9lUxddQ8vyF+GvmjJQqbzDcJngEjURc+ZsG31VI3hODNZJ2URj86pzmg==}
+  '@types/express-serve-static-core@5.0.0':
+    resolution: {integrity: sha512-AbXMTZGt40T+KON9/Fdxx0B2WK5hsgxcfXJLr5bFpZ7b4JCex2WyQPTEKdXqfHiY5nKKBScZ7yCoO6Pvgxfvnw==}
 
-  '@types/express@4.17.21':
-    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
+  '@types/express@5.0.0':
+    resolution: {integrity: sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==}
 
   '@types/get-port@3.2.0':
     resolution: {integrity: sha512-TiNg8R1kjDde5Pub9F9vCwZA/BNW9HeXP5b9j7Qucqncy/McfPZ6xze/EyBdXS5FhMIGN6Fx3vg75l5KHy3V1Q==}
@@ -4118,10 +4118,6 @@ packages:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
-  mime-db@1.53.0:
-    resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==}
-    engines: {node: '>= 0.6'}
-
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
@@ -7202,7 +7198,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@modular-api/api@0.5.0(bcrypt@5.1.1)(fastify@5.0.0)(handlebars@4.7.8)(kysely@0.27.4)(openid-client@5.7.0)(otplib@12.0.1)(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))':
+  '@modular-api/api@0.5.1(bcrypt@5.1.1)(fastify@5.0.0)(handlebars@4.7.8)(kysely@0.27.4)(openid-client@5.7.0)(otplib@12.0.1)(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))':
     dependencies:
       '@fastify/cookie': 10.0.1
       '@fastify/cors': 10.0.1
@@ -7210,7 +7206,7 @@ snapshots:
       '@fastify/middie': 9.0.2
       '@fastify/static': 8.0.1
       '@modular-api/fastify-cart': 0.3.0(kysely@0.27.4)
-      '@modular-api/fastify-checkout': 0.4.0(kysely@0.27.4)
+      '@modular-api/fastify-checkout': 0.4.1(kysely@0.27.4)
       '@modular-api/fastify-oidc': 0.6.0(@fastify/static@8.0.1)(bcrypt@5.1.1)(fastify@5.0.0)(handlebars@4.7.8)(kysely@0.27.4)(otplib@12.0.1)(typescript@5.6.2)
       '@trpc/server': 10.45.2
       '@types/compression': 1.7.5
@@ -7248,7 +7244,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@modular-api/fastify-checkout@0.4.0(kysely@0.27.4)':
+  '@modular-api/fastify-checkout@0.4.1(kysely@0.27.4)':
     dependencies:
       '@fastify/cookie': 10.0.1
       '@fastify/middie': 9.0.2
@@ -7495,7 +7491,7 @@ snapshots:
 
   '@types/compression@1.7.5':
     dependencies:
-      '@types/express': 4.17.21
+      '@types/express': 5.0.0
 
   '@types/configstore@2.1.1': {}
 
@@ -7515,17 +7511,17 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
-  '@types/express-serve-static-core@4.19.5':
+  '@types/express-serve-static-core@5.0.0':
     dependencies:
       '@types/node': 22.6.1
       '@types/qs': 6.9.16
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
 
-  '@types/express@4.17.21':
+  '@types/express@5.0.0':
     dependencies:
       '@types/body-parser': 1.19.5
-      '@types/express-serve-static-core': 4.19.5
+      '@types/express-serve-static-core': 5.0.0
       '@types/qs': 6.9.16
       '@types/serve-static': 1.15.7
 
@@ -8226,7 +8222,7 @@ snapshots:
 
   compressible@2.0.18:
     dependencies:
-      mime-db: 1.53.0
+      mime-db: 1.52.0
 
   compression@1.7.4:
     dependencies:
@@ -9760,8 +9756,6 @@ snapshots:
 
   mime-db@1.52.0: {}
 
-  mime-db@1.53.0: {}
-
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0