
* Update changelog with file attributes * Add file type attribute * Update attribute properties form * Update translation messages with file upload * Create generic attributes component (#832) * Create generic Attributes component * Add story for Attributes component * Remove deprecated attribute value type field from queries * Update test snapshots of attributes component * Add file upload field to atributes (#888) * Add story for Attributes component * Update test snapshots of attributes component * Create file upload field in attributes * Update upload file input data-test * Update storybook test snapshots of attributes * Add dedicated input props to file field * Run Cypress using custom API * Add missing error handling in file upload field Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com> * Add file attribute upload to page attributes (#894) * Support upload file attribute for pages * Update after review * Add file attribute upload to variant attributes (#892) * Support upload file attribute for variants * Update after review * Refactor attribute values errors merging * Update after review * Add file attribute upload to product attributes (#826) * Support upload file attribute for products * Update after review * Refactor attribute values errors merging * Refactor product attribute value delete handling * Fix deleting file in file upload field * Fix delete attribute values errors handling * Add link to file upload field (#898) * Update file attributes updates (#899) * Update file attributes updates * Refactor file uploads handling * Move attributes utils to attributes directory * Fix product channel listing updates * Clear file field value if file is not passed as prop * Delete attribute values before update (#908) * Delete file attributes after file update * Triggr CI * Show skeleton in file upload field during loading Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
320 lines
6.7 KiB
TypeScript
320 lines
6.7 KiB
TypeScript
import { attributeValueFragment } from "@saleor/fragments/attributes";
|
|
import { pageInfoFragment } from "@saleor/fragments/pageInfo";
|
|
import {
|
|
fragmentVariant,
|
|
productFragment,
|
|
productFragmentDetails,
|
|
productVariantAttributesFragment,
|
|
variantAttributeFragment
|
|
} from "@saleor/fragments/products";
|
|
import { taxTypeFragment } from "@saleor/fragments/taxes";
|
|
import { warehouseFragment } from "@saleor/fragments/warehouses";
|
|
import makeQuery from "@saleor/hooks/makeQuery";
|
|
import gql from "graphql-tag";
|
|
|
|
import { CountAllProducts } from "./types/CountAllProducts";
|
|
import {
|
|
CreateMultipleVariantsData,
|
|
CreateMultipleVariantsDataVariables
|
|
} from "./types/CreateMultipleVariantsData";
|
|
import {
|
|
GridAttributes,
|
|
GridAttributesVariables
|
|
} from "./types/GridAttributes";
|
|
import {
|
|
InitialProductFilterData,
|
|
InitialProductFilterDataVariables
|
|
} from "./types/InitialProductFilterData";
|
|
import {
|
|
ProductDetails,
|
|
ProductDetailsVariables
|
|
} from "./types/ProductDetails";
|
|
import {
|
|
ProductImageById,
|
|
ProductImageByIdVariables
|
|
} from "./types/ProductImageById";
|
|
import { ProductList, ProductListVariables } from "./types/ProductList";
|
|
import {
|
|
ProductVariantCreateData,
|
|
ProductVariantCreateDataVariables
|
|
} from "./types/ProductVariantCreateData";
|
|
import {
|
|
ProductVariantDetails,
|
|
ProductVariantDetailsVariables
|
|
} from "./types/ProductVariantDetails";
|
|
|
|
const initialProductFilterDataQuery = gql`
|
|
query InitialProductFilterData(
|
|
$categories: [ID!]
|
|
$collections: [ID!]
|
|
$productTypes: [ID!]
|
|
) {
|
|
attributes(first: 100, filter: { filterableInDashboard: true }) {
|
|
edges {
|
|
node {
|
|
id
|
|
name
|
|
slug
|
|
values {
|
|
id
|
|
name
|
|
slug
|
|
}
|
|
}
|
|
}
|
|
}
|
|
categories(first: 100, filter: { ids: $categories }) {
|
|
edges {
|
|
node {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
}
|
|
collections(first: 100, filter: { ids: $collections }) {
|
|
edges {
|
|
node {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
}
|
|
productTypes(first: 100, filter: { ids: $productTypes }) {
|
|
edges {
|
|
node {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
export const useInitialProductFilterDataQuery = makeQuery<
|
|
InitialProductFilterData,
|
|
InitialProductFilterDataVariables
|
|
>(initialProductFilterDataQuery);
|
|
|
|
const productListQuery = gql`
|
|
${productFragment}
|
|
${attributeValueFragment}
|
|
query ProductList(
|
|
$first: Int
|
|
$after: String
|
|
$last: Int
|
|
$before: String
|
|
$filter: ProductFilterInput
|
|
$sort: ProductOrder
|
|
) {
|
|
products(
|
|
before: $before
|
|
after: $after
|
|
first: $first
|
|
last: $last
|
|
filter: $filter
|
|
sortBy: $sort
|
|
) {
|
|
edges {
|
|
node {
|
|
...ProductFragment
|
|
attributes {
|
|
attribute {
|
|
id
|
|
}
|
|
values {
|
|
...AttributeValueFragment
|
|
}
|
|
}
|
|
}
|
|
}
|
|
pageInfo {
|
|
hasPreviousPage
|
|
hasNextPage
|
|
startCursor
|
|
endCursor
|
|
}
|
|
totalCount
|
|
}
|
|
}
|
|
`;
|
|
export const useProductListQuery = makeQuery<ProductList, ProductListVariables>(
|
|
productListQuery
|
|
);
|
|
|
|
const countAllProductsQuery = gql`
|
|
query CountAllProducts {
|
|
products {
|
|
totalCount
|
|
}
|
|
}
|
|
`;
|
|
export const useCountAllProducts = makeQuery<CountAllProducts, null>(
|
|
countAllProductsQuery
|
|
);
|
|
|
|
const productDetailsQuery = gql`
|
|
${productFragmentDetails}
|
|
${taxTypeFragment}
|
|
query ProductDetails($id: ID!, $channel: String) {
|
|
product(id: $id, channel: $channel) {
|
|
...Product
|
|
}
|
|
taxTypes {
|
|
...TaxTypeFragment
|
|
}
|
|
}
|
|
`;
|
|
export const useProductDetails = makeQuery<
|
|
ProductDetails,
|
|
ProductDetailsVariables
|
|
>(productDetailsQuery);
|
|
|
|
export const useProductDetailsQuery = makeQuery<
|
|
ProductDetails,
|
|
ProductDetailsVariables
|
|
>(productDetailsQuery);
|
|
|
|
const productVariantQuery = gql`
|
|
${fragmentVariant}
|
|
query ProductVariantDetails($id: ID!) {
|
|
productVariant(id: $id) {
|
|
...ProductVariant
|
|
}
|
|
}
|
|
`;
|
|
export const useProductVariantQuery = makeQuery<
|
|
ProductVariantDetails,
|
|
ProductVariantDetailsVariables
|
|
>(productVariantQuery);
|
|
|
|
const productVariantCreateQuery = gql`
|
|
${variantAttributeFragment}
|
|
query ProductVariantCreateData($id: ID!) {
|
|
product(id: $id) {
|
|
id
|
|
images {
|
|
id
|
|
sortOrder
|
|
url
|
|
}
|
|
channelListings {
|
|
channel {
|
|
id
|
|
name
|
|
currencyCode
|
|
}
|
|
}
|
|
name
|
|
productType {
|
|
id
|
|
selectionVariantAttributes: variantAttributes(
|
|
variantSelection: VARIANT_SELECTION
|
|
) {
|
|
...VariantAttributeFragment
|
|
}
|
|
nonSelectionVariantAttributes: variantAttributes(
|
|
variantSelection: NOT_VARIANT_SELECTION
|
|
) {
|
|
...VariantAttributeFragment
|
|
}
|
|
}
|
|
thumbnail {
|
|
url
|
|
}
|
|
variants {
|
|
id
|
|
name
|
|
sku
|
|
images {
|
|
id
|
|
url
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
export const useProductVariantCreateQuery = makeQuery<
|
|
ProductVariantCreateData,
|
|
ProductVariantCreateDataVariables
|
|
>(productVariantCreateQuery);
|
|
|
|
const productImageQuery = gql`
|
|
query ProductImageById($productId: ID!, $imageId: ID!) {
|
|
product(id: $productId) {
|
|
id
|
|
name
|
|
mainImage: imageById(id: $imageId) {
|
|
id
|
|
alt
|
|
url
|
|
}
|
|
images {
|
|
id
|
|
url(size: 48)
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
export const useProductImageQuery = makeQuery<
|
|
ProductImageById,
|
|
ProductImageByIdVariables
|
|
>(productImageQuery);
|
|
|
|
const availableInGridAttributes = gql`
|
|
${pageInfoFragment}
|
|
query GridAttributes($first: Int!, $after: String, $ids: [ID!]!) {
|
|
availableInGrid: attributes(
|
|
first: $first
|
|
after: $after
|
|
filter: {
|
|
availableInGrid: true
|
|
isVariantOnly: false
|
|
type: PRODUCT_TYPE
|
|
}
|
|
) {
|
|
edges {
|
|
node {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
pageInfo {
|
|
...PageInfoFragment
|
|
}
|
|
totalCount
|
|
}
|
|
|
|
grid: attributes(first: 25, filter: { ids: $ids }) {
|
|
edges {
|
|
node {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
export const useAvailableInGridAttributesQuery = makeQuery<
|
|
GridAttributes,
|
|
GridAttributesVariables
|
|
>(availableInGridAttributes);
|
|
|
|
const createMultipleVariantsData = gql`
|
|
${productVariantAttributesFragment}
|
|
${warehouseFragment}
|
|
query CreateMultipleVariantsData($id: ID!) {
|
|
product(id: $id) {
|
|
...ProductVariantAttributesFragment
|
|
}
|
|
warehouses(first: 20) {
|
|
edges {
|
|
node {
|
|
...WarehouseFragment
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
export const useCreateMultipleVariantsData = makeQuery<
|
|
CreateMultipleVariantsData,
|
|
CreateMultipleVariantsDataVariables
|
|
>(createMultipleVariantsData);
|