From 29df6aa6f57c19a6ee245d9321aabca8b7ea54c6 Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Mon, 2 Dec 2024 13:53:14 -0300 Subject: [PATCH 1/8] :sparkles: feat: Added Paper component --- src/components/ui/paper/index.tsx | 14 ++++++++++++ src/components/ui/paper/paper.mdx | 15 +++++++++++++ src/components/ui/paper/paper.stories.tsx | 26 +++++++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 src/components/ui/paper/index.tsx create mode 100644 src/components/ui/paper/paper.mdx create mode 100644 src/components/ui/paper/paper.stories.tsx diff --git a/src/components/ui/paper/index.tsx b/src/components/ui/paper/index.tsx new file mode 100644 index 00000000..f75d1e47 --- /dev/null +++ b/src/components/ui/paper/index.tsx @@ -0,0 +1,14 @@ +import { cn } from '@/lib/utils' +import React from 'react' + +export type PaperProps = React.HTMLAttributes + +export const Paper = React.forwardRef( + ({ className, ...others }) => ( +
+ ) +) +Paper.displayName = 'Paper' diff --git a/src/components/ui/paper/paper.mdx b/src/components/ui/paper/paper.mdx new file mode 100644 index 00000000..75af5235 --- /dev/null +++ b/src/components/ui/paper/paper.mdx @@ -0,0 +1,15 @@ +import { Meta, Controls, Primary, Canvas } from '@storybook/blocks' +import * as Story from './paper.stories' + + + +# Paper + +Shows a piece of content with a little emphasis and shadow. + +### Primary + + + + + diff --git a/src/components/ui/paper/paper.stories.tsx b/src/components/ui/paper/paper.stories.tsx new file mode 100644 index 00000000..a8930ff9 --- /dev/null +++ b/src/components/ui/paper/paper.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/react' +import { Paper, PaperProps } from '.' + +const meta: Meta = { + title: 'Primitives/Paper', + component: Paper, + argTypes: {} +} + +export default meta + +export const Primary: StoryObj = { + args: { + className: 'p-4' + }, + render: (args) => ( + +

This is a Paper component!

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi neque + dolor, tempus ac scelerisque sed, accumsan eget orci. Donec ac mauris + congue, mollis massa vel, sagittis libero. +

+ + ) +} From c0534d1be5caf81499a6cef8862d80a803918e7c Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Mon, 2 Dec 2024 13:53:32 -0300 Subject: [PATCH 2/8] :recycle: refactor: Removed table styling --- src/components/ui/table/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ui/table/index.tsx b/src/components/ui/table/index.tsx index 4b1996a4..ec3a8721 100644 --- a/src/components/ui/table/index.tsx +++ b/src/components/ui/table/index.tsx @@ -6,10 +6,7 @@ const TableContainer = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
)) TableContainer.displayName = 'TableContainer' From 00cb5d410f8b5c20ebeeef930aa3732546d8a048 Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Mon, 2 Dec 2024 13:53:43 -0300 Subject: [PATCH 3/8] :recycle: refactor: Removed unused code --- src/components/data-table.tsx | 244 ---------------------------------- 1 file changed, 244 deletions(-) delete mode 100644 src/components/data-table.tsx diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx deleted file mode 100644 index cab1360d..00000000 --- a/src/components/data-table.tsx +++ /dev/null @@ -1,244 +0,0 @@ -'use client' - -import React, { useEffect } from 'react' -import { - ColumnDef, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - useReactTable -} from '@tanstack/react-table' - -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow -} from '@/components/ui/table' -import { Button } from '@/components/ui/button' -import { ChevronLeft, ChevronRight, Search } from 'lucide-react' -import { cn } from '@/lib/utils' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue -} from './ui/select' -import { Checkbox } from '@/components/ui/checkbox' -import { InputWithIcon } from './ui/input-with-icon' -import { useIntl } from 'react-intl' - -interface DataTableProps { - columns: ColumnDef[] - pageSizeOptions?: number[] - data: TData[] - onSelectedRowsChange?: (selectedRows: TData[]) => void - enableRowSelection?: boolean -} - -export function DataTable({ - columns, - pageSizeOptions = [10, 50, 100], - data, - onSelectedRowsChange, - enableRowSelection = false -}: DataTableProps) { - const intl = useIntl() - const [columnFilters, setColumnFilters] = React.useState([]) - const [rowSelection, setRowSelection] = React.useState({}) - - const table = useReactTable({ - data, - columns, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getFilteredRowModel: getFilteredRowModel(), - onColumnFiltersChange: setColumnFilters, - onRowSelectionChange: setRowSelection, - state: { - columnFilters, - rowSelection - }, - enableRowSelection - }) - - useEffect(() => { - if (onSelectedRowsChange) { - const selectedRows = table - .getSelectedRowModel() - .rows.map((row) => row.original) - onSelectedRowsChange(selectedRows) - } - }, [rowSelection, onSelectedRowsChange, table]) - - return ( -
-
- - table.getColumn('name')?.setFilterValue(event.target.value) - } - className="w-full min-w-[300px]" - icon={} - iconPosition={'left'} - /> - - {data.length > 10 ? ( -
-

- Itens por página -

- -
- ) : null} -
- -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {enableRowSelection && ( - - - table.toggleAllRowsSelected(!!value) - } - aria-label="Select all" - /> - - )} - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ))} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {enableRowSelection && ( - - row.toggleSelected(!!value)} - aria-label="Select row" - /> - - )} - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- -
-
-

