This commit is contained in:
F4ilji
2026-04-10 10:51:42 +05:00
parent 9e35cf848d
commit 5eb5a7bc06
7 changed files with 174 additions and 39 deletions
@@ -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;
});
}
}
+5
View File
@@ -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');
}
}
/**
@@ -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');
});
}
};
@@ -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 = '';
}
}
}
@@ -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);
@@ -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,
@@ -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>