Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Category listing datagrid #3760

Merged
merged 25 commits into from
Jul 4, 2023
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
f214d2a
Category list datagrid init
poulch Jun 13, 2023
4889a00
Handle selection and bulk delete
poulch Jun 14, 2023
584ea72
Add pagination
poulch Jun 14, 2023
ccb1eac
Use datagrid in category update page in subcategories list
poulch Jun 14, 2023
f49e4f1
Datagrid in category product list
poulch Jun 14, 2023
6849542
Update stories props
poulch Jun 14, 2023
338b252
Put delete button inside datagrid, fix datagrid anchor
poulch Jun 15, 2023
5daa1e4
Add column pickers
poulch Jun 15, 2023
23c98c4
Improve filter presets updating and deleting
poulch Jun 15, 2023
315d3a3
Refactor and move some logic to hooks
poulch Jun 15, 2023
9974c51
Refactor CategoryDetails page
poulch Jun 15, 2023
add813f
Remove props from story
poulch Jun 15, 2023
1dc2ba2
Fix loading state in storybook fro CategoryList page
poulch Jun 15, 2023
6ceadd8
Extract messages
poulch Jun 15, 2023
a37b7a6
Last improvments
poulch Jun 16, 2023
775d85c
Merge branch 'main' into 3755-category-listing-datagrid
poulch Jun 23, 2023
c0a9075
Add ts ignore comment
poulch Jun 23, 2023
dbf8c7f
Merge branch 'main' into 3755-category-listing-datagrid
poulch Jun 27, 2023
5960b73
Add changeset
poulch Jun 27, 2023
2231118
Change from patch to minor in changeset
poulch Jun 27, 2023
76d0a34
test - test scenarios update according to grid
wojteknowacki Jul 3, 2023
e53be45
Merge branch 'main' into 3755-category-listing-datagrid
poulch Jul 3, 2023
37a52de
Refactor to useFilterPresets
poulch Jul 3, 2023
6307aa9
Remove useTabs
poulch Jul 3, 2023
3797d06
Fix lint
poulch Jul 3, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactor and move some logic to hooks
poulch committed Jun 15, 2023
commit 315d3a3119d6c1704112a0e059e7ae7b82a9a485
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, Tooltip, TrashBinIcon } from "@saleor/macaw-ui/next";
import React, { forwardRef, ReactNode } from "react";
import React, { forwardRef, ReactNode, useState } from "react";

