feat(condo): DOMA-12533, DOMA-11058, DOMA-11673, DOMA-10972 add table on contact page (#6917)

* feat(condo): DOMA-12250 add new compoent

* feat(condo): DOMA-12533 add new contact table

* feat(condo): DOMA-12533 add table to contact page

* feat(condo): DOMA-12533 add new table in callcenter on /contact page

* feat(condo): DOMA-12533 sync state with ui kit

* feat(condo): DOMA-12533 update yarn.lock to include local domain link for pos-integration

* feat(condo): DOMA-12533 remove TanStackTable component and lodash dependency

* feat(condo): DOMA-12533 add default settings label to contact table

* feat(condo): DOMA-12533 update after testing

* feat(condo): DOMA-12533 update table components and enhance search functionality

* feat(condo): DOMA-12533 refactor table rendering and search handling in contact components

* feat(condo): DOMA-12533 enhance table component with improved state management and style adjustments

* feat(callcenter): DOMA-12533 update subproject commit reference

* feat(condo): DOMA-12533 implement table URL query management and enhance contact table functionality

* feat(condo): DOMA-12533 add CSS styles for filter components and refactor filter handling in table

* feat(condo): DOMA-12533 improve filter component styles and update type handling in filters

* feat(condo): DOMA-12533 update filter component styles, improve type handling, and enhance table functionality

* feat(condo): DOMA-12533 update subproject commit references and enhance contact table functionality with improved row selection handling

* feat(condo): DOMA-12533 remove community fee column and filter from contact table

Author: tolmachev21

apps/callcenter

@@ -0,0 +1,15 @@
+.filter-component-checkbox-group-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-component-select-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-component-gql-select-container {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+}

apps/condo/domains/common/components/Table/Filters.module.css

@@ -22,7 +22,7 @@ import { TTextHighlighterRenderPartFN } from '@condo/domains/common/components/T
 import { TextHighlighter, TTextHighlighterProps } from '@condo/domains/common/components/TextHighlighter'
 import { LOCALES } from '@condo/domains/common/constants/locale'
 import { ELLIPSIS_ROWS } from '@condo/domains/common/constants/style'
-import { getAddressDetails } from '@condo/domains/common/utils/helpers'
+import { getAddressDetails, ObjectWithAddressInfo } from '@condo/domains/common/utils/helpers'
 import { renderLink } from '@condo/domains/common/utils/Renders'
 import { ELECTRICITY_METER_RESOURCE_ID } from '@condo/domains/meter/constants/constants'
 
@@ -223,7 +223,7 @@ const POSTFIX_PROPS: TextProps = { type: 'secondary' }
 const NEW_LINE_POSTFIX_STYLE: TextProps = { style: { whiteSpace: 'pre-line' } }
 const ONE_LINE_POSTFIX_STYLE: TextProps =  { style: { whiteSpace: 'nowrap' } }
 
-export const getAddressRender = (property: Pick<Property, 'addressMeta' | 'address' | 'deletedAt'>, DeletedMessage?: string, search?: FilterValue | string, oneLinePostfix?: boolean) => {
+export const getAddressRender = (property: ObjectWithAddressInfo, DeletedMessage?: string, search?: FilterValue | string, oneLinePostfix?: boolean) => {
 
     if (!property) {
         return getTableCellRenderer({
@@ -265,6 +265,12 @@ export const getUnitNameRender = <T extends Record<string, unknown>>(intl, text:
     return getTableCellRenderer({ search, extraTitle })(unitName)
 }
 
+export const getUnitTypeRender = <T extends Record<string, unknown>>(intl, text: string, record: T, search?: FilterValue | string) => {
+    const unitType = get(record, 'unitType', BuildingUnitSubType.Flat)
+    const renderUnitType = unitType ? intl.formatMessage({ id: `pages.condo.ticket.field.unitType.${unitType}` }) : null
+    return getTableCellRenderer({ search, extraTitle: renderUnitType })(renderUnitType)
+}
+
 export const getDateRender = (intl, search?: FilterValue | string, prefix = '\n') => {
     return function render (stringDate: string): RenderReturnType {
         if (!stringDate) return '—'

apps/condo/domains/common/components/Table/Filters.tsx

@@ -2,18 +2,20 @@ import get from 'lodash/get'
 import isFunction from 'lodash/isFunction'
 import { useMemo } from 'react'
 
+import type { SortState } from '@open-condo/ui'
+
 import { QueryMeta, SorterColumn, convertSortersToSortBy } from '../utils/tables.utils'
 
 const DEFAULT_SORT_BY = ['createdAt_DESC']
 
-export const useQueryMappers = <F>(queryMetas: Array<QueryMeta<F>>, sortableColumns: Array<string>) => {
+export const useQueryMappers = <F>(queryMetas: Array<QueryMeta<F>>, sortableColumns: Array<string> | null) => {
     return useMemo(() => {
-        const validSorts = sortableColumns.reduce((acc, cur) => {
-            return [...acc, `${cur}_ASC`, `${cur}_DESC`]
-        }, [])
+        const validSorts = Array.isArray(sortableColumns)
+            ? sortableColumns.reduce((acc, cur) => [...acc, `${cur}_ASC`, `${cur}_DESC`], [])
+            : null
 
         const validMetas = queryMetas
-            .filter((meta) => meta && meta.keyword && meta.filters && (isFunction(meta.filters) || meta.filters.length > 0))
+            .filter((meta) => meta?.keyword && meta.filters && (isFunction(meta.filters) || meta.filters.length > 0))
 
         const filtersToWhere = (queryFilters) => {
             const whereQueries = []
@@ -45,12 +47,26 @@ export const useQueryMappers = <F>(queryMetas: Array<QueryMeta<F>>, sortableColu
             }
         }
 
-        const sortersToSortBy = (querySorts: SorterColumn | Array<SorterColumn>, defaultSortBy?: string[]) => {
-            const sortBy = defaultSortBy ? defaultSortBy : DEFAULT_SORT_BY
-            const sorters = convertSortersToSortBy(querySorts)
-                .filter((sortLine) => validSorts.includes(sortLine))
+        const sortersToSortBy = (
+            querySorts: SorterColumn | Array<SorterColumn> | SortState,
+            defaultSortBy?: Array<string>,
+        ) => {
+            const defaultSorters = defaultSortBy ?? DEFAULT_SORT_BY
+            if (!querySorts || (Array.isArray(querySorts) && querySorts.length === 0)) return defaultSorters
+
+            if (Array.isArray(querySorts) && querySorts.every((s) => 'id' in s)) {
+                return querySorts
+                    .map((s) => `${s.id}_${s.desc ? 'DESC' : 'ASC'}`)
+                    .filter(Boolean)
+            }
+
+            const sorters = validSorts 
+                ? 
+                convertSortersToSortBy(querySorts).filter((sortLine) => validSorts.includes(sortLine)) 
+                : 
+                []
 
-            return sorters.length ? sorters : sortBy
+            return sorters.length ? sorters : defaultSorters
         }
 
         return {
@@ -59,4 +75,4 @@ export const useQueryMappers = <F>(queryMetas: Array<QueryMeta<F>>, sortableColu
         }
 
     }, [queryMetas, sortableColumns])
-}
+}

apps/condo/domains/common/components/Table/Renders.tsx

@@ -4,12 +4,17 @@ import isEqual from 'lodash/isEqual'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { TableRef } from '@open-condo/ui/src'
+
 import { getFiltersQueryData } from '@condo/domains/common/utils/filters.utils'
 import { getFiltersFromQuery, updateQuery } from '@condo/domains/common/utils/helpers'
 
 
 type UseSearchOutputType = [string, (search: string) => void, () => void]
 
+/**
+ * @deprecated use useTableSearch
+ */
 export const useSearch = <F> (debounceTime: number = 400): UseSearchOutputType => {
     const router = useRouter()
     const filtersFromQuery = useMemo(() => getFiltersFromQuery<F>(router.query), [router.query])
@@ -38,3 +43,23 @@ export const useSearch = <F> (debounceTime: number = 400): UseSearchOutputType =
 
     return [search, handleSearchChange, handleResetSearch]
 }
+
+export const useTableSearch = (tableRef: TableRef, debounceTime: number = 400): UseSearchOutputType => {
+    const [search, setSearch] = useState<string>('')
+
+    const searchChange = useMemo(() => debounce((value: string) => {
+        tableRef?.api?.setGlobalFilter(value)
+    }, debounceTime), [tableRef?.api, debounceTime])
+
+    const handleSearchChange = useCallback((value: string): void => {
+        setSearch(value)
+        searchChange(value)
+    }, [searchChange])
+
+    const handleResetSearch = useCallback(() => {
+        setSearch('')
+        searchChange('')
+    }, [searchChange])
+
+    return [search, handleSearchChange, handleResetSearch]
+}

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

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+
+import { useIntl } from '@open-condo/next/intl'
+
+export const useTableTranslations = () => {
+    const intl = useIntl()
+
+    const menuLabels = useMemo(() => ({
+        sortDescLabel: intl.formatMessage({ id: 'Table.Sort' }),
+        sortAscLabel: intl.formatMessage({ id: 'Table.Sort' }),
+        filterLabel: intl.formatMessage({ id: 'Table.Filter' }),
+        settingsLabel: intl.formatMessage({ id: 'Table.Settings' }),
+        sortedDescLabel: intl.formatMessage({ id: 'Table.Sorted' }),
+        sortedAscLabel: intl.formatMessage({ id: 'Table.Sorted' }),
+        filteredLabel: intl.formatMessage({ id: 'Table.Filtered' }),
+        noDataLabel: intl.formatMessage({ id: 'Table.NoData' }),
+        defaultSettingsLabel: intl.formatMessage({ id: 'Table.DefaultSettingsLabel' }),
+        resetFilterLabel: intl.formatMessage({ id: 'Table.ResetFilter' }),
+    }), [intl])
+
+    return menuLabels
+}