djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make category and collection assign dialog common

Browse source
This commit is contained in:
dominik-zeglen 2020-10-30 15:00:43 +01:00
parent 1f92b380c5
commit 573cda058f
7 changed files with 274 additions and 424 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
locale/defaultMessages.json
View file

@ -1400,23 +1400,15 @@
"context": "section header", "context": "section header",
"string": "App Status" "string": "App Status"
}, },
"src_dot_components_dot_AssignCategoryDialog_dot_1305061437": { "src_dot_components_dot_AssignCategoryDialog_dot_3125506097": {
"string": "Search Categories"
},
"src_dot_components_dot_AssignCategoryDialog_dot_190977792": {
"context": "dialog header", "context": "dialog header",
"string": "Assign Categories" "string": "Assign Category"
}, },
"src_dot_components_dot_AssignCategoryDialog_dot_3690273268": { "src_dot_components_dot_AssignCategoryDialog_dot_3690273268": {
"string": "Search by category name, etc..." "string": "Search by category name, etc..."
}, },
"src_dot_components_dot_AssignCategoryDialog_dot_3973677075": { "src_dot_components_dot_AssignCategoryDialog_dot_3841025483": {
"context": "button", "string": "Search Category"
"string": "Assign categories"
},
"src_dot_components_dot_AssignCollectionDialog_dot_1035511604": {
"context": "button",
"string": "Assign collections"
}, },
"src_dot_components_dot_AssignCollectionDialog_dot_2605414502": { "src_dot_components_dot_AssignCollectionDialog_dot_2605414502": {
"string": "Search by collection name, etc..." "string": "Search by collection name, etc..."
@ -1428,6 +1420,10 @@
"src_dot_components_dot_AssignCollectionDialog_dot_4057224233": { "src_dot_components_dot_AssignCollectionDialog_dot_4057224233": {
"string": "Search Collection" "string": "Search Collection"
}, },
"src_dot_components_dot_AssignContainerDialog_dot_1731102929": {
"context": "button",
"string": "Assign"
},
"src_dot_components_dot_AssignProductDialog_dot_2100305525": { "src_dot_components_dot_AssignProductDialog_dot_2100305525": {
"context": "button", "context": "button",
"string": "Assign products" "string": "Assign products"

222
src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
View file

@ -1,213 +1,41 @@
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import TextField from "@material-ui/core/TextField";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories"; import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
import { FetchMoreProps } from "@saleor/types";
import React from "react"; import React from "react";
import InfiniteScroll from "react-infinite-scroller"; import { useIntl } from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "../Checkbox"; import AssignContainerDialog, {
AssignContainerDialogProps
} from "../AssignContainerDialog";
export interface FormData { interface AssignCategoryDialogProps
extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
categories: SearchCategories_search_edges_node[]; categories: SearchCategories_search_edges_node[];
query: string;
} }
const useStyles = makeStyles( const AssignCategoryDialog: React.FC<AssignCategoryDialogProps> = ({
{ categories,
avatar: { ...rest
"&:first-child": { }) => {
paddingLeft: 0
}
},
checkboxCell: {
paddingLeft: 0
},
wideCell: {
width: "100%"
}
},
{ name: "AssignCategoryDialog" }
);
interface AssignCategoriesDialogProps extends FetchMoreProps {
categories: SearchCategories_search_edges_node[];
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
loading: boolean;
onClose: () => void;
onFetch: (value: string) => void;
onSubmit: (data: SearchCategories_search_edges_node[]) => void;
}
function handleCategoryAssign(
product: SearchCategories_search_edges_node,
isSelected: boolean,
selectedCategories: SearchCategories_search_edges_node[],
setSelectedCategories: (data: SearchCategories_search_edges_node[]) => void
) {
if (isSelected) {
setSelectedCategories(
selectedCategories.filter(
selectedProduct => selectedProduct.id !== product.id
)
);
} else {
setSelectedCategories([...selectedCategories, product]);
}
}
const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
const {
confirmButtonState,
open,
loading,
categories: categories,
hasMore,
onClose,
onFetch,
onFetchMore,
onSubmit
} = props;
const classes = useStyles(props);
const scrollableDialogClasses = useScrollableDialogStyle({});
const intl = useIntl(); const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedCategories, setSelectedCategories] = React.useState<
SearchCategories_search_edges_node[]
>([]);
const container = React.useRef<HTMLDivElement>();
const handleSubmit = () => onSubmit(selectedCategories);
const containerHeight = container.current?.scrollHeight - 130;
return ( return (
<Dialog <AssignContainerDialog
classes={{ paper: scrollableDialogClasses.dialog }} containers={categories}
open={open} search={{
onClose={onClose} label: intl.formatMessage({
fullWidth defaultMessage: "Search Category"
maxWidth="sm" }),
> placeholder: intl.formatMessage({
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Categories"
description="dialog header"
/>
</DialogTitle>
<DialogContent
className={scrollableDialogClasses.content}
ref={container}
>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={intl.formatMessage({
defaultMessage: "Search Categories"
})}
placeholder={intl.formatMessage({
defaultMessage: "Search by category name, etc..." defaultMessage: "Search by category name, etc..."
})} })
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}} }}
/> title={intl.formatMessage({
<FormSpacer /> defaultMessage: "Assign Category",
<div description: "dialog header"
className={scrollableDialogClasses.scrollArea}
style={{ height: containerHeight }}
>
<InfiniteScroll
pageStart={0}
loadMore={onFetchMore}
hasMore={hasMore}
useWindow={false}
loader={
<div className={scrollableDialogClasses.loadMoreLoaderContainer}>
<CircularProgress size={16} />
</div>
}
threshold={10}
>
<ResponsiveTable key="table">
<TableBody>
{categories &&
categories.map(category => {
const isSelected = !!selectedCategories.find(
selectedCategories =>
selectedCategories.id === category.id
);
return (
<TableRow key={category.id}>
<TableCell
padding="checkbox"
className={classes.checkboxCell}
>
<Checkbox
checked={isSelected}
onChange={() =>
handleCategoryAssign(
category,
isSelected,
selectedCategories,
setSelectedCategories
)
}
/>
</TableCell>
<TableCell className={classes.wideCell}>
{category.name}
</TableCell>
</TableRow>
);
})} })}
</TableBody> {...rest}
</ResponsiveTable>
</InfiniteScroll>
</div>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
type="submit"
onClick={handleSubmit}
>
<FormattedMessage
defaultMessage="Assign categories"
description="button"
/> />
</ConfirmButton>
</DialogActions>
</Dialog>
); );
}; };
AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
export default AssignCategoriesDialog; AssignCategoryDialog.displayName = "AssignCategoryDialog";
export default AssignCategoryDialog;

