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

Hide variants and attributes if none

Browse source
This commit is contained in:
dominik-zeglen 2019-09-25 13:40:10 +02:00
parent 7b0b99fbcd
commit d19a07f319
8 changed files with 3305 additions and 371 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -78,7 +78,6 @@ interface ProductCreatePageProps {
fetchCategories: (data: string) => void;
fetchCollections: (data: string) => void;
fetchProductTypes: (data: string) => void;
onAttributesEdit: () => void;
onBack?();
onSubmit?(data: ProductCreatePageSubmitData);
}
@ -220,12 +219,14 @@ export const ProductCreatePage: React.StatelessComponent<
onChange={change}
/>
<CardSpacer />
<ProductAttributes
attributes={attributes}
disabled={disabled}
onChange={handleAttributeChange}
onMultiChange={handleAttributeMultiChange}
/>
{attributes.length > 0 && (
<ProductAttributes
attributes={attributes}
disabled={disabled}
onChange={handleAttributeChange}
onMultiChange={handleAttributeMultiChange}
/>
)}
<CardSpacer />
<ProductPricing
currency={currency}

17
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -62,7 +62,6 @@ export interface ProductUpdatePageProps extends ListActions {
fetchCollections: (query: string) => void;
onVariantShow: (id: string) => () => void;
onImageDelete: (id: string) => () => void;
onAttributesEdit: () => void;
onBack?();
onDelete();
onImageEdit?(id: string);
@ -92,7 +91,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
product,
saveButtonBarState,
variants,
onAttributesEdit,
onBack,
onDelete,
onImageDelete,
@ -215,12 +213,14 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
onImageUpload={onImageUpload}
/>
<CardSpacer />
<ProductAttributes
attributes={attributes}
disabled={disabled}
onChange={handleAttributeChange}
onMultiChange={handleAttributeMultiChange}
/>
{attributes.length > 0 && (
<ProductAttributes
attributes={attributes}
disabled={disabled}
onChange={handleAttributeChange}
onMultiChange={handleAttributeMultiChange}
/>
)}
<CardSpacer />
<ProductPricing
currency={currency}
@ -234,7 +234,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
disabled={disabled}
variants={variants}
fallbackPrice={product ? product.basePrice : undefined}
onAttributesEdit={onAttributesEdit}
onRowClick={onVariantShow}
onVariantAdd={onVariantAdd}
toolbar={toolbar}

99
src/products/components/ProductVariants/ProductVariants.tsx
View file

@ -67,7 +67,6 @@ interface ProductVariantsProps extends ListActions, WithStyles<typeof styles> {
disabled: boolean;
variants: ProductDetails_product_variants[];
fallbackPrice?: ProductVariant_costPrice;
onAttributesEdit: () => void;
onRowClick: (id: string) => () => void;
onVariantAdd?();
}
@ -80,7 +79,6 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
disabled,
variants,
fallbackPrice,
onAttributesEdit,
onRowClick,
onVariantAdd,
isChecked,
@ -90,6 +88,8 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
toolbar
}: ProductVariantsProps) => {
const intl = useIntl();
const hasVariants = maybe(() => variants.length > 0, true);
return (
<Card>
<CardTitle
@ -99,17 +99,6 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
})}
toolbar={
<>
<Button
onClick={onAttributesEdit}
variant="text"
color="primary"
data-tc="button-edit-attributes"
>
<FormattedMessage
defaultMessage="Edit attributes"
description="product variant attributes, button"
/>
</Button>
<Button
onClick={onVariantAdd}
variant="text"
@ -126,48 +115,47 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
/>
{!variants.length && (
<CardContent>
<Typography>
<Typography color={hasVariants ? "default" : "textSecondary"}>
<FormattedMessage defaultMessage="Use variants for products that come in a variety of versions for example different sizes or colors" />
</Typography>
</CardContent>
)}
<Table className={classes.denseTable}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={variants}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colName}>
<FormattedMessage
defaultMessage="Name"
description="product variant name"
/>
</TableCell>
<TableCell className={classes.colStatus}>
<FormattedMessage
defaultMessage="Status"
description="product variant status"
/>
</TableCell>
<TableCell className={classes.colSku}>
<FormattedMessage defaultMessage="SKU" />
</TableCell>
<Hidden smDown>
<TableCell className={classes.colPrice}>
{hasVariants && (
<Table className={classes.denseTable}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={variants}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colName}>
<FormattedMessage
defaultMessage="Price"
description="product variant price"
defaultMessage="Name"
description="product variant name"
/>
</TableCell>
</Hidden>
</TableHead>
<TableBody>
{renderCollection(
variants,
variant => {
<TableCell className={classes.colStatus}>
<FormattedMessage
defaultMessage="Status"
description="product variant status"
/>
</TableCell>
<TableCell className={classes.colSku}>
<FormattedMessage defaultMessage="SKU" />
</TableCell>
<Hidden smDown>
<TableCell className={classes.colPrice}>
<FormattedMessage
defaultMessage="Price"
description="product variant price"
/>
</TableCell>
</Hidden>
</TableHead>
<TableBody>
{renderCollection(variants, variant => {
const isSelected = variant ? isChecked(variant.id) : false;
return (
@ -237,17 +225,10 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
</Hidden>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage defaultMessage="This product has no variants" />
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
})}
</TableBody>
</Table>
)}
</Card>
);
}

2
src/products/views/ProductCreate.tsx
View file

@ -29,7 +29,6 @@ export const ProductUpdate: React.StatelessComponent<
const shop = useShop();
const intl = useIntl();
const handleAttributesEdit = undefined;
const handleBack = () => navigate(productListUrl());
return (
@ -146,7 +145,6 @@ export const ProductUpdate: React.StatelessComponent<
edge => edge.node
)
)}
onAttributesEdit={handleAttributesEdit}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}

