Implement image ordering

Author: Jenis0619

app/Http/Controllers/Api/ProductController.php

@@ -50,10 +50,11 @@ public function store(ProductRequest $request)
 
         /** @var \Illuminate\Http\UploadedFile[] $images */
         $images = $data['images'] ?? [];
+        $imagePositions = $data['image_positions'] ?? [];
 
         $product = Product::create($data);
 
-        $this->saveImages($images, $product);
+        $this->saveImages($images, $imagePositions, $product);
 
         return new ProductResource($product);
     }
@@ -84,8 +85,9 @@ public function update(ProductRequest $request, Product $product)
         /** @var \Illuminate\Http\UploadedFile[] $images */
         $images = $data['images'] ?? [];
         $deletedImages = $data['deleted_images'] ?? [];
+        $imagePositions = $data['image_positions'] ?? [];
 
-        $this->saveImages($images, $product);
+        $this->saveImages($images, $imagePositions, $product);
         if (count($deletedImages) > 0) {
             $this->deleteImages($deletedImages, $product);
         }
@@ -116,9 +118,15 @@ public function destroy(Product $product)
      * @throws \Exception
      * @author Zura Sekhniashvili <[email protected]>
      */
-    private function saveImages($images, Product $product)
+    private function saveImages($images, $positions, Product $product)
     {
-        foreach ($images as $i => $image) {
+        foreach ($positions as $id => $position) {
+            ProductImage::query()
+                ->where('id', $id)
+                ->update(['position' => $position]);
+        }
+
+        foreach ($images as $id => $image) {
             $path = 'images/' . Str::random();
             if (!Storage::exists($path)) {
                 Storage::makeDirectory($path, 0755, true);
@@ -135,7 +143,7 @@ private function saveImages($images, Product $product)
                 'url' => URL::to(Storage::url($relativePath)),
                 'mime' => $image->getClientMimeType(),
                 'size' => $image->getSize(),
-                'position' => $i + 1
+                'position' => $positions[$id]
             ]);
         }
     }

app/Http/Requests/ProductRequest.php

@@ -27,6 +27,7 @@ public function rules()
             'title' => ['required', 'max:2000'],
             'images.*' => ['nullable', 'image'],
             'deleted_images.*' => ['nullable', 'int'],
+            'image_positions.*' => ['nullable', 'int'],
             'price' => ['required', 'numeric'],
             'quantity' => ['nullable', 'numeric'],
             'description' => ['nullable', 'string'],

backend/package-lock.json

@@ -12,6 +12,8 @@
     "@ckeditor/ckeditor5-vue": "^5.1.0",
     "axios": "^0.27.2",
     "chart.js": "^3.9.1",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.2.9",
     "uuid": "^9.0.0",
     "vue": "^3.2.25",
     "vue-chartjs": "^4.1.2",

backend/package.json

@@ -1,21 +1,32 @@
 <template>
   <div class="flex flex-wrap gap-1">
-    <div v-for="image of imageUrls"
-         class="relative w-[120px] h-[120px] rounded border border-dashed flex items-center justify-center hover:border-purple-500 overflow-hidden">
-      <img :src="image.url" class="max-w-full max-h-full" :class="image.deleted ? 'opacity-50' : ''">
-      <small v-if="image.deleted" class="absolute left-0 bottom-0 right-0 py-1 px-2 bg-black w-100 text-white justify-between items-center flex">
-        To be deleted
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 cursor-pointer" @click="revertImage(image)">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
-        </svg>
-      </small>
-      <span class="absolute top-1 right-1 cursor-pointer" @click="removeImage(image)">
+    <Sortable
+      :list="imageUrls"
+      item-key="id"
+      class="flex gap-1 flex-wrap"
+      @end="onImageDragEnd"
+    >
+      <template #item="{element: image, index}">
+        <div
+          class="relative w-[120px] h-[120px] rounded border border-dashed flex items-center justify-center hover:border-purple-500 overflow-hidden">
+          <img :src="image.url" class="max-w-full max-h-full" :class="image.deleted ? 'opacity-50' : ''">
+          <small v-if="image.deleted"
+                 class="absolute left-0 bottom-0 right-0 py-1 px-2 bg-black w-100 text-white justify-between items-center flex">
+            To be deleted
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                 stroke="currentColor" class="w-4 h-4 cursor-pointer" @click="revertImage(image)">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/>
+            </svg>
+          </small>
+          <span class="absolute top-1 right-1 cursor-pointer" @click="removeImage(image)">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
           <path
             d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
         </svg>
       </span>
