From 5eb5a7bc065d669513a72f367916f8710b991808 Mon Sep 17 00:00:00 2001
From: F4ilji <F4ilj@yandex.ru>
Date: Fri, 10 Apr 2026 10:51:42 +0500
Subject: [PATCH] changes

---
 .../Actions/Pages/ReorderPagesAction.php      | 41 +++++++++++++
 app/Observers/PageObserver.php                |  5 ++
 ..._081834_add_sort_column_to_pages_table.php | 28 +++++++++
 .../ContentBuilder/blocks/ImageBlock.vue      | 50 ++++++++++++----
 .../ContentBuilder/blocks/ImagesBlock.vue     | 59 ++++++++++++++-----
 .../pageBuilder/blocks/BasicImageSlider.vue   |  8 +--
 .../builder/pageBuilder/blocks/ImageBlock.vue | 22 +++----
 7 files changed, 174 insertions(+), 39 deletions(-)
 create mode 100644 app/Containers/Dashboard/Actions/Pages/ReorderPagesAction.php
 create mode 100644 database/migrations/2026_04_10_081834_add_sort_column_to_pages_table.php

diff --git a/app/Containers/Dashboard/Actions/Pages/ReorderPagesAction.php b/app/Containers/Dashboard/Actions/Pages/ReorderPagesAction.php
new file mode 100644
index 0000000..74dba4b
--- /dev/null
+++ b/app/Containers/Dashboard/Actions/Pages/ReorderPagesAction.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Containers\Dashboard\Actions\Pages;
+
+use App\Containers\AppStructure\Models\Page;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\DB;
+
+class ReorderPagesAction
+{
+    /**
+     * Reorders pages within a SubSection based on provided order
+     *
+     * @param int $subSectionId The SubSection ID
+     * @param array $pageIds Ordered array of page IDs
+     * @return bool
+     */
+    public function run(int $subSectionId, array $pageIds): bool
+    {
+        return DB::transaction(function () use ($subSectionId, $pageIds) {
+            foreach ($pageIds as $index => $pageId) {
+                Page::where('id', $pageId)
+                    ->where('sub_section_id', $subSectionId)
+                    ->update(['sort' => $index + 1]);
+            }
+
+            // Clear navigation cache since sort order changed
+            Cache::forget('navigation');
+
+            // Clear page data cache for all pages in this subsection
+            // so that section.pages relation is re-fetched with correct order
+            $pages = Page::where('sub_section_id', $subSectionId)->get();
+            foreach ($pages as $page) {
+                $cacheKey = 'page_data_' . md5($page->path);
+                Cache::forget($cacheKey);
+            }
+
+            return true;
+        });
+    }
+}
diff --git a/app/Observers/PageObserver.php b/app/Observers/PageObserver.php
index 37f966b..c9a49b2 100755
--- a/app/Observers/PageObserver.php
+++ b/app/Observers/PageObserver.php
@@ -29,6 +29,11 @@ class PageObserver
     public function updated(Page $page): void
     {
         $this->pageCacheService->clearAllCacheByModel();
+
+        // Clear navigation cache if sort order changed
+        if ($page->isDirty('sort')) {
+            Cache::forget('navigation');
+        }
     }
 
     /**
diff --git a/database/migrations/2026_04_10_081834_add_sort_column_to_pages_table.php b/database/migrations/2026_04_10_081834_add_sort_column_to_pages_table.php
new file mode 100644
index 0000000..d1d0838
--- /dev/null
+++ b/database/migrations/2026_04_10_081834_add_sort_column_to_pages_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('pages', function (Blueprint $table) {
+            $table->integer('sort')->default(0)->after('sub_section_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('pages', function (Blueprint $table) {
+            $table->dropColumn('sort');
+        });
+    }
+};
diff --git a/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImageBlock.vue b/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImageBlock.vue
index 34f0458..ca8fb15 100644
--- a/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImageBlock.vue
+++ b/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImageBlock.vue
@@ -6,7 +6,7 @@
       </label>
       <div class="flex items-center gap-3">
         <div v-if="modelValue.url" class="relative">
-          <img :src="modelValue.url" alt="Preview" class="w-32 h-32 object-cover rounded-lg border border-layer-line" />
+          <img :src="RESOLVE_ASSET_URL(modelValue.url)" alt="Preview" class="w-32 h-32 object-cover rounded-lg border border-layer-line" />
           <button
             type="button"
             @click="update('url', '')"
@@ -21,11 +21,13 @@
         <div class="flex-1">
           <input
             type="file"
+            ref="fileInput"
             @change="handleFileUpload"
             accept="image/*"
             class="w-full px-3 py-2 border border-layer-line rounded-lg bg-white text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
           />
-          <p class="mt-1 text-xs text-muted-foreground-1">
+          <p v-if="uploading" class="mt-1 text-xs text-primary">Загрузка...</p>
+          <p v-else class="mt-1 text-xs text-muted-foreground-1">
             Загрузите изображение (JPG, PNG, WebP)
           </p>
         </div>
@@ -56,22 +58,50 @@ export default {
       required: true
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update'],
+  data() {
+    return {
+      uploading: false,
+    };
+  },
   methods: {
     update(field, value) {
       this.$emit('update:modelValue', {
         ...this.modelValue,
         [field]: value
       });
+      this.$emit('update');
     },
-    handleFileUpload(event) {
+    async handleFileUpload(event) {
       const file = event.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          this.update('url', e.target.result);
-        };
-        reader.readAsDataURL(file);
+      if (!file) return;
+
+      this.uploading = true;
+
+      try {
+        const formData = new FormData();
+        formData.append('images[]', file);
+
+        const response = await fetch(route('dashboard.posts.upload-images'), {
+          method: 'POST',
+          headers: {
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+            'Accept': 'application/json',
+          },
+          body: formData,
+        });
+
+        const result = await response.json();
+
+        if (result.success && result.paths && result.paths.length > 0) {
+          this.update('url', result.paths[0]);
+        }
+      } catch (error) {
+        console.error('Image upload error:', error);
+      } finally {
+        this.uploading = false;
+        // Reset input so the same file can be selected again
+        event.target.value = '';
       }
     }
   }
diff --git a/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImagesBlock.vue b/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImagesBlock.vue
index cff9b62..c2eceaa 100644
--- a/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImagesBlock.vue
+++ b/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/ImagesBlock.vue
@@ -10,7 +10,7 @@
           :key="index"
           class="relative group"
         >
-          <img :src="url" alt="Preview" class="w-full h-24 object-cover rounded-lg border border-layer-line" />
+          <img :src="RESOLVE_ASSET_URL(url)" alt="Preview" class="w-full h-24 object-cover rounded-lg border border-layer-line" />
           <button
             type="button"
             @click="removeImage(index)"
@@ -25,13 +25,15 @@
       </div>
       <input
         type="file"
+        ref="fileInput"
         @change="handleFilesUpload"
         accept="image/*"
         multiple
-        :disabled="modelValue.url.length >= 5"
+        :disabled="modelValue.url.length >= 5 || uploading"
         class="w-full px-3 py-2 border border-layer-line rounded-lg bg-white text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
       />
-      <p class="mt-1 text-xs text-muted-foreground-1">
+      <p v-if="uploading" class="mt-1 text-xs text-primary">Загрузка...</p>
+      <p v-else class="mt-1 text-xs text-muted-foreground-1">
         Можно загрузить до 5 изображений (JPG, PNG, WebP)
       </p>
     </div>
@@ -60,29 +62,58 @@ export default {
       required: true
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update'],
+  data() {
+    return {
+      uploading: false,
+    };
+  },
   methods: {
     update(field, value) {
       this.$emit('update:modelValue', {
         ...this.modelValue,
         [field]: value
       });
+      this.$emit('update');
     },
-    handleFilesUpload(event) {
+    async handleFilesUpload(event) {
       const files = Array.from(event.target.files);
+      if (files.length === 0) return;
+
       const remaining = 5 - this.modelValue.url.length;
       const toProcess = files.slice(0, remaining);
+      if (toProcess.length === 0) return;
 
-      let processed = 0;
-      toProcess.forEach((file) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const newUrls = [...this.modelValue.url, e.target.result];
+      this.uploading = true;
+
+      try {
+        const formData = new FormData();
+        toProcess.forEach(file => {
+          formData.append('images[]', file);
+        });
+
+        const response = await fetch(route('dashboard.posts.upload-images'), {
+          method: 'POST',
+          headers: {
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+            'Accept': 'application/json',
+          },
+          body: formData,
+        });
+
+        const result = await response.json();
+
+        if (result.success && result.paths) {
+          const newUrls = [...this.modelValue.url, ...result.paths];
           this.update('url', newUrls);
-          processed++;
-        };
-        reader.readAsDataURL(file);
-      });
+        }
+      } catch (error) {
+        console.error('Images upload error:', error);
+      } finally {
+        this.uploading = false;
+        // Reset input so the same files can be selected again
+        event.target.value = '';
+      }
     },
     removeImage(index) {
       const newUrls = this.modelValue.url.filter((_, i) => i !== index);
diff --git a/resources/js/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue b/resources/js/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue
index 027cfef..8e981d2 100755
--- a/resources/js/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue
+++ b/resources/js/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="relative">
+	<div v-if="items && items.length > 0" class="relative">
 		<div class="flex">
 			<div
 					v-for="(item, index) in items"
@@ -29,11 +29,11 @@
 		</button>
 	</div>
 
-	<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
+	<figcaption v-if="block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
 		{{ block.data.alt }}
 	</figcaption>
 
-	<FsLightbox class="" :slide="slide" :toggler="toggler" :sources="items.map(item => domainPath + '/storage/' + item)"/>
+	<FsLightbox v-if="items && items.length > 0" class="" :slide="slide" :toggler="toggler" :sources="items.map(item => domainPath + '/storage/' + item)"/>
 </template>
 
 <script>
@@ -45,7 +45,7 @@ export default {
 	data() {
 		return {
 			currentIndex: 0,
-			items: this.block.data.url,
+			items: this.block.data.url || [],
 			toggler: false,
 			domainPath: null,
 			slide: null,
diff --git a/resources/js/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue b/resources/js/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue
index 17db8cf..fe294a7 100755
--- a/resources/js/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue
+++ b/resources/js/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="relative rounded-md overflow-hidden">
+  <div v-if="block.data.url" class="relative rounded-md overflow-hidden">
     <div
         class="absolute inset-0 bg-cover bg-center blur-md brightness-75"
         :style="`background-image: url('${'/storage/' + block.data.url}')`"
     ></div>
 
-    <div class="relative z-10 md:m-4"> <img
-        @click="toggler = !toggler"
-        loading="lazy"
-        class="mx-auto h-96 rounded-md object-cover md:object-contain hover:opacity-95 hover:duration-200 transition"
-        :src="'/storage/' + block.data.url"
-        alt=""
-    />
-
+    <div class="relative z-10 md:m-4">
+      <img
+          @click="toggler = !toggler"
+          loading="lazy"
+          class="mx-auto h-96 rounded-md object-cover md:object-contain hover:opacity-95 hover:duration-200 transition"
+          :src="'/storage/' + block.data.url"
+          :alt="block.data.alt || ''"
+      />
     </div>
   </div>
-  <div v-if="block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
+  <div v-if="block.data.url && block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
     {{ block.data.alt }}
   </div>
 
-  <FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
+  <FsLightbox v-if="block.data.url" class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
 </template>
 
 <script>