Refactor template preview data handling in Footer, Header, and Section templates: Updated the viewData method in FooterTemplateForm, HeaderTemplateForm, and SectionTemplateForm schemas to use a closure for dynamic record ID retrieval. Enhanced the template-preview Blade component to accept the record ID, improving data handling and ensuring accurate template previews based on the current record context.

This commit is contained in:
Ümit Tunç
2025-11-03 03:15:31 -03:00
parent 49bff7f2a7
commit 9629652d0a
4 changed files with 59 additions and 17 deletions
@@ -43,10 +43,13 @@ class FooterTemplateForm
// Preview Component - placed after editor // Preview Component - placed after editor
View::make('components.template-preview') View::make('components.template-preview')
->viewData([ ->viewData(function ($record) {
'type' => 'footer', return [
'fieldName' => 'html_content', 'type' => 'footer',
]) 'fieldName' => 'html_content',
'recordId' => $record?->id,
];
})
->columnSpanFull(), ->columnSpanFull(),
Toggle::make('is_active') Toggle::make('is_active')
@@ -42,10 +42,13 @@ class HeaderTemplateForm
// Preview Component - placed after editor // Preview Component - placed after editor
View::make('components.template-preview') View::make('components.template-preview')
->viewData([ ->viewData(function ($record) {
'type' => 'header', return [
'fieldName' => 'html_content', 'type' => 'header',
]) 'fieldName' => 'html_content',
'recordId' => $record?->id,
];
})
->columnSpanFull(), ->columnSpanFull(),
Toggle::make('is_active') Toggle::make('is_active')
@@ -42,10 +42,13 @@ class SectionTemplateForm
// Preview Component - placed after editor // Preview Component - placed after editor
View::make('components.template-preview') View::make('components.template-preview')
->viewData([ ->viewData(function ($record) {
'type' => 'section', return [
'fieldName' => 'html_content', 'type' => 'section',
]) 'fieldName' => 'html_content',
'recordId' => $record?->id,
];
})
->columnSpanFull(), ->columnSpanFull(),
Toggle::make('is_active') Toggle::make('is_active')
@@ -2,9 +2,10 @@
$previewUrl = route('template.preview'); $previewUrl = route('template.preview');
$type = $type ?? 'section'; $type = $type ?? 'section';
$fieldName = $fieldName ?? 'html_content'; $fieldName = $fieldName ?? 'html_content';
$recordId = $recordId ?? null;
@endphp @endphp
<div <div
x-data="templatePreview(@js($previewUrl), @js($type), @js($fieldName))" x-data="templatePreview(@js($previewUrl), @js($type), @js($fieldName), @js($recordId))"
class="template-preview-wrapper w-full" class="template-preview-wrapper w-full"
style="width: 100%;" style="width: 100%;"
wire:ignore.self> wire:ignore.self>
@@ -68,20 +69,52 @@
@push('scripts') @push('scripts')
<script> <script>
function templatePreview(previewUrl, type, fieldName) { function templatePreview(previewUrl, type, fieldName, recordIdFromView = null) {
return { return {
previewUrl: previewUrl, previewUrl: previewUrl,
type: type, type: type,
fieldName: fieldName, fieldName: fieldName,
iframeSrc: '', iframeSrc: '',
isLoading: false, isLoading: false,
recordId: null, recordId: recordIdFromView,
init() { init() {
// URL'den ID'yi al // Önce viewData'dan gelen ID'yi kullan
const urlMatch = window.location.pathname.match(/\/(\d+)\/(edit|view)$/); if (this.recordId) {
return;
}
// Yoksa URL'den ID'yi al (çeşitli formatları dene)
let urlMatch = window.location.pathname.match(/\/(\d+)\/(edit|view)$/);
if (urlMatch && urlMatch[1]) { if (urlMatch && urlMatch[1]) {
this.recordId = urlMatch[1]; this.recordId = urlMatch[1];
return;
}
// Alternatif format: /admin/resource/{id}/edit
urlMatch = window.location.pathname.match(/\/(\d+)\/edit$/);
if (urlMatch && urlMatch[1]) {
this.recordId = urlMatch[1];
return;
}
// Alternatif format: /admin/resource/{id}
urlMatch = window.location.pathname.match(/\/(\d+)$/);
if (urlMatch && urlMatch[1]) {
this.recordId = urlMatch[1];
return;
}
// Filament Livewire component'inden ID almayı dene
try {
const livewireComponent = window.Livewire?.find(
document.querySelector('[wire\\:id]')?.getAttribute('wire:id')
);
if (livewireComponent?.mounted?.id) {
this.recordId = livewireComponent.mounted.id;
}
} catch (e) {
console.log('[Preview] Could not get ID from Livewire');
} }
}, },