214
src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
View file

@ -1,213 +1,41 @@
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import TextField from "@material-ui/core/TextField";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections"; import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
import { FetchMoreProps } from "@saleor/types";
import React from "react"; import React from "react";
import InfiniteScroll from "react-infinite-scroller"; import { useIntl } from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "../Checkbox"; import AssignContainerDialog, {
import ConfirmButton, { AssignContainerDialogProps
ConfirmButtonTransitionState } from "../AssignContainerDialog";
} from "../ConfirmButton/ConfirmButton";
import FormSpacer from "../FormSpacer";
export interface FormData { interface AssignCollectionDialogProps
extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
collections: SearchCollections_search_edges_node[]; collections: SearchCollections_search_edges_node[];
query: string;
} }
const useStyles = makeStyles( const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = ({
{
avatar: {
"&:first-child": {
paddingLeft: 0
}
},
checkboxCell: {
paddingLeft: 0
},
wideCell: {
width: "100%"
}
},
{ name: "AssignCollectionDialog" }
);
interface AssignCollectionDialogProps extends FetchMoreProps {
collections: SearchCollections_search_edges_node[];
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
loading: boolean;
onClose: () => void;
onFetch: (value: string) => void;
onSubmit: (data: SearchCollections_search_edges_node[]) => void;
}
function handleCollectionAssign(
product: SearchCollections_search_edges_node,
isSelected: boolean,
selectedCollections: SearchCollections_search_edges_node[],
setSelectedCollections: (data: SearchCollections_search_edges_node[]) => void
) {
if (isSelected) {
setSelectedCollections(
selectedCollections.filter(
selectedProduct => selectedProduct.id !== product.id
)
);
} else {
setSelectedCollections([...selectedCollections, product]);
}
}
const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
const {
confirmButtonState,
hasMore,
open,
loading,
collections, collections,
onClose, ...rest
onFetch, }) => {
onFetchMore,
onSubmit
} = props;
const classes = useStyles(props);
const scrollableDialogClasses = useScrollableDialogStyle({});
const intl = useIntl(); const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedCollections, setSelectedCollections] = React.useState<
SearchCollections_search_edges_node[]
>([]);
const container = React.useRef<HTMLDivElement>();
const handleSubmit = () => onSubmit(selectedCollections);
const containerHeight = container.current?.scrollHeight - 130;
return ( return (
<Dialog <AssignContainerDialog
onClose={onClose} containers={collections}
open={open} search={{
classes={{ paper: scrollableDialogClasses.dialog }} label: intl.formatMessage({
fullWidth
maxWidth="sm"
>
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Collection"
description="dialog header"
/>
</DialogTitle>
<DialogContent
className={scrollableDialogClasses.content}
ref={container}
>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={intl.formatMessage({
defaultMessage: "Search Collection" defaultMessage: "Search Collection"
})} }),
placeholder={intl.formatMessage({ placeholder: intl.formatMessage({
defaultMessage: "Search by collection name, etc..." defaultMessage: "Search by collection name, etc..."
})} })
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}} }}
/> title={intl.formatMessage({
<FormSpacer /> defaultMessage: "Assign Collection",
<div description: "dialog header"
className={scrollableDialogClasses.scrollArea}
style={{ height: containerHeight }}
>
<InfiniteScroll
pageStart={0}
loadMore={onFetchMore}
hasMore={hasMore}
useWindow={false}
loader={
<div className={scrollableDialogClasses.loadMoreLoaderContainer}>
<CircularProgress size={16} />
</div>
}
threshold={10}
>
<ResponsiveTable>
<TableBody>
{collections &&
collections.map(collection => {
const isSelected = !!selectedCollections.find(
selectedCollection =>
selectedCollection.id === collection.id
);
return (
<TableRow key={collection.id}>
<TableCell
padding="checkbox"
className={classes.checkboxCell}
>
<Checkbox
checked={isSelected}
onChange={() =>
handleCollectionAssign(
collection,
isSelected,
selectedCollections,
setSelectedCollections
)
}
/>
</TableCell>
<TableCell className={classes.wideCell}>
{collection.name}
</TableCell>
</TableRow>
);
})} })}
</TableBody> {...rest}
</ResponsiveTable>
</InfiniteScroll>
</div>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
type="submit"
onClick={handleSubmit}
>
<FormattedMessage
defaultMessage="Assign collections"
description="button"
/> />
</ConfirmButton>
</DialogActions>
</Dialog>
); );
}; };
AssignCollectionDialog.displayName = "AssignCollectionDialog"; AssignCollectionDialog.displayName = "AssignCollectionDialog";
export default AssignCollectionDialog; export default AssignCollectionDialog;

