feat(condo): DOMA-10141 add column address and unitName to table in m…

…arketplace (#5309)

* feat(condo): DOMA-10141 add fileds address and unit

* feat(condo): DOMA-10141 add getFullUnitName function and add filters to columns address and unitName

* feat(condo): DOMA-10141 delete getUnitName and add getFullUnitName to tiket table

* feat(condo): DOMA-10141 change translation unitTypeMessage

* feat(condo): DOMA-10141 add variation for ticket and marketplace components

* Revert "feat(condo): DOMA-10141 delete getUnitName and add getFullUnitName to tiket table"

This reverts commit dd346f3.

* feat(condo): DOMA-10141 change render unitName

* feat(condo): DOMA-10141 change translation and column size

* feat(condo): DOMA-10141 added sorting in ascending and descending order

* feat(condo): DOMA-10141 fix search in input

apps/condo/domains/marketplace/components/Invoice/MarketplaceInvoicesContent.tsx

@@ -42,7 +42,7 @@ const TableContent = () => {
     const currentPageIndex = getPageIndexFromOffset(offset, DEFAULT_PAGE_SIZE)
     const filtersMeta = useMarketplaceInvoicesFilters()
     const columns = useMarketplaceInvoicesTableColumns({ filtersMeta })
-    const { filtersToWhere, sortersToSortBy } = useQueryMappers(filtersMeta, ['createdAt', 'number', 'toPay'])
+    const { filtersToWhere, sortersToSortBy } = useQueryMappers(filtersMeta, ['createdAt', 'number', 'toPay', 'property', 'unitName'])
     const sortBy = useMemo(() => sortersToSortBy(sorters) as SortInvoicesBy[], [sorters, sortersToSortBy])
 
     const handleRowAction = useCallback((record) => {

apps/condo/domains/marketplace/hooks/useMarketplaceInvoicesFilters.tsx

@@ -1,23 +1,29 @@
 import { InvoiceWhereInput } from '@app/condo/schema'
+import get from 'lodash/get'
 import { useMemo } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
+import { useOrganization } from '@open-condo/next/organization'
 
 import {
     ComponentType,
     FiltersMeta,
+    FilterComponentSize,
 } from '@condo/domains/common/utils/filters.utils'
 import {
     getDayRangeFilter, getFilter, getNumberFilter,
 } from '@condo/domains/common/utils/tables.utils'
 import { INVOICE_PAYMENT_TYPES, INVOICE_STATUSES } from '@condo/domains/marketplace/constants'
+import { searchOrganizationProperty } from '@condo/domains/ticket/utils/clientSchema/search'
 
 
 const createdAtRangeFilter = getDayRangeFilter('createdAt')
 const numberFilter = getNumberFilter('number')
 const paymentTypeFilter = getFilter('paymentType', 'array', 'string', 'in')
 const statusFilter = getFilter('status', 'array', 'string', 'in')
 const ticketNumberFilter = getNumberFilter(['ticket', 'number'])
+const propertyFilter = getFilter(['property', 'id'], 'array', 'string', 'in')
+const unitFilter = getFilter('unitName', 'array', 'string', 'in')
 
 const getTranslationToValueFilter = (field, fieldTranslationsToValueMap) => (search) => {
     if (!search) return
@@ -41,6 +47,13 @@ export function useMarketplaceInvoicesFilters (): Array<FiltersMeta<InvoiceWhere
     const EndDateMessage = intl.formatMessage({ id: 'pages.condo.meter.EndDate' })
     const NumberMessage = intl.formatMessage({ id: 'ticketsTable.Number' })
     const SelectMessage = intl.formatMessage({ id: 'Select' })
+    const EnterAddressMessage = intl.formatMessage({ id: 'pages.condo.marketplace.invoice.filters.EnterAddress' })
+    const AddressMessage = intl.formatMessage({ id: 'field.Address' })
+    const EnterUnitNameMessage = intl.formatMessage({ id: 'pages.condo.marketplace.invoice.filters.EnterUnitName' })
+    const UnitMessage = intl.formatMessage({ id: 'field.FlatNumber' })
+
+    const userOrganization = useOrganization()
+    const userOrganizationId = get(userOrganization, ['organization', 'id'])
 
     const paymentTypeOptions = useMemo(() => INVOICE_PAYMENT_TYPES.map(type => ({
         label: intl.formatMessage({ id: `pages.condo.marketplace.invoice.invoiceList.payment.${type}` as FormatjsIntl.Message['ids'] }),
@@ -102,6 +115,41 @@ export function useMarketplaceInvoicesFilters (): Array<FiltersMeta<InvoiceWhere
                     },
                 },
             },
+            {
+                keyword: 'property',
+                filters: [propertyFilter],
+                component: {
+                    type: ComponentType.GQLSelect,
+                    props: {
+                        search: searchOrganizationProperty(userOrganizationId),
+                        mode: 'multiple',
+                        showArrow: true,
+                        placeholder: EnterAddressMessage,
+                        infinityScroll: true,
+                    },
+                    modalFilterComponentWrapper: {
+                        label: AddressMessage,
+                        size: FilterComponentSize.MediumLarge,
+                    },
+                    columnFilterComponentWrapper: {
+                        width: '400px',
+                    },
+                },
+            },
+            {
+                keyword: 'unitName',
+                filters: [unitFilter],
+                component: {
+                    type: ComponentType.TagsSelect,
+                    props: {
+                        placeholder: EnterUnitNameMessage,
+                    },
+                    modalFilterComponentWrapper: {
+                        label: UnitMessage,
+                        size: FilterComponentSize.Small,
+                    },
+                },
+            },
             {
                 keyword: 'paymentType',
                 filters: [paymentTypeFilter],
@@ -129,5 +177,5 @@ export function useMarketplaceInvoicesFilters (): Array<FiltersMeta<InvoiceWhere
                 },
             },
         ]
-    }, [EndDateMessage, NumberMessage, SelectMessage, StartDateMessage, paymentTypeOptions, statusOptions])
+    }, [EndDateMessage, NumberMessage, SelectMessage, StartDateMessage, userOrganizationId, paymentTypeOptions, statusOptions, AddressMessage, EnterAddressMessage, EnterUnitNameMessage, UnitMessage])
 }

