ekm-ui 0.3.74 → 0.3.78

package/src/product-picker/product-drawer.tsx

@@ -1,47 +1,54 @@
 // @ts-nocheck
-import { useEffect, useRef, useState, useReducer, useImperativeHandle, forwardRef } from 'react'
-import { Drawer } from '../drawer'
-import { Button } from '../button'
-import { Search} from '../search/search'
-import { TableResultBlock } from '../table-result-block'
-import { HiClipboardList } from 'react-icons/hi'
-import { Listing } from './product-listing'
-import PropTypes from 'prop-types'
-import pluralize from 'pluralize'
+import pluralize from "pluralize";
+import PropTypes from "prop-types";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+import { HiClipboardList } from "react-icons/hi";
+import { Button } from "../button";
+import { Drawer } from "../drawer";
+import { Search } from "../search/search";
+import { TableResultBlock } from "../table-result-block";
+import { Listing } from "./product-listing";
 
 const Status = Object.freeze({
-  EMPTY: 'EMPTY',
-  SEARCH_LOADING: 'SEARCH-LOADING',
-  LOADING: 'LOADING',
-  LOADED: 'LOADED',
-  SELECTED: 'SELECTED',
-  SEARCH_RESULTS: 'SEARCH-RESULTS',
-  SEARCH_EMPTY: 'SEARCH-EMPTY',
-})
+  EMPTY: "EMPTY",
+  SEARCH_LOADING: "SEARCH-LOADING",
+  LOADING: "LOADING",
+  LOADED: "LOADED",
+  SELECTED: "SELECTED",
+  SEARCH_RESULTS: "SEARCH-RESULTS",
+  SEARCH_EMPTY: "SEARCH-EMPTY",
+});
 
 const searchCategories = [
   {
-    display: 'Name',
-    value: 'NME',
+    display: "Name",
+    value: "NME",
   },
   {
-    display: 'Category',
-    value: 'CAT',
+    display: "Category",
+    value: "CAT",
   },
-]
+];
 
 const initialState = Object.freeze({
   mode: Status.LOADING,
-  listSize: 'h-5/6',
-  listBorder: '',
+  listSize: "h-5/6",
+  listBorder: "",
   searchDisabled: false,
-})
+});
 
 function calculateSelectedProducts(obj) {
   const mutatedOriginalArray = [...obj.orig].filter((x) => {
-    return !obj.remove.includes(x)
-  })
-  return [...mutatedOriginalArray, ...obj.add]
+    return !obj.remove.includes(x);
+  });
+  return [...mutatedOriginalArray, ...obj.add];
 }
 
 function ProductPickerReducer(state, action) {
@@ -49,37 +56,42 @@ function ProductPickerReducer(state, action) {
     case Status.EMPTY:
       return {
         mode: Status.EMPTY,
-        listSize: 'h-5/6',
-        listBorder: '',
+        listSize: "h-5/6",
+        listBorder: "",
         searchDisabled: true,
-      }
+      };
     case Status.LOADING:
-      return initialState
+      return initialState;
     case Status.LOADED:
       return {
         mode: Status.LOADED,
-        listSize: 'h-[87.333333%]',
-        listBorder: 'border',
+        listSize: "h-[87.333333%]",
+        listBorder: "border",
         searchDisabled: false,
-      }
+      };
     case Status.SELECTED:
-      return { mode: Status.SELECTED, listSize: 'h-[80%]', listBorder: 'border', searchDisabled: false }
+      return {
+        mode: Status.SELECTED,
+        listSize: "h-[80%]",
+        listBorder: "border",
+        searchDisabled: false,
+      };
     case Status.SEARCH_RESULTS:
       return {
         mode: Status.SEARCH_RESULTS,
-        listSize: 'h-5/6',
-        listBorder: 'border',
+        listSize: "h-5/6",
+        listBorder: "border",
         searchDisabled: false,
-      }
+      };
     case Status.SEARCH_EMPTY:
       return {
         mode: Status.SEARCH_EMPTY,
-        listSize: 'h-5/6',
-        listBorder: '',
+        listSize: "h-5/6",
+        listBorder: "",
         searchDisabled: false,
-      }
+      };
     default:
-      throw new Error('Unknown file picker state: ' + action.page ?? '')
+      throw new Error("Unknown file picker state: " + action.page ?? "");
   }
 }
 