-    </div>
+        </div>
+      </template>
+    </Sortable>
     <div
       class="relative w-[120px] h-[120px] rounded border border-dashed flex items-center justify-center hover:border-purple-500 overflow-hidden">
       <span>
@@ -29,6 +40,7 @@
 
 <script setup>
 // Imports
+import {Sortable} from "sortablejs-vue3";
 import {v4 as uuidv4} from 'uuid';
 import {onMounted, ref, watch} from "vue";
 
@@ -39,10 +51,11 @@ import {onMounted, ref, watch} from "vue";
 const files = ref([])
 const imageUrls = ref([])
 const deletedImages = ref([])
+const imagePositions = ref([])
 
 // Props & Emit
 const props = defineProps(['modelValue', 'deletedImages', 'images'])
-const emit = defineEmits(['update:modelValue', 'update:deletedImages'])
+const emit = defineEmits(['update:modelValue', 'update:deletedImages', 'update:imagePositions'])
 
 // Computed
 
@@ -51,16 +64,23 @@ function onFileChange($event) {
   const chosenFiles = [...$event.target.files];
   files.value = [...files.value, ...chosenFiles];
   $event.target.value = ''
+  const allPromises = [];
   for (let file of chosenFiles) {
     file.id = uuidv4()
-    readFile(file)
+    const promise = readFile(file)
+    allPromises.push(promise)
+    promise
       .then(url => {
         imageUrls.value.push({
           url,
           id: file.id
         })
       })
   }
+  Promise.all(allPromises)
+    .then(() => {
+      updateImagePositions()
+    })
   emit('update:modelValue', files.value)
 }
 
@@ -87,9 +107,11 @@ function removeImage(image) {
 
     emit('update:modelValue', files.value)
   }
+
+  updateImagePositions();
 }
 
-function revertImage(image){
+function revertImage(image) {
   if (image.isProp) {
     deletedImages.value = deletedImages.value.filter(id => id !== image.id)
     image.deleted = false;
@@ -98,6 +120,33 @@ function revertImage(image){
   }
 }
 
+function onImageDragEnd(ev) {
+  console.log(ev)
+
+  const {newIndex, oldIndex} = ev;
+
+  const [tmp] = imageUrls.value.splice(oldIndex, 1)
+  imageUrls.value.splice(newIndex, 0, tmp)
+
+  updateImagePositions()
+}
+
+function updateImagePositions() {
+  /**
+   * [
+   *   [1, 1],
+   *   [4, 2],
+   *   [5, 3],
+   * ]
+   */
+  imagePositions.value = Object.fromEntries(
+    imageUrls.value.filter(im => !im.deleted)
+      .map((im, ind) => [im.id, ind + 1])
+  )
+
+  emit('update:imagePositions', imagePositions.value)
+}
+
 // Hooks
 watch('props.images', () => {
   console.log(props.images)
@@ -108,6 +157,8 @@ watch('props.images', () => {
       isProp: true
     }))
   ]
+
+  updateImagePositions()
 }, {immediate: true, deep: true})
 onMounted(() => {
   emit('update:modelValue', [])

backend/src/components/ImagePreview.vue

@@ -100,10 +100,13 @@ export function updateProduct({commit}, product) {
     const form = new FormData();
     form.append('id', product.id);
     form.append('title', product.title);
-    product.images.forEach(im => form.append('images[]', im))
+    product.images.forEach(im => form.append(`images[${im.id}]`, im))
     if (product.deleted_images) {
       product.deleted_images.forEach(id => form.append('deleted_images[]', id))
     }
+    for (let id in product.image_positions) {
+      form.append(`image_positions[${id}]`, product.image_positions[id])
+    }
     form.append('description', product.description || '');
     form.append('published', product.published ? 1 : 0);
     form.append('price', product.price);

backend/src/store/actions.js

@@ -20,7 +20,8 @@
         <div class="col-span-1 px-4 pt-5 pb-4">
           <image-preview v-model="product.images"
                          :images="product.images"
-                         v-model:deleted-images="product.deleted_images" />
+                         v-model:deleted-images="product.deleted_images"
+                          v-model:image-positions="product.image_positions"/>
         </div>
       </div>
       <footer class="bg-gray-50 rounded-b-lg px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
@@ -61,6 +62,7 @@ const product = ref({
   title: null,
   images: [],
   deleted_images: [],
+  image_positions: {},
   description: '',
   price: null,
   quantity: null,