apps/condo/domains/marketplace/hooks/useMarketplaceInvoicesTableColumns.tsx

@@ -1,12 +1,12 @@
 import get from 'lodash/get'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
 import { Tag } from '@open-condo/ui'
 
 import { getFilterIcon } from '@condo/domains/common/components/Table/Filters'
-import { getDateRender, getTableCellRenderer } from '@condo/domains/common/components/Table/Renders'
+import { getDateRender, getAddressRender, getTableCellRenderer, getUnitNameRender } from '@condo/domains/common/components/Table/Renders'
 import { getFilterDropdownByKey } from '@condo/domains/common/utils/filters.utils'
 import { getFilteredValue } from '@condo/domains/common/utils/helpers'
 import { getSorterMap, parseQuery } from '@condo/domains/common/utils/tables.utils'
@@ -18,6 +18,8 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
     const intl = useIntl()
     const DateTitle = intl.formatMessage({ id: 'Date' })
     const InvoiceNumberTitle = intl.formatMessage({ id: 'pages.condo.marketplace.payments.invoiceNumber' })
+    const AddressTitle = intl.formatMessage({ id: 'pages.condo.marketplace.invoice.id.field.address' })
+    const UnitTitle = intl.formatMessage({ id: 'pages.condo.marketplace.invoice.id.field.unitName' })
     const RowsTitle = intl.formatMessage({ id: 'pages.condo.marketplace.invoice.id.title.order' })
     const PaymentTypeTitle = intl.formatMessage({ id: 'pages.condo.marketplace.invoice.id.field.paymentType' })
     const StatusTitle = intl.formatMessage({ id: 'Status' })
