+
= props => {
className={classes.iconButton}
color="primary"
disabled={disabled}
- onClick={handleClick}
+ ref={anchorRef}
+ onClick={handleToggle}
>
-
+
+
+
+
+
+
+ )}
+
);
};
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
index 53a56bcdf..5198817da 100644
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@@ -23,8 +23,8 @@ const useStyles = makeStyles(
color: theme.palette.common.white
},
root: {
- background: fade(theme.palette.secondary.main, 0.8),
- borderRadius: 8,
+ background: fade(theme.palette.primary.main, 0.8),
+ borderRadius: 18,
display: "inline-block",
marginRight: theme.spacing(2),
padding: "6px 12px"
diff --git a/src/components/CreatorSteps/CreatorSteps.tsx b/src/components/CreatorSteps/CreatorSteps.tsx
new file mode 100644
index 000000000..d7be7c4a3
--- /dev/null
+++ b/src/components/CreatorSteps/CreatorSteps.tsx
@@ -0,0 +1,84 @@
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import classNames from "classnames";
+import React from "react";
+
+export interface Step
{
+ label: string;
+ value: T;
+}
+
+const useStyles = makeStyles(
+ theme => ({
+ label: {
+ fontSize: 14,
+ textAlign: "center"
+ },
+ root: {
+ borderBottom: `1px solid ${theme.palette.divider}`,
+ display: "flex",
+ justifyContent: "space-between",
+ marginBottom: theme.spacing(3)
+ },
+ tab: {
+ flex: 1,
+ paddingBottom: theme.spacing(),
+ userSelect: "none"
+ },
+ tabActive: {
+ fontWeight: 600
+ },
+ tabVisited: {
+ borderBottom: `3px solid ${theme.palette.primary.main}`,
+ cursor: "pointer"
+ }
+ }),
+ {
+ name: "CreatorSteps"
+ }
+);
+
+export interface CreatorStepsProps {
+ currentStep: T;
+ steps: Array>;
+ onStepClick: (step: T) => void;
+}
+
+function makeCreatorSteps() {
+ const CreatorSteps: React.FC> = ({
+ currentStep,
+ steps,
+ onStepClick
+ }) => {
+ const classes = useStyles({});
+
+ return (
+
+ {steps.map((step, stepIndex) => {
+ const visitedStep =
+ steps.findIndex(step => step.value === currentStep) >= stepIndex;
+
+ return (
+
onStepClick(step.value) : undefined}
+ key={step.value}
+ >
+
+ {step.label}
+
+
+ );
+ })}
+
+ {selectedFields.slice(0, maxChips).map(field => (
+
+ onChange({
+ target: {
+ name: field,
+ value: false
+ }
+ })
+ }
+ />
+ ))}
+ {selectedFields.length > maxChips && (
+
+
+
+ )}
+
+ )
+ }
+ {...props}
+ >
+
+ {fields.map(field => (
+
+ ))}
+
+ );
+};
+
+export interface ProductExportDialogInfoProps extends FetchMoreProps {
+ attributes: MultiAutocompleteChoiceType[];
+ data: ExportProductsInput;
+ selectedAttributes: MultiAutocompleteChoiceType[];
+ onAttrtibuteSelect: (event: ChangeEvent) => void;
+ onChange: (event: ChangeEvent) => void;
+ onFetch: (query: string) => void;
+}
+
+const ProductExportDialogInfo: React.FC = ({
+ attributes,
+ data,
+ hasMore,
+ selectedAttributes,
+ loading,
+ onAttrtibuteSelect,
+ onChange,
+ onFetch,
+ onFetchMore
+}) => {
+ const classes = useStyles({});
+ const intl = useIntl();
+ const [query, onQueryChange] = useSearchQuery(onFetch);
+
+ const handleFieldChange = (event: ChangeEvent) =>
+ onChange({
+ target: {
+ name: "exportInfo",
+ value: {
+ ...data.exportInfo,
+ fields: toggle(
+ event.target.name,
+ data.exportInfo.fields,
+ (a, b) => a === b
+ )
+ }
+ }
+ });
+
+ const handleToggleAllFields = (fields: ProductFieldEnum[], setTo: boolean) =>
+ onChange({
+ target: {
+ name: "exportInfo",
+ value: {
+ ...data.exportInfo,
+ fields: setTo
+ ? [
+ ...data.exportInfo.fields,
+ ...fields.filter(
+ field => !data.exportInfo.fields.includes(field)
+ )
+ ]
+ : data.exportInfo.fields.filter(field => !fields.includes(field))
+ }
+ }
+ });
+
+ return (
+ <>
+
+
+
+
+ 0 && (
+
+ {selectedAttributes.slice(0, maxChips).map(attribute => (
+
+ onAttrtibuteSelect({
+ target: {
+ name: attributeNamePrefix + attribute.value,
+ value: undefined
+ }
+ })
+ }
+ />
+ ))}
+ {selectedAttributes.length > maxChips && (
+
+
+
+ )}
+
+ )
+ }
+ data-test="attributes"
+ >
+
+ }}
+ />
+
+ {attributes.map(attribute => (
+
+ ))}
+ {(hasMore || loading) && (
+
+ {hasMore && !loading && (
+
+ )}
+ {loading && }
+
+ )}
+
+
+
+
+
+ );
+};
+
+ProductExportDialogInfo.displayName = "ProductExportDialogInfo";
+export default ProductExportDialogInfo;
diff --git a/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx b/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx
new file mode 100644
index 000000000..040b0dbc3
--- /dev/null
+++ b/src/products/components/ProductExportDialog/ProductExportDialogSettings.tsx
@@ -0,0 +1,144 @@
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import Hr from "@saleor/components/Hr";
+import RadioGroupField, {
+ RadioGroupFieldChoice
+} from "@saleor/components/RadioGroupField";
+import { ExportErrorFragment } from "@saleor/fragments/types/ExportErrorFragment";
+import { ChangeEvent } from "@saleor/hooks/useForm";
+import {
+ ExportProductsInput,
+ ExportScope,
+ FileTypesEnum
+} from "@saleor/types/globalTypes";
+import { getFormErrors } from "@saleor/utils/errors";
+import getExportErrorMessage from "@saleor/utils/errors/export";
+import React from "react";
+import { useIntl } from "react-intl";
+
+const useStyles = makeStyles(
+ theme => ({
+ hr: {
+ marginBottom: theme.spacing(3),
+ marginTop: theme.spacing(3)
+ }
+ }),
+ {
+ name: "ProductExportDialogSettings"
+ }
+);
+
+export type ProductQuantity = Record<"all" | "filter", number>;
+export interface ProductExportDialogSettingsProps {
+ data: ExportProductsInput;
+ errors: ExportErrorFragment[];
+ productQuantity: ProductQuantity;
+ selectedProducts: number;
+ onChange: (event: ChangeEvent) => void;
+}
+
+const formFields: Array = ["fileType", "scope"];
+
+const ProductExportDialogSettings: React.FC = ({
+ data,
+ errors,
+ onChange,
+ productQuantity,
+ selectedProducts
+}) => {
+ const classes = useStyles({});
+ const intl = useIntl();
+
+ const formErrors = getFormErrors(formFields, errors);
+
+ const productsToExportChoices: Array> = [
+ {
+ label: intl.formatMessage(
+ {
+ defaultMessage: "All products ({number})",
+ description: "export all products to csv file"
+ },
+ {
+ number: productQuantity.all || "..."
+ }
+ ),
+ value: ExportScope.ALL
+ },
+ {
+ disabled: selectedProducts === 0,
+ label: intl.formatMessage(
+ {
+ defaultMessage: "Selected products ({number})",
+ description: "export selected products to csv file"
+ },
+ {
+ number: selectedProducts
+ }
+ ),
+ value: ExportScope.IDS
+ },
+ {
+ label: intl.formatMessage(
+ {
+ defaultMessage: "Current search ({number})",
+ description: "export filtered products to csv file"
+ },
+ {
+ number: productQuantity.filter || "..."
+ }
+ ),
+ value: ExportScope.FILTER
+ }
+ ];
+
+ const productExportTypeChoices: Array> = [
+ {
+ label: intl.formatMessage({
+ defaultMessage: "Spreadsheet for Excel, Numbers etc.",
+ description: "export products as spreadsheet"
+ }),
+ value: FileTypesEnum.XLSX
+ },
+ {
+ label: intl.formatMessage({
+ defaultMessage: "Plain CSV file",
+ description: "export products as csv file"
+ }),
+ value: FileTypesEnum.CSV
+ }
+ ];
+
+ return (
+ <>
+
+
+
+
+ );
+};
+
+ProductExportDialogSettings.displayName = "ProductExportDialogSettings";
+export default ProductExportDialogSettings;
diff --git a/src/products/components/ProductExportDialog/index.ts b/src/products/components/ProductExportDialog/index.ts
new file mode 100644
index 000000000..ea211ddcc
--- /dev/null
+++ b/src/products/components/ProductExportDialog/index.ts
@@ -0,0 +1,2 @@
+export * from "./ProductExportDialog";
+export { default } from "./ProductExportDialog";
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 6652fc6bd..8bc6b452c 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -1,6 +1,7 @@
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import makeStyles from "@material-ui/core/styles/makeStyles";
+import CardMenu from "@saleor/components/CardMenu";
import ColumnPicker, {
ColumnPickerChoice
} from "@saleor/components/ColumnPicker";
@@ -44,12 +45,13 @@ export interface ProductListPageProps
gridAttributes: GridAttributes_grid_edges_node[];
totalGridAttributes: number;
products: ProductList_products_edges_node[];
+ onExport: () => void;
}
const useStyles = makeStyles(
theme => ({
columnPicker: {
- marginRight: theme.spacing(3)
+ margin: theme.spacing(0, 3)
}
}),
{ name: "ProductListPage" }
@@ -71,6 +73,7 @@ export const ProductListPage: React.FC = props => {
totalGridAttributes,
onAdd,
onAll,
+ onExport,
onFetchMore,
onFilterChange,
onSearchChange,
@@ -119,6 +122,19 @@ export const ProductListPage: React.FC = props => {
return (
+
> {
+ const intl = useIntl();
+
return [
{
label: intl.formatMessage({
@@ -36,69 +32,27 @@ function getSteps(intl: IntlShape): Step[] {
];
}
-const useStyles = makeStyles(
- theme => ({
- label: {
- fontSize: 14,
- textAlign: "center"
- },
- root: {
- borderBottom: `1px solid ${theme.palette.divider}`,
- display: "flex",
- justifyContent: "space-between",
- marginBottom: theme.spacing(3)
- },
- tab: {
- flex: 1,
- paddingBottom: theme.spacing(),
- userSelect: "none"
- },
- tabActive: {
- fontWeight: 600
- },
- tabVisited: {
- borderBottom: `3px solid ${theme.palette.primary.main}`,
- cursor: "pointer"
- }
- }),
- {
- name: "ProductVariantCreatorTabs"
- }
-);
+const ProductVariantCreatorSteps = makeCreatorSteps<
+ ProductVariantCreatorStep
+>();
export interface ProductVariantCreatorTabsProps {
step: ProductVariantCreatorStep;
onStepClick: (step: ProductVariantCreatorStep) => void;
}
-const ProductVariantCreatorTabs: React.FC = props => {
- const { step: currentStep, onStepClick } = props;
- const classes = useStyles(props);
- const intl = useIntl();
- const steps = getSteps(intl);
+const ProductVariantCreatorTabs: React.FC = ({
+ step: currentStep,
+ onStepClick
+}) => {
+ const steps = useSteps();
return (
-
- {steps.map((step, stepIndex) => {
- const visitedStep =
- steps.findIndex(step => step.value === currentStep) >= stepIndex;
-
- return (
-
onStepClick(step.value) : undefined}
- key={step.value}
- >
-
- {step.label}
-
-
- );
- })}
-
Summary
@@ -119378,6 +119556,24 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
`;
+exports[`Storyshots Views / Products / Export / Export settings errors 1`] = `
+
+`;
+
+exports[`Storyshots Views / Products / Export / Export settings interactive 1`] = `
+
+`;
+
+exports[`Storyshots Views / Products / Export / Export settings no products selected 1`] = `
+
+`;
+
exports[`Storyshots Views / Products / Product edit form errors 1`] = `