@bjsdistribution/dms-client-return 0.0.79 → 0.0.81

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.79",
+  "version": "0.0.81",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/header/route-header/search/SearchType.tsx

@@ -1,14 +1,45 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 //common
 import styled from 'styled-components';
 import { SearchIcon } from '../../../../../assets/icons';
+import { useAtom } from 'jotai';
+import { overviewfiltersReducerAtom } from '../../../header-filters/overViewFilter';
+import { CrossIcon } from '@bjsdistribution/dms-component-library';
 
 const SearchType = () => {
   const [searchText, setSearchText] = useState('');
+  const [debouncedSearchText, setDebouncedSearchText] = useState('');
+  const [, dispatch] = useAtom(overviewfiltersReducerAtom);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value);
   };
 
+  // Debouncing effect
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchText(searchText);
+    }, 1000);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchText]);
+  useEffect(() => {
+    if (debouncedSearchText) {
+      dispatch({
+        type: 'SET_COMP_RETURN_FILTERS',
+        payload: debouncedSearchText,
+      });
+    }
+  }, [debouncedSearchText, dispatch]);
+
+  const handleClear = () => {
+    setSearchText('');
+    dispatch({
+      type: 'CLEAR_SEARCH',
+    });
+  };
+
   return (
     <Search>
       <SearchIcon />
@@ -18,6 +49,11 @@ const SearchType = () => {
         value={searchText}
         onChange={handleInputChange}
       />
+      {searchText && (
+        <ClearButton className="clear" onClick={handleClear}>
+          <CrossIcon />
+        </ClearButton>
+      )}
     </Search>
   );
 };
@@ -29,8 +65,23 @@ const Search = styled.div`
     top: 50%;
     transform: translateY(-50%);
   }
+  .clear {
+    position: absolute;
+    right: 32px;
+    top: 50%;
+  }
+`;
+const ClearButton = styled.button`
+  position: relative;
+  border: none;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  padding: 0 8px;
+  font-size: 14px;
+  &:hover {
+    color: #000;
+  }
 `;
-Search;
 const SearchInput = styled.input`
   border-radius: 20px;
   border: 1px solid #e0e2e7;
@@ -42,5 +93,10 @@ const SearchInput = styled.input`
   gap: 8px;
   align-self: stretch;
   padding-left: 39px;
+  &:focus {
+    outline: none;
+    border-color: gray;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 `;
 export default SearchType;

package/src/components/order-daily-overview/header-filters/overViewFilter.ts

@@ -9,6 +9,7 @@ interface Filter {
   field: string;
   op: string;
   value: any;
+  join?: any;
 }
 
 interface Pagination {
@@ -20,26 +21,48 @@ interface FilterState {
   'x-filters': Filter[];
   'x-pagination': Pagination;
 }
-// let todayDate = new Date();
 const initialState: FilterState = {
-  'x-filters': [
-    // {
-    //   field: 'action_date',
-    //   op: '>=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
-    // },
-    // {
-    //   field: 'action_date',
-    //   op: '<=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
-    // },
-    // { field: 'status', op: 'count', value: '' },
-  ],
+  'x-filters': [],
   'x-pagination': { page: 1, per_page: 50 },
 };
 
 const filterReducer = (state: FilterState, action: any): FilterState => {
   switch (action.type) {
+    case 'SET_COMP_RETURN_FILTERS':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(
+            f => f.field !== 'customer_name' && f.field !== 'trading_as'
+          ),
+          {
+            field: 'customer_name',
+            op: 'like',
+            value: `%${action.payload}%`,
+            join: 'or',
+          },
+          {
+            field: 'trading_as',
+            op: 'like',
+            value: `%${action.payload}%`,
+            join: 'or',
+          },
+        ],
+        'x-pagination': { ...state['x-pagination'], page: 1 },
+      };
+
+    case 'CLEAR_SEARCH':
+      return {
+        ...state,
+        'x-filters': [...initialState['x-filters']],
+        'x-pagination': { ...initialState['x-pagination'], page: 1 },
+      };
+
+    case 'CLEAR_ALL_FILTER':
+      return {
+        ...state,
+      };
+
     case 'SET_PAGE':
       return {
         ...state,

package/src/components/order-daily-overview/index.tsx

@@ -23,7 +23,7 @@ function ReturnMainTable() {
   const [paginationObj, setPaginationObject] = UsePaginationOverviewData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerOverviewPage();
-  const { 'x-pagination': pagination } = state;
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const { page, total } = paginationObj;
   // const [selectedClient] = useTableName();
   const [isScrolled] = useStickyStatus();
@@ -52,6 +52,7 @@ function ReturnMainTable() {
     method: 'GET',
     //@ts-ignore
     pagination: pagination,
+    filters: filters,
   });
 
   useEffect(() => {