Separate visual and app layer in products

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

View file

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

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
}
];
}

View file

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

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>;
}

View file

@ -1,12 +1,10 @@
import { IntlShape } from "react-intl";
import { maybe, findValueInEnum } from "@saleor/misc"; import { maybe, findValueInEnum } from "@saleor/misc";
import { import {
createOptionsField, ProductFilterKeys,
createPriceField ProductListFilterOpts,
} from "@saleor/utils/filters/fields"; ProductStatus
import { ProductStatus, ProductListFilterOpts } from "@saleor/products/types"; } from "@saleor/products/components/ProductListPage";
import { IFilterElement, IFilter } from "../../../components/Filter"; import { IFilterElement } from "../../../components/Filter";
import { import {
ProductFilterInput, ProductFilterInput,
StockAvailability StockAvailability
@ -20,16 +18,9 @@ import {
ProductListUrlFiltersEnum, ProductListUrlFiltersEnum,
ProductListUrlQueryParams ProductListUrlQueryParams
} from "../../urls"; } from "../../urls";
import messages from "./messages";
export const PRODUCT_FILTERS_KEY = "productFilters"; export const PRODUCT_FILTERS_KEY = "productFilters";
export enum ProductFilterKeys {
status = "status",
price = "price",
stock = "stock"
}
export function getFilterOpts( export function getFilterOpts(
params: ProductListUrlFilters params: ProductListUrlFilters
): ProductListFilterOpts { ): 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( export function getFilterVariables(
params: ProductListUrlFilters params: ProductListUrlFilters
): ProductFilterInput { ): ProductFilterInput {

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;

View file

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