fix(condo): DOMA-12707 contact table bugs (#7039)

* fix(condo): DOMA-12707 update submodules and enhance contact management features

* fix(condo): DOMA-12707 ensure safe access to API methods in contact management components

* fix(condo): DOMA-12707 update submodule and refactor table component event handlers for improved pagination and row selection management

* fix(condo): DOMA-12707 refetch contact after import

* fix(condo): DOMA-12707 update useTableSearch hook to include setSearch function and adjust contact page integration

* fix(condo): DOMA-12707 refine route change handling in contact page to reset table state based on URL query

* fix(condo): DOMA-12707 update submodule callcenter to latest commit

Author: tolmachev21

apps/callcenter

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce'
 import get from 'lodash/get'
 import isEqual from 'lodash/isEqual'
 import { useRouter } from 'next/router'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Dispatch, RefObject, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react'
 
 import { TableRef } from '@open-condo/ui/src'
 
@@ -11,6 +11,7 @@ import { getFiltersFromQuery, updateQuery } from '@condo/domains/common/utils/he
 
 
 type UseSearchOutputType = [string, (search: string) => void, () => void]
+export type UseTableSearchOutputType = [string, (search: string) => void, Dispatch<SetStateAction<string>>, () => void] 
 
 /**
  * @deprecated use useTableSearch
@@ -44,12 +45,14 @@ export const useSearch = <F> (debounceTime: number = 400): UseSearchOutputType =
     return [search, handleSearchChange, handleResetSearch]
 }
 
-export const useTableSearch = (tableRef: TableRef, debounceTime: number = 400): UseSearchOutputType => {
+export const useTableSearch = (tableRef: RefObject<TableRef | null>, debounceTime: number = 400): UseTableSearchOutputType => {
     const [search, setSearch] = useState<string>('')
 
     const searchChange = useMemo(() => debounce((value: string) => {
-        tableRef?.api?.setGlobalFilter(value)
-    }, debounceTime), [tableRef?.api, debounceTime])
+        if (tableRef.current?.api) {
+            tableRef.current.api.setGlobalFilter(value)
+        }
+    }, debounceTime), [tableRef, debounceTime])
 
     const handleSearchChange = useCallback((value: string): void => {
         setSearch(value)
@@ -61,5 +64,5 @@ export const useTableSearch = (tableRef: TableRef, debounceTime: number = 400):
         searchChange('')
     }, [searchChange])
 
-    return [search, handleSearchChange, handleResetSearch]
+    return [search, handleSearchChange, setSearch, handleResetSearch]
 }

apps/condo/domains/common/hooks/useSearch.ts

@@ -177,6 +177,7 @@ export const CreateContactForm: React.FC = () => {
         })
 
         client.cache.evict({ id: 'ROOT_QUERY', fieldName: 'allContacts' })
+        client.cache.evict({ id: 'ROOT_QUERY', fieldName: '_allContactsMeta' })
         client.cache.gc()
 
         if (redirectToClientCard) {

apps/condo/domains/contact/components/CreateContactForm.tsx

@@ -124,10 +124,11 @@ export const EditContactForm: React.FC = () => {
                 })
             }
         } else {
-            await router.push('/contact')
+            await router.push(`/contact/${contactId}`)
         }
 
         client.cache.evict({ id: 'ROOT_QUERY', fieldName: 'allContacts' })
+        client.cache.evict({ id: 'ROOT_QUERY', fieldName: '_allContactsMeta' })
         client.cache.gc()
     }, [client.cache, contactId, redirectToClientCard, router, updateContactMutation])
 

apps/condo/domains/contact/components/EditContactForm.tsx

@@ -30,6 +30,7 @@ export const useTableColumns: UseTableColumns = (filterMetas) => {
     const PhoneMessage = intl.formatMessage({ id: 'Phone' })
     const IsVerifiedMessage = intl.formatMessage({ id: 'contact.column.header.isVerified' })
     const EmailMessage = intl.formatMessage({ id: 'Email' })
+    const NoteMessage = intl.formatMessage({ id: 'contact.column.header.note' })
     const DeletedMessage = intl.formatMessage({ id: 'Deleted' })
     const YesMessage = intl.formatMessage({ id: 'Yes' })
     const NoMessage = intl.formatMessage({ id: 'No' })
@@ -71,6 +72,10 @@ export const useTableColumns: UseTableColumns = (filterMetas) => {
         (email, _, __, globalFilter) => getTableCellRenderer({ search: globalFilter, href: email ? `mailto:${email}` : undefined, ellipsis: true })(email ?? '—')
         , [])
 
+    const renderNote = useCallback<RenderTableCell<TData, TData['note']>>(
+        (note, _, __, globalFilter) => getTableCellRenderer({ search: globalFilter, ellipsis: true })(note ?? '—')
+        , [])
+
 
     return useMemo(() => {
         return [
@@ -149,6 +154,15 @@ export const useTableColumns: UseTableColumns = (filterMetas) => {
                 initialSize: '10%',
                 initialVisibility: false,
             },
+            {
+                header: NoteMessage,
+                dataKey: 'note',
+                id: 'note',
+                render: renderNote,
+                filterComponent: getFilterComponentByKey(filterMetas, 'note'),
+                initialSize: '10%',
+                initialVisibility: false,
+            },
         ]
     }, [
         filterMetas,
@@ -161,6 +175,7 @@ export const useTableColumns: UseTableColumns = (filterMetas) => {
         IsVerifiedMessage, 
         UnitTypeMessage, 
         EmailMessage, 
+        NoteMessage,
         renderName,
         renderRole,
         renderAddress, 
@@ -170,5 +185,6 @@ export const useTableColumns: UseTableColumns = (filterMetas) => {
         renderEmail,
         renderIsVerified,
         renderDate,
+        renderNote,
     ])
 }

apps/condo/domains/contact/hooks/useTableColumns.tsx

@@ -25,6 +25,7 @@ const filterAddress = getFilter(['property', 'id'], 'array', 'string', 'in')
 const filterRole = getFilter(['role', 'id'], 'array', 'string', 'in')
 const filterIsVerified = getBooleanFilter(['isVerified'])
 const filterCreatedAtRange = getDayRangeFilter('createdAt')
+const filterNote = getStringContainsFilter('note')
 
 type UseContactsTableFilters = () => Array<TableFiltersMeta<ContactWhereInput>>
 
@@ -40,6 +41,7 @@ export const useContactsTableFilters: UseContactsTableFilters = () => {
     const YesMessage = intl.formatMessage({ id: 'Yes' })
     const NoMessage = intl.formatMessage({ id: 'No' })
     const SelectMessage = intl.formatMessage({ id: 'Select' })
+    const NoteMessage = intl.formatMessage({ id: 'contact.column.header.note' })
 
     const { organization } = useOrganization()
     const organizationId = organization?.id || null
@@ -180,6 +182,16 @@ export const useContactsTableFilters: UseContactsTableFilters = () => {
                     },
                 },
             },
+            {
+                keyword: 'note',
+                filters: [filterNote],
+                component: {
+                    type: ComponentType.Input,
+                    props: {
+                        placeholder: NoteMessage,
+                    },
+                },
+            },
         ]
     }, [
         EnterAddressMessage,
@@ -196,5 +208,6 @@ export const useContactsTableFilters: UseContactsTableFilters = () => {
         organizationId,
         unitTypeOptions,
         contactRolesLoading,
+        NoteMessage,
     ])
 }

apps/condo/domains/contact/hooks/useTableFilters.tsx

@@ -783,7 +783,7 @@
   "contact.column.header.isVerified": "Верифицирован",
   "contact.column.header.email": "E-mail",
   "contact.column.header.ownershipPercentage": "Доля собственности",
-  "contact.column.header.note": "Примечание",
+  "contact.column.header.note": "Заметка",
   "contact.column.header.communityFee": "Коммунальные платежи",
   "contact.form.prompt.message": "Контакт не сохранится, если вы уйдете со страницы.",
   "contact.form.prompt.title": "Не сохранять контакт?",