truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Site Translations List Page and Enhance DataGrid Functionality: Updated the ListSiteTranslations page to improve session handling for view toggling between traditional table and DataGrid formats. Enhanced the getHeaderActions method for better readability and session management. Additionally, modified the render method to ensure the latest session value is utilized for rendering the appropriate view. Updated the DataGrid view to dynamically adjust the theme based on the current body class, improving user experience across different themes.

Browse Source
This commit is contained in:
Ümit Tunç
2026-01-10 22:59:58 +03:00
parent e80c94146d
commit ca942c5140
3 changed files with 68 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Filament/Admin/Resources/SiteTranslations/Pages/ListSiteTranslations.php
+15 -12
View File
@@ -24,34 +24,37 @@ class ListSiteTranslations extends ListRecords
protected function getHeaderActions(): array
{
$useDataGrid = session('site_translations_use_datagrid', false);
return [
Action::make('toggleView')
->label(fn() => $this->useDataGrid ? 'Tablo Görünümü' : 'DataGrid Görünümü')
->icon(fn() => $this->useDataGrid ? 'heroicon-o-table-cells' : 'heroicon-o-squares-2x2')
->label($useDataGrid ? 'Tablo Görünümü' : 'DataGrid Görünümü')
->icon($useDataGrid ? 'heroicon-o-table-cells' : 'heroicon-o-squares-2x2')
->color('gray')
->action(function () {
$this->useDataGrid = !$this->useDataGrid;
session(['site_translations_use_datagrid' => $this->useDataGrid]);
$currentValue = session('site_translations_use_datagrid', false);
$newValue = !$currentValue;
session(['site_translations_use_datagrid' => $newValue]);
session()->save(); // Session'ı hemen kaydet
// Sayfayı yenile ki getContent() yeniden çağrılsın
return redirect()->to($this->getResource()::getUrl('index'));
// Sayfayı yenile
$this->redirect($this->getResource()::getUrl('index'));
}),
CreateAction::make()
->visible(fn() => !$this->useDataGrid), // Sadece eski görünümde göster
->visible(!$useDataGrid), // Sadece eski görünümde göster
];
}
public function getContent(): View
public function render(): View
{
// Session'dan direkt oku ki her render'da güncel değeri alsın
$useDataGrid = session('site_translations_use_datagrid', false);
if ($useDataGrid) {
return view('filament.admin.resources.site-translations.datagrid');
return view('filament.admin.resources.site-translations.datagrid')
->layout($this->getLayout());
}
// Eski Filament table görünümü
return parent::getContent();
return parent::render();
}
}
resources/views/filament/admin/resources/site-translations/datagrid.blade.php
+24 -2
View File
@@ -24,7 +24,7 @@
height: calc(100vh - 250px);
min-height: 600px;
}
/*
.dx-datagrid-headers {
background-color: var(--fi-primary-50, #f0f9ff);
}
@@ -37,9 +37,31 @@
background-color: var(--fi-success-600, #16a34a);
border-color: var(--fi-success-600, #16a34a);
}
*/
</style>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<link id="devextreme-theme-css" rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script>
(function() {
// Filament 4 varsayılan olarak 'dark'/'light' modunu body class'ı ile belirtir (ör: 'fi-dark' veya 'fi-light')
function setDevExtremeThemeCss() {
var themeCss = document.getElementById('devextreme-theme-css');
if (!themeCss) return;
var isDark = document.body.classList.contains('fi-dark');
// Eğer dark mod ise dark css'i, değilse light css'i kullan
var href = isDark
? 'https://cdn3.devexpress.com/jslib/23.1.5/css/dx.dark.css'
: 'https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css';
if (themeCss.getAttribute('href') !== href) {
themeCss.setAttribute('href', href);
}
}
// Yüklendiğinde uygula
document.addEventListener('DOMContentLoaded', setDevExtremeThemeCss);
// Tema değişirse tekrar uygula (Filament 4 sisteminde 'body' class'ı değişir)
new MutationObserver(setDevExtremeThemeCss).observe(document.body, { attributes: true, attributeFilter: ['class'] });
})();
</script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
<script>
resources/views/templates/neler-yapariz/hero.blade.php
+17 -11
View File
@@ -3,7 +3,7 @@
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-8/12 lg:w-7/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-12">
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ t('neler-yapariz.hero.title') }}</h1>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium lg:!px-7 xl:!px-7 xxl:!px-6">{{ t('neler-yapariz.hero.subtitle') }} <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]">{{ t('neler-yapariz.hero.highlight') }}</span> {{ t('neler-yapariz.hero.subtitle_end') }}</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium lg:!px-7 xl:!px-7 xxl:!px-6">{{ t('neler-yapariz.hero.subtitle') }} </p>
</div>
<!-- /column -->
</div>
@@ -15,29 +15,29 @@
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
<div class="flex flex-wrap mx-[-15px] !mb-8">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/about5.jpg') }}" alt="{{ t('neler-yapariz.image_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ $page->featured_image_url }}" alt="{{ t('neler-yapariz.image_alt') }}"></figure>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="{{ asset('html/assets/img/photos/bg3.jpg') }}" style="background-image: url('{{ asset('html/assets/img/photos/bg3.jpg') }}');">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="{{ asset('assets/img/photos/bg3.jpg') }}" style="background-image: url('{{ asset('assets/img/photos/bg3.jpg') }}');">
<div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] !text-center">
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">7518</h3>
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.completed_projects_number') }}</h3>
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.completed_projects') }}</p>
</div>
<!--/column -->
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">3472</h3>
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.satisfied_customers_number') }}</h3>
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.satisfied_customers') }}</p>
</div>
<!--/column -->
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">2184</h3>
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.expert_employees_number') }}</h3>
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.expert_employees') }}</p>
</div>
<!--/column -->
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">4523</h3>
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.awards_won_number') }}</h3>
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.awards_won') }}</p>
</div>
<!--/column -->
@@ -59,19 +59,25 @@
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/g1.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_1_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g1.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_1_alt') }}"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !self-end !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/g2.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_2_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g2.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_2_alt') }}"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/g3.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_3_alt') }}"></figure>
<figure class="rounded-[0.4rem] overflow-hidden aspect-video bg-gray-100">
<img
class="rounded-[0.4rem] object-cover w-full h-full"
src="{{ $content->cover ?? asset('assets/img/photos/g3.jpg') }}"
alt="{{ t('neler-yapariz.gallery.image_3_alt') }}"
>
</figure>
</div>
<!--/column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/g4.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_4_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g4.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_4_alt') }}"></figure>
</div>
<!--/column -->
</div>