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

Separate visual and app layer in products

Browse source
This commit is contained in:
dominik-zeglen 2020-01-10 14:29:08 +01:00
parent db60f13216
commit 15849ff2af
7 changed files with 122 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -24,13 +24,13 @@ import {
SortPage
} from "@saleor/types";
import FilterBar from "@saleor/components/FilterBar";
import { ProductListFilterOpts } from "@saleor/products/types";
import { ProductListUrlSortField } from "../../urls";
import ProductList from "../ProductList";
import {
createFilterStructure,
ProductFilterKeys
} from "../../views/ProductList/filters";
import ProductList from "../ProductList";
ProductFilterKeys,
ProductListFilterOpts
} from "./filters";
export interface ProductListPageProps
extends PageListProps<ProductListColumns>,

110
src/products/components/ProductListPage/filters.ts Normal file
View file

@ -0,0 +1,110 @@
import { defineMessages, IntlShape } from "react-intl";
import { FilterOpts, MinMax } from "@saleor/types";
import { StockAvailability } from "@saleor/types/globalTypes";
import {
createOptionsField,
createPriceField
} from "@saleor/utils/filters/fields";
import { IFilter } from "@saleor/components/Filter";
export enum ProductFilterKeys {
status = "status",
price = "price",
stock = "stock"
}
export interface ProductListFilterOpts {
price: FilterOpts<MinMax>;
status: FilterOpts<ProductStatus>;
stockStatus: FilterOpts<StockAvailability>;
}
export enum ProductStatus {
PUBLISHED = "published",
HIDDEN = "hidden"
}
const messages = defineMessages({
available: {
defaultMessage: "Available",
description: "product status"
},
hidden: {
defaultMessage: "Hidden",
description: "product is hidden"
},
outOfStock: {
defaultMessage: "Out Of Stock",
description: "product status"
},
price: {
defaultMessage: "Price"
},
quantity: {
defaultMessage: "Stock quantity",
description: "product"
},
visibility: {
defaultMessage: "Visibility",
description: "product visibility"
},
visible: {
defaultMessage: "Visible",
description: "product is visible"
}
});
export function createFilterStructure(
intl: IntlShape,
opts: ProductListFilterOpts
): IFilter<ProductFilterKeys> {
return [
{
...createOptionsField(
ProductFilterKeys.status,
intl.formatMessage(messages.visibility),
[opts.status.value],
false,
[
{
label: intl.formatMessage(messages.visible),
value: ProductStatus.PUBLISHED
},
{
label: intl.formatMessage(messages.hidden),
value: ProductStatus.HIDDEN
}
]
),
active: opts.status.active
},
{
...createOptionsField(
ProductFilterKeys.stock,
intl.formatMessage(messages.quantity),
[opts.stockStatus.value],
false,
[
{
label: intl.formatMessage(messages.available),
value: StockAvailability.IN_STOCK
},
{
label: intl.formatMessage(messages.outOfStock),
value: StockAvailability.OUT_OF_STOCK
}
]
),
active: opts.stockStatus.active
},
{
...createPriceField(
ProductFilterKeys.price,
intl.formatMessage(messages.price),
opts.price.value
),
active: opts.price.active
}
];
}

1
src/products/components/ProductListPage/index.ts
View file

@ -1,2 +1,3 @@
export { default } from "./ProductListPage";
export * from "./ProductListPage";
export * from "./filters";

13
src/products/types.ts
View file

@ -1,13 +0,0 @@
import { FilterOpts, MinMax } from "@saleor/types";
import { StockAvailability } from "@saleor/types/globalTypes";
export enum ProductStatus {
PUBLISHED = "published",
HIDDEN = "hidden"
}
export interface ProductListFilterOpts {
price: FilterOpts<MinMax>;
status: FilterOpts<ProductStatus>;
stockStatus: FilterOpts<StockAvailability>;
}

73
src/products/views/ProductList/filters.ts
View file

@ -1,12 +1,10 @@
import { IntlShape } from "react-intl";
import { maybe, findValueInEnum } from "@saleor/misc";
import {
createOptionsField,
createPriceField
} from "@saleor/utils/filters/fields";
import { ProductStatus, ProductListFilterOpts } from "@saleor/products/types";
import { IFilterElement, IFilter } from "../../../components/Filter";
ProductFilterKeys,
ProductListFilterOpts,
ProductStatus
} from "@saleor/products/components/ProductListPage";
import { IFilterElement } from "../../../components/Filter";
import {
ProductFilterInput,
StockAvailability
@ -20,16 +18,9 @@ import {
ProductListUrlFiltersEnum,
ProductListUrlQueryParams
} from "../../urls";
import messages from "./messages";
export const PRODUCT_FILTERS_KEY = "productFilters";
export enum ProductFilterKeys {
status = "status",
price = "price",
stock = "stock"
}
export function getFilterOpts(
params: ProductListUrlFilters
): ProductListFilterOpts {
@ -56,60 +47,6 @@ export function getFilterOpts(
};
}
export function createFilterStructure(
intl: IntlShape,
opts: ProductListFilterOpts
): IFilter<ProductFilterKeys> {
return [
{
...createOptionsField(
ProductFilterKeys.status,
intl.formatMessage(messages.visibility),
[opts.status.value],
false,
[
{
label: intl.formatMessage(messages.visible),
value: ProductStatus.PUBLISHED
},
{
label: intl.formatMessage(messages.hidden),
value: ProductStatus.HIDDEN
}
]
),
active: opts.status.active
},
{
...createOptionsField(
ProductFilterKeys.stock,
intl.formatMessage(messages.quantity),
[opts.stockStatus.value],
false,
[
{
label: intl.formatMessage(messages.available),
value: StockAvailability.IN_STOCK
},
{
label: intl.formatMessage(messages.outOfStock),
value: StockAvailability.OUT_OF_STOCK
}
]
),
active: opts.stockStatus.active
},
{
...createPriceField(
ProductFilterKeys.price,
intl.formatMessage(messages.price),
opts.price.value
),
active: opts.price.active
}
];
}
export function getFilterVariables(
params: ProductListUrlFilters
): ProductFilterInput {

33
src/products/views/ProductList/messages.ts
View file

@ -1,33 +0,0 @@
import { defineMessages } from "react-intl";
const messages = defineMessages({
available: {
defaultMessage: "Available",
description: "product status"
},
hidden: {
defaultMessage: "Hidden",
description: "product is hidden"
},
outOfStock: {
defaultMessage: "Out Of Stock",
description: "product status"
},
price: {
defaultMessage: "Price"
},
quantity: {
defaultMessage: "Stock quantity",
description: "product"
},
visibility: {
defaultMessage: "Visibility",
description: "product visibility"
},
visible: {
defaultMessage: "Visible",
description: "product is visible"
}
});
export default messages;

4
src/storybook/stories/products/ProductListPage.tsx
View file

@ -7,7 +7,6 @@ import { products as productListFixture } from "@saleor/products/fixtures";
import { ProductListUrlSortField } from "@saleor/products/urls";
import { attributes } from "@saleor/productTypes/fixtures";
import { ListViews } from "@saleor/types";
import { ProductStatus } from "@saleor/products/types";
import { StockAvailability } from "@saleor/types/globalTypes";
import {
fetchMoreProps,
@ -17,7 +16,8 @@ import {
sortPageProps
} from "../../../fixtures";
import ProductListPage, {
ProductListPageProps
ProductListPageProps,
ProductStatus
} from "../../../products/components/ProductListPage";
import Decorator from "../../Decorator";