Add re-ordering support to recipe ingredients and steps

app/Models/Traits/HasIngredients.php

@@ -23,7 +23,7 @@ trait HasIngredients
      * Get all of the ingredients.
      */
     public function ingredientAmounts(): MorphMany {
-        return $this->morphMany(IngredientAmount::class, 'parent');
+        return $this->morphMany(IngredientAmount::class, 'parent')->orderBy('weight');
     }
 
     /**

package-lock.json

@@ -1079,6 +1079,11 @@
             "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
             "dev": true
         },
+        "@shopify/draggable": {
+            "version": "1.0.0-beta.8",
+            "resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.8.tgz",
+            "integrity": "sha512-9IeBPQM93Ad4qFKUopwuTClzoST/1OId4MaSd/8FB5ScCL2tl25UaOGNR8E2hjiL7xK4LN5+I1Ews6amS7YAiA=="
+        },
         "@tailwindcss/forms": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",

package.json

@@ -23,6 +23,7 @@
         "vue-template-compiler": "^2.6.12"
     },
     "dependencies": {
+        "@shopify/draggable": "^1.0.0-beta.8",
         "alpine-magic-helpers": "^0.5.1"
     }
 }

public/mix-manifest.json

@@ -1,4 +1,5 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/recipes/edit.js": "/js/recipes/edit.js"
 }

resources/js/recipes/edit.js

@@ -0,0 +1 @@
+window.Draggable = require('@shopify/draggable');

resources/views/recipes/edit.blade.php

@@ -72,7 +72,7 @@
 
                         <!-- Ingredients -->
                         <h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
-                        <div x-data="{ ingredients: 1 }" class="space-y-4">
+                        <div x-data="{ ingredients: 1 }" class="ingredients space-y-4">
                             @foreach($ingredients as $ingredient)
                                 @include('recipes.partials.ingredient-input', $ingredient)
                             @endforeach
@@ -88,7 +88,7 @@
 
                         <!-- Steps -->
                         <h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
-                        <div x-data="{ steps: 0 }">
+                        <div x-data="{ steps: 0 }" class="steps">
                             @foreach($steps as $step)
                                 @include('recipes.partials.step-input', $step)
                             @endforeach
@@ -112,4 +112,29 @@
             </div>
         </div>
     </div>
+
+    @once
+        @push('scripts')
+            <script src="{{ asset('js/recipes/edit.js') }}"></script>
+            <script type="text/javascript">
+                new Draggable.Sortable(document.querySelector('.ingredients'), {
+                    draggable: '.ingredient',
+                    handle: '.draggable-handle',
+                    mirror: {
+                        appendTo: '.ingredients',
+                        constrainDimensions: true,
+                    },
+                })
+
+                new Draggable.Sortable(document.querySelector('.steps'), {
+                    draggable: '.step',
+                    handle: '.draggable-handle',
+                    mirror: {
+                        appendTo: '.steps',
+                        constrainDimensions: true,
+                    },
+                })
+            </script>
+        @endpush
+    @endonce
 </x-app-layout>

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

@@ -1,7 +1,12 @@
-<div>
+<div class="ingredient">
     <x-inputs.input type="hidden" name="ingredients[original_key][]" :value="$original_key ?? null" />
     <div class="flex items-center space-x-2">
         <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
+            <div class="draggable-handle self-center text-gray-500 bg-gray-100 w-full md:w-auto p-2 cursor-move">
+                <svg class="h-6 w-6 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+                </svg>
+            </div>
             <div class="w-full">
                 <x-ingredient-picker :default-id="$ingredient_id ?? null"
                                      :default-type="$ingredient_type ?? null"

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

@@ -1,10 +1,16 @@
-<div class="flex flex-row space-x-4 mb-4">
+<div class="step">
     <x-inputs.input type="hidden" name="steps[original_key][]" :value="$original_key ?? null" />
-    <div class="text-3xl text-gray-400 text-center">#</div>
+    <div class="flex flex-row mb-4 space-x-4">
-    <x-inputs.textarea class="block mt-1 w-full" name="steps[step][]" :value="$step_default ?? null" />
+        <div class="draggable-handle self-center text-gray-500 bg-gray-100 p-2 cursor-move">
-    <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
+            <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-        <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
-            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
-        </svg>
+        </div>
-    </x-inputs.icon-button>
+        <x-inputs.textarea class="block mt-1 w-full" name="steps[step][]" :value="$step_default ?? null" />
+        <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
+            <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+        </x-inputs.icon-button>
+    </div>
 </div>

webpack.mix.js

@@ -11,8 +11,11 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
+mix
-    require('postcss-import'),
+    .js('resources/js/app.js', 'public/js')
-    require('tailwindcss'),
+    .js('resources/js/recipes/edit.js', 'public/js/recipes')
-    require('autoprefixer'),
+    .postCss('resources/css/app.css', 'public/css', [
-]);
+        require('postcss-import'),
+        require('tailwindcss'),
+        require('autoprefixer'),
+    ]);