diff --git a/src/containers/SearchProductTypes/index.tsx b/src/containers/SearchProductTypes/index.tsx new file mode 100644 index 000000000..6cc389137 --- /dev/null +++ b/src/containers/SearchProductTypes/index.tsx @@ -0,0 +1,37 @@ +import gql from "graphql-tag"; + +import BaseSearch from "../BaseSearch"; +import { + SearchProductTypes, + SearchProductTypesVariables +} from "./types/SearchProductTypes"; + +export const searchProductTypes = gql` + query SearchProductTypes($after: String, $first: Int!, $query: String!) { + productTypes(after: $after, first: $first, filter: { search: $query }) { + edges { + node { + id + name + hasVariants + productAttributes { + id + inputType + slug + name + valueRequired + values { + id + name + slug + } + } + } + } + } + } +`; + +export default BaseSearch( + searchProductTypes +); diff --git a/src/containers/SearchProductTypes/types/SearchProductTypes.ts b/src/containers/SearchProductTypes/types/SearchProductTypes.ts new file mode 100644 index 000000000..f242be391 --- /dev/null +++ b/src/containers/SearchProductTypes/types/SearchProductTypes.ts @@ -0,0 +1,54 @@ +/* tslint:disable */ +/* eslint-disable */ +// This file was automatically generated and should not be edited. + +import { AttributeInputTypeEnum } from "./../../../types/globalTypes"; + +// ==================================================== +// GraphQL query operation: SearchProductTypes +// ==================================================== + +export interface SearchProductTypes_productTypes_edges_node_productAttributes_values { + __typename: "AttributeValue"; + id: string; + name: string | null; + slug: string | null; +} + +export interface SearchProductTypes_productTypes_edges_node_productAttributes { + __typename: "Attribute"; + id: string; + inputType: AttributeInputTypeEnum | null; + slug: string | null; + name: string | null; + valueRequired: boolean; + values: (SearchProductTypes_productTypes_edges_node_productAttributes_values | null)[] | null; +} + +export interface SearchProductTypes_productTypes_edges_node { + __typename: "ProductType"; + id: string; + name: string; + hasVariants: boolean; + productAttributes: (SearchProductTypes_productTypes_edges_node_productAttributes | null)[] | null; +} + +export interface SearchProductTypes_productTypes_edges { + __typename: "ProductTypeCountableEdge"; + node: SearchProductTypes_productTypes_edges_node; +} + +export interface SearchProductTypes_productTypes { + __typename: "ProductTypeCountableConnection"; + edges: SearchProductTypes_productTypes_edges[]; +} + +export interface SearchProductTypes { + productTypes: SearchProductTypes_productTypes | null; +} + +export interface SearchProductTypesVariables { + after?: string | null; + first: number; + query: string; +} diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index 4ac375c21..b0a60e340 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -77,6 +77,7 @@ interface ProductCreatePageProps { saveButtonBarState: ConfirmButtonTransitionState; fetchCategories: (data: string) => void; fetchCollections: (data: string) => void; + fetchProductTypes: (data: string) => void; onAttributesEdit: () => void; onBack?(); onSubmit?(data: ProductCreatePageSubmitData); @@ -96,6 +97,7 @@ export const ProductCreatePage: React.StatelessComponent< productTypes: productTypeChoiceList, saveButtonBarState, onBack, + fetchProductTypes, onSubmit }: ProductCreatePageProps) => { const intl = useIntl(); @@ -268,6 +270,7 @@ export const ProductCreatePage: React.StatelessComponent< errors={errors} fetchCategories={fetchCategories} fetchCollections={fetchCollections} + fetchProductTypes={fetchProductTypes} productType={productType} productTypeInputDisplayValue={productType.name} productTypes={productTypes} diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx index c833cf2dc..e74bfbc48 100644 --- a/src/products/components/ProductOrganization/ProductOrganization.tsx +++ b/src/products/components/ProductOrganization/ProductOrganization.tsx @@ -62,6 +62,7 @@ interface ProductOrganizationProps extends WithStyles { productTypes?: SingleAutocompleteChoiceType[]; fetchCategories: (query: string) => void; fetchCollections: (query: string) => void; + fetchProductTypes: (data: string) => void; onCategoryChange: (event: ChangeEvent) => void; onCollectionChange: (event: ChangeEvent) => void; onProductTypeChange?: (event: ChangeEvent) => void; @@ -80,6 +81,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( errors, fetchCategories, fetchCollections, + fetchProductTypes, productType, productTypeInputDisplayValue, productTypes, @@ -111,6 +113,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( choices={productTypes} value={data.productType} onChange={onProductTypeChange} + fetchChoices={fetchProductTypes} data-tc="product-type" /> ) : ( diff --git a/src/products/queries.ts b/src/products/queries.ts index 65c5948d7..cbd1244a9 100644 --- a/src/products/queries.ts +++ b/src/products/queries.ts @@ -282,35 +282,6 @@ export const TypedProductVariantQuery = TypedQuery< ProductVariantDetailsVariables >(productVariantQuery); -const productCreateQuery = gql` - query ProductCreateData { - productTypes(first: 20) { - edges { - node { - id - name - hasVariants - productAttributes { - id - inputType - slug - name - valueRequired - values { - id - name - slug - } - } - } - } - } - } -`; -export const TypedProductCreateQuery = TypedQuery( - productCreateQuery -); - const productVariantCreateQuery = gql` query ProductVariantCreateData($id: ID!) { product(id: $id) { diff --git a/src/products/types/ProductCreateData.ts b/src/products/types/ProductCreateData.ts deleted file mode 100644 index 4e6513b86..000000000 --- a/src/products/types/ProductCreateData.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// This file was automatically generated and should not be edited. - -import { AttributeInputTypeEnum } from "./../../types/globalTypes"; - -// ==================================================== -// GraphQL query operation: ProductCreateData -// ==================================================== - -export interface ProductCreateData_productTypes_edges_node_productAttributes_values { - __typename: "AttributeValue"; - id: string; - name: string | null; - slug: string | null; -} - -export interface ProductCreateData_productTypes_edges_node_productAttributes { - __typename: "Attribute"; - id: string; - inputType: AttributeInputTypeEnum | null; - slug: string | null; - name: string | null; - valueRequired: boolean; - values: (ProductCreateData_productTypes_edges_node_productAttributes_values | null)[] | null; -} - -export interface ProductCreateData_productTypes_edges_node { - __typename: "ProductType"; - id: string; - name: string; - hasVariants: boolean; - productAttributes: (ProductCreateData_productTypes_edges_node_productAttributes | null)[] | null; -} - -export interface ProductCreateData_productTypes_edges { - __typename: "ProductTypeCountableEdge"; - node: ProductCreateData_productTypes_edges_node; -} - -export interface ProductCreateData_productTypes { - __typename: "ProductTypeCountableConnection"; - edges: ProductCreateData_productTypes_edges[]; -} - -export interface ProductCreateData { - productTypes: ProductCreateData_productTypes | null; -} diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index e3528a3b3..f9ee3af0b 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useIntl } from "react-intl"; import { WindowTitle } from "@saleor/components/WindowTitle"; +import SearchProductTypes from "@saleor/containers/SearchProductTypes"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; @@ -13,7 +14,6 @@ import ProductCreatePage, { ProductCreatePageSubmitData } from "../components/ProductCreatePage"; import { TypedProductCreateMutation } from "../mutations"; -import { TypedProductCreateQuery } from "../queries"; import { ProductCreate } from "../types/ProductCreate"; import { productListUrl, productUrl } from "../urls"; @@ -37,8 +37,11 @@ export const ProductUpdate: React.StatelessComponent< {({ search: searchCategory, result: searchCategoryOpts }) => ( {({ search: searchCollection, result: searchCollectionOpts }) => ( - - {({ data, loading }) => { + + {({ + search: searchProductTypes, + result: searchProductTypesOpts + }) => { const handleSuccess = (data: ProductCreate) => { if (data.productCreate.errors.length === 0) { notify({ @@ -103,8 +106,6 @@ export const ProductUpdate: React.StatelessComponent< }); }; - const disabled = loading || productCreateDataLoading; - const formTransitionState = getMutationState( productCreateCalled, productCreateDataLoading, @@ -128,19 +129,22 @@ export const ProductUpdate: React.StatelessComponent< () => searchCollectionOpts.data.collections.edges, [] ).map(edge => edge.node)} - disabled={disabled} + disabled={productCreateDataLoading} errors={maybe( () => productCreateData.productCreate.errors, [] )} fetchCategories={searchCategory} fetchCollections={searchCollection} + fetchProductTypes={searchProductTypes} header={intl.formatMessage({ defaultMessage: "New Product", description: "page header" })} productTypes={maybe(() => - data.productTypes.edges.map(edge => edge.node) + searchProductTypesOpts.data.productTypes.edges.map( + edge => edge.node + ) )} onAttributesEdit={handleAttributesEdit} onBack={handleBack} @@ -153,7 +157,7 @@ export const ProductUpdate: React.StatelessComponent< ); }} - + )} )}