changes
This commit is contained in:
@@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user