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

Fix product type selection

Browse source
This commit is contained in:
dominik-zeglen 2019-09-30 12:55:22 +02:00
parent 116d952bea
commit bba9aea6ac
7 changed files with 109 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/containers/SearchProductTypes/index.tsx Normal file
View file

@ -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, SearchProductTypesVariables>(
searchProductTypes
);

54
src/containers/SearchProductTypes/types/SearchProductTypes.ts Normal file
View file

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

3
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

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

3
src/products/components/ProductOrganization/ProductOrganization.tsx
View file

@ -62,6 +62,7 @@ interface ProductOrganizationProps extends WithStyles<typeof styles> {
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"
/>
) : (

29
src/products/queries.ts
View file

@ -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<ProductCreateData, {}>(
productCreateQuery
);
const productVariantCreateQuery = gql`
query ProductVariantCreateData($id: ID!) {
product(id: $id) {

48
src/products/types/ProductCreateData.ts
View file

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

20
src/products/views/ProductCreate.tsx
View file

@ -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 }) => (
<SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({ search: searchCollection, result: searchCollectionOpts }) => (
<TypedProductCreateQuery displayLoader>
{({ data, loading }) => {
<SearchProductTypes variables={DEFAULT_INITIAL_SEARCH_DATA}>
{({
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<
</TypedProductCreateMutation>
);
}}
</TypedProductCreateQuery>
</SearchProductTypes>
)}
</SearchCollections>
)}