- Mostrando{' '} - - {table.getFilteredRowModel().rows.length} - {' '} - de um total de {data.length}{' '} - Ledgers. -

-
- -
- - - -
-
-
-
- ) -} From 055d80e0bfdc7b8d8ecad986ff3c43aedb1d2932 Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Mon, 2 Dec 2024 13:53:59 -0300 Subject: [PATCH 4/8] :sparkles: feat: Created EntityDataTable component --- .../entity-data-table/entity-data-table.mdx | 13 ++++ .../entity-data-table.stories.tsx | 61 +++++++++++++++++++ src/components/entity-data-table/index.tsx | 34 +++++++++++ 3 files changed, 108 insertions(+) create mode 100644 src/components/entity-data-table/entity-data-table.mdx create mode 100644 src/components/entity-data-table/entity-data-table.stories.tsx create mode 100644 src/components/entity-data-table/index.tsx diff --git a/src/components/entity-data-table/entity-data-table.mdx b/src/components/entity-data-table/entity-data-table.mdx new file mode 100644 index 00000000..125d9f0f --- /dev/null +++ b/src/components/entity-data-table/entity-data-table.mdx @@ -0,0 +1,13 @@ +import { Meta, Controls, Primary, Canvas } from '@storybook/blocks' +import * as Story from './entity-data-table.stories' + + + +# EntityDataTable + +Component used to wrap Table and show auxiliary information. + + + + + diff --git a/src/components/entity-data-table/entity-data-table.stories.tsx b/src/components/entity-data-table/entity-data-table.stories.tsx new file mode 100644 index 00000000..653bca71 --- /dev/null +++ b/src/components/entity-data-table/entity-data-table.stories.tsx @@ -0,0 +1,61 @@ +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' +import { EntityDataTable } from '.' +import { + TableHeader, + TableRow, + TableHead, + TableBody, + TableCell, + Table +} from '../ui/table' + +const meta: Meta> = { + title: 'Components/EntityDataTable', + component: EntityDataTable.Root, + argTypes: {} +} + +export default meta + +export const Primary: StoryObj> = { + render: (args) => ( + + + + + Name + Type + Code + Metadata + + + + + American Dolar + Coin + USD + 2 registers + + + Bitcoin + Cripto + BTC + - + + + Tether + Cripto + USDT + 4 registers + + +
+ + + Showing 3 items. + + + + ) +} diff --git a/src/components/entity-data-table/index.tsx b/src/components/entity-data-table/index.tsx new file mode 100644 index 00000000..b989f2b5 --- /dev/null +++ b/src/components/entity-data-table/index.tsx @@ -0,0 +1,34 @@ +import { cn } from '@/lib/utils' +import React from 'react' +import { Paper, PaperProps } from '../ui/paper' + +const EntityDataTableRoot = React.forwardRef( + (props) => +) +EntityDataTableRoot.displayName = 'EntityDataTable' + +const EntityDataTableFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +EntityDataTableFooter.displayName = 'EntityDataTableFooter' + +const EntityDataTableFooterText = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +EntityDataTableFooterText.displayName = 'EntityDataTableFooterText' + +export const EntityDataTable = { + Root: EntityDataTableRoot, + Footer: EntityDataTableFooter, + FooterText: EntityDataTableFooterText +} From 03f764970f0bbf6d05bfeb82e904aaefc5d15ebc Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Mon, 2 Dec 2024 13:54:42 -0300 Subject: [PATCH 5/8] :recycle: refactor: Refactored table usage --- .../accounts-content.tsx | 21 +- .../portfolios-content.tsx | 313 +++++++++--------- .../[id]/assets/assets-tab-content.tsx | 43 ++- .../[id]/products/products-tab-content.tsx | 216 ++++++------ .../(routes)/ledgers/ledgers-data-table.tsx | 23 +- 5 files changed, 341 insertions(+), 275 deletions(-) diff --git a/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/accounts-content.tsx b/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/accounts-content.tsx index f7cc2008..3bb7fe8f 100644 --- a/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/accounts-content.tsx +++ b/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/accounts-content.tsx @@ -21,6 +21,7 @@ import useCustomToast from '@/hooks/use-custom-toast' import { AccountType } from '@/types/accounts-type' import { AccountSheet } from './accounts-sheet' import { AccountsDataTable } from './accounts-data-table' +import { EntityDataTable } from '@/components/entity-data-table' export const AccountsContent = () => { const intl = useIntl() @@ -201,15 +202,17 @@ export const AccountsContent = () => { {accountsList && ( - + + + )} ) diff --git a/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/portfolios-content.tsx b/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/portfolios-content.tsx index 96fc9cb3..694c2c8b 100644 --- a/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/portfolios-content.tsx +++ b/src/app/(routes)/ledgers/[id]/accounts-and-portfolios/portfolios-content.tsx @@ -5,7 +5,7 @@ import { useParams } from 'next/navigation' import { EntityBox } from '@/components/entity-box' import { useCreateUpdateSheet } from '@/components/sheet/use-create-update-sheet' import { PortfolioResponseDto } from '@/core/application/dto/portfolios-dto' -import { useDeletePortfolio, useListPortfolios } from '@/client/portfolios' +import { useDeletePortfolio } from '@/client/portfolios' import { useOrganization } from '@/context/organization-provider/organization-provider-client' import { useIntl } from 'react-intl' import { isNil } from 'lodash' @@ -44,6 +44,7 @@ import { } from '@/components/ui/tooltip' import useCustomToast from '@/hooks/use-custom-toast' import { Arrow } from '@radix-ui/react-tooltip' +import { EntityDataTable } from '@/components/entity-data-table' export const PortfoliosContent = () => { const intl = useIntl() @@ -171,163 +172,165 @@ export const PortfoliosContent = () => { {!isNil(portfoliosData?.items) && portfoliosData?.items.length > 0 && isTableExpanded && ( - - - - - - {intl.formatMessage({ - id: 'common.id', - defaultMessage: 'ID' - })} - - - {intl.formatMessage({ - id: 'common.name', - defaultMessage: 'Name' - })} - - - {intl.formatMessage({ - id: 'common.metadata', - defaultMessage: 'Metadata' - })} - - - {intl.formatMessage({ - id: 'common.accounts', - defaultMessage: 'Accounts' - })} - - - {intl.formatMessage({ - id: 'common.actions', - defaultMessage: 'Actions' - })} - - - - - {table.getRowModel().rows.map((portfolio) => { - const displayId = - portfolio.original.id && portfolio.original.id.length > 8 - ? `${truncateString(portfolio.original.id, 8)}` - : portfolio.original.id + + +
+ + + + {intl.formatMessage({ + id: 'common.id', + defaultMessage: 'ID' + })} + + + {intl.formatMessage({ + id: 'common.name', + defaultMessage: 'Name' + })} + + + {intl.formatMessage({ + id: 'common.metadata', + defaultMessage: 'Metadata' + })} + + + {intl.formatMessage({ + id: 'common.accounts', + defaultMessage: 'Accounts' + })} + + + {intl.formatMessage({ + id: 'common.actions', + defaultMessage: 'Actions' + })} + + + + + {table.getRowModel().rows.map((portfolio) => { + const displayId = + portfolio.original.id && portfolio.original.id.length > 8 + ? `${truncateString(portfolio.original.id, 8)}` + : portfolio.original.id - return ( - - - - - - handleCopyToClipboard( - portfolio.original.id, - intl.formatMessage({ - id: 'ledgers.toast.copyId', - defaultMessage: - 'The id has been copied to your clipboard.' - }) - ) - } - > -

- {displayId} -

- - -

- {portfolio.original.id} -

-

+ return ( + + + + + + handleCopyToClipboard( + portfolio.original.id, + intl.formatMessage({ + id: 'ledgers.toast.copyId', + defaultMessage: + 'The id has been copied to your clipboard.' + }) + ) + } + > +

+ {displayId} +

+ + +

+ {portfolio.original.id} +

+

+ {intl.formatMessage({ + id: 'ledgers.columnsTable.tooltipCopyText', + defaultMessage: 'Click to copy' + })} +

+ + + + + + {portfolio.original.name} + + {intl.formatMessage( + { + id: 'common.table.accounts', + defaultMessage: + '{number, plural, =0 {No accounts} one {# account} other {# accounts}}' + }, + { + number: portfolio.original.accounts?.length || 0 + } + )} + + + {intl.formatMessage( + { + id: 'common.table.metadata', + defaultMessage: + '{number, plural, =0 {-} one {# record} other {# records}}' + }, + { + number: Object.entries( + portfolio.original.metadata || [] + ).length + } + )} + + + + + + + + + + handleEdit({ + ...portfolio.original, + entityId: portfolio.original.id, + status: { + ...portfolio.original.status, + description: + portfolio.original.status.description ?? + '' + } + } as PortfolioResponseDto) + } + > {intl.formatMessage({ - id: 'ledgers.columnsTable.tooltipCopyText', - defaultMessage: 'Click to copy' + id: `common.edit`, + defaultMessage: 'Edit' })} -

- - - - - - {portfolio.original.name} - - {intl.formatMessage( - { - id: 'common.table.accounts', - defaultMessage: - '{number, plural, =0 {No accounts} one {# account} other {# accounts}}' - }, - { - number: portfolio.original.accounts?.length || 0 - } - )} - - - {intl.formatMessage( - { - id: 'common.table.metadata', - defaultMessage: - '{number, plural, =0 {-} one {# record} other {# records}}' - }, - { - number: Object.entries( - portfolio.original.metadata || [] - ).length - } - )} - - - - - - - - - - handleEdit({ - ...portfolio.original, - entityId: portfolio.original.id, - status: { - ...portfolio.original.status, - description: - portfolio.original.status.description ?? - '' - } - } as PortfolioResponseDto) - } - > - {intl.formatMessage({ - id: `common.edit`, - defaultMessage: 'Edit' - })} - - - { - handleDialogOpen(portfolio?.original?.id!) - }} - > - {intl.formatMessage({ - id: `common.delete`, - defaultMessage: 'Delete' - })} - - - - - - ) - })} - -
- + + + { + handleDialogOpen(portfolio?.original?.id!) + }} + > + {intl.formatMessage({ + id: `common.delete`, + defaultMessage: 'Delete' + })} + + + + + + ) + })} + + + + )} ) diff --git a/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx b/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx index 513f787a..b6013332 100644 --- a/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx +++ b/src/app/(routes)/ledgers/[id]/assets/assets-tab-content.tsx @@ -20,6 +20,7 @@ import { useParams } from 'next/navigation' import { useConfirmDialog } from '@/components/confirmation-dialog/use-confirm-dialog' import ConfirmationDialog from '@/components/confirmation-dialog' import useCustomToast from '@/hooks/use-custom-toast' +import { EntityDataTable } from '@/components/entity-data-table' type AssetsTabContentProps = { data: ILedgerType @@ -142,18 +143,38 @@ export const AssetsTabContent = ({ data }: AssetsTabContentProps) => { - {isLoading && } + + {isLoading && } - {assets && ( - - )} + {assets && ( + + )} + + + + {intl.formatMessage( + { + id: 'ledgers.assets.showing', + defaultMessage: + 'Showing {count} {number, plural, =0 {assets} one {asset} other {assets}}.' + }, + { + number: assets?.items?.length, + count: ( + {assets?.items?.length} + ) + } + )} + + + { const intl = useIntl() @@ -127,106 +128,127 @@ export const ProductsTabContent = () => { - {isNil(data?.items) || - (data?.items.length === 0 && ( - - + + ))} - {!isNil(data?.items) && data?.items.length > 0 && ( - - - - - - {intl.formatMessage({ - id: 'common.id', - defaultMessage: 'ID' - })} - - - {intl.formatMessage({ - id: 'common.name', - defaultMessage: 'Name' - })} - - - {intl.formatMessage({ - id: 'common.metadata', - defaultMessage: 'Metadata' - })} - - - {intl.formatMessage({ - id: 'common.actions', - defaultMessage: 'Actions' - })} - - - - - {table.getRowModel().rows.map((product) => ( - - {product.original.id} - {product.original.name} - - {intl.formatMessage( - { - id: 'common.table.metadata', - defaultMessage: - '{number, plural, =0 {-} one {# record} other {# records}}' - }, - { - number: Object.entries(product.original.metadata || []) - .length - } - )} - - - - - - - - handleEdit(product.original)} - > - {intl.formatMessage({ - id: `common.edit`, - defaultMessage: 'Edit' - })} - - - handleDialogOpen(product.original.id)} - > - {intl.formatMessage({ - id: `common.delete`, - defaultMessage: 'Delete' - })} - - - - + {!isNil(data?.items) && data?.items.length > 0 && ( + +
+ + + + {intl.formatMessage({ + id: 'common.id', + defaultMessage: 'ID' + })} + + + {intl.formatMessage({ + id: 'common.name', + defaultMessage: 'Name' + })} + + + {intl.formatMessage({ + id: 'common.metadata', + defaultMessage: 'Metadata' + })} + + + {intl.formatMessage({ + id: 'common.actions', + defaultMessage: 'Actions' + })} + - ))} - -
- - )} + + + {table.getRowModel().rows.map((product) => ( + + {product.original.id} + {product.original.name} + + {intl.formatMessage( + { + id: 'common.table.metadata', + defaultMessage: + '{number, plural, =0 {-} one {# record} other {# records}}' + }, + { + number: Object.entries( + product.original.metadata || [] + ).length + } + )} + + + + + + + + handleEdit(product.original)} + > + {intl.formatMessage({ + id: `common.edit`, + defaultMessage: 'Edit' + })} + + + + handleDialogOpen(product.original.id) + } + > + {intl.formatMessage({ + id: `common.delete`, + defaultMessage: 'Delete' + })} + + + + + + ))} + + + + )} + + + + {intl.formatMessage( + { + id: 'ledgers.products.showing', + defaultMessage: + 'Showing {count} {number, plural, =0 {products} one {product} other {products}}.' + }, + { + number: data?.items?.length, + count: {data?.items?.length} + } + )} + + + ) } diff --git a/src/app/(routes)/ledgers/ledgers-data-table.tsx b/src/app/(routes)/ledgers/ledgers-data-table.tsx index 5a5581cc..4ab27b3a 100644 --- a/src/app/(routes)/ledgers/ledgers-data-table.tsx +++ b/src/app/(routes)/ledgers/ledgers-data-table.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { IntlShape, useIntl } from 'react-intl' +import { useIntl } from 'react-intl' import { Table, TableBody, @@ -35,6 +35,7 @@ import Link from 'next/link' import { LedgerEntity } from '@/core/domain/entities/ledger-entity' import { LedgersSheet } from './ledgers-sheet' import { AssetsSheet } from './[id]/assets/assets-sheet' +import { EntityDataTable } from '@/components/entity-data-table' type LedgersTableProps = { ledgers: { items: LedgerEntity[] } @@ -218,7 +219,7 @@ export const LedgersDataTable: React.FC = ({ } return ( -

+ {isNil(ledgers?.items) || ledgers.items.length === 0 ? ( = ({ )} + + + {intl.formatMessage( + { + id: 'ledgers.showing', + defaultMessage: + 'Showing {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.' + }, + { + number: ledgers?.items?.length, + count: {ledgers?.items?.length} + } + )} + + + -
+ ) } From a898699d652b3869ec4927117756cfda92dd0265 Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Mon, 2 Dec 2024 13:56:39 -0300 Subject: [PATCH 6/8] :sparkles: feat: Added translation keys --- locales/extracted/en.json | 5 +++-- locales/extracted/pt.json | 7 ++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/locales/extracted/en.json b/locales/extracted/en.json index ad1f9360..9b11afc7 100644 --- a/locales/extracted/en.json +++ b/locales/extracted/en.json @@ -39,10 +39,8 @@ "common.logoAlt": "Your organization logo", "common.metadata": "Metadata", "common.name": "Name", - "common.nextPage": "Next page", "common.noOptions": "No options found.", "common.portfolio": "Portfolio", - "common.previousPage": "Previous page", "common.remove": "Remove", "common.requiredFields": "(*) required fields.", "common.resources": "Resources", @@ -169,6 +167,7 @@ "ledgers.assets.sheet.edit.title": "Edit {assetName}", "ledgers.assets.sheet.tabs.details": "Assets Details", "ledgers.assets.sheet.title": "New Asset", + "ledgers.assets.showing": "Showing {count} {number, plural, =0 {assets} one {asset} other {assets}}.", "ledgers.assets.subtitle": "Currency or assets of any nature traded on this Ledger.", "ledgers.assets.title": "Assets", "ledgers.columnsTable.tooltipCopyText": "Click to copy", @@ -197,10 +196,12 @@ "ledgers.products.sheet.edit.title": "Edit {productName}", "ledgers.products.sheet.tabs.details": "Product Details", "ledgers.products.sheet.title": "New Product", + "ledgers.products.showing": "Showing {count} {number, plural, =0 {products} one {product} other {products}}.", "ledgers.products.subtitle": "Clustering or allocation of customers at different levels.", "ledgers.products.title": "Products", "ledgers.sheetCreate.description": "Fill in the data of the Ledger you wish to create.", "ledgers.sheetCreate.title": "New Ledger", + "ledgers.showing": "Showing {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.", "ledgers.subtitle": "Visualize and edit the Ledgers of your Organization.", "ledgers.tab.assets": "Assets", "ledgers.tab.overview": "Overview", diff --git a/locales/extracted/pt.json b/locales/extracted/pt.json index ff403cbb..37e8214c 100644 --- a/locales/extracted/pt.json +++ b/locales/extracted/pt.json @@ -41,8 +41,6 @@ "common.copyMessage": "Copiado para a área de transferência!", "common.expand": "Ampliar", "common.inactive": "Inativo", - "common.nextPage": "Próxima Página", - "common.previousPage": "Página Anterior", "common.tooltipCopyText": "Toque para copiar", "entity.metadata.key": "Chave", "entity.metadata.value": "Valor", @@ -279,5 +277,8 @@ "ledgers.assets.sheet.tabs.details": "Detalhes do Ativo", "ledgers.portfolio.sheet.tabs.details": "Detalhes do Portfólio", "ledgers.products.sheet.tabs.details": "Detalhes do Produto", - "notFound.backToHome": "Voltar para Home" + "notFound.backToHome": "Voltar para Home", + "ledgers.assets.showing": "Mostrando {count} {number, plural, =0 {ativos} one {ativo} other {ativos}}.", + "ledgers.products.showing": "Mostrando {count} {number, plural, =0 {produtos} one {produto} other {produtos}}.", + "ledgers.showing": "Mostrando {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}." } From 3119951fcda3556858f22abb08dbc274f1dcf94c Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Wed, 4 Dec 2024 15:39:58 -0300 Subject: [PATCH 7/8] :boom: fix: Fixed conflicts --- locales/extracted/en.json | 2 + locales/extracted/pt.json | 6 +- .../[id]/accounts/accounts-tab-content.tsx | 37 +- .../portfolios/portfolios-tab-content.tsx | 337 ++++++++++-------- 4 files changed, 213 insertions(+), 169 deletions(-) diff --git a/locales/extracted/en.json b/locales/extracted/en.json index 0e52d0ff..25a7de42 100644 --- a/locales/extracted/en.json +++ b/locales/extracted/en.json @@ -157,6 +157,7 @@ "ledgers.account.sheet.edit.title": "Edit {accountName}", "ledgers.account.sheet.tabs.details": "Account Details", "ledgers.accounts.createFirst": "Create first account", + "ledgers.accounts.showing": "Showing {count} {number, plural, =0 {accounts} one {account} other {accounts}}.", "ledgers.accounts.subtitle": "{count} {count, plural, =0 {accounts found} one {account found} other {accounts found}}", "ledgers.accounts.title": "Accounts", "ledgers.assets.createButton": "Create your first Asset", @@ -191,6 +192,7 @@ "ledgers.portfolio.sheet.title": "New Portfolio", "ledgers.portfolio.subtitle": "{count} {count, plural, =0 {portfolios found} one {portfolio found} other {portfolios found}}", "ledgers.portfolio.title": "Portfolios", + "ledgers.portfolios.showing": "Showing {count} {number, plural, =0 {portfolios} one {portifolio} other {portfolios}}.", "ledgers.products.emptyResource": "You haven't created any Products yet", "ledgers.products.sheet.description": "Fill in the details of the Product you want to create.", "ledgers.products.sheet.edit.description": "View and edit product fields.", diff --git a/locales/extracted/pt.json b/locales/extracted/pt.json index a6167d1d..bf5d193b 100644 --- a/locales/extracted/pt.json +++ b/locales/extracted/pt.json @@ -284,5 +284,7 @@ "notFound.backToHome": "Voltar para Home", "ledgers.assets.showing": "Mostrando {count} {number, plural, =0 {ativos} one {ativo} other {ativos}}.", "ledgers.products.showing": "Mostrando {count} {number, plural, =0 {produtos} one {produto} other {produtos}}.", - "ledgers.showing": "Mostrando {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}." -} \ No newline at end of file + "ledgers.showing": "Mostrando {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.", + "ledgers.accounts.showing": "Mostrando {count} {number, plural, =0 {contas} one {conta} other {contas}}.", + "ledgers.portfolios.showing": "Mostrando {count} {number, plural, =0 {portfólios} one {portfólio} other {portfólios}}." +} diff --git a/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx b/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx index 533e6c52..f3ac0054 100644 --- a/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx +++ b/src/app/(routes)/ledgers/[id]/accounts/accounts-tab-content.tsx @@ -224,16 +224,33 @@ export const AccountsTabContent = () => { - {accountsList && ( - - )} + + {accountsList && ( + + )} + + + {intl.formatMessage( + { + id: 'ledgers.accounts.showing', + defaultMessage: + 'Showing {count} {number, plural, =0 {accounts} one {account} other {accounts}}.' + }, + { + number: accountsList?.length, + count: {accountsList?.length} + } + )} + + + ) } diff --git a/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx b/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx index 985f47ec..38ea91a8 100644 --- a/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx +++ b/src/app/(routes)/ledgers/[id]/portfolios/portfolios-tab-content.tsx @@ -46,6 +46,7 @@ import { } from '@/components/ui/tooltip' import useCustomToast from '@/hooks/use-custom-toast' import { Arrow } from '@radix-ui/react-tooltip' +import { EntityDataTable } from '@/components/entity-data-table' export const PortfoliosTabContent = () => { const intl = useIntl() @@ -164,172 +165,194 @@ export const PortfoliosTabContent = () => { - {!isNil(portfoliosData?.items) && portfoliosData?.items.length > 0 && ( - - - - - - {intl.formatMessage({ - id: 'common.id', - defaultMessage: 'ID' - })} - - - {intl.formatMessage({ - id: 'common.name', - defaultMessage: 'Name' - })} - - - {intl.formatMessage({ - id: 'common.metadata', - defaultMessage: 'Metadata' - })} - - - {intl.formatMessage({ - id: 'common.accounts', - defaultMessage: 'Accounts' - })} - - - {intl.formatMessage({ - id: 'common.actions', - defaultMessage: 'Actions' - })} - - - - - {table.getRowModel().rows.map((portfolio) => { - const metadataCount = Object.entries( - portfolio.original.metadata || [] - ).length - const displayId = - portfolio.original.id && portfolio.original.id.length > 8 - ? `${truncateString(portfolio.original.id, 8)}` - : portfolio.original.id + + {!isNil(portfoliosData?.items) && portfoliosData?.items.length > 0 && ( + +
+ + + + {intl.formatMessage({ + id: 'common.id', + defaultMessage: 'ID' + })} + + + {intl.formatMessage({ + id: 'common.name', + defaultMessage: 'Name' + })} + + + {intl.formatMessage({ + id: 'common.metadata', + defaultMessage: 'Metadata' + })} + + + {intl.formatMessage({ + id: 'common.accounts', + defaultMessage: 'Accounts' + })} + + + {intl.formatMessage({ + id: 'common.actions', + defaultMessage: 'Actions' + })} + + + + + {table.getRowModel().rows.map((portfolio) => { + const metadataCount = Object.entries( + portfolio.original.metadata || [] + ).length + const displayId = + portfolio.original.id && portfolio.original.id.length > 8 + ? `${truncateString(portfolio.original.id, 8)}` + : portfolio.original.id - return ( - - - - - - handleCopyToClipboard( - portfolio.original.id, - intl.formatMessage({ - id: 'ledgers.toast.copyId', - defaultMessage: - 'The id has been copied to your clipboard.' - }) - ) + return ( + + + + + + handleCopyToClipboard( + portfolio.original.id, + intl.formatMessage({ + id: 'ledgers.toast.copyId', + defaultMessage: + 'The id has been copied to your clipboard.' + }) + ) + } + > +

+ {displayId} +

+ + +

+ {portfolio.original.id} +

+

+ {intl.formatMessage({ + id: 'ledgers.columnsTable.tooltipCopyText', + defaultMessage: 'Click to copy' + })} +

+ + + + + + {portfolio.original.name} + + {metadataCount === 0 ? ( + + ) : ( + intl.formatMessage( + { + id: 'common.table.metadata', + defaultMessage: + '{number, plural, =0 {-} one {# record} other {# records}}' + }, + { + number: metadataCount } - > -

- {displayId} -

- - -

- {portfolio.original.id} -

-

- {intl.formatMessage({ - id: 'ledgers.columnsTable.tooltipCopyText', - defaultMessage: 'Click to copy' - })} -

- - - - - - {portfolio.original.name} - - {metadataCount === 0 ? ( - - ) : ( - intl.formatMessage( + ) + )} + + + {intl.formatMessage( { - id: 'common.table.metadata', + id: 'common.table.accounts', defaultMessage: - '{number, plural, =0 {-} one {# record} other {# records}}' + '{number, plural, =0 {No accounts} one {# account} other {# accounts}}' }, { - number: metadataCount + number: portfolio.original.accounts?.length || 0 } - ) - )} - - - {intl.formatMessage( - { - id: 'common.table.accounts', - defaultMessage: - '{number, plural, =0 {No accounts} one {# account} other {# accounts}}' - }, - { - number: portfolio.original.accounts?.length || 0 - } - )} - + )} + - - - - - - - - handleEdit({ - ...portfolio.original, - entityId: portfolio.original.id, - status: { - ...portfolio.original.status, - description: - portfolio.original.status.description ?? '' - } - } as PortfolioResponseDto) - } - > - {intl.formatMessage({ - id: `common.edit`, - defaultMessage: 'Edit' - })} - - - { - handleDialogOpen(portfolio?.original?.id!) - }} - > - {intl.formatMessage({ - id: `common.delete`, - defaultMessage: 'Delete' - })} - - - - - + + + + + + + + handleEdit({ + ...portfolio.original, + entityId: portfolio.original.id, + status: { + ...portfolio.original.status, + description: + portfolio.original.status.description ?? + '' + } + } as PortfolioResponseDto) + } + > + {intl.formatMessage({ + id: `common.edit`, + defaultMessage: 'Edit' + })} + + + { + handleDialogOpen(portfolio?.original?.id!) + }} + > + {intl.formatMessage({ + id: `common.delete`, + defaultMessage: 'Delete' + })} + + + + + + ) + })} + +
+ + )} + + + {intl.formatMessage( + { + id: 'ledgers.portfolios.showing', + defaultMessage: + 'Showing {count} {number, plural, =0 {portfolios} one {portifolio} other {portfolios}}.' + }, + { + number: portfoliosData?.items?.length, + count: ( + + {portfoliosData?.items?.length} + ) - })} - - - - )} + } + )} + + + ) } From a053c26c1713188b832f0406b259283bddbd7f9d Mon Sep 17 00:00:00 2001 From: Caio Alexandre Troti Caetano Date: Wed, 4 Dec 2024 15:54:11 -0300 Subject: [PATCH 8/8] :sparkles: feat: Added to Organizations --- locales/extracted/en.json | 1 + locales/extracted/pt.json | 3 +- .../settings/organizations-tab-content.tsx | 224 ++++++++++-------- 3 files changed, 124 insertions(+), 104 deletions(-) diff --git a/locales/extracted/en.json b/locales/extracted/en.json index 25a7de42..7fb3fa5f 100644 --- a/locales/extracted/en.json +++ b/locales/extracted/en.json @@ -247,6 +247,7 @@ "organizations.organizationView.breadcrumbs.settings": "Settings", "organizations.organizationView.newOrganization.title": "New Organization", "organizations.organizationView.notFound": "Organization not found.", + "organizations.showing": "Showing {count} {number, plural, =0 {organizations} one {organization} other {organizations}}.", "organizations.subtitle": "View and manage Organizations.", "organizations.title": "Settings", "organizations.toast.create.success": "Organization created!", diff --git a/locales/extracted/pt.json b/locales/extracted/pt.json index bf5d193b..b510a1de 100644 --- a/locales/extracted/pt.json +++ b/locales/extracted/pt.json @@ -286,5 +286,6 @@ "ledgers.products.showing": "Mostrando {count} {number, plural, =0 {produtos} one {produto} other {produtos}}.", "ledgers.showing": "Mostrando {count} {number, plural, =0 {ledgers} one {ledger} other {ledgers}}.", "ledgers.accounts.showing": "Mostrando {count} {number, plural, =0 {contas} one {conta} other {contas}}.", - "ledgers.portfolios.showing": "Mostrando {count} {number, plural, =0 {portfólios} one {portfólio} other {portfólios}}." + "ledgers.portfolios.showing": "Mostrando {count} {number, plural, =0 {portfólios} one {portfólio} other {portfólios}}.", + "organizations.showing": "Mostrando {count} {number, plural, =0 {organizações} one {organização} other {organizações}}." } diff --git a/src/app/(routes)/settings/organizations-tab-content.tsx b/src/app/(routes)/settings/organizations-tab-content.tsx index b772575b..a2d94ab9 100644 --- a/src/app/(routes)/settings/organizations-tab-content.tsx +++ b/src/app/(routes)/settings/organizations-tab-content.tsx @@ -31,6 +31,7 @@ import { useConfirmDialog } from '@/components/confirmation-dialog/use-confirm-d import ConfirmationDialog from '@/components/confirmation-dialog' import { Badge } from '@/components/ui/badge' import { OrganizationEntity } from '@/core/domain/entities/organization-entity' +import { EntityDataTable } from '@/components/entity-data-table' export const OrganizationsTabContent = () => { const intl = useIntl() @@ -115,110 +116,127 @@ export const OrganizationsTabContent = () => { )} - - {data?.items && data.items.length > 0 && ( - - - - - - {intl.formatMessage({ - id: 'common.id', - defaultMessage: 'ID' - })} - - - {intl.formatMessage({ - id: `entity.organization.legalName`, - defaultMessage: 'Legal Name' - })} - - - {intl.formatMessage({ - id: `entity.organization.doingBusinessAs`, - defaultMessage: 'Trade Name' - })} - - - {intl.formatMessage({ - id: `entity.organization.legalDocument`, - defaultMessage: 'Document' - })} - - - {intl.formatMessage({ - id: `entity.organization.status`, - defaultMessage: 'Status' - })} - - - {intl.formatMessage({ - id: 'common.actions', - defaultMessage: 'Actions' - })} - - - - - {data.items.map((organization) => ( - - {organization.id} - {organization.legalName} - {organization.doingBusinessAs} - {organization.legalDocument} - - - {organization.status.code === 'ACTIVE' - ? intl.formatMessage({ - id: 'common.active', - defaultMessage: 'Active' - }) - : intl.formatMessage({ - id: 'common.inactive', - defaultMessage: 'Inactive' - })} - - - - - - - - - handleEdit(organization)} - > - {intl.formatMessage({ - id: `common.edit`, - defaultMessage: 'Edit' - })} - - - handleDialogOpen(organization.id!)} - > - {intl.formatMessage({ - id: `common.delete`, - defaultMessage: 'Delete' - })} - - - - + + {data?.items && data.items.length > 0 && ( + +
+ + + + {intl.formatMessage({ + id: 'common.id', + defaultMessage: 'ID' + })} + + + {intl.formatMessage({ + id: `entity.organization.legalName`, + defaultMessage: 'Legal Name' + })} + + + {intl.formatMessage({ + id: `entity.organization.doingBusinessAs`, + defaultMessage: 'Trade Name' + })} + + + {intl.formatMessage({ + id: `entity.organization.legalDocument`, + defaultMessage: 'Document' + })} + + + {intl.formatMessage({ + id: `entity.organization.status`, + defaultMessage: 'Status' + })} + + + {intl.formatMessage({ + id: 'common.actions', + defaultMessage: 'Actions' + })} + - ))} - -
- - )} + + + {data.items.map((organization) => ( + + {organization.id} + {organization.legalName} + {organization.doingBusinessAs} + {organization.legalDocument} + + + {organization.status.code === 'ACTIVE' + ? intl.formatMessage({ + id: 'common.active', + defaultMessage: 'Active' + }) + : intl.formatMessage({ + id: 'common.inactive', + defaultMessage: 'Inactive' + })} + + + + + + + + + handleEdit(organization)} + > + {intl.formatMessage({ + id: `common.edit`, + defaultMessage: 'Edit' + })} + + + handleDialogOpen(organization.id!)} + > + {intl.formatMessage({ + id: `common.delete`, + defaultMessage: 'Delete' + })} + + + + + + ))} + + + + )} + + + + {intl.formatMessage( + { + id: 'organizations.showing', + defaultMessage: + 'Showing {count} {number, plural, =0 {organizations} one {organization} other {organizations}}.' + }, + { + number: data?.items?.length, + count: {data?.items?.length} + } + )} + + +
) }