204
src/components/AssignContainerDialog/AssignContainerDialog.tsx Normal file
View file

@ -0,0 +1,204 @@
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import TextField from "@material-ui/core/TextField";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
import { FetchMoreProps, Node } from "@saleor/types";
import React from "react";
import InfiniteScroll from "react-infinite-scroller";
import { FormattedMessage } from "react-intl";
import Checkbox from "../Checkbox";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "../ConfirmButton/ConfirmButton";
import FormSpacer from "../FormSpacer";
export interface FormData {
containers: string[];
query: string;
}
const useStyles = makeStyles(
{
avatar: {
"&:first-child": {
paddingLeft: 0
}
},
checkboxCell: {
paddingLeft: 0
},
wideCell: {
width: "100%"
}
},
{ name: "AssignContainerDialog" }
);
interface Container extends Node {
name: string;
}
export interface AssignContainerDialogProps extends FetchMoreProps {
confirmButtonState: ConfirmButtonTransitionState;
containers: Container[];
loading: boolean;
open: boolean;
search: Record<"label" | "placeholder", string>;
title: string;
onClose: () => void;
onFetch: (value: string) => void;
onSubmit: (data: string[]) => void;
}
function handleContainerAssign(
containerId: string,
isSelected: boolean,
selectedContainers: string[],
setSelectedContainers: (data: string[]) => void
) {
if (isSelected) {
setSelectedContainers(
selectedContainers.filter(
selectedContainer => selectedContainer !== containerId
)
);
} else {
setSelectedContainers([...selectedContainers, containerId]);
}
}
const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
const {
confirmButtonState,
containers,
hasMore,
loading,
open,
search,
title,
onClose,
onFetch,
onFetchMore,
onSubmit
} = props;
const classes = useStyles(props);
const scrollableDialogClasses = useScrollableDialogStyle({});
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedContainers, setSelectedContainers] = React.useState<string[]>(
[]
);
const container = React.useRef<HTMLDivElement>();
const handleSubmit = () => onSubmit(selectedContainers);
const containerHeight = container.current?.scrollHeight - 130;
return (
<Dialog
onClose={onClose}
open={open}
classes={{ paper: scrollableDialogClasses.dialog }}
fullWidth
maxWidth="sm"
>
<DialogTitle>{title}</DialogTitle>
<DialogContent
className={scrollableDialogClasses.content}
ref={container}
>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={search.label}
placeholder={search.placeholder}
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}}
/>
<FormSpacer />
<div
className={scrollableDialogClasses.scrollArea}
style={{ height: containerHeight }}
>
<InfiniteScroll
pageStart={0}
loadMore={onFetchMore}
hasMore={hasMore}
useWindow={false}
loader={
<div className={scrollableDialogClasses.loadMoreLoaderContainer}>
<CircularProgress size={16} />
</div>
}
threshold={10}
>
<ResponsiveTable>
<TableBody>
{containers?.map(container => {
const isSelected = !!selectedContainers.find(
selectedContainer => selectedContainer === container.id
);
return (
<TableRow key={container.id}>
<TableCell
padding="checkbox"
className={classes.checkboxCell}
>
<Checkbox
checked={isSelected}
onChange={() =>
handleContainerAssign(
container.id,
isSelected,
selectedContainers,
setSelectedContainers
)
}
/>
</TableCell>
<TableCell className={classes.wideCell}>
{container.name}
</TableCell>
</TableRow>
);
})}
</TableBody>
</ResponsiveTable>
</InfiniteScroll>
</div>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
type="submit"
onClick={handleSubmit}
>
<FormattedMessage defaultMessage="Assign" description="button" />
</ConfirmButton>
</DialogActions>
</Dialog>
);
};
AssignContainerDialog.displayName = "AssignContainerDialog";
export default AssignContainerDialog;

2
src/components/AssignContainerDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./AssignContainerDialog";
export { default } from "./AssignContainerDialog";

8
src/discounts/views/SaleDetails.tsx
View file

@ -382,9 +382,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
...paginationState, ...paginationState,
id, id,
input: { input: {
categories: categories.map( categories
product => product.id
)
} }
} }
}) })
@ -414,9 +412,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
...paginationState, ...paginationState,
id, id,
input: { input: {
collections: collections.map( collections
product => product.id
)
} }
} }
}) })

8
src/discounts/views/VoucherDetails.tsx
View file

@ -428,9 +428,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
...paginationState, ...paginationState,
id, id,
input: { input: {
categories: categories.map( categories
product => product.id
)
} }
} }
}) })
@ -462,9 +460,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
...paginationState, ...paginationState,
id, id,
input: { input: {
collections: collections.map( collections
product => product.id
)
} }
} }
}) })