From 8592c6a4dcd13a2a9a184ec4bbd1d5696b6535d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Tue, 25 Jul 2023 15:13:57 +0200 Subject: [PATCH] Add order details new column picker (#3934) Co-authored-by: Renata Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com> Co-authored-by: wojteknowacki --- .changeset/gold-crews-cry.md | 5 + cypress/e2e/orders/draftOrders.js | 86 +++++++-- cypress/e2e/orders/orders.js | 43 +++++ cypress/elements/shared/sharedElements.js | 8 + .../sharedElementsOperations/selects.js | 3 + .../Datagrid/ColumnPicker/ColumnPicker.tsx | 2 +- src/components/Datagrid/Datagrid.tsx | 5 + src/config.ts | 18 ++ .../OrderDetailsDatagrid.tsx | 89 +++++---- .../OrderDetailsDatagrid/datagrid.ts | 175 ++++++++---------- .../OrderDraftDetailsDatagrid.tsx | 81 ++++---- .../OrderDraftDetailsDatagrid/datagrid.ts | 97 +++++----- .../OrderDraftDetailsDatagrid/messages.ts | 4 + src/types.ts | 2 + 14 files changed, 386 insertions(+), 232 deletions(-) create mode 100644 .changeset/gold-crews-cry.md diff --git a/.changeset/gold-crews-cry.md b/.changeset/gold-crews-cry.md new file mode 100644 index 000000000..e69acfae4 --- /dev/null +++ b/.changeset/gold-crews-cry.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": minor +--- + +Introduce new column picker on order details datagrids diff --git a/cypress/e2e/orders/draftOrders.js b/cypress/e2e/orders/draftOrders.js index d5cc28b6b..c6c002e5e 100644 --- a/cypress/e2e/orders/draftOrders.js +++ b/cypress/e2e/orders/draftOrders.js @@ -13,7 +13,11 @@ import { createCustomer, updateOrdersSettings, } from "../../support/api/requests/"; -import { createShipping, getDefaultChannel } from "../../support/api/utils/"; +import { + createShipping, + createUnconfirmedOrder, + getDefaultChannel, +} from "../../support/api/utils/"; import * as productsUtils from "../../support/api/utils/products/productsUtils"; import { ensureCanvasStatic } from "../../support/customCommands/sharedElementsOperations/canvas"; import { @@ -24,10 +28,12 @@ import { describe("Draft orders", () => { const startsWith = "CyDraftOrders-"; const randomName = startsWith + faker.datatype.number(); - + let customer; let defaultChannel; let warehouse; let address; + let variantsList; + let shippingMethod; before(() => { cy.clearSessionData().loginUserViaRequest(); @@ -46,19 +52,25 @@ describe("Draft orders", () => { randomName, addresses.plAddress, true, - ); + ).then(customerResp => { + customer = customerResp.user; + }); createShipping({ channelId: defaultChannel.id, name: randomName, address: addresses.plAddress, }); }) - .then(({ warehouse: warehouseResp }) => { - warehouse = warehouseResp; - productsUtils.createTypeAttributeAndCategoryForProduct({ - name: randomName, - }); - }) + .then( + ({ warehouse: warehouseResp, shippingMethod: shippingMethodResp }) => { + warehouse = warehouseResp; + shippingMethod = shippingMethodResp; + + productsUtils.createTypeAttributeAndCategoryForProduct({ + name: randomName, + }); + }, + ) .then( ({ productType: productTypeResp, @@ -74,8 +86,11 @@ describe("Draft orders", () => { categoryId: categoryResp.id, }); }, - cy.checkIfDataAreNotNull({ defaultChannel, warehouse, address }), - ); + ) + .then(({ variantsList: variantsResp, product }) => { + variantsList = variantsResp; + cy.checkIfDataAreNotNull({ defaultChannel, warehouse, address }); + }); }); beforeEach(() => { @@ -115,4 +130,53 @@ describe("Draft orders", () => { }); }, ); + + it( + "should be able to turn of all but one static columns on draft orders detail. TC: SALEOR_2135", + { tags: ["@orders", "@allEnv", "@stable"] }, + () => { + let order; + createUnconfirmedOrder({ + customerId: customer.id, + channelId: defaultChannel.id, + shippingMethod, + variantsList, + address, + warehouse: warehouse.id, + }).then(({ order: orderResp }) => { + order = orderResp; + cy.visit(urlList.orders + `${order.id}`); + cy.openColumnPicker(); + cy.get(SHARED_ELEMENTS.staticColumnContainer) + .should("contain.text", "Product") + .should("contain.text", "SKU") + .should("contain.text", "Variant") + .should("contain.text", "Quantity") + .should("contain.text", "Price") + .should("contain.text", "Total") + .should("contain.text", "Status"); + // switching off all but one static columns + cy.get(SHARED_ELEMENTS.gridStaticSkuButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticVariantNameButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticQuantityButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticPriceButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticTotalButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticStatusButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticProductButton).should( + "have.attr", + "data-state", + "on", + ); + cy.get(SHARED_ELEMENTS.dataGridTable) + .find("th") + // on draft first th is empty so length need to be 2 + .should("have.length", 2) + .last() + .should("have.text", "Product"); + //next line hides picker + cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true }); + cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist"); + }); + }, + ); }); diff --git a/cypress/e2e/orders/orders.js b/cypress/e2e/orders/orders.js index 60234a690..86d920e40 100644 --- a/cypress/e2e/orders/orders.js +++ b/cypress/e2e/orders/orders.js @@ -574,4 +574,47 @@ describe("Orders", () => { }); }, ); + it( + "should be able to turn off all but one static columns on orders detail. TC: SALEOR_2136", + { tags: ["@orders", "@allEnv", "@stable"] }, + () => { + let order; + createReadyToFulfillOrder({ + customerId: customer.id, + channelId: defaultChannel.id, + shippingMethod, + variantsList, + address, + }).then(({ order: orderResp }) => { + order = orderResp; + cy.visit(urlList.orders + `${order.id}`); + cy.openColumnPicker(); + cy.get(SHARED_ELEMENTS.staticColumnContainer) + .should("contain.text", "Product") + .should("contain.text", "SKU") + .should("contain.text", "Variant") + .should("contain.text", "Quantity") + .should("contain.text", "Price") + .should("contain.text", "Total"); + // switching off all but one static columns + cy.get(SHARED_ELEMENTS.gridStaticSkuButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticVariantNameButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticQuantityButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticPriceButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticTotalButton).click(); + cy.get(SHARED_ELEMENTS.gridStaticProductButton).should( + "have.attr", + "data-state", + "on", + ); + cy.get(SHARED_ELEMENTS.dataGridTable) + .find("th") + .should("have.length", 1) + .should("have.text", "Product"); + //next line hides picker + cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true }); + cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist"); + }); + }, + ); }); diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js index b5ebf6799..211181099 100644 --- a/cypress/elements/shared/sharedElements.js +++ b/cypress/elements/shared/sharedElements.js @@ -16,11 +16,19 @@ export const SHARED_ELEMENTS = { activeStaticColumnOnGridButton: '[data-state="on"]', dynamicColumnSelector: '[data-test-id="dynamic-column"]', dynamicColumnNameSelector: '[data-test-id^="dynamic-column-name"]', + gridStaticSkuButton: '[data-test-id="stat-col-sku"]', + gridStaticVariantNameButton: '[data-test-id="stat-col-variantName"]', + gridStaticQuantityButton: '[data-test-id="stat-col-quantity"]', + gridStaticPriceButton: '[data-test-id="stat-col-price"]', + gridStaticStatusButton: '[data-test-id="stat-col-status"]', + gridStaticTotalButton: '[data-test-id="stat-col-total"]', + gridStaticProductButton: '[data-test-id="stat-col-product"]', dynamicColumnSearchInput: '[data-test-id="search-columns"]', selectedDynamicColumnNameSelector: '[data-test-id^="column-name-"]', removeSelectedDynamicColumnButton: '[data-test-id^="remove-dynamic-col-button"]', dynamicColumnContainer: '[data-test-id="dynamic-col-container"]', + staticColumnContainer: '[data-test-id="static-col-container"]', paginationForwardOnColumnPicker: '[data-test-id="pagination-forward"]', paginationBackOnColumnPicker: '[data-test-id="pagination-back"]', notificationSuccess: diff --git a/cypress/support/customCommands/sharedElementsOperations/selects.js b/cypress/support/customCommands/sharedElementsOperations/selects.js index 095cb2b4a..ff96d752b 100644 --- a/cypress/support/customCommands/sharedElementsOperations/selects.js +++ b/cypress/support/customCommands/sharedElementsOperations/selects.js @@ -23,6 +23,9 @@ Cypress.Commands.add("clickSubmitButton", () => Cypress.Commands.add("clickConfirmButton", () => cy.get(BUTTON_SELECTORS.confirm).click(), ); +Cypress.Commands.add("openColumnPicker", () => + cy.get(SHARED_ELEMENTS.openColumnPickerButton).click(), +); Cypress.Commands.add("createNewOption", (selectSelector, newOption) => { cy.get(selectSelector).type(newOption); diff --git a/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx b/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx index 025a1235b..4210f33d6 100644 --- a/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx +++ b/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx @@ -60,7 +60,7 @@ export const ColumnPicker = ({ } /> - + = ({ const columnIndex = availableColumns.findIndex( column => column.id === recentlyAddedColumn, ); + + if (columnIndex === -1) { + return; + } + const datagridScroll = editor.current.scrollTo; datagridScroll(columnIndex, 0, "horizontal", 0, 0, { hAlign: "start" }); } diff --git a/src/config.ts b/src/config.ts index 77a313745..2db4fab9e 100644 --- a/src/config.ts +++ b/src/config.ts @@ -60,6 +60,8 @@ export interface AppListViewSettings { [ListViews.WEBHOOK_LIST]: ListSettings; [ListViews.TRANSLATION_ATTRIBUTE_VALUE_LIST]: ListSettings; [ListViews.GIFT_CARD_LIST]: ListSettings; + [ListViews.ORDER_DETAILS_LIST]: ListSettings; + [ListViews.ORDER_DRAFT_DETAILS_LIST]: ListSettings; } export const defaultListSettings: AppListViewSettings = { @@ -138,6 +140,22 @@ export const defaultListSettings: AppListViewSettings = { rowNumber: PAGINATE_BY, columns: ["giftCardCode", "status", "tag", "product", "usedBy", "balance"], }, + [ListViews.ORDER_DETAILS_LIST]: { + rowNumber: PAGINATE_BY, + columns: ["product", "sku", "variantName", "quantity", "price", "total"], + }, + [ListViews.ORDER_DRAFT_DETAILS_LIST]: { + rowNumber: PAGINATE_BY, + columns: [ + "product", + "status", + "sku", + "variantName", + "quantity", + "price", + "total", + ], + }, }; export const APP_VERSION = diff --git a/src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx b/src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx index 666e2fee2..881f61581 100644 --- a/src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx +++ b/src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx @@ -1,20 +1,25 @@ // @ts-strict-ignore -import ColumnPicker from "@dashboard/components/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 { OrderLineFragment } from "@dashboard/graphql"; +import useListSettings from "@dashboard/hooks/useListSettings"; import { productPath } from "@dashboard/products/urls"; +import { ListViews } from "@dashboard/types"; import { ExternalLinkIcon } from "@saleor/macaw-ui/next"; -import React, { useCallback } from "react"; +import React, { useCallback, useMemo } from "react"; import { useIntl } from "react-intl"; import { Link } from "react-router-dom"; import { messages as orderMessages } from "../OrderListDatagrid/messages"; -import { useColumns, useGetCellContent } from "./datagrid"; +import { + createGetCellContent, + orderDetailsStaticColumnsAdapter, +} from "./datagrid"; import { messages } from "./messages"; interface OrderDetailsDatagridProps { @@ -29,25 +34,45 @@ export const OrderDetailsDatagrid = ({ const intl = useIntl(); const datagrid = useDatagridChangeState(); - const availableColumns = useColumns(); + const { updateListSettings, settings } = useListSettings( + ListViews.ORDER_DETAILS_LIST, + ); + + const orderDetailsStaticColumns = useMemo( + () => orderDetailsStaticColumnsAdapter(intl), + [intl], + ); + + const handleColumnChange = useCallback( + picked => { + if (updateListSettings) { + updateListSettings("columns", picked.filter(Boolean)); + } + }, + [updateListSettings], + ); const { - availableColumnsChoices, - columnChoices, - columns, - defaultColumns, - onColumnMoved, - onColumnResize, - onColumnsChange, - picker, - } = useColumnsDefault(availableColumns); - - const getCellContent = useGetCellContent({ - columns, - data: lines, - loading, + handlers, + visibleColumns, + staticColumns, + selectedColumns, + recentlyAddedColumn, + } = useColumns({ + staticColumns: orderDetailsStaticColumns, + selectedColumns: settings?.columns ?? [], + onSave: handleColumnChange, }); + const getCellContent = useCallback( + createGetCellContent({ + columns: visibleColumns, + data: lines, + loading, + }), + [intl, visibleColumns, loading], + ); + const getMenuItems = useCallback( index => [ { @@ -76,31 +101,21 @@ export const OrderDetailsDatagrid = ({ rowMarkers="none" columnSelect="single" freezeColumns={1} - availableColumns={columns} + availableColumns={visibleColumns} emptyText={intl.formatMessage(orderMessages.emptyText)} getCellContent={getCellContent} getCellError={() => false} menuItems={getMenuItems} rows={loading ? 1 : lines.length} selectionActions={() => null} - onColumnResize={onColumnResize} - onColumnMoved={onColumnMoved} - renderColumnPicker={defaultProps => ( + onColumnResize={handlers.onResize} + onColumnMoved={handlers.onMove} + recentlyAddedColumn={recentlyAddedColumn} + renderColumnPicker={() => ( undefined} - onQueryChange={picker.setQuery} - query={picker.query} + staticColumns={staticColumns} + selectedColumns={selectedColumns} + onToggle={handlers.onToggle} /> )} /> diff --git a/src/orders/components/OrderDetailsDatagrid/datagrid.ts b/src/orders/components/OrderDetailsDatagrid/datagrid.ts index 9073f4a66..082c0ba3e 100644 --- a/src/orders/components/OrderDetailsDatagrid/datagrid.ts +++ b/src/orders/components/OrderDetailsDatagrid/datagrid.ts @@ -10,52 +10,44 @@ import { AvailableColumn } from "@dashboard/components/Datagrid/types"; import { OrderLineFragment } from "@dashboard/graphql"; import { getDatagridRowDataIndex } from "@dashboard/misc"; import { GridCell, Item } from "@glideapps/glide-data-grid"; -import { useCallback, useMemo } from "react"; -import { useIntl } from "react-intl"; +import { IntlShape } from "react-intl"; import { columnsMessages } from "./messages"; -export const useColumns = (): AvailableColumn[] => { - const intl = useIntl(); - - const columns = useMemo( - () => [ - { - id: "product", - title: intl.formatMessage(columnsMessages.product), - width: 300, - }, - { - id: "sku", - title: intl.formatMessage(columnsMessages.sku), - width: 150, - }, - { - id: "variantName", - title: intl.formatMessage(columnsMessages.variantName), - width: 150, - }, - { - id: "quantity", - title: intl.formatMessage(columnsMessages.quantity), - width: 80, - }, - { - id: "price", - title: intl.formatMessage(columnsMessages.price), - width: 150, - }, - { - id: "total", - title: intl.formatMessage(columnsMessages.total), - width: 150, - }, - ], - [intl], - ); - - return columns; -}; +export const orderDetailsStaticColumnsAdapter = ( + intl: IntlShape, +): AvailableColumn[] => [ + { + id: "product", + title: intl.formatMessage(columnsMessages.product), + width: 300, + }, + { + id: "sku", + title: intl.formatMessage(columnsMessages.sku), + width: 150, + }, + { + id: "variantName", + title: intl.formatMessage(columnsMessages.variantName), + width: 150, + }, + { + id: "quantity", + title: intl.formatMessage(columnsMessages.quantity), + width: 80, + }, + { + id: "price", + title: intl.formatMessage(columnsMessages.price), + width: 150, + }, + { + id: "total", + title: intl.formatMessage(columnsMessages.total), + width: 150, + }, +]; interface GetCellContentProps { columns: AvailableColumn[]; @@ -63,62 +55,53 @@ interface GetCellContentProps { loading: boolean; } -export const useGetCellContent = ({ - columns, - data, - loading, -}: GetCellContentProps) => { - const getCellContent = useCallback( - ([column, row]: Item, { added, removed }: GetCellContentOpts): GridCell => { - if (loading) { - return loadingCell(); - } +export const createGetCellContent = + ({ columns, data, loading }: GetCellContentProps) => + ([column, row]: Item, { added, removed }: GetCellContentOpts): GridCell => { + if (loading) { + return loadingCell(); + } - const columnId = columns[column].id; - const rowData = added.includes(row) - ? undefined - : data[getDatagridRowDataIndex(row, removed)]; + const columnId = columns[column]?.id; + const rowData = added.includes(row) + ? undefined + : data[getDatagridRowDataIndex(row, removed)]; - if (!rowData) { + if (!rowData || !columnId) { + return readonlyTextCell("", false); + } + + switch (columnId) { + case "product": + return thumbnailCell( + rowData?.productName ?? "", + rowData.thumbnail?.url ?? "", + readonyOptions, + ); + case "sku": + return readonlyTextCell(rowData.productSku ?? "", false); + case "variantName": + return readonlyTextCell(rowData?.variant?.name ?? "-", false); + case "quantity": + return readonlyTextCell(rowData.quantity.toString(), false); + case "price": + return moneyCell( + rowData.unitPrice.gross.amount, + rowData.unitPrice.gross.currency, + readonyOptions, + ); + + case "total": + return moneyCell( + rowData.totalPrice.gross.amount, + rowData.totalPrice.gross.currency, + readonyOptions, + ); + + default: return readonlyTextCell("", false); - } - - switch (columnId) { - case "product": - return thumbnailCell( - rowData?.productName ?? "", - rowData.thumbnail?.url ?? "", - readonyOptions, - ); - case "sku": - return readonlyTextCell(rowData.productSku ?? "", false); - case "variantName": - return readonlyTextCell(rowData?.variant?.name ?? "-", false); - case "quantity": - return readonlyTextCell(rowData.quantity.toString(), false); - case "price": - return moneyCell( - rowData.unitPrice.gross.amount, - rowData.unitPrice.gross.currency, - readonyOptions, - ); - - case "total": - return moneyCell( - rowData.totalPrice.gross.amount, - rowData.totalPrice.gross.currency, - readonyOptions, - ); - - default: - return readonlyTextCell("", false); - } - }, - [columns, data, loading], - ); - - return getCellContent; -}; + } + }; const readonyOptions: Partial = { allowOverlay: false, diff --git a/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx b/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx index 5b1e1427c..dc7f9c378 100644 --- a/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx +++ b/src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx @@ -1,26 +1,32 @@ // @ts-strict-ignore -import ColumnPicker from "@dashboard/components/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 { DatagridChangeOpts, DatagridChangeStateContext, useDatagridChangeState, } from "@dashboard/components/Datagrid/hooks/useDatagridChange"; +import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn"; import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql"; +import useListSettings from "@dashboard/hooks/useListSettings"; import { productUrl } from "@dashboard/products/urls"; +import { ListViews } from "@dashboard/types"; import { Box, ExternalLinkIcon, sprinkles, TrashBinIcon, } from "@saleor/macaw-ui/next"; -import React, { useCallback } from "react"; +import React, { useCallback, useMemo } from "react"; import { useIntl } from "react-intl"; import { Link } from "react-router-dom"; import { FormData } from "../OrderDraftDetailsProducts/OrderDraftDetailsProducts"; -import { useColumns, useGetCellContent } from "./datagrid"; +import { + orderDraftDetailsStaticColumnsAdapter, + useGetCellContent, +} from "./datagrid"; import { messages } from "./messages"; interface OrderDraftDetailsDatagridProps { @@ -40,21 +46,40 @@ export const OrderDraftDetailsDatagrid = ({ const intl = useIntl(); const datagrid = useDatagridChangeState(); - const { availableColumns } = useColumns(); + const { updateListSettings, settings } = useListSettings( + ListViews.ORDER_DRAFT_DETAILS_LIST, + ); + + const emptyColumn = useEmptyColumn(); + + const orderDraftDetailsStaticColumns = useMemo( + () => orderDraftDetailsStaticColumnsAdapter(emptyColumn, intl), + [emptyColumn, intl], + ); + + const handleColumnChange = useCallback( + picked => { + if (updateListSettings) { + updateListSettings("columns", picked.filter(Boolean)); + } + }, + [updateListSettings], + ); const { - availableColumnsChoices, - columnChoices, - columns, - defaultColumns, - onColumnMoved, - onColumnResize, - onColumnsChange, - picker, - } = useColumnsDefault(availableColumns); + handlers, + visibleColumns, + staticColumns, + selectedColumns, + recentlyAddedColumn, + } = useColumns({ + staticColumns: orderDraftDetailsStaticColumns, + selectedColumns: settings?.columns ?? [], + onSave: handleColumnChange, + }); const getCellContent = useGetCellContent({ - columns, + columns: visibleColumns, lines, errors, }); @@ -138,31 +163,21 @@ export const OrderDraftDetailsDatagrid = ({ columnSelect="none" freezeColumns={2} verticalBorder={col => col > 1} - availableColumns={columns} + availableColumns={visibleColumns} emptyText={intl.formatMessage(messages.emptyText)} getCellContent={getCellContent} getCellError={() => false} menuItems={getMenuItems} rows={lines.length} selectionActions={() => null} - onColumnResize={onColumnResize} - onColumnMoved={onColumnMoved} - renderColumnPicker={defaultProps => ( + onColumnResize={handlers.onResize} + onColumnMoved={handlers.onMove} + recentlyAddedColumn={recentlyAddedColumn} + renderColumnPicker={() => ( undefined} - onQueryChange={picker.setQuery} - query={picker.query} + selectedColumns={selectedColumns} + staticColumns={staticColumns} + onToggle={handlers.onToggle} /> )} onChange={handleDatagridChange} diff --git a/src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts b/src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts index c13f5155e..568d8eef9 100644 --- a/src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts +++ b/src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts @@ -8,7 +8,6 @@ import { thumbnailCell, } from "@dashboard/components/Datagrid/customCells/cells"; import { GetCellContentOpts } from "@dashboard/components/Datagrid/Datagrid"; -import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn"; import { AvailableColumn } from "@dashboard/components/Datagrid/types"; import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql"; import useLocale from "@dashboard/hooks/useLocale"; @@ -21,62 +20,52 @@ import { useOrderLineDiscountContext } from "@dashboard/products/components/Orde import getOrderErrorMessage from "@dashboard/utils/errors/order"; import { GridCell, Item } from "@glideapps/glide-data-grid"; import { DefaultTheme, useTheme } from "@saleor/macaw-ui/next"; -import { useMemo } from "react"; import { IntlShape, useIntl } from "react-intl"; import { lineAlertMessages } from "../OrderDraftDetailsProducts/messages"; import { columnsMessages } from "./messages"; -export const useColumns = () => { - const emptyColumn = useEmptyColumn(); - const intl = useIntl(); - - const availableColumns = useMemo( - () => [ - emptyColumn, - { - id: "product", - title: intl.formatMessage(columnsMessages.product), - width: 300, - }, - { - id: "sku", - title: "SKU", - width: 150, - }, - { - id: "variantName", - title: intl.formatMessage(columnsMessages.variantName), - width: 150, - }, - { - id: "quantity", - title: intl.formatMessage(columnsMessages.quantity), - width: 80, - }, - { - id: "price", - title: intl.formatMessage(columnsMessages.price), - width: 150, - }, - { - id: "total", - title: intl.formatMessage(columnsMessages.total), - width: 150, - }, - { - id: "status", - title: "Status", - width: 250, - }, - ], - [emptyColumn, intl], - ); - - return { - availableColumns, - }; -}; +export const orderDraftDetailsStaticColumnsAdapter = ( + emptyColumn: AvailableColumn, + intl: IntlShape, +) => [ + emptyColumn, + { + id: "product", + title: intl.formatMessage(columnsMessages.product), + width: 300, + }, + { + id: "sku", + title: "SKU", + width: 150, + }, + { + id: "variantName", + title: intl.formatMessage(columnsMessages.variantName), + width: 150, + }, + { + id: "quantity", + title: intl.formatMessage(columnsMessages.quantity), + width: 80, + }, + { + id: "price", + title: intl.formatMessage(columnsMessages.price), + width: 150, + }, + { + id: "total", + title: intl.formatMessage(columnsMessages.total), + width: 150, + }, + { + id: "status", + title: intl.formatMessage(columnsMessages.status), + width: 250, + }, +]; interface GetCellContentProps { columns: AvailableColumn[]; @@ -102,13 +91,13 @@ export const useGetCellContent = ({ return readonlyTextCell("", false); } - const columnId = columns[column].id; + const columnId = columns[column]?.id; const change = changes.current[getChangeIndex(columnId, row)]?.data; const rowData = added.includes(row) ? undefined : lines[getDatagridRowDataIndex(row, removed)]; - if (!rowData) { + if (!rowData || !columnId) { return readonlyTextCell("", false); } diff --git a/src/orders/components/OrderDraftDetailsDatagrid/messages.ts b/src/orders/components/OrderDraftDetailsDatagrid/messages.ts index d63d7b338..5e5862459 100644 --- a/src/orders/components/OrderDraftDetailsDatagrid/messages.ts +++ b/src/orders/components/OrderDraftDetailsDatagrid/messages.ts @@ -24,6 +24,10 @@ export const columnsMessages = defineMessages({ defaultMessage: "Total", description: "total price of ordered products", }, + status: { + id: "tzMNF3", + defaultMessage: "Status", + }, }); export const messages = defineMessages({ diff --git a/src/types.ts b/src/types.ts index 8e59a8e4c..f9e48ac38 100644 --- a/src/types.ts +++ b/src/types.ts @@ -30,6 +30,8 @@ export enum ListViews { DRAFT_LIST = "DRAFT_LIST", NAVIGATION_LIST = "NAVIGATION_LIST", ORDER_LIST = "ORDER_LIST", + ORDER_DETAILS_LIST = "ORDER_DETAILS_LIST", + ORDER_DRAFT_DETAILS_LIST = "ORDER_DRAFT_DETAILS_LIST", PAGES_LIST = "PAGES_LIST", PAGE_TYPES_LIST = "PAGE_TYPES_LIST", PLUGINS_LIST = "PLUGIN_LIST",