Filter out used ingredients in products select (#321)

frontend/apps/ingredients/components/IngredientAddDrawer.tsx

@@ -1,11 +1,15 @@
-import { Text } from '@mantine/core'
-import React, { forwardRef } from 'react'
+import { Alert, Text } from '@mantine/core'
+import React, { forwardRef, useMemo } from 'react'
 
 import { Button } from '../../../components/Button'
 import Drawer from '../../../components/Drawer'
 import Form from '../../../components/Form'
 import { useForm } from '../../../hooks/forms'
-import { type IngredientCreateForm, type ProductRecord } from '../../../types'
+import {
+  type RecipeIngredientRecord,
+  type IngredientCreateForm,
+  type ProductRecord,
+} from '../../../types'
 import { urls } from '../../urls'
 
 interface ProductOptionProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -35,18 +39,35 @@ ProductOption.displayName = 'ProductOption'
 interface IngredientAddDrawerProps {
   opened: boolean
   products: ProductRecord[]
+  ingredients: RecipeIngredientRecord[]
   onClose: () => void
   refetch: () => void
 }
 
-function IngredientAddDrawer({ opened, products, onClose, refetch }: IngredientAddDrawerProps) {
+function IngredientAddDrawer({
+  opened,
+  products,
+  ingredients,
+  onClose,
+  refetch,
+}: IngredientAddDrawerProps) {
   const form = useForm<IngredientCreateForm>({ key: 'IngredientCreateForm' })
-  const productsOptions = products.map((product) => ({
-    image: product.thumbnailUrl,
-    label: product.fullName,
-    value: product.id.toString(),
-    description: `${product.displayPrice}`,
-  }))
+  const productsOptions = useMemo(
+    () =>
+      products
+        // Filter out products already assigned other ingredients.
+        .filter(
+          (product) =>
+            !ingredients.flatMap((ingredient) => ingredient.product.id).includes(product.id)
+        )
+        .map((product) => ({
+          image: product.thumbnailUrl,
+          label: product.fullName,
+          value: product.id.toString(),
+          description: `${product.displayPrice}`,
+        })),
+    [products, ingredients]
+  )
 
   const close = () => {
     onClose()
@@ -80,10 +101,17 @@ function IngredientAddDrawer({ opened, products, onClose, refetch }: IngredientA
       }
     >
       <div className="space-y-5">
+        {!productsOptions.length && (
+          <Alert color="blue">There are no products available to be assigned as ingredients.</Alert>
+        )}
         <Form<IngredientCreateForm>
           {...form}
           elementsOptions={{
-            product: { options: productsOptions || [], itemComponent: ProductOption },
+            product: {
+              options: productsOptions || [],
+              itemComponent: ProductOption,
+              disabled: !productsOptions.length,
+            },
           }}
         />
       </div>

frontend/apps/ingredients/overview.tsx

@@ -79,6 +79,7 @@ function IngredientsOverviewInner({ results, refetch }: IngredientsOverviewInner
       <IngredientAddDrawer
         opened={addDrawerOpened}
         products={products.data || []}
+        ingredients={ingredients.data || []}
         onClose={addDrawerClose}
         refetch={refetch}
       />

frontend/components/Form/index.tsx

@@ -353,10 +353,7 @@ function Form<T extends object>({
                       elementKey: key as K,
                       element: element,
                       options: options,
-                      placeholder: optionsForElem.placeholder,
-                      helpText: optionsForElem.helpText,
-                      searchable: optionsForElem.searchable,
-                      itemComponent: optionsForElem.itemComponent,
+                      ...optionsForElem,
                     })}
                     {optionsForElem.afterSlot}
                   </div>

frontend/components/Form/types.ts

@@ -11,6 +11,7 @@ export interface FormElementOptionsObj {
   placeholder?: string
   accessorKey?: string
   searchable?: boolean
+  disabled?: boolean
   itemComponent?: ForwardRefExoticComponent<any>
 }