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

Add default variant indicator for variant nav

Browse source
This commit is contained in:
Krzysztof Wolski 2020-10-01 18:56:38 +02:00 committed by Dawid Tarasiuk
parent 1334729b3c
commit db1c33d1fe
11 changed files with 119 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/fragments/products.ts
View file

@ -253,6 +253,9 @@ export const fragmentVariant = gql`
url
}
}
defaultVariant {
id
}
}
sku
stocks {

6
src/fragments/types/ProductVariant.ts
View file

@ -99,6 +99,11 @@ export interface ProductVariant_product_variants {
images: (ProductVariant_product_variants_images | null)[] | null;
}
export interface ProductVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface ProductVariant_product {
__typename: "Product";
id: string;
@ -107,6 +112,7 @@ export interface ProductVariant_product {
name: string;
thumbnail: ProductVariant_product_thumbnail | null;
variants: (ProductVariant_product_variants | null)[] | null;
defaultVariant: ProductVariant_product_defaultVariant | null;
}
export interface ProductVariant_stocks_warehouse {

60
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -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";
import { fade } from "@material-ui/core/styles/colorManipulator";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import CardTitle from "@saleor/components/CardTitle";
@ -28,6 +29,10 @@ const useStyles = makeStyles(
colName: {
paddingLeft: 0
},
defaultVariant: {
color: fade(theme.palette.text.secondary, 0.6),
display: "block"
},
firstVariant: {
width: 88
},
@ -57,6 +62,7 @@ const useStyles = makeStyles(
interface ProductVariantNavigationProps {
current?: string;
defaultVariantId?: string;
fallbackThumbnail: string;
variants:
| ProductVariantDetails_productVariant[]
@ -69,6 +75,7 @@ interface ProductVariantNavigationProps {
const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props => {
const {
current,
defaultVariantId,
fallbackThumbnail,
variants,
onAdd,
@ -89,28 +96,37 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
/>
<ResponsiveTable>
<SortableTableBody onSortEnd={onReorder}>
{renderCollection(variants, (variant, variantIndex) => (
<SortableTableRow
hover={!!variant}
key={variant ? variant.id : "skeleton"}
index={variantIndex || 0}
className={classNames(classes.link, {
[classes.tabActive]: variant && variant.id === current
})}
onClick={variant ? () => onRowClick(variant.id) : undefined}
>
<TableCellAvatar
className={classes.colAvatar}
thumbnail={maybe(
() => variant.images[0].url,
fallbackThumbnail
)}
/>
<TableCell className={classes.colName}>
{variant ? variant.name || variant.sku : <Skeleton />}
</TableCell>
</SortableTableRow>
))}
{renderCollection(variants, (variant, variantIndex) => {
const isDefault = variant && variant.id === defaultVariantId;
const isActive = variant && variant.id === current;
return (
<SortableTableRow
hover={!!variant}
key={variant ? variant.id : "skeleton"}
index={variantIndex || 0}
className={classNames(classes.link, {
[classes.tabActive]: isActive
})}
onClick={variant ? () => onRowClick(variant.id) : undefined}
>
<TableCellAvatar
className={classes.colAvatar}
thumbnail={variant?.images[0]?.url || fallbackThumbnail}
/>
<TableCell className={classes.colName}>
{variant ? variant.name || variant.sku : <Skeleton />}
{isDefault && (
<span className={classes.defaultVariant}>
{intl.formatMessage({
defaultMessage: "default",
description: "default variant label"
})}
</span>
)}
</TableCell>
</SortableTableRow>
);
})}
{onAdd ? (
<TableRow>
<TableCell colSpan={3}>

16
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -15,6 +15,7 @@ import useFormset, {
FormsetChange,
FormsetData
} from "@saleor/hooks/useFormset";
import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate";
import {
getAttributeInputFromVariant,
getStockInputFromVariant
@ -54,13 +55,16 @@ export interface ProductVariantPageSubmitData
}
interface ProductVariantPageProps {
defaultVariantId?: string;
defaultWeightUnit: string;
variant?: ProductVariant;
errors: ProductErrorWithAttributesFragment[];
saveButtonBarState: ConfirmButtonTransitionState;
errors:
| ProductErrorWithAttributesFragment[]
| VariantUpdate_productVariantUpdate_errors[];
header: string;
loading?: boolean;
placeholderImage?: string;
header: string;
saveButtonBarState: ConfirmButtonTransitionState;
variant?: ProductVariant;
warehouses: WarehouseFragment[];
onVariantReorder: ReorderAction;
onAdd();
@ -74,10 +78,11 @@ interface ProductVariantPageProps {
}
const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
defaultVariantId,
defaultWeightUnit,
errors,
loading,
header,
loading,
placeholderImage,
saveButtonBarState,
variant,
@ -192,6 +197,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
<div>
<ProductVariantNavigation
current={variant ? variant.id : undefined}
defaultVariantId={defaultVariantId}
fallbackThumbnail={maybe(
() => variant.product.thumbnail.url
)}

6
src/products/types/ProductVariantDetails.ts
View file

@ -99,6 +99,11 @@ export interface ProductVariantDetails_productVariant_product_variants {
images: (ProductVariantDetails_productVariant_product_variants_images | null)[] | null;
}
export interface ProductVariantDetails_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface ProductVariantDetails_productVariant_product {
__typename: "Product";
id: string;
@ -107,6 +112,7 @@ export interface ProductVariantDetails_productVariant_product {
name: string;
thumbnail: ProductVariantDetails_productVariant_product_thumbnail | null;
variants: (ProductVariantDetails_productVariant_product_variants | null)[] | null;
defaultVariant: ProductVariantDetails_productVariant_product_defaultVariant | null;
}
export interface ProductVariantDetails_productVariant_stocks_warehouse {

24
src/products/types/SimpleProductUpdate.ts
View file

@ -346,6 +346,11 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
images: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null;
}
export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface SimpleProductUpdate_productVariantUpdate_productVariant_product {
__typename: "Product";
id: string;
@ -354,6 +359,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
name: string;
thumbnail: SimpleProductUpdate_productVariantUpdate_productVariant_product_thumbnail | null;
variants: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null;
defaultVariant: SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
}
export interface SimpleProductUpdate_productVariantUpdate_productVariant_stocks_warehouse {
@ -497,6 +503,11 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_images | null)[] | null;
}
export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product {
__typename: "Product";
id: string;
@ -505,6 +516,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
name: string;
thumbnail: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_thumbnail | null;
variants: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants | null)[] | null;
defaultVariant: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant | null;
}
export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_stocks_warehouse {
@ -647,6 +659,11 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_images | null)[] | null;
}
export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product {
__typename: "Product";
id: string;
@ -655,6 +672,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
name: string;
thumbnail: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_thumbnail | null;
variants: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants | null)[] | null;
defaultVariant: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant | null;
}
export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_stocks_warehouse {
@ -798,6 +816,11 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null;
}
export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product {
__typename: "Product";
id: string;
@ -806,6 +829,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
name: string;
thumbnail: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null;
variants: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants | null)[] | null;
defaultVariant: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
}
export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse {

6
src/products/types/VariantCreate.ts
View file

@ -106,6 +106,11 @@ export interface VariantCreate_productVariantCreate_productVariant_product_varia
images: (VariantCreate_productVariantCreate_productVariant_product_variants_images | null)[] | null;
}
export interface VariantCreate_productVariantCreate_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface VariantCreate_productVariantCreate_productVariant_product {
__typename: "Product";
id: string;
@ -114,6 +119,7 @@ export interface VariantCreate_productVariantCreate_productVariant_product {
name: string;
thumbnail: VariantCreate_productVariantCreate_productVariant_product_thumbnail | null;
variants: (VariantCreate_productVariantCreate_productVariant_product_variants | null)[] | null;
defaultVariant: VariantCreate_productVariantCreate_productVariant_product_defaultVariant | null;
}
export interface VariantCreate_productVariantCreate_productVariant_stocks_warehouse {

6
src/products/types/VariantImageAssign.ts
View file

@ -105,6 +105,11 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product_va
images: (VariantImageAssign_variantImageAssign_productVariant_product_variants_images | null)[] | null;
}
export interface VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface VariantImageAssign_variantImageAssign_productVariant_product {
__typename: "Product";
id: string;
@ -113,6 +118,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product {
name: string;
thumbnail: VariantImageAssign_variantImageAssign_productVariant_product_thumbnail | null;
variants: (VariantImageAssign_variantImageAssign_productVariant_product_variants | null)[] | null;
defaultVariant: VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant | null;
}
export interface VariantImageAssign_variantImageAssign_productVariant_stocks_warehouse {

6
src/products/types/VariantImageUnassign.ts
View file

@ -105,6 +105,11 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc
images: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants_images | null)[] | null;
}
export interface VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface VariantImageUnassign_variantImageUnassign_productVariant_product {
__typename: "Product";
id: string;
@ -113,6 +118,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc
name: string;
thumbnail: VariantImageUnassign_variantImageUnassign_productVariant_product_thumbnail | null;
variants: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants | null)[] | null;
defaultVariant: VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant | null;
}
export interface VariantImageUnassign_variantImageUnassign_productVariant_stocks_warehouse {

12
src/products/types/VariantUpdate.ts
View file

@ -106,6 +106,11 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product_varia
images: (VariantUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null;
}
export interface VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface VariantUpdate_productVariantUpdate_productVariant_product {
__typename: "Product";
id: string;
@ -114,6 +119,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product {
name: string;
thumbnail: VariantUpdate_productVariantUpdate_productVariant_product_thumbnail | null;
variants: (VariantUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null;
defaultVariant: VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
}
export interface VariantUpdate_productVariantUpdate_productVariant_stocks_warehouse {
@ -257,6 +263,11 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
images: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null;
}
export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant {
__typename: "ProductVariant";
id: string;
}
export interface VariantUpdate_productVariantStocksUpdate_productVariant_product {
__typename: "Product";
id: string;
@ -265,6 +276,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
name: string;
thumbnail: VariantUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null;
variants: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants | null)[] | null;
defaultVariant: VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
}
export interface VariantUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse {

1
src/products/views/ProductVariant.tsx
View file

@ -201,6 +201,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
<WindowTitle title={data?.productVariant?.name} />
<ProductVariantPage
defaultWeightUnit={shop?.defaultWeightUnit}
defaultVariantId={data?.productVariant.product.defaultVariant.id}
errors={errors}
onSetDefaultVariant={onSetDefaultVariant}
saveButtonBarState={updateVariantOpts.status}