interface CategoryDeleteButtonProps {
onClick: () => void;
@@ -9,20 +9,30 @@ interface CategoryDeleteButtonProps {
export const CategoryDeleteButton = forwardRef<
HTMLButtonElement,
CategoryDeleteButtonProps
>(({ onClick, children }, ref) => (
<Tooltip>
<Tooltip.Trigger>
<Button
ref={ref}
onClick={onClick}
icon={<TrashBinIcon />}
variant="secondary"
data-test-id="delete-products-button"
/>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{children}
</Tooltip.Content>
</Tooltip>
));
>(({ onClick, children }, ref) => {
const [isTooltipOpen, setIsTooltipOpen] = useState(false);

return (
<Tooltip open={isTooltipOpen}>
<Tooltip.Trigger>
<Button
ref={ref}
onMouseOver={() => {
setIsTooltipOpen(true);
}}
onMouseLeave={() => {
setIsTooltipOpen(false);
}}
onClick={onClick}
icon={<TrashBinIcon />}
variant="secondary"
data-test-id="delete-categories-button"
/>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<Tooltip.Arrow />
{children}
</Tooltip.Content>
</Tooltip>
);
});
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@ interface CategoryListDatagridProps
disabled: boolean;
onSelectCategoriesIds: (ids: number[], clearSelection: () => void) => void;
selectionActionButton?: ReactNode | null;
hasRowHover?: boolean;
}

export const CategoryListDatagrid = ({
@@ -37,15 +38,11 @@ export const CategoryListDatagrid = ({
settings,
onUpdateListSettings,
selectionActionButton = null,
hasRowHover = true,
}: CategoryListDatagridProps) => {
const datagridState = useDatagridChangeState();
const intl = useIntl();
const availableColumns = useMemo(() => getColumns(intl, sort), [intl, sort]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const getCellContent = useCallback(
createGetCellContent(categories, availableColumns),
[categories, availableColumns],
);

const {
availableColumnsChoices,
@@ -58,6 +55,12 @@ export const CategoryListDatagrid = ({
picker,
} = useColumnsDefault(availableColumns);

// eslint-disable-next-line react-hooks/exhaustive-deps
const getCellContent = useCallback(
createGetCellContent(categories, columns),
[categories, columns],
);

const handleHeaderClick = useCallback(
(col: number) => {
if (sort !== undefined) {
@@ -75,8 +78,8 @@ export const CategoryListDatagrid = ({
return (
<DatagridChangeStateContext.Provider value={datagridState}>
<Datagrid
hasRowHover
readonly
hasRowHover={hasRowHover}
loading={disabled}
columnSelect={sort !== undefined ? "single" : undefined}
verticalBorder={col => col > 0}
Original file line number Diff line number Diff line change
@@ -27,7 +27,6 @@ const categoryTableProps: CategoryTableProps = {
onCategoriesDelete: () => undefined,
onSelectCategoriesIds: () => undefined,
selectedCategoriesIds: [],
setBulkDeleteButtonRef: () => undefined,
hasPresetsChanged: false,
onTabUpdate: () => undefined,
};
30 changes: 7 additions & 23 deletions src/categories/components/CategoryListPage/CategoryListPage.tsx
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ import { FormattedMessage, useIntl } from "react-intl";

import { CategoryDeleteButton } from "../CategoryDeleteButton";
import { CategoryListDatagrid } from "../CategoryListDatagrid";
import { messages } from "./messages";

export interface CategoryTableProps
extends PageListProps,
@@ -35,7 +36,6 @@ export interface CategoryTableProps
onTabUpdate: (tabName: string) => void;
onCategoriesDelete: () => void;
onSelectCategoriesIds: (ids: number[], clearSelection: () => void) => void;
setBulkDeleteButtonRef: (ref: HTMLButtonElement) => void;
}

export const CategoryListPage: React.FC<CategoryTableProps> = ({
@@ -52,7 +52,6 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
onTabUpdate,
hasPresetsChanged,
onCategoriesDelete,
setBulkDeleteButtonRef,
selectedCategoriesIds,
...listProps
}) => {
@@ -88,10 +87,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
onSave={onTabSave}
isOpen={isFilterPresetOpen}
onOpenChange={setFilterPresetOpen}
selectAllLabel={intl.formatMessage({
id: "1X6HtI",
defaultMessage: "All Categories",
})}
selectAllLabel={intl.formatMessage(messages.allCategories)}
/>
</Box>

@@ -100,11 +96,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
href={categoryAddUrl()}
data-test-id="create-category"
>
<FormattedMessage
id="vof5TR"
defaultMessage="Create category"
description="button"
/>
<FormattedMessage {...messages.createCategory} />
</Button>
</Box>
</TopNav>
@@ -119,28 +111,20 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
<Box __width="320px">
<SearchInput
initialSearch={initialSearch}
placeholder={intl.formatMessage({
id: "T83iU7",
defaultMessage: "Search categories...",
})}
placeholder={intl.formatMessage(messages.searchCategory)}
onSearchChange={onSearchChange}
/>
</Box>
{selectedCategoriesIds.length > 0 && (
<CategoryDeleteButton
onClick={onCategoriesDelete}
ref={setBulkDeleteButtonRef}
>
<FormattedMessage
defaultMessage="Bulk category delete"
id="qU/z0Q"
/>
<CategoryDeleteButton onClick={onCategoriesDelete}>
<FormattedMessage {...messages.bulkCategoryDelete} />
</CategoryDeleteButton>
)}
</Box>
<CategoryListDatagrid
disabled={disabled}
categories={categories}
hasRowHover={!isFilterPresetOpen}
{...listProps}
/>
</Card>
21 changes: 21 additions & 0 deletions src/categories/components/CategoryListPage/messages.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { defineMessages } from "react-intl";

export const messages = defineMessages({
allCategories: {
id: "1X6HtI",
defaultMessage: "All Categories",
},
createCategory: {
id: "vof5TR",
defaultMessage: "Create category",
description: "button",
},
searchCategory: {
id: "T83iU7",
defaultMessage: "Search categories...",
},
bulkCategoryDelete: {
defaultMessage: "Bulk category delete",
id: "qU/z0Q",
},
});
Loading