changes

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;
+        });
+    }
+}

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');
+        }
     }
 
     /**

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');
+        });
+    }
+};

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) {
+      if (!file) return;
-        const reader = new FileReader();
+
-        reader.onload = (e) => {
+      this.uploading = true;
-          this.update('url', e.target.result);
+
-        };
+      try {
-        reader.readAsDataURL(file);
+        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 = '';
       }
     }
   }

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;
+      this.uploading = true;
-      toProcess.forEach((file) => {
+
-        const reader = new FileReader();
+      try {
-        reader.onload = (e) => {
+        const formData = new FormData();
-          const newUrls = [...this.modelValue.url, e.target.result];
+        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++;
+        }
-        };
+      } catch (error) {
-        reader.readAsDataURL(file);
+        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);

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,

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
+    <div class="relative z-10 md:m-4">
-        @click="toggler = !toggler"
+      <img
-        loading="lazy"
+          @click="toggler = !toggler"
-        class="mx-auto h-96 rounded-md object-cover md:object-contain hover:opacity-95 hover:duration-200 transition"
+          loading="lazy"
-        :src="'/storage/' + block.data.url"
+          class="mx-auto h-96 rounded-md object-cover md:object-contain hover:opacity-95 hover:duration-200 transition"
-        alt=""
+          :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>