fix: fix client filtering and opening update dialogs

Author: stefanvanherwijnen

packages/api/src/repositories/client.ts

@@ -72,15 +72,13 @@ function find({
       )
 
     query = query
-      .groupBy('clients.id')
+      .select((seb) =>
+        seb.cast<number>(seb.fn.count('id').over(), 'integer').as('total')
+      )
       .limit(pagination.limit)
       .offset(pagination.offset)
   }
-
-  return query.select((seb) => [
-    ...select,
-    seb.cast<number>(seb.fn.count('id'), 'integer').as('total')
-  ])
+  return query.select((seb) => [...select])
 }
 
 export async function findClient({

packages/api/src/trpc/admin/clients.ts

@@ -60,7 +60,7 @@ export const adminClientRoutes = ({
   searchClients: procedure
     .input(
       z.object({
-        name: z.string(),
+        name: z.string().nullable(),
         pagination: z
           .object({
             limit: z.number(),

packages/app/package.json

@@ -57,7 +57,7 @@
     "@pinia/colada": "0.21.2",
     "@quasar/extras": "1.17.0",
     "@quasar/quasar-ui-qcalendar": "4.1.2",
-    "@simsustech/quasar-components": "0.11.24",
+    "@simsustech/quasar-components": "0.11.25",
     "@slimfact/api": "link:../api",
     "@trpc/client": "11.9.0",
     "@trpc/server": "11.9.0",

packages/app/src/components/invoice/InvoiceForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-form ref="formRef">
+  <q-form v-if="filteredClients && filteredCompanies" ref="formRef">
     <div class="grid grid-cols-12 gap-3">
       <company-select
         v-model="modelValue.companyId"
@@ -231,7 +231,7 @@ import {
   type RawInvoiceSurcharge
 } from '@modular-api/fastify-checkout'
 import { useLang } from '../../lang/index.js'
-import { ref, toRefs, watch, nextTick, computed } from 'vue'
+import { ref, toRefs, watch, computed } from 'vue'
 import CompanySelect from '../company/CompanySelect.vue'
 import ClientSelect from '../client/ClientSelect.vue'
 import {
@@ -244,6 +244,7 @@ import NumberPrefixSelect from '../numberPrefix/NumberPrefixSelect.vue'
 import { NumberPrefix, Invoice, Company } from '@slimfact/api/zod'
 import ClientForm from '../client/ClientForm.vue'
 import { computeNumberPrefix } from 'src/tools.js'
+import { until } from '@vueuse/core'
 
 export interface Props {
   filteredCompanies: Company[]
@@ -389,8 +390,22 @@ const submit: InstanceType<typeof ResponsiveDialog>['$props']['onSubmit'] = ({
 }
 const setValue = (newValue: RawNewInvoice) => {
   modelValue.value = extend(true, {}, initialValue, newValue)
-  modelValue.value.companyId = newValue.companyId || newValue.companyDetails.id
-  modelValue.value.clientId = newValue.clientId || newValue.clientDetails.id
+  if (newValue.companyId && !Number.isNaN(newValue.companyId)) {
+    modelValue.value.companyId = newValue.companyId
+  } else if (
+    newValue.companyDetails.id &&
+    !Number.isNaN(newValue.companyDetails.id)
+  ) {
+    modelValue.value.companyId = newValue.companyDetails.id
+  }
+  if (newValue.clientId && !Number.isNaN(newValue.clientId)) {
+    modelValue.value.clientId = newValue.clientId
+  } else if (
+    newValue.clientDetails.id &&
+    !Number.isNaN(newValue.clientDetails.id)
+  ) {
+    modelValue.value.companyId = newValue.clientDetails.id
+  }
 }
 
 watch(
@@ -452,12 +467,13 @@ const currencySymbols = ref({
 const updateClientFormRef = ref<typeof ClientForm>()
 const updateDialogRef = ref<typeof ResponsiveDialog>()
 
-const openUpdateClientDialog = () => {
+const openUpdateClientDialog = async () => {
   const data = modelValue.value.clientDetails
   updateDialogRef.value?.functions.open()
-  nextTick(() => {
-    updateClientFormRef.value?.functions.setValue(data)
-  })
+
+  await until(updateClientFormRef).toBeTruthy()
+
+  updateClientFormRef.value?.functions.setValue(data)
 }
 
 const submitClient: InstanceType<

packages/app/src/pages/admin/BillsPage/BillsPage.vue

@@ -60,6 +60,7 @@
     @submit="update"
   >
     <invoice-form
+      v-if="filteredCompanies && filteredClients"
       ref="updateInvoiceFormRef"
       :filtered-companies="filteredCompanies"
       :filtered-clients="filteredClients"
@@ -77,6 +78,7 @@
     @submit="create"
   >
     <invoice-form
+      v-if="filteredCompanies && filteredClients"
       ref="createInvoiceFormRef"
       :filtered-companies="filteredCompanies"
       :filtered-clients="filteredClients"
@@ -200,9 +202,17 @@ const createDialogRef = ref<typeof ResponsiveDialog>()
 const openUpdateDialog: InstanceType<
   typeof ResourcePage
 >['$props']['onUpdate'] = async ({ data }) => {
+  // @ts-expect-error untyped
+  companiesSearchPhrase.value = data?.companyDetails?.name
+  clientName.value =
+    // @ts-expect-error untyped
+    data?.clientDetails?.contactPersonName ?? data?.clientDetails?.companyName
+
   updateDialogRef.value?.functions.open()
 
-  await until(updateDialogRef).toBeTruthy()
+  await until(updateInvoiceFormRef).toBeTruthy()
+  await until(filteredClientsAsyncStatus).toBe('idle')
+  await until(filteredCompaniesAsyncStatus).toBe('idle')
 
   updateInvoiceFormRef.value?.functions.setValue(data)
 }
@@ -258,7 +268,8 @@ const createInvoice: InstanceType<
 const {
   companies: filteredCompanies,
   searchPhrase: companiesSearchPhrase,
-  refetch: refetchFilteredCompanies
+  refetch: refetchFilteredCompanies,
+  asyncStatus: filteredCompaniesAsyncStatus
 } = useAdminSearchCompaniesQuery()
 
 // const filteredCompanies = ref<CompanyDetails[]>([])
@@ -274,8 +285,10 @@ const onFilterCompanies: InstanceType<
 const {
   clients: filteredClients,
   name: clientName,
-  refetch: refetchFilteredClients
+  refetch: refetchFilteredClients,
+  asyncStatus: filteredClientsAsyncStatus
 } = useAdminSearchClientsQuery()
+
 // const filteredClients = ref<ClientDetails>([])
 const onFilterClients: InstanceType<
   typeof InvoiceForm

packages/app/src/pages/admin/ClientsPage/ClientsPage.vue

@@ -133,7 +133,7 @@ const openUpdateDialog: InstanceType<
   typeof ResourcePage
 >['$props']['onUpdate'] = async ({ data }) => {
   updateDialogRef.value?.functions.open()
-  await until(updateDialogRef).toBeTruthy()
+  await until(updateClientFormRef).toBeTruthy()
 
   updateClientFormRef.value?.functions.setValue(data)
 }

packages/app/src/pages/admin/InvoicesPage/InvoicesPage.vue

@@ -62,12 +62,7 @@
     @submit="update"
   >
     <invoice-form
-      v-if="
-        filteredCompanies &&
-        filteredClients &&
-        filteredCompaniesAsyncStatus === 'idle' &&
-        filteredClientsAsyncStatus === 'idle'
-      "
+      v-if="filteredCompanies && filteredClients"
       ref="updateInvoiceFormRef"
       :filtered-companies="filteredCompanies"
       :filtered-clients="filteredClients"
@@ -85,12 +80,7 @@
     @submit="create"
   >
     <invoice-form
-      v-if="
-        filteredCompanies &&
-        filteredClients &&
-        filteredCompaniesAsyncStatus === 'idle' &&
-        filteredClientsAsyncStatus === 'idle'
-      "
+      v-if="filteredCompanies && filteredClients"
       ref="createInvoiceFormRef"
       :filtered-companies="filteredCompanies"
       :filtered-clients="filteredClients"
@@ -247,6 +237,9 @@ const openUpdateDialog: InstanceType<
   updateDialogRef.value?.functions.open()
 
   await until(updateInvoiceFormRef).toBeTruthy()
+  await until(filteredClientsAsyncStatus).toBe('idle')
+  await until(filteredCompaniesAsyncStatus).toBe('idle')
+
   updateInvoiceFormRef.value?.functions.setValue(data)
 }
 

packages/app/src/pages/admin/SubscriptionsPage/SubscriptionsPage.vue

@@ -158,7 +158,7 @@ const openUpdateDialog: InstanceType<
 >['$props']['onUpdate'] = async ({ data }) => {
   updateDialogRef.value?.functions.open()
 
-  await until(updateDialogRef).toBeTruthy()
+  await until(updateSubscriptionFormRef).toBeTruthy()
 
   updateSubscriptionFormRef.value?.functions.setValue(data)
 }

packages/app/src/pages/admin/settings/CompaniesPage/CompaniesPage.vue

@@ -83,7 +83,7 @@ const openUpdateDialog: InstanceType<
   typeof ResourcePage
 >['$props']['onUpdate'] = async ({ data }) => {
   updateDialogRef.value?.functions.open()
-  await until(updateDialogRef).toBeTruthy()
+  await until(updateCompanyFormRef).toBeTruthy()
 
   updateCompanyFormRef.value?.functions.setValue(data)
 }

packages/app/src/queries/admin/clients.ts

@@ -4,7 +4,7 @@ import { ref, computed } from 'vue'
 import { Client } from '@slimfact/api/zod'
 
 export const useAdminSearchClientsQuery = defineQuery(() => {
-  const name = ref<string>('')
+  const name = ref<string | null>(null)
   const page = ref(1)
   const rowsPerPage = ref(5)
   const pagination = computed<{
@@ -20,8 +20,7 @@ export const useAdminSearchClientsQuery = defineQuery(() => {
   }))
 
   const { data: clients, ...rest } = useQuery({
-    enabled: () =>
-      !import.meta.env.SSR && name.value !== '' && name.value !== null,
+    enabled: () => !import.meta.env.SSR && name.value !== null,
     key: () => ['adminSearchClients', name.value, pagination.value],
     query: () =>
       trpc.admin.searchClients.query({