feat: allow searching for invoice clientDetails name

simsustech · Oct 2, 2024 · 7cb20fe · 7cb20fe
1 parent cd968d6
commit 7cb20fe
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,13 +74,17 @@ 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()
 
 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