@@ -90,153 +102,201 @@ function ProductPickerReducer(state, action) {
  * be handled by the parent/calling component eg: fetching the products and passing them to this component.
  */
 
-export const ProductPicker = forwardRef(function ProductPicker({ show, preSelected = [], onClose, requestCallback, callback }, ref) {
-  const searchFieldRef = useRef()
-  const isViewableRef = useRef(false)
-  const [state, dispatch] = useReducer(ProductPickerReducer, { mode: Status.LOADING, footerBorder: 'border-t' })
-  const [totalPages, setTotalPages] = useState(0)
-  const currentPageRef = useRef(1)
-  const listAttributeRef = useRef({ pages: 0, totalEntries: 0 })
-  const [fetchData, setFetchData] = useState(false)
-  const [search, setSearch] = useState({ text: '', category: { display: 'Name', value: 'NME' } })
-  const [products, setProducts] = useState([])
+export const ProductPicker = forwardRef(function ProductPicker(
+  { show, preSelected = [], onClose, requestCallback, callback },
+  ref
+) {
+  const searchFieldRef = useRef();
+  const isViewableRef = useRef(false);
+  const [state, dispatch] = useReducer(ProductPickerReducer, {
+    mode: Status.LOADING,
+    footerBorder: "border-t",
+  });
+  const [totalPages, setTotalPages] = useState(0);
+  const currentPageRef = useRef(1);
+  const listAttributeRef = useRef({ pages: 0, totalEntries: 0 });
+  const [fetchData, setFetchData] = useState(false);
+  const [search, setSearch] = useState({
+    text: "",
+    category: { display: "Name", value: "NME" },
+  });
+  const [products, setProducts] = useState([]);
   // Selected State
-  const [session, setSession] = useState({ orig: [], add: [], remove: [], isAll: false }) // handles DEFAULT selection sessions
+  const [session, setSession] = useState({
+    orig: [],
+    add: [],
+    remove: [],
+    isAll: false,
+  }); // handles DEFAULT selection sessions
 
   useEffect(() => {
     // Workaround to ensure the drawer is cleared when it is first opened as its always on the DOM!
     if (show) {
-      dispatch({ type: Status.LOADING })
+      dispatch({ type: Status.LOADING });
       //  setSelected([])
-      listAttributeRef.current = { pages: 0, totalEntries: 0 }
-      clearState()
-      getProducts(1)
-      setSession({ ...session, orig: preSelected })
-      isViewableRef.current = true
+      listAttributeRef.current = { pages: 0, totalEntries: 0 };
+      clearState();
+      getProducts(1);
+      setSession({ ...session, orig: preSelected });
+      isViewableRef.current = true;
     }
-  }, [show])
+  }, [show]);
 
   useEffect(() => {
     if (show && state.mode === isViewableRef.current) {
-      currentPageRef.current = 1
-      getProducts()
+      currentPageRef.current = 1;
+      getProducts();
     }
-  }, [search.text, search.category.display])
+  }, [search.text, search.category.display]);
 
   const clearState = () => {
-    setProducts([])
-    setSession({ orig: [], add: [], remove: [], isAll: false })
-    setFetchData(false)
-  }
+    setProducts([]);
+    setSession({ orig: [], add: [], remove: [], isAll: false });
+    setFetchData(false);
+  };
 
   const getProducts = (cp = 0) => {
-    let page = cp === 0 ? currentPageRef.current : cp
+    let page = cp === 0 ? currentPageRef.current : cp;
     requestCallback({
       SearchText: search.text,
       PageSize: 11,
       Page: page,
       SearchType: search.category.display,
-    })
-  }
+    });
+  };
 
   useImperativeHandle(ref, () => ({
     responseHandler: (response) => {
       try {
-        if (search.text?.length > 0) dispatch({ type: Status.SEARCH_RESULTS })
+        if (search.text?.length > 0) dispatch({ type: Status.SEARCH_RESULTS });
         if (response.Result.Data.length > 0 && currentPageRef.current > 1) {
-          setProducts((products) => [...products, ...response.Result.Data])
+          setProducts((products) => [...products, ...response.Result.Data]);
         } else {
-          setProducts(response.Result.Data)
+          setProducts(response.Result.Data);
         }
 
-        listAttributeRef.current = { pages: response.Result.NumberOfPages, totalEntries: response.Result.Total }
-        setTotalPages(response.Result.NumberOfPages)
+        listAttributeRef.current = {
+          pages: response.Result.NumberOfPages,
+          totalEntries: response.Result.Total,
+        };
+        setTotalPages(response.Result.NumberOfPages);
 
         if (search.text?.length > 0) {
-          dispatch({ type: response.Result.Data.length > 0 ? Status.SEARCH_RESULTS : Status.SEARCH_EMPTY })
+          dispatch({
+            type:
+              response.Result.Data.length > 0
+                ? Status.SEARCH_RESULTS
+                : Status.SEARCH_EMPTY,
+          });
         } else {
-          dispatch({ type: response.Result.Data.length > 0 ? Status.LOADED : Status.EMPTY })
+          dispatch({
+            type:
+              response.Result.Data.length > 0 ? Status.LOADED : Status.EMPTY,
+          });
         }
-        if (session.orig.length + session.add.length - session.remove.length > 0) dispatch({ type: Status.SELECTED })
-        setFetchData(false)
+        if (
+          session.orig.length + session.add.length - session.remove.length >
+          0
+        )
+          dispatch({ type: Status.SELECTED });
+        setFetchData(false);
       } catch (error) {
-        console.error('Error fetching products', error)
-        dispatch({ type: search.text?.length === 0 ? Status.SEARCH_EMPTY : Status.EMPTY })
+        console.error("Error fetching products", error);
+        dispatch({
+          type: search.text?.length === 0 ? Status.SEARCH_EMPTY : Status.EMPTY,
+        });
       }
     },
-  }))
+  }));
 
   const handleSearchRequest = (searchTerm) => {
-    const text = searchTerm.text ?? ''
-    const s = search.text ?? ''
-    setSearch(searchTerm)
-    if ((s.length > 0 && text.length === 0) || (s.length === 0 && text.length > 0 && state.mode !== Status.LOADING))
-      dispatch({ type: Status.LOADING })
-  }
+    const text = searchTerm.text ?? "";
+    const s = search.text ?? "";
+    setSearch(searchTerm);
+    if (
+      (s.length > 0 && text.length === 0) ||
+      (s.length === 0 && text.length > 0 && state.mode !== Status.LOADING)
+    )
+      dispatch({ type: Status.LOADING });
+  };
 
   const handleProductSelection = () => {
-    callback(session)
-    handleClose()
-  }
+    callback(session);
+    handleClose();
+  };
 
   const handleClose = () => {
-    clearState()
-    isViewableRef.current = false
-    onClose()
-  }
+    clearState();
+    isViewableRef.current = false;
+    onClose();
+  };
 
   const handleListActions = (action) => {
     switch (action.type) {
-      case 'FETCH_DATA':
-        setFetchData(action.payload)
-        if (currentPageRef.current < listAttributeRef.current.pages && !fetchData) {
+      case "FETCH_DATA":
+        setFetchData(action.payload);
+        if (
+          currentPageRef.current < listAttributeRef.current.pages &&
+          !fetchData
+        ) {
           // pass in the current page + 1 to get the next page of data then change state as the state is not updated immediately
-          setFetchData(true)
-          currentPageRef.current = currentPageRef.current + 1
-          getProducts()
+          setFetchData(true);
+          currentPageRef.current = currentPageRef.current + 1;
+          getProducts();
         }
-        break
-      case 'SELECTION':
-        const added = session.add.find((x) => x === action.payload) != null
-        const removed = session.remove.find((x) => x === action.payload) != null
-        const preExisted = session.orig.find((x) => x === action.payload) != null
-        let rem = [...session.remove]
-        let add = [...session.add]
+        break;
+      case "SELECTION":
+        const added = session.add.find((x) => x === action.payload) != null;
+        const removed =
+          session.remove.find((x) => x === action.payload) != null;
+        const preExisted =
+          session.orig.find((x) => x === action.payload) != null;
+        let rem = [...session.remove];
+        let add = [...session.add];
         if (preExisted && !removed) {
-          rem.push(action.payload)
+          rem.push(action.payload);
         } else if (preExisted && removed) {
-          rem = [...rem].filter((x) => x !== action.payload)
+          rem = [...rem].filter((x) => x !== action.payload);
         } else if (!preExisted && !added) {
-          add.push(action.payload)
+          add.push(action.payload);
         } else if (!preExisted && added) {
-          add = [...add].filter((x) => x !== action.payload)
+          add = [...add].filter((x) => x !== action.payload);
         }
 
-        setSession({ ...session, add: add, remove: rem })
-        if (session.orig.length + add.length - rem.length > 0) dispatch({ type: Status.SELECTED })
-        break
-      case 'DESELECT_ALL':
-        setSession({ ...session, orig: [], add: [], remove: [] })
-        dispatch({ type: Status.LOADED })
-        break
+        setSession({ ...session, add: add, remove: rem });
+        if (session.orig.length + add.length - rem.length > 0)
+          dispatch({ type: Status.SELECTED });
+        break;
+      case "DESELECT_ALL":
+        setSession({ ...session, orig: [], add: [], remove: [] });
+        dispatch({ type: Status.LOADED });
+        break;
       default:
-        break
+        break;
     }
-  }
+  };
 
   const renderList = () => {
     switch (state.mode) {
       case Status.EMPTY:
         return (
           <TableResultBlock
-            icon={<HiClipboardList className="mb-4 h-16 w-16 text-gray-500 dark:text-gray-400" />}
+            icon={
+              <HiClipboardList className="mb-4 h-16 w-16 text-gray-500 dark:text-gray-400" />
+            }
             title="You Have No Products"
             message="Your products will appear here"
             spinner={false}
           />
-        )
+        );
       case Status.LOADING:
-        return <TableResultBlock title="Loading Products" message="Please wait this may take a few minutes" spinner />
+        return (
+          <TableResultBlock
+            title="Loading Products"
+            message="Please wait this may take a few minutes"
+            spinner
+          />
+        );
       case Status.SEARCH_RESULTS:
       case Status.SELECTED:
       case Status.LOADED:
@@ -250,29 +310,37 @@ export const ProductPicker = forwardRef(function ProductPicker({ show, preSelect
             pages={totalPages}
             callback={handleListActions}
           />
-        )
+        );
       case Status.SEARCH_EMPTY:
         return (
           <TableResultBlock
-            icon={<HiClipboardList className="mb-4 h-16 w-16 text-gray-500 dark:text-gray-400" />}
+            icon={
+              <HiClipboardList className="mb-4 h-16 w-16 text-gray-500 dark:text-gray-400" />
+            }
             title="No Products Found"
             message="No products were found matching your search"
           />
-        )
+        );
 
       default:
-        break
+        break;
     }