6
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -15,7 +15,6 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
import SearchCategories from "../../../containers/SearchCategories";
import SearchCollections from "../../../containers/SearchCollections";
import { getMutationState, maybe } from "../../../misc";
import { productTypeUrl } from "../../../productTypes/urls";
import ProductUpdatePage from "../../components/ProductUpdatePage";
import ProductUpdateOperations from "../../containers/ProductUpdateOperations";
import { TypedProductDetailsQuery } from "../../queries";
@ -234,11 +233,6 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
placeholderImage={placeholderImg}
product={product}
variants={maybe(() => product.variants)}
onAttributesEdit={() =>
navigate(
productTypeUrl(data.product.productType.id)
)
}
onBack={() => {
navigate(productListUrl());
}}

3515
src/storybook/__snapshots__/Stories.test.ts.snap
View file

File diff suppressed because it is too large Load diff

3
src/storybook/stories/products/ProductCreatePage.tsx
View file

@ -27,7 +27,6 @@ storiesOf("Views / Products / Create product", module)
fetchProductTypes={() => undefined}
productTypes={productTypes}
categories={[product.category]}
onAttributesEdit={undefined}
onBack={() => undefined}
onSubmit={() => undefined}
saveButtonBarState="default"
@ -45,7 +44,6 @@ storiesOf("Views / Products / Create product", module)
fetchProductTypes={() => undefined}
productTypes={productTypes}
categories={[product.category]}
onAttributesEdit={undefined}
onBack={() => undefined}
onSubmit={() => undefined}
saveButtonBarState="default"
@ -65,7 +63,6 @@ storiesOf("Views / Products / Create product", module)
fetchProductTypes={() => undefined}
productTypes={productTypes}
categories={[product.category]}
onAttributesEdit={undefined}
onBack={() => undefined}
onSubmit={() => undefined}
saveButtonBarState="default"

19
src/storybook/stories/products/ProductUpdatePage.tsx
View file

@ -22,7 +22,6 @@ const props: ProductUpdatePageProps = {
fetchCollections: () => undefined,
header: product.name,
images: product.images,
onAttributesEdit: () => undefined,
onBack: () => undefined,
onDelete: () => undefined,
onImageDelete: () => undefined,
@ -63,4 +62,22 @@ storiesOf("Views / Products / Product edit", module)
collections={undefined}
images={undefined}
/>
))
.add("no variants", () => (
<ProductUpdatePage
{...props}
product={{
...props.product,
variants: []
}}
/>
))
.add("no product attributes", () => (
<ProductUpdatePage
{...props}
product={{
...props.product,
attributes: []
}}
/>
));