Implement image ordering

Author: thecodeholic

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 <zurasekhniashvili@gmail.com>
  */
- 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,