@@ -32,6 +34,14 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
     const search = getFilteredValue(filters, 'search')
     const render = useMemo(() => getTableCellRenderer({ search }), [search])
 
+    const renderAddress = useCallback((property) => {
+        return getAddressRender(property, null, search)
+    }, [search])
+
+    const renderUnitName = useCallback((text, invoice) => {
+        return getUnitNameRender(intl, text, invoice, search)
+    }, [search])
+
     return useMemo(() => [
         {
             title: DateTitle,
@@ -46,7 +56,7 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
             title: InvoiceNumberTitle,
             key: 'number',
             dataIndex: 'number',
-            width: '15%',
+            width: '10%',
             render: (number, invoice) => {
                 const renderInvoiceNumber = getTableCellRenderer({ search, href: `/marketplace/invoice/${invoice.id}`, target: '_blank' })
 
@@ -62,7 +72,7 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
             title: TicketNumber,
             key: 'ticket',
             dataIndex: 'ticket',
-            width: '15%',
+            width: '10%',
             render: (ticket) => {
                 if (!ticket) {
                     return '—'
@@ -78,11 +88,36 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
             filterDropdown: getFilterDropdownByKey(filtersMeta, 'ticket'),
             filterIcon: getFilterIcon,
         },
+        {
+            title: AddressTitle,
+            key: 'property',
+            dataIndex: 'property',
+            width: '15%',
+            render: renderAddress,
+            sorter: true,
+            sortOrder: get(sorterMap, 'property'),
+            filteredValue: getFilteredValue(filters, 'property'),
+            filterDropdown: getFilterDropdownByKey(filtersMeta, 'property'),
+            filterIcon: getFilterIcon,
+        },
+        {
+            title: UnitTitle,
+            key: 'unitName',
+            dataIndex: 'unitName',
+            width: '9%',
+            render: renderUnitName,
+            sorter: true,
+            sortOrder: get(sorterMap, 'unitName'),
+            filteredValue: getFilteredValue(filters, 'unitName'),
+            filterDropdown: getFilterDropdownByKey(filtersMeta, 'unitName'),
+            filterIcon: getFilterIcon,
+            ellipsis: true,
+        },
         {
             title: RowsTitle,
             key: 'rows',
             dataIndex: 'rows',
-            width: '25%',
+            width: '13%',
             render: (rows) => {
                 const joinedRows = rows.map((row, index) => {
                     const name = row.name
@@ -98,7 +133,7 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
             title: PaymentTypeTitle,
             key: 'paymentType',
             dataIndex: 'paymentType',
-            width: '15%',
+            width: '10%',
             render: (paymentType) => {
                 const label = intl.formatMessage({ id: `pages.condo.marketplace.invoice.invoiceList.payment.${paymentType}` as FormatjsIntl.Message['ids'] })
 
@@ -133,7 +168,7 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
             title: SumTitle,
             key: 'toPay',
             dataIndex: 'rows',
-            width: '10%',
+            width: '13%',
             render: (rows) => {
                 const totalPrice = rows.filter(row => row.toPay !== '0').reduce((acc, row) => acc + Number(row.toPay) * row.count, 0)
                 const hasMinPrice = rows.some(row => row.isMin)
@@ -149,5 +184,5 @@ export const useMarketplaceInvoicesTableColumns = ({ filtersMeta }) => {
             filterDropdown: getFilterDropdownByKey(filtersMeta, 'toPay'),
             filterIcon: getFilterIcon,
         },
-    ], [ContractPriceMessage, DateTitle, InvoiceNumberTitle, PaymentTypeTitle, RowsTitle, StatusTitle, SumTitle, TicketNumber, filters, filtersMeta, intl, render, search, sorterMap])
+    ], [ContractPriceMessage, DateTitle, InvoiceNumberTitle, PaymentTypeTitle, RowsTitle, AddressTitle, renderAddress, renderUnitName, UnitTitle, StatusTitle, SumTitle, TicketNumber, filters, filtersMeta, intl, render, search, sorterMap])
 }

apps/condo/lang/en/en.json

@@ -1474,7 +1474,7 @@
   "pages.condo.marketplace.bills.empty.buttonText": "Issue an invoice",
   "pages.condo.marketplace.payments.empty.title": "There are no payments here yet",
   "pages.condo.marketplace.payments.empty.text": "As soon as the residents pay for the services via the mobile app or via the link, information about it will appear here",
-  "pages.condo.marketplace.payments.invoiceNumber": "invoice number",
+  "pages.condo.marketplace.payments.invoiceNumber": "Invoice number",
   "pages.condo.marketplace.payments.stats.allPayment": "Total (during the period):",
   "pages.condo.marketplace.payments.stats.donePayment": "Completed:",
   "pages.condo.marketplace.payments.stats.inProcessPayment": "Other:",
@@ -1518,6 +1518,8 @@
   "pages.condo.marketplace.bankAccountErrorMessage": "Bank account validation failed",
   "pages.condo.marketplace.tinValidationErrorMessage": "TIN validation failed",
   "pages.condo.marketplace.routingNumberValidationErrorMessage": "RoutingNumber is in a wrong format",
+  "pages.condo.marketplace.invoice.filters.EnterAddress": "Enter address",
+  "pages.condo.marketplace.invoice.filters.EnterUnitName": "Enter unit name",
   "pages.condo.marketplace.invoice.create.title": "New invoice",
   "pages.condo.marketplace.invoice.update.title": "Invoice № {number}",
   "pages.condo.marketplace.invoice.form.property": "Address",
@@ -1589,6 +1591,7 @@
   "pages.condo.marketplace.invoice.id.field.paymentLink.copy": "Copy link",
   "pages.condo.marketplace.invoice.id.title.payerData": "Payer data",
   "pages.condo.marketplace.invoice.id.field.address": "Address",
+  "pages.condo.marketplace.invoice.id.field.unitName": "Unit",
   "pages.condo.marketplace.invoice.id.field.contact": "Contact",
   "pages.condo.marketplace.invoice.id.ticketAlert.message": "Invoice connected to ticket №{number}",
   "pages.condo.marketplace.invoice.id.ticketAlert.description": "View ticket",

apps/condo/lang/ru/ru.json

@@ -1518,6 +1518,8 @@
   "pages.condo.marketplace.bankAccountErrorMessage": "Ошибка в номере расчетного счета",
   "pages.condo.marketplace.tinValidationErrorMessage": "Ошибка при проверке ИНН",
   "pages.condo.marketplace.routingNumberValidationErrorMessage": "БИК задан не верно",
+  "pages.condo.marketplace.invoice.filters.EnterAddress": "Введите адрес",
+  "pages.condo.marketplace.invoice.filters.EnterUnitName": "Введите номер помещения",
   "pages.condo.marketplace.invoice.create.title": "Новый счет",
   "pages.condo.marketplace.invoice.update.title": "Счет № {number}",
   "pages.condo.marketplace.invoice.form.property": "Адрес",
@@ -1589,6 +1591,7 @@
   "pages.condo.marketplace.invoice.id.field.paymentLink.copy": "Скопировать ссылку",
   "pages.condo.marketplace.invoice.id.title.payerData": "Данные плательщика",
   "pages.condo.marketplace.invoice.id.field.address": "Адрес",
+  "pages.condo.marketplace.invoice.id.field.unitName": "Помещение",
   "pages.condo.marketplace.invoice.id.field.contact": "Контакт",
   "pages.condo.marketplace.invoice.id.ticketAlert.message": "Счет привязан к заявке №{number}",
   "pages.condo.marketplace.invoice.id.ticketAlert.description": "Посмотреть заявку",