fix: draft

Elastic-Suite · Dec 15, 2023 · 6d8d4ca · 6d8d4ca
1 parent ebd1bdb
commit 6d8d4ca
Show file tree

Hide file tree

Showing 14 changed files with 288 additions and 153 deletions.
diff --git a/packages/components/src/components/stateful/ProductPreview/MerchandiseBar.tsx b/packages/components/src/components/stateful/ProductPreview/MerchandiseBar.tsx
@@ -1,25 +1,24 @@
 import React from 'react'
 import { Grid, Paper } from '@mui/material'
 import { useTranslation } from 'next-i18next'
-import { CustomNoTopProduct, SearchResult, SearchTitle } from "../Merchandize/SearchBar/Search.styled";
+import {
+  CustomNoTopProduct,
+  SearchResult,
+  SearchTitle,
+} from '../Merchandize/SearchBar/Search.styled'
 
 interface IProps {
   nbResults: number
   nbTopProducts: number
 }
 
 export default function MerchandiseBar(props: IProps): JSX.Element {
-  const {
-    nbResults ,
-    nbTopProducts,
-  } = props
-
+  const { nbResults, nbTopProducts } = props
+  console.log('nbResults', nbResults, 'nbTopProducts', nbTopProducts)
   const { t } = useTranslation('categories')
 
-  // functin setNbResultsValue():
-
   const value = {
-    value:nbResults + nbTopProducts,
+    value: nbResults + nbTopProducts,
     result: t('searchBar.results', { count: nbResults }),
   }
 
@@ -34,7 +33,7 @@ export default function MerchandiseBar(props: IProps): JSX.Element {
   const hasProduct = Boolean(nbTopProducts + nbResults)
 
   return (
-    <Paper variant="outlined" sx={{display: 'flex'}}>
+    <Paper variant="outlined" sx={{ display: 'flex' }}>
       <Grid container justifyContent="space-between" sx={{ padding: '16px' }}>
         <Grid container direction="column" sx={{ width: '100%', gap: '4px' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -47,8 +46,7 @@ export default function MerchandiseBar(props: IProps): JSX.Element {
                   </CustomNoTopProduct>
                 ) : (
                   <>
-                    {result}{' '}
-                    {` (${resultPinned})`}
+                    {result} {` (${resultPinned})`}
                   </>
                 )}
               </SearchResult>

diff --git a/packages/components/src/components/stateful/ProductPreview/ProductsCategoryPreview.tsx b/packages/components/src/components/stateful/ProductPreview/ProductsCategoryPreview.tsx
@@ -1,29 +1,39 @@
 import React, { useMemo } from 'react'
 import {
+  IConfigurations,
+  IExplainVariables,
   IGraphqlProductPosition,
-  getProductPosition,
   IProductPositions,
-  getIdFromIri,
   LoadStatus,
-  IConfigurations,
+  getIdFromIri,
+  getProductPosition,
 } from '@elastic-suite/gally-admin-shared'
 
 import { useGraphqlApi } from '../../../hooks'
 import ProductsPreviewTop from './ProductsPreviewTop'
 import ProductsPreviewBottom from './ProductsPreviewBottom'
-import {IExplainVariables} from "../../../pages/admin/analyze/CatalogStructure";
-import {Box} from "@mui/material";
+import { Box } from '@mui/material'
 
 interface IProps {
   variables: IExplainVariables
   configuration: IConfigurations
+  limitationType: string
   onProductsLoaded?: (nbResults: number) => void
   onTopProductsLoaded?: (nbTopProducts: number) => void
 }
 
 function ProductsCategoryPreview(props: IProps): JSX.Element {
   console.log('category')
-  const { variables, configuration, onProductsLoaded, onTopProductsLoaded } = props
+  const {
+    variables,
+    configuration,
+    limitationType,
+    onProductsLoaded,
+    onTopProductsLoaded,
+  } = props
+
+  onProductsLoaded(0)
+  onTopProductsLoaded(0)
 
   const positionVariables = useMemo(
     () => ({
@@ -35,6 +45,7 @@ function ProductsCategoryPreview(props: IProps): JSX.Element {
     [variables]
   )
 
+
   const [productPositions] = useGraphqlApi<IGraphqlProductPosition>(
     getProductPosition,
     positionVariables
@@ -54,7 +65,7 @@ function ProductsCategoryPreview(props: IProps): JSX.Element {
     <>
       {productPositions.status === LoadStatus.SUCCEEDED &&
         topProducts.length > 0 && (
-          <Box sx={{marginBottom: '24px'}}>
+          <Box sx={{ marginBottom: '24px' }}>
             <ProductsPreviewTop
               variables={variables}
               configuration={configuration}
@@ -66,6 +77,7 @@ function ProductsCategoryPreview(props: IProps): JSX.Element {
         <ProductsPreviewBottom
           variables={variables}
           configuration={configuration}
+          limitationType={limitationType}
           topProducts={topProducts}
           onProductsLoaded={onProductsLoaded}
         />

diff --git a/packages/components/src/components/stateful/ProductPreview/ProductsPreviewBottom.tsx b/packages/components/src/components/stateful/ProductPreview/ProductsPreviewBottom.tsx
@@ -1,51 +1,63 @@
 import React, { useMemo, useState } from 'react'
 import {
+  IConfigurations,
+  IExplainVariables,
   IGraphqlSearchProducts,
-  productTableheader,
+  IProductFieldFilterInput,
+  IProductPositions,
   ITableRow,
-  getSearchProductsQuery,
-  defaultRowsPerPageOptions,
+  LoadStatus,
+  cleanExplainVariables,
   defaultPageSize,
-  IConfigurations,
-  IProductPositions,
-  IProductFieldFilterInput,
-  getIdFromIri, LoadStatus,
+  defaultRowsPerPageOptions,
+  getIdFromIri,
+  getSearchProductsQuery,
+  productTableheader,
 } from '@elastic-suite/gally-admin-shared'
 
 import { useGraphqlApi } from '../../../hooks'
 import FieldGuesser from '../FieldGuesser/FieldGuesser'
 import PagerTable from '../../organisms/PagerTable/PagerTable'
-import {IExplainVariables} from "../../../pages/admin/analyze/CatalogStructure";
+import NoAttributes from "../../atoms/noAttributes/NoAttributes";
+import {useTranslation} from "next-i18next";
 
 interface IProps {
   variables: IExplainVariables
   configuration: IConfigurations
   topProducts: IProductPositions
+  limitationType: string
   onProductsLoaded?: (nbResults: number) => void
 }
 
 function ProductsPreviewBottom(props: IProps): JSX.Element {
-  const { variables, configuration, topProducts, onProductsLoaded } = props
+  const {
+    variables,
+    configuration,
+    topProducts,
+    limitationType,
+    onProductsLoaded,
+  } = props
   const [currentPage, setCurrentPage] = useState<number>(1)
   const [rowsPerPage, setRowsPerPage] = useState<number>(defaultPageSize)
+  const { t } = useTranslation('categories')
 
-  // todo déplacer ce bout de code dans une fonction à mettre dans  ProductPreview
   const variablesFormatted = useMemo(() => {
+    const cleanedVariables = cleanExplainVariables(variables, limitationType)
     return {
-      requestType: variables.requestType,
-      localizedCatalog: getIdFromIri(String(variables.localizedCatalog)),
-      currentCategoryId: variables?.category?.id,
-      search: variables?.search,
+      requestType: cleanedVariables.requestType,
+      localizedCatalog: getIdFromIri(String(cleanedVariables.localizedCatalog)),
+      currentCategoryId: cleanedVariables?.category?.id,
+      search: cleanedVariables?.search,
       currentPage,
       pageSize: rowsPerPage,
     }
-  }, [variables, currentPage, rowsPerPage])
+  }, [variables, currentPage, rowsPerPage, limitationType])
 
   const filters: IProductFieldFilterInput[] = []
   if (topProducts.length > 0) {
     filters.push({
       boolFilter: {
-        _not: { id: { in: topProducts.map((product) => product.productId) } },
+        _not: [{ id: { in: topProducts.map((product) => product.productId) } }],
       },
     })
   }
@@ -74,11 +86,10 @@ function ProductsPreviewBottom(props: IProps): JSX.Element {
 
   return (
     <>
-      {tableRows.length > 0 && (
+      {tableRows.length > 0 ?
         <PagerTable
           Field={FieldGuesser}
           count={products.data.products.paginationInfo.totalCount}
-          //todo comprendre ce calcul pas de pagination
           currentPage={
             (currentPage - 1 >= 0 ? currentPage - 1 : currentPage) ?? 0
           }
@@ -93,8 +104,9 @@ function ProductsPreviewBottom(props: IProps): JSX.Element {
             products.data.products.collection as unknown as ITableRow[]
           }
           configuration={configuration}
-        />
-      )}
+        /> :
+        <NoAttributes title={t('noProductSearch')} />
+      }
     </>
   )
 }

diff --git a/packages/components/src/components/stateful/ProductPreview/ProductsPreviewTop.tsx b/packages/components/src/components/stateful/ProductPreview/ProductsPreviewTop.tsx
@@ -1,20 +1,20 @@
 import React, { useMemo } from 'react'
 import {
-  IGraphqlSearchProducts,
-  productTableheader,
-  ITableRow,
-  getSearchProductsQuery,
   IConfigurations,
-  IProductPositions,
+  IExplainVariables,
+  IGraphqlSearchProducts,
   IProductFieldFilterInput,
+  IProductPositions,
+  ITableRow,
   getIdFromIri,
+  getSearchProductsQuery,
+  productTableheader,
   sortProductCollection,
 } from '@elastic-suite/gally-admin-shared'
 
 import { useGraphqlApi } from '../../../hooks'
 import TopProductsTable from '../TopProductsTable/TopProductsTable'
 import FieldGuesser from '../FieldGuesser/FieldGuesser'
-import {IExplainVariables} from "../../../pages/admin/analyze/CatalogStructure";
 
 interface IProps {
   variables: IExplainVariables
@@ -32,29 +32,23 @@ function ProductsPreviewTop(props: IProps): JSX.Element {
     })
   }
 
-  // todo déplacer ce bout de code dans une fonction à mettre dans  ProductPreview
   const variablesFormatted = useMemo(() => {
     return {
       requestType: variables.requestType,
       localizedCatalog: getIdFromIri(String(variables.localizedCatalog)),
       currentCategoryId: variables.category.id,
     }
   }, [variables])
-  // const variablesFormatted = {...variables}
-  // if ('category' in variablesFormatted && variablesFormatted.category?.id) {
-  //     variablesFormatted.categoryId = variablesFormatted.category.id
-  //     delete variablesFormatted.catregory
-  // }
-  // variablesFormatted.localizedCatalog = getIdFromIri(String(variablesFormatted.localizedCatalog))
 
   const [products] = useGraphqlApi<IGraphqlSearchProducts>(
     getSearchProductsQuery(filters),
     variablesFormatted
   )
 
-
-  const tableRows = sortProductCollection(products?.data?.products?.collection ?? [], topProducts) as unknown as ITableRow[]
-    //((products?.data?.products?.collection as unknown as ITableRow[]) ?? []).sort( function() => a.pro)
+  const tableRows = sortProductCollection(
+    products?.data?.products?.collection ?? [],
+    topProducts
+  ) as unknown as ITableRow[]
 
   return (
     <>
@@ -64,7 +58,6 @@ function ProductsPreviewTop(props: IProps): JSX.Element {
           Field={FieldGuesser}
           tableHeaders={productTableheader}
           tableRows={tableRows}
-          // withSelection={withSelection}
           configuration={configuration}
         />
       )}

diff --git a/packages/components/src/components/stateful/ProductPreview/ProductsSearchPreview.tsx b/packages/components/src/components/stateful/ProductPreview/ProductsSearchPreview.tsx
@@ -1,24 +1,26 @@
 import React from 'react'
-import { IConfigurations } from '@elastic-suite/gally-admin-shared'
+import { IConfigurations, IExplainVariables } from '@elastic-suite/gally-admin-shared'
 
 import ProductsPreviewBottom from './ProductsPreviewBottom'
-import {IExplainVariables} from "../../../pages/admin/analyze/CatalogStructure";
 
 interface IProps {
   variables: IExplainVariables
   configuration: IConfigurations
+  limitationType: string
   onProductsLoaded?: (nbResults: number) => void
 }
 
 function ProductsSearchPreview(props: IProps): JSX.Element {
-  const { variables, configuration , onProductsLoaded} = props
+  const { variables, configuration, limitationType, onProductsLoaded } = props
+  onProductsLoaded(0)
 
   return (
     <ProductsPreviewBottom
       variables={variables}
       configuration={configuration}
       topProducts={[]}
       onProductsLoaded={onProductsLoaded}
+      limitationType={limitationType}
     />
   )
 }