Add supported units filtering to recipe edit

app/Http/Controllers/RecipeController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Food;
 use App\Models\IngredientAmount;
 use App\Models\Recipe;
 use App\Models\RecipeSeparator;
@@ -84,7 +85,7 @@ class RecipeController extends Controller
         $ingredients = [];
         if ($old = old('ingredients')) {
             foreach ($old['id'] as $key => $ingredient_id) {
-                $ingredients[] = [
+                $ingredients[$key] = [
                     'type' => 'ingredient',
                     'key' => $old['key'][$key],
                     'weight' => $old['weight'][$key],
@@ -96,6 +97,18 @@ class RecipeController extends Controller
                     'detail' => $old['detail'][$key],
                 ];
             }
+
+            // Add supported units for the ingredient.
+            $ingredient = NULL;
+            if ($ingredients[$key]['ingredient_type'] === Food::class) {
+                $ingredient = Food::whereId($ingredients[$key]['ingredient_id'])->first();
+            }
+            elseif ($ingredients[$key]['ingredient_type'] === Recipe::class) {
+                $ingredient = Recipe::whereId($ingredients[$key]['ingredient_id'])->first();
+            }
+            if ($ingredient) {
+                $ingredients[$key]['units_supported'] = $ingredient->units_supported;
+            }
         }
         else {
             foreach ($recipe->ingredientAmounts as $key => $ingredientAmount) {
@@ -105,6 +118,7 @@ class RecipeController extends Controller
                     'weight' => $ingredientAmount->weight,
                     'amount' => $ingredientAmount->amount_formatted,
                     'unit' => $ingredientAmount->unit,
+                    'units_supported' => $ingredientAmount->ingredient->units_supported,
                     'ingredient_id' => $ingredientAmount->ingredient_id,
                     'ingredient_type' => $ingredientAmount->ingredient_type,
                     'ingredient_name' => $ingredientAmount->ingredient->name,
@@ -167,7 +181,7 @@ class RecipeController extends Controller
             ->with('recipe_tags', $recipe_tags)
             ->with('ingredients_list', new Collection([...$ingredients, ...$separators]))
             ->with('steps', $steps)
-            ->with('ingredients_units', Nutrients::units()->toArray());
+            ->with('units_supported', Nutrients::units()->toArray());
     }
 
     /**

resources/views/recipes/partials/ingredient-input.blade.php

@@ -21,9 +21,8 @@
                             :value="$amount ?? null" />
             <x-inputs.select name="ingredients[unit][]"
                              class="block"
-                             :options="$ingredients_units"
+                             :options="$units_supported ?? []"
                              :selectedValue="$unit ?? null">
-                <option value="" selected>Unit</option>
             </x-inputs.select>
             <x-inputs.input name="ingredients[detail][]"
                             type="text"
@@ -41,3 +40,29 @@
         </div>
     </div>
 </div>
+
+@once
+    @push('scripts')
+        <script type="text/javascript">
+            /**
+             * Sets default serving amount and unit on ingredient select.
+             */
+            window.addEventListener('ingredient-picked', (e) => {
+                const entryItem = e.target.closest('.ingredient');
+                const ingredient = e.detail.ingredient;
+                // Restrict unit select list values to supported units.
+                const unitsSelectList = entryItem.querySelector(':scope select[name="ingredients[unit][]"]');
+                for (const [key, option] in unitsSelectList.options) {
+                    unitsSelectList.remove(key);
+                }
+                for (const key in ingredient.units_supported) {
+                    const unit = ingredient.units_supported[key];
+                    const option = document.createElement('option');
+                    option.value = unit.value;
+                    option.text = unit.label;
+                    unitsSelectList.add(option);
+                }
+            });
+        </script>
+    @endpush
+@endonce