Sortable Additional Images

app/Listeners/ManageProductImages.php

@@ -25,10 +25,11 @@ public function __construct()
      */
     public function handle($event)
     {
-        $images = [ $event->data['base_image'] => ['img_type' => 'base'] ];
-        foreach($event->data['additional_images'] ?? [] as $additional_image) {
+        $order = 0;
+        $images = [$event->data['base_image'] => ['img_type' => 'base']];
+        foreach ($event->data['additional_images'] ?? [] as $additional_image) {
             $additional_image != $event->data['base_image'] && (
-                $images[$additional_image] = ['img_type' => 'additional']
+                $images[$additional_image] = ['img_type' => 'additional', 'order' => ++$order]
             );
         }
 

app/Product.php

@@ -114,7 +114,8 @@ public function brand()
     public function images()
     {
         return $this->belongsToMany(Image::class)
-            ->withPivot('img_type')
+            ->withPivot(['img_type', 'order'])
+            ->orderBy('order')
             ->withTimestamps();
     }
 

database/migrations/2024_04_21_153831_add_order_column_to_image_product_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddOrderColumnToImageProductTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('image_product', function (Blueprint $table) {
+            $table->integer('order')->default(0)->after('img_type');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('image_product', function (Blueprint $table) {
+            $table->dropColumn('order');
+        });
+    }
+}

resources/views/admin/products/edit.blade.php

@@ -18,6 +18,7 @@
 
 
 @push('styles')
+<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
 <style>
     .nav-tabs {
         border: 2px solid #ddd;
@@ -251,8 +252,10 @@
 @endpush
 
 @push('scripts')
+<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 <script>
     $(document).ready(function () {
+        $('.additional_images-previews').sortable();
         // $('[name="name"]').keyup(function () {
         //     $($(this).data('target')).val(slugify($(this).val()));
         // });

resources/views/admin/products/form.blade.php

@@ -126,20 +126,20 @@
                             <span>Browse</span>
                         </button>
                     </label>
-                    <div class="additional_images-previews d-flex flex-wrap" style="margin-left: -5px;">
+                    <ul id="sortable" class="additional_images-previews d-flex flex-wrap" style="margin-left: -5px;">
                         @php
                             $ids = old('additional_images', $product->additional_images->pluck('id')->toArray());
                             $srcs = old('additional_images_srcs', $product->additional_images->pluck('src')->toArray());
                         @endphp
                         @foreach($srcs as $src)
-                            <div id="preview-{{$ids[$loop->index]}}" class="additional_images-preview position-relative" style="height: 150px; width: 150px; margin: 5px;">
+                            <li id="preview-{{$ids[$loop->index]}}" class="additional_images-preview position-relative" style="height: 150px; width: 150px; margin: 5px;">
                                 <i class="fa fa-times text-danger position-absolute" style="font-size: large; top: 0; right: 0; background: #ddd; padding: 2px; border-radius: 3px; cursor: pointer;" onclick="this.parentNode.remove()"></i>
                                 <img src="{{ $src }}" alt="Additional Image" data-toggle="modal" data-target="#multi-picker" id="additional_image-preview" class="img-thumbnail img-responsive">
                                 <input type="hidden" name="additional_images[]" value="{{ $ids[$loop->index] }}" style="margin: 5px;">
                                 <input type="hidden" name="additional_images_srcs[]" value="{{ $src }}" style="margin: 5px;">
-                            </div>
+                            </li>
                         @endforeach
-                    </div>
+                    </ul>
                     <div class="clearfix"></div>
                     @error('additional_images')
                         <small class="text-danger">{{ $message }}</small>