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

Update category product list

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-06-16 13:13:10 +02:00
parent 2fdda2db55
commit 2d9385554b
5 changed files with 254 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/categories/components/CategoryProductList/CategoryProductList.tsx
View file

@ -14,6 +14,7 @@ import TableCellAvatar, {
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection } from "@saleor/misc"; import { maybe, renderCollection } from "@saleor/misc";
import { getProductPriceRange } from "@saleor/products/components/ProductListPage/utils";
import { ListActions, ListProps } from "@saleor/types"; import { ListActions, ListProps } from "@saleor/types";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -207,13 +208,41 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
)} )}
</TableCell> </TableCell>
<TableCell className={classes.colPrice}> <TableCell className={classes.colPrice}>
{maybe(() => product.basePrice) && {maybe<React.ReactNode>(() => {
maybe(() => product.basePrice.amount) !== undefined && const { max, min } = getProductPriceRange(
maybe(() => product.basePrice.currency) !== undefined ? ( product.variants
<Money money={product.basePrice} /> );
) : ( const currency = product.variants[0].price.currency;
<Skeleton />
)} if (max === min) {
return (
<Money
money={{
amount: min,
currency
}}
/>
);
} else {
return (
<>
<Money
money={{
amount: min,
currency
}}
/>
{" - "}
<Money
money={{
amount: max,
currency
}}
/>
</>
);
}
}, <Skeleton />)}
</TableCell> </TableCell>
</TableRow> </TableRow>
); );

250
src/categories/fixtures.ts
View file

@ -117,11 +117,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjA=", cursor: "YXJyYXljb25uZWN0aW9uOjA=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 83.3,
currency: "USD"
},
id: "UHJvZHVjdDoyMQ==", id: "UHJvZHVjdDoyMQ==",
isAvailable: true, isAvailable: true,
name: "Gardner-Schultz", name: "Gardner-Schultz",
@ -130,7 +125,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -138,11 +151,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjE=", cursor: "YXJyYXljb25uZWN0aW9uOjE=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 68.27,
currency: "USD"
},
id: "UHJvZHVjdDoyMg==", id: "UHJvZHVjdDoyMg==",
isAvailable: true, isAvailable: true,
name: "James, Martinez and Murray", name: "James, Martinez and Murray",
@ -151,7 +159,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -159,11 +185,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjI=", cursor: "YXJyYXljb25uZWN0aW9uOjI=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 21.43,
currency: "USD"
},
id: "UHJvZHVjdDoyMw==", id: "UHJvZHVjdDoyMw==",
isAvailable: true, isAvailable: true,
name: "Curtis, Joyce and Turner", name: "Curtis, Joyce and Turner",
@ -172,7 +193,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -180,11 +219,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjM=", cursor: "YXJyYXljb25uZWN0aW9uOjM=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 62.76,
currency: "USD"
},
id: "UHJvZHVjdDoyNA==", id: "UHJvZHVjdDoyNA==",
isAvailable: true, isAvailable: true,
name: "Davis, Brown and Ray", name: "Davis, Brown and Ray",
@ -193,7 +227,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -201,11 +253,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjQ=", cursor: "YXJyYXljb25uZWN0aW9uOjQ=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 7.13,
currency: "USD"
},
id: "UHJvZHVjdDoyNQ==", id: "UHJvZHVjdDoyNQ==",
isAvailable: true, isAvailable: true,
name: "Gallegos Ltd", name: "Gallegos Ltd",
@ -214,7 +261,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -222,11 +287,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjU=", cursor: "YXJyYXljb25uZWN0aW9uOjU=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 48.82,
currency: "USD"
},
id: "UHJvZHVjdDoyNg==", id: "UHJvZHVjdDoyNg==",
isAvailable: true, isAvailable: true,
name: "Franklin Inc", name: "Franklin Inc",
@ -235,7 +295,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -243,11 +321,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjY=", cursor: "YXJyYXljb25uZWN0aW9uOjY=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 27.34,
currency: "USD"
},
id: "UHJvZHVjdDoyNw==", id: "UHJvZHVjdDoyNw==",
isAvailable: true, isAvailable: true,
name: "Williams-Taylor", name: "Williams-Taylor",
@ -256,7 +329,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -264,11 +355,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjc=", cursor: "YXJyYXljb25uZWN0aW9uOjc=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 75.42,
currency: "USD"
},
id: "UHJvZHVjdDoyOA==", id: "UHJvZHVjdDoyOA==",
isAvailable: true, isAvailable: true,
name: "Riddle, Evans and Hicks", name: "Riddle, Evans and Hicks",
@ -277,7 +363,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -285,11 +389,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjg=", cursor: "YXJyYXljb25uZWN0aW9uOjg=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 86.62,
currency: "USD"
},
id: "UHJvZHVjdDoyOQ==", id: "UHJvZHVjdDoyOQ==",
isAvailable: true, isAvailable: true,
name: "Hebert-Sherman", name: "Hebert-Sherman",
@ -298,7 +397,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
}, },
{ {
@ -306,11 +423,6 @@ export const category: (
cursor: "YXJyYXljb25uZWN0aW9uOjk=", cursor: "YXJyYXljb25uZWN0aW9uOjk=",
node: { node: {
__typename: "Product", __typename: "Product",
basePrice: {
__typename: "Money",
amount: 48.66,
currency: "USD"
},
id: "UHJvZHVjdDozMA==", id: "UHJvZHVjdDozMA==",
isAvailable: true, isAvailable: true,
name: "Carter and Sons", name: "Carter and Sons",
@ -319,7 +431,25 @@ export const category: (
id: "UHJvZHVjdFR5cGU6Mw==", id: "UHJvZHVjdFR5cGU6Mw==",
name: "Coffee" name: "Coffee"
}, },
thumbnail: { __typename: "Image", url: placeholderImage } thumbnail: { __typename: "Image", url: placeholderImage },
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 5,
currency: "USD"
}
},
{
__typename: "ProductVariant" as "ProductVariant",
price: {
__typename: "Money" as "Money",
amount: 10,
currency: "USD"
}
}
]
} }
} }
], ],