-  }
+  };
 
   const renderContent = () => (
     <>
       {session.orig.length + session.add.length - session.remove.length > 0 && (
         <div className="mb-4 rounded-md border border-orange-200 bg-yellow-50 p-4">
           <p className="text-center text-sm text-yellow-800">
-            {`${pluralize('product', session.orig.length + session.add.length - session.remove.length, true)} selected.`}
+            {`${pluralize(
+              "product",
+              session.orig.length + session.add.length - session.remove.length,
+              true
+            )} selected.`}
             <span
-              onClick={() => handleListActions({ type: 'DESELECT_ALL', payload: null })}
+              onClick={() =>
+                handleListActions({ type: "DESELECT_ALL", payload: null })
+              }
               className="cursor-pointer text-primary-600 hover:underline"
             >{` Clear Selection.`}</span>
           </p>
@@ -286,29 +354,43 @@ export const ProductPicker = forwardRef(function ProductPicker({ show, preSelect
         disabled={state.searchDisabled}
         callback={handleSearchRequest}
       />
-      <div className="mt-4 mb-4">
-        {(state.mode === Status.SEARCH_RESULTS || state.mode === Status.SEARCH_EMPTY) && search.text.length > 0 && (
-          <span className="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{`Showing results for..."${search.text}"`}</span>
-        )}
+      <div className="mb-4 mt-4">
+        {(state.mode === Status.SEARCH_RESULTS ||
+          state.mode === Status.SEARCH_EMPTY) &&
+          search.text.length > 0 && (
+            <span className="ms-1 text-sm font-medium text-gray-500 dark:text-gray-400 md:ms-2">{`Showing results for..."${search.text}"`}</span>
+          )}
       </div>
       {renderList()}
     </>
-  )
+  );
 
   return (
-    <Drawer show={show} onClose={handleClose} title="File Picker" onHide={() => {}}>
+    <Drawer
+      show={show}
+      onClose={handleClose}
+      title="File Picker"
+      onHide={() => {}}
+    >
       <div className="h-full">{show && renderContent()}</div>
-      <div className={`grid grid-cols-2 grid-flow-col gap-4 bottom-0 mt-0 pt-2 bg-white  dark:border-gray-600`} style={{ marginTop: '-50px' }}>
+      <div
+        className={`bottom-0 mt-0 grid grid-flow-col grid-cols-2 gap-4 bg-white pt-2  dark:border-gray-600`}
+        style={{ marginTop: "-50px" }}
+      >
         <Button color="light" onClick={handleClose}>
           Close
         </Button>
-        <Button color="success" onClick={handleProductSelection} disabled={products.length === 0}>
+        <Button
+          color="success"
+          onClick={handleProductSelection}
+          disabled={products.length === 0}
+        >
           Add Products
         </Button>
       </div>
     </Drawer>
-  )
-})
+  );
+});
 
 ProductPicker.propTypes = {
   /** Show the drawer */
@@ -319,6 +401,6 @@ ProductPicker.propTypes = {
   onClose: PropTypes.func.isRequired,
   /** Callback to return the selected products {orig - preselected, add - newly added, remove -items removed from pre-selected} */
   callback: PropTypes.func.isRequired,
-}
+};
 
-ProductPicker.displayName = 'ProductPicker'
+ProductPicker.displayName = "ProductPicker";