From 391b429fce39940272e41976758fa48a3d121c89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Mon, 10 Jul 2023 11:28:25 +0200 Subject: [PATCH] Introduce new column picker in Order Draft list (#3869) --- .changeset/moody-queens-end.md | 5 ++ src/config.ts | 1 + .../OrderDraftListDatagrid.tsx | 82 +++++++++---------- .../OrderDraftListDatagrid/datagrid.test.ts | 11 +-- .../OrderDraftListDatagrid/datagrid.ts | 72 ++++++++-------- src/orders/types.ts | 6 ++ 6 files changed, 93 insertions(+), 84 deletions(-) create mode 100644 .changeset/moody-queens-end.md diff --git a/.changeset/moody-queens-end.md b/.changeset/moody-queens-end.md new file mode 100644 index 000000000..bc082a701 --- /dev/null +++ b/.changeset/moody-queens-end.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": minor +--- + +Introduce new column picker in Order Draft list datagrid diff --git a/src/config.ts b/src/config.ts index 48e290263..97073b6a3 100644 --- a/src/config.ts +++ b/src/config.ts @@ -81,6 +81,7 @@ export const defaultListSettings: AppListViewSettings = { }, [ListViews.DRAFT_LIST]: { rowNumber: PAGINATE_BY, + columns: ["number", "date", "customer", "total"], }, [ListViews.NAVIGATION_LIST]: { rowNumber: PAGINATE_BY, diff --git a/src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx b/src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx index 5e15ba6bc..96c50cb00 100644 --- a/src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx +++ b/src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx @@ -1,32 +1,34 @@ -// @ts-strict-ignore -import ColumnPicker from "@dashboard/components/ColumnPicker/ColumnPicker"; +import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker"; +import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns"; import Datagrid from "@dashboard/components/Datagrid/Datagrid"; -import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault"; import { DatagridChangeStateContext, useDatagridChangeState, } from "@dashboard/components/Datagrid/hooks/useDatagridChange"; import { TablePaginationWithContext } from "@dashboard/components/TablePagination"; -import { OrderDraftListQuery } from "@dashboard/graphql"; import useLocale from "@dashboard/hooks/useLocale"; +import { OrderDraft } from "@dashboard/orders/types"; import { OrderDraftListUrlSortField, orderUrl } from "@dashboard/orders/urls"; -import { ListProps, RelayToFlat, SortPage } from "@dashboard/types"; +import { ListProps, SortPage } from "@dashboard/types"; import { Item } from "@glideapps/glide-data-grid"; import { Box } from "@saleor/macaw-ui/next"; import React, { useCallback, useMemo } from "react"; import { useIntl } from "react-intl"; -import { createGetCellContent, getColumns } from "./datagrid"; +import { + createGetCellContent, + orderDraftListStaticColumnsAdapter, +} from "./datagrid"; import { messages } from "./messages"; import { canBeSorted } from "./utils"; interface OrderDraftListDatagridProps extends ListProps, SortPage { - orders: RelayToFlat; + orders: OrderDraft[]; hasRowHover?: boolean; onRowClick?: (id: string) => void; - onSelectOrderDraftIds; + onSelectOrderDraftIds: (ids: number[], clearSelection: () => void) => void; } export const OrderDraftListDatagrid = ({ @@ -44,33 +46,40 @@ export const OrderDraftListDatagrid = ({ const { locale } = useLocale(); const datagridState = useDatagridChangeState(); - const availableColumns = useMemo(() => getColumns(intl, sort), [intl, sort]); + const handleColumnChange = useCallback( + picked => { + if (onUpdateListSettings) { + onUpdateListSettings("columns", picked.filter(Boolean)); + } + }, + [onUpdateListSettings], + ); - const { - columns, - availableColumnsChoices, - columnChoices, - defaultColumns, - onColumnMoved, - onColumnResize, - onColumnsChange, - picker, - } = useColumnsDefault(availableColumns); + const memoizedStaticColumns = useMemo( + () => orderDraftListStaticColumnsAdapter(intl, sort), + [intl, sort], + ); + + const { handlers, staticColumns, visibleColumns, selectedColumns } = + useColumns({ + staticColumns: memoizedStaticColumns, + selectedColumns: settings?.columns ?? [], + onSave: handleColumnChange, + }); - // eslint-disable-next-line react-hooks/exhaustive-deps const getCellContent = useCallback( - createGetCellContent({ orders, columns, locale }), - [columns, locale, orders], + createGetCellContent({ orders, columns: visibleColumns, locale }), + [visibleColumns, locale, orders], ); const handleHeaderClick = useCallback( (col: number) => { - const columnName = columns[col].id as OrderDraftListUrlSortField; + const columnName = visibleColumns[col].id as OrderDraftListUrlSortField; if (canBeSorted(columnName)) { onSort(columnName); } }, - [columns, onSort], + [visibleColumns, onSort], ); const handleRowClick = useCallback( @@ -102,7 +111,7 @@ export const OrderDraftListDatagrid = ({ freezeColumns={1} hasRowHover={hasRowHover} loading={disabled} - availableColumns={columns} + availableColumns={visibleColumns} verticalBorder={col => col > 0} getCellContent={getCellContent} getCellError={() => false} @@ -111,27 +120,16 @@ export const OrderDraftListDatagrid = ({ rows={orders?.length ?? 0} selectionActions={() => null} onRowSelectionChange={onSelectOrderDraftIds} - onColumnMoved={onColumnMoved} - onColumnResize={onColumnResize} + onColumnResize={handlers.onResize} + onColumnMoved={handlers.onMove} onHeaderClicked={handleHeaderClick} onRowClick={handleRowClick} rowAnchor={handleRowAnchor} - renderColumnPicker={defaultProps => ( + renderColumnPicker={() => ( undefined} - onQueryChange={picker.setQuery} - query={picker.query} + staticColumns={staticColumns} + selectedColumns={selectedColumns} + onSave={handlers.onChange} /> )} /> diff --git a/src/orders/components/OrderDraftListDatagrid/datagrid.test.ts b/src/orders/components/OrderDraftListDatagrid/datagrid.test.ts index 730d342ac..30af3240f 100644 --- a/src/orders/components/OrderDraftListDatagrid/datagrid.test.ts +++ b/src/orders/components/OrderDraftListDatagrid/datagrid.test.ts @@ -1,5 +1,4 @@ -import { OrderDraftListQuery } from "@dashboard/graphql"; -import { RelayToFlat } from "@dashboard/types"; +import { OrderDraft } from "@dashboard/orders/types"; import { getCustomerName } from "./datagrid"; @@ -11,7 +10,7 @@ describe("getCustomerName", () => { firstName: "John", lastName: "Doe", }, - } as RelayToFlat>[number]; + } as OrderDraft; // Act const result = getCustomerName(data); @@ -27,7 +26,7 @@ describe("getCustomerName", () => { city: "New York", }, userEmail: "john@doe.com", - } as RelayToFlat>[number]; + } as OrderDraft; // Act const result = getCustomerName(data); @@ -38,9 +37,7 @@ describe("getCustomerName", () => { it("should return - when no user email and billing address", () => { // Arrange - const data = {} as RelayToFlat< - NonNullable - >[number]; + const data = {} as OrderDraft; // Act const result = getCustomerName(data); diff --git a/src/orders/components/OrderDraftListDatagrid/datagrid.ts b/src/orders/components/OrderDraftListDatagrid/datagrid.ts index 84b283966..e63ee29fb 100644 --- a/src/orders/components/OrderDraftListDatagrid/datagrid.ts +++ b/src/orders/components/OrderDraftListDatagrid/datagrid.ts @@ -1,12 +1,11 @@ -// @ts-strict-ignore import { moneyCell, readonlyTextCell, } from "@dashboard/components/Datagrid/customCells/cells"; import { AvailableColumn } from "@dashboard/components/Datagrid/types"; import { Locale } from "@dashboard/components/Locale"; -import { OrderDraftListQuery } from "@dashboard/graphql"; -import { RelayToFlat, Sort } from "@dashboard/types"; +import { OrderDraft } from "@dashboard/orders/types"; +import { Sort } from "@dashboard/types"; import { getColumnSortDirectionIcon } from "@dashboard/utils/columns/getColumnSortDirectionIcon"; import { GridCell, Item } from "@glideapps/glide-data-grid"; import moment from "moment"; @@ -14,32 +13,35 @@ import { IntlShape } from "react-intl"; import { columnsMessages } from "./messages"; -export const getColumns = (intl: IntlShape, sort: Sort): AvailableColumn[] => [ - { - id: "number", - title: intl.formatMessage(columnsMessages.number), - width: 100, - icon: getColumnSortDirectionIcon(sort, "number"), - }, - { - id: "date", - title: intl.formatMessage(columnsMessages.date), - width: 200, - icon: getColumnSortDirectionIcon(sort, "date"), - }, - { - id: "customer", - title: intl.formatMessage(columnsMessages.customer), - width: 200, - icon: getColumnSortDirectionIcon(sort, "customer"), - }, - { - id: "total", - title: intl.formatMessage(columnsMessages.total), - width: 200, - icon: getColumnSortDirectionIcon(sort, "total"), - }, -]; +export const orderDraftListStaticColumnsAdapter = ( + intl: IntlShape, + sort: Sort, +): AvailableColumn[] => + [ + { + id: "number", + title: intl.formatMessage(columnsMessages.number), + width: 100, + }, + { + id: "date", + title: intl.formatMessage(columnsMessages.date), + width: 200, + }, + { + id: "customer", + title: intl.formatMessage(columnsMessages.customer), + width: 200, + }, + { + id: "total", + title: intl.formatMessage(columnsMessages.total), + width: 200, + }, + ].map(column => ({ + ...column, + icon: getColumnSortDirectionIcon(sort, column.id), + })); export const createGetCellContent = ({ @@ -47,15 +49,15 @@ export const createGetCellContent = locale, columns, }: { - orders: RelayToFlat; + orders: OrderDraft[]; columns: AvailableColumn[]; locale: Locale; }) => ([column, row]: Item): GridCell => { - const rowData = orders[row]; + const rowData: OrderDraft | undefined = orders[row]; const columnId = columns[column]?.id; - if (!columnId) { + if (!columnId || !rowData) { return readonlyTextCell(""); } @@ -76,12 +78,12 @@ export const createGetCellContent = readonly: true, }, ); + default: + return readonlyTextCell(""); } }; -export function getCustomerName( - rowData: RelayToFlat[number], -) { +export function getCustomerName(rowData: OrderDraft) { if (rowData?.billingAddress?.firstName && rowData?.billingAddress?.lastName) { return `${rowData.billingAddress.firstName} ${rowData.billingAddress.lastName}`; } diff --git a/src/orders/types.ts b/src/orders/types.ts index 2c9ed0e44..52dfabf19 100644 --- a/src/orders/types.ts +++ b/src/orders/types.ts @@ -1,10 +1,12 @@ import { MarkAsPaidStrategyEnum, OrderDetailsFragment, + OrderDraftListQuery, OrderRefundDataQuery, TransactionEventFragment, TransactionItemFragment, } from "@dashboard/graphql"; +import { RelayToFlat } from "@dashboard/types"; /** Check if order has transactions & feature flag enabled */ export const orderHasTransactions = (order: OrderDetailsFragment): boolean => @@ -38,6 +40,10 @@ export type OrderRefundSharedType = Pick< keyof OrderRefundData >; +export type OrderDraft = RelayToFlat< + NonNullable +>[number]; + /** Type of the trasaction event (e.g. CHARGE_SUCCESS -> CHARGE) */ export type TransactionEventType = | "REFUND"