6
src/categories/queries.ts
View file

@ -112,6 +112,12 @@ export const categoryDetails = gql`
id id
name name
} }
variants {
price {
amount
currency
}
}
} }
} }
} }

12
src/categories/types/CategoryDetails.ts
View file

@ -73,6 +73,17 @@ export interface CategoryDetails_category_products_edges_node_productType {
name: string; name: string;
} }
export interface CategoryDetails_category_products_edges_node_variants_price {
__typename: "Money";
amount: number;
currency: string;
}
export interface CategoryDetails_category_products_edges_node_variants {
__typename: "ProductVariant";
price: CategoryDetails_category_products_edges_node_variants_price | null;
}
export interface CategoryDetails_category_products_edges_node { export interface CategoryDetails_category_products_edges_node {
__typename: "Product"; __typename: "Product";
id: string; id: string;
@ -80,6 +91,7 @@ export interface CategoryDetails_category_products_edges_node {
isAvailable: boolean | null; isAvailable: boolean | null;
thumbnail: CategoryDetails_category_products_edges_node_thumbnail | null; thumbnail: CategoryDetails_category_products_edges_node_thumbnail | null;
productType: CategoryDetails_category_products_edges_node_productType; productType: CategoryDetails_category_products_edges_node_productType;
variants: (CategoryDetails_category_products_edges_node_variants | null)[] | null;
} }
export interface CategoryDetails_category_products_edges { export interface CategoryDetails_category_products_edges {

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

@ -25221,7 +25221,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$83.30 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25280,7 +25280,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$68.27 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25339,7 +25339,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$21.43 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25398,7 +25398,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$62.76 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25457,7 +25457,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$7.13 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25516,7 +25516,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$48.82 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25575,7 +25575,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$27.34 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25634,7 +25634,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$75.42 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25693,7 +25693,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$86.62 $5.00 - $10.00
</td> </td>
</tr> </tr>
<tr <tr
@ -25752,7 +25752,7 @@ Ctrl + K"
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id" class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
> >
$48.66 $5.00 - $10.00
</td> </td>
</tr> </tr>
</tbody> </tbody>