From b50225aaa2215b2e5052d607c3ebc8f5d04f2f9d Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Wed, 17 Nov 2021 13:49:22 +0100 Subject: [PATCH] Add sorting products by update at date (#1581) * Add sorting products by update at date * Update messages * Change columns order in product list view * Display updated date column by default --- locale/defaultMessages.json | 36 ++++++------- src/config.ts | 8 ++- .../types/ProductAttributeAssignmentUpdate.ts | 1 + .../components/ProductList/ProductList.tsx | 50 ++++++++++++++----- .../components/ProductList/messages.ts | 19 +++++++ .../ProductListPage/ProductListPage.tsx | 15 +++--- src/products/fixtures.ts | 20 ++++++++ src/products/queries.ts | 1 + src/products/types/ProductList.ts | 1 + src/products/urls.ts | 3 +- src/products/views/ProductList/sort.ts | 3 ++ 11 files changed, 113 insertions(+), 44 deletions(-) diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 9f4452a08..8b76c3867 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -6013,18 +6013,10 @@ "context": "modal button", "string": "Upload URL" }, - "src_dot_products_dot_components_dot_ProductListPage_dot_1134347598": { - "context": "product price", - "string": "Price" - }, "src_dot_products_dot_components_dot_ProductListPage_dot_1542417144": { "context": "button", "string": "Create Product" }, - "src_dot_products_dot_components_dot_ProductListPage_dot_1952810469": { - "context": "product type", - "string": "Type" - }, "src_dot_products_dot_components_dot_ProductListPage_dot_2059406063": { "context": "export products to csv file, button", "string": "Export Products" @@ -6078,10 +6070,6 @@ "context": "product is visible", "string": "Visible" }, - "src_dot_products_dot_components_dot_ProductList_dot_1134347598": { - "context": "product price", - "string": "Price" - }, "src_dot_products_dot_components_dot_ProductList_dot_150865454": { "context": "product type", "string": "Simple" @@ -6089,30 +6077,38 @@ "src_dot_products_dot_components_dot_ProductList_dot_1657559629": { "string": "No products found" }, - "src_dot_products_dot_components_dot_ProductList_dot_1952810469": { - "context": "product type", - "string": "Type" - }, "src_dot_products_dot_components_dot_ProductList_dot_2754779425": { "context": "product type", "string": "Configurable" }, - "src_dot_products_dot_components_dot_ProductList_dot_3326160357": { - "context": "product channels", - "string": "Availability" - }, "src_dot_products_dot_components_dot_ProductList_dot_636461959": { "context": "product", "string": "Name" }, + "src_dot_products_dot_components_dot_ProductList_dot_availability": { + "context": "product channels", + "string": "Availability" + }, + "src_dot_products_dot_components_dot_ProductList_dot_price": { + "context": "product price", + "string": "Price" + }, "src_dot_products_dot_components_dot_ProductList_dot_published": { "context": "product publication date", "string": "Published on {date}" }, + "src_dot_products_dot_components_dot_ProductList_dot_type": { + "context": "product type", + "string": "Type" + }, "src_dot_products_dot_components_dot_ProductList_dot_unpublished": { "context": "product publication date", "string": "Unpublished" }, + "src_dot_products_dot_components_dot_ProductList_dot_updatedAt": { + "context": "product updated at", + "string": "Last updated" + }, "src_dot_products_dot_components_dot_ProductList_dot_willBePublished": { "context": "product publication date", "string": "Becomes published on {date}" diff --git a/src/config.ts b/src/config.ts index 7a1941f2a..05cf7f0ad 100644 --- a/src/config.ts +++ b/src/config.ts @@ -22,7 +22,11 @@ export const DEFAULT_INITIAL_PAGINATION_DATA: Pagination = { export const PAGINATE_BY = 20; export const VALUES_PAGINATE_BY = 10; -export type ProductListColumns = "productType" | "availability" | "price"; +export type ProductListColumns = + | "productType" + | "availability" + | "price" + | "date"; export interface AppListViewSettings { [ListViews.APPS_LIST]: ListSettings; @@ -79,7 +83,7 @@ export const defaultListSettings: AppListViewSettings = { rowNumber: PAGINATE_BY }, [ListViews.PRODUCT_LIST]: { - columns: ["availability", "price", "productType"], + columns: ["availability", "price", "productType", "date"], rowNumber: PAGINATE_BY }, [ListViews.SALES_LIST]: { diff --git a/src/productTypes/types/ProductAttributeAssignmentUpdate.ts b/src/productTypes/types/ProductAttributeAssignmentUpdate.ts index 56dd06ed4..0161ee989 100644 --- a/src/productTypes/types/ProductAttributeAssignmentUpdate.ts +++ b/src/productTypes/types/ProductAttributeAssignmentUpdate.ts @@ -13,6 +13,7 @@ export interface ProductAttributeAssignmentUpdate_productAttributeAssignmentUpda __typename: "ProductError"; field: string | null; message: string | null; + attributes: string[] | null; } export interface ProductAttributeAssignmentUpdate_productAttributeAssignmentUpdate_productType_taxType { diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index 7e4ea1348..29af89f0c 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.tsx @@ -8,6 +8,7 @@ import { import AvailabilityStatusLabel from "@saleor/components/AvailabilityStatusLabel"; import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown"; import Checkbox from "@saleor/components/Checkbox"; +import Date from "@saleor/components/Date"; import MoneyRange from "@saleor/components/MoneyRange"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; @@ -36,7 +37,7 @@ import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; -import { messages } from "./messages"; +import { columnsMessages, messages } from "./messages"; const useStyles = makeStyles( theme => ({ @@ -52,6 +53,9 @@ const useStyles = makeStyles( }, colType: { width: 200 + }, + colDate: { + width: 200 } }, colAttribute: { @@ -160,6 +164,9 @@ export const ProductList: React.FC = props => { {gridAttributesFromSettings.map(gridAttribute => ( ))} + + + @@ -200,10 +207,7 @@ export const ProductList: React.FC = props => { } onClick={() => onSort(ProductListUrlSortField.productType)} > - + = props => { ) } > - + {gridAttributesFromSettings.map(gridAttributeFromSettings => { @@ -261,6 +262,20 @@ export const ProductList: React.FC = props => { ); })} + + onSort(ProductListUrlSortField.date)} + > + + + = props => { !canBeSorted(ProductListUrlSortField.price, !!selectedChannelId) } > - + @@ -413,6 +425,18 @@ export const ProductList: React.FC = props => { }, )} ))} + + + {product?.updatedAt ? ( + + ) : ( + + )} + + = props => { const columns: ColumnPickerChoice[] = [ { - label: intl.formatMessage({ - defaultMessage: "Price", - description: "product price" - }), + label: intl.formatMessage(columnsMessages.price), value: "price" as ProductListColumns }, { - label: intl.formatMessage({ - defaultMessage: "Type", - description: "product type" - }), + label: intl.formatMessage(columnsMessages.type), value: "productType" as ProductListColumns }, + { + label: intl.formatMessage(columnsMessages.updatedAt), + value: "date" as ProductListColumns + }, ...availableInGridAttributes.map(attribute => ({ label: attribute.name, value: `attribute:${attribute.id}` diff --git a/src/products/fixtures.ts b/src/products/fixtures.ts index 05cccf8ca..e1cb3156a 100644 --- a/src/products/fixtures.ts +++ b/src/products/fixtures.ts @@ -740,6 +740,7 @@ export const products = ( ): ProductList_products_edges_node[] => [ { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [], channelListings: [ { @@ -830,6 +831,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [], channelListings: [ { @@ -920,6 +922,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [], channelListings: [ { @@ -1010,6 +1013,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1123,6 +1127,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1236,6 +1241,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1350,6 +1356,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1463,6 +1470,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1576,6 +1584,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1689,6 +1698,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1802,6 +1812,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -1915,6 +1926,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2028,6 +2040,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2141,6 +2154,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2254,6 +2268,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2367,6 +2382,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2480,6 +2496,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2593,6 +2610,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2706,6 +2724,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", @@ -2819,6 +2838,7 @@ export const products = ( }, { __typename: "Product", + updatedAt: "2020-06-22T13:52:05.094636+00:00", attributes: [ { __typename: "SelectedAttribute", diff --git a/src/products/queries.ts b/src/products/queries.ts index 831075250..06a7a53a5 100644 --- a/src/products/queries.ts +++ b/src/products/queries.ts @@ -158,6 +158,7 @@ const productListQuery = gql` edges { node { ...ProductFragment + updatedAt attributes { attribute { id diff --git a/src/products/types/ProductList.ts b/src/products/types/ProductList.ts index 68ec99abd..fb03e738d 100644 --- a/src/products/types/ProductList.ts +++ b/src/products/types/ProductList.ts @@ -110,6 +110,7 @@ export interface ProductList_products_edges_node { thumbnail: ProductList_products_edges_node_thumbnail | null; productType: ProductList_products_edges_node_productType; channelListings: ProductList_products_edges_node_channelListings[] | null; + updatedAt: any | null; attributes: ProductList_products_edges_node_attributes[]; } diff --git a/src/products/urls.ts b/src/products/urls.ts index 07a3facbf..518bced03 100644 --- a/src/products/urls.ts +++ b/src/products/urls.ts @@ -50,7 +50,8 @@ export enum ProductListUrlSortField { productType = "productType", status = "status", price = "price", - rank = "rank" + rank = "rank", + date = "date" } export type ProductListUrlSort = Sort; export interface ProductListUrlQueryParams diff --git a/src/products/views/ProductList/sort.ts b/src/products/views/ProductList/sort.ts index b5dfafcec..cb1704a40 100644 --- a/src/products/views/ProductList/sort.ts +++ b/src/products/views/ProductList/sort.ts @@ -16,6 +16,7 @@ export function canBeSorted( case ProductListUrlSortField.productType: case ProductListUrlSortField.attribute: case ProductListUrlSortField.rank: + case ProductListUrlSortField.date: return true; case ProductListUrlSortField.price: case ProductListUrlSortField.status: @@ -39,6 +40,8 @@ export function getSortQueryField( return ProductOrderField.PUBLISHED; case ProductListUrlSortField.rank: return ProductOrderField.RANK; + case ProductListUrlSortField.date: + return ProductOrderField.DATE; default: return undefined; }