feat: enforce sku selection page to hide already selected items

commercelayer · Feb 28, 2024 · 4e08529 · 4e08529
1 parent 84644d0
commit 4e08529
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 34 deletions.
diff --git a/packages/app/src/components/SkuListForm/SkuListForm.tsx b/packages/app/src/components/SkuListForm/SkuListForm.tsx
@@ -63,14 +63,13 @@ export function SkuListForm({
     return watchedFormManual ? 0 : 1
   }, [watchedFormManual])
 
-  // const selectedItemsCodes = useMemo(() => {
-  //   const excludedCodes = [] as string[]
-  //   watchedFormItems?.forEach((sku) => {
-  //     excludedCodes.push(sku.sku_code)
-  //   })
-  //   return excludedCodes.join(',') ?? ''
-  // }, [watchedFormItems])
-  // console.log(selectedItemsCodes)
+  const selectedItemsCodes = useMemo(() => {
+    const excludedCodes = [] as string[]
+    watchedFormItems?.forEach((sku) => {
+      excludedCodes.push(sku.sku_code)
+    })
+    return excludedCodes
+  }, [watchedFormItems])
 
   useEffect(() => {
     if (resource != null) {
@@ -164,7 +163,7 @@ export function SkuListForm({
                     padding='4'
                     fullWidth
                     onClick={() => {
-                      showAddItemOverlay('')
+                      showAddItemOverlay(selectedItemsCodes)
                     }}
                   />
                 </Spacer>

diff --git a/packages/app/src/hooks/useAddItemOverlay.tsx b/packages/app/src/hooks/useAddItemOverlay.tsx
@@ -12,36 +12,54 @@ import { useState } from 'react'
 import { navigate, useSearch } from 'wouter/use-browser-location'
 
 interface OverlayHook {
-  show: (excludedIds?: string) => void
+  show: (excludedCodes?: string[]) => void
   Overlay: React.FC<{ onConfirm: (resource: Sku) => void }>
 }
 
 export function useAddItemOverlay(): OverlayHook {
   const { Overlay: OverlayElement, open, close } = useOverlay()
-  const [excludedIds, setExcludedIds] = useState<string>('')
-
-  const instructions: FiltersInstructions = [
-    {
-      label: 'Search',
-      type: 'textSearch',
-      sdk: {
-        predicate: ['name', 'code'].join('_or_') + '_cont'
-      },
-      render: {
-        component: 'searchBar'
-      }
-    }
-  ]
+  const [excludedCodes, setExcludedCodes] = useState<string[]>([])
 
   return {
-    show: (excludedIds) => {
-      console.log(excludedIds)
-      if (excludedIds != null) {
-        setExcludedIds(excludedIds)
+    show: (excludedCodes) => {
+      if (excludedCodes != null) {
+        setExcludedCodes(excludedCodes)
       }
       open()
     },
     Overlay: ({ onConfirm }) => {
+      // filters: { code_not_in: excludedCodes }
+
+      const instructions: FiltersInstructions = [
+        {
+          label: 'Already selected items',
+          type: 'options',
+          sdk: {
+            predicate: 'code_not_in',
+            defaultOptions: excludedCodes
+          },
+          render: {
+            component: 'inputToggleButton',
+            props: {
+              mode: 'single',
+              options: excludedCodes.map((code) => {
+                return { value: code, label: code }
+              })
+            }
+          }
+        },
+        {
+          label: 'Search',
+          type: 'textSearch',
+          sdk: {
+            predicate: ['name', 'code'].join('_or_') + '_cont'
+          },
+          render: {
+            component: 'searchBar'
+          }
+        }
+      ]
+
       const queryString = useSearch()
       const { SearchWithNav, FilteredList, hasActiveFilter } =
         useResourceFilters({
@@ -89,9 +107,6 @@ export function useAddItemOverlay(): OverlayHook {
             <Card gap='none'>
               <FilteredList
                 type='skus'
-                query={{
-                  filters: { id_eq: excludedIds }
-                }}
                 ItemTemplate={(props) => (
                   <ListItemSku
                     onSelect={(resource) => {

diff --git a/packages/app/src/hooks/useUpdateSkuList.tsx b/packages/app/src/hooks/useUpdateSkuList.tsx
@@ -44,7 +44,6 @@ export function useUpdateSkuList(): UpdateSkuListHook {
                   id: itemNeedsUpdate.id,
                   quantity: item.quantity
                 })
-                console.log('updated sku list item', item)
               }
               const itemIsAlreadyExisting = updatedSkuList.sku_list_items?.find(
                 (skuListItem) => skuListItem.sku_code === item.sku_code
@@ -57,7 +56,6 @@ export function useUpdateSkuList(): UpdateSkuListHook {
                   sdkClient
                 )
                 await sdkClient.sku_list_items.create(skuListItem)
-                console.log('created sku list item', skuListItem)
               }
             })
           )
@@ -70,7 +68,6 @@ export function useUpdateSkuList(): UpdateSkuListHook {
                 )
                 if (itemIsInNewListItems == null) {
                   await sdkClient.sku_list_items.delete(oldItem.id)
-                  console.log('deleted sku list item', oldItem.id)
                 }
               })
             )