From 65a77acca8afca5847cce3c9e292b3b270745999 Mon Sep 17 00:00:00 2001 From: Chri$ Date: Tue, 24 Dec 2024 19:10:22 +0100 Subject: [PATCH 1/2] feat:[lar-145] complete preference page --- app/Livewire/Components/User/Preferences.php | 48 +++++++++++++++++-- config/lcm.php | 2 + lang/en/global.php | 3 ++ lang/fr/global.php | 4 +- .../views/components/icon/moon.blade.php | 1 + resources/views/components/icon/sun.blade.php | 1 + .../views/components/theme-selector.blade.php | 23 +++++++++ .../components/user/preferences.blade.php | 8 +++- .../livewire/pages/account/settings.blade.php | 6 +-- 9 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 resources/views/components/icon/moon.blade.php create mode 100644 resources/views/components/icon/sun.blade.php create mode 100644 resources/views/components/theme-selector.blade.php diff --git a/app/Livewire/Components/User/Preferences.php b/app/Livewire/Components/User/Preferences.php index 7bb70c5e..47c58486 100644 --- a/app/Livewire/Components/User/Preferences.php +++ b/app/Livewire/Components/User/Preferences.php @@ -5,18 +5,28 @@ namespace App\Livewire\Components\User; use App\Models\User; +use Filament\Forms\Components\Select; +use Filament\Forms\Concerns\InteractsWithForms; +use Filament\Forms\Contracts\HasForms; +use Filament\Forms\Form; +use Filament\Notifications\Notification; use Illuminate\Contracts\View\View; use Illuminate\Support\Facades\Auth; use Livewire\Attributes\Computed; use Livewire\Component; /** + * @property Form $form * @property User $user */ -final class Preferences extends Component +final class Preferences extends Component implements HasForms { + use InteractsWithForms; + public string $theme = 'light'; + public ?array $data = []; + #[Computed] public function user(): User { @@ -28,13 +38,45 @@ public function mount(): void $this->theme = get_current_theme(); } - public function updatedTheme(string $value): void + public function form(Form $form): Form { - $this->user->settings(['theme' => $value]); + return $form + ->schema([ + Select::make('setting') + ->label(__('global.language')) + ->in(config('lcm.supported_locales')) + ->required() + ->options([ + 'fr' => __('global.french'), + 'en' => __('global.english'), + ]), + ]) + ->statePath('data') + ->model(Auth::user()); + } + + public function save(): void + { + $this->validate(); + + $this->user->settings(['locale' => data_get($this->form->getState(), 'setting')]); + + Notification::make() + ->success() + ->title(__('notifications.user.profile_updated')) + ->duration(3500) + ->send(); $this->redirectRoute('settings', navigate: true); } + public function changeTheme(string $value): void + { + $this->user->settings(['theme' => $value]); + + $this->redirectRoute('settings'); + } + public function render(): View { return view('livewire.components.user.preferences'); diff --git a/config/lcm.php b/config/lcm.php index bc0c0c24..a469f1c3 100644 --- a/config/lcm.php +++ b/config/lcm.php @@ -28,6 +28,8 @@ 'supported_locales' => ['fr', 'en'], + 'supported_themes' => ['light', 'dark'], + 'spa_url' => env('FRONTEND_APP_URL', 'http://localhost:4200'), 'notch-pay-public-token' => env('NOTCHPAY_PUBLIC_KEY', null), diff --git a/lang/en/global.php b/lang/en/global.php index aafdf2cb..4f00a59a 100644 --- a/lang/en/global.php +++ b/lang/en/global.php @@ -104,5 +104,8 @@ 'locale_help' => 'The language in which your content will be available on the site.', 'community_oss_description' => 'The community is also developing open source packages to contribute to the Laravel ecosystem.', 'holidays' => 'Happy Holidays', + 'language' => 'Language', + 'french' => 'French', + 'english' => 'English', ]; diff --git a/lang/fr/global.php b/lang/fr/global.php index e355bfc9..f98b8444 100644 --- a/lang/fr/global.php +++ b/lang/fr/global.php @@ -104,5 +104,7 @@ 'locale_help' => 'La langue dans laquelle votre contenu sera accessible sur le site.', 'holidays' => 'Joyeuses fêtes', 'community_oss_description' => 'La communauté développe aussi des packages open source pour contribuer à l\'ecosystème de Laravel.', - + 'language' => 'Langue', + 'french' => 'Français', + 'english' => 'Anglais', ]; diff --git a/resources/views/components/icon/moon.blade.php b/resources/views/components/icon/moon.blade.php new file mode 100644 index 00000000..e525fed6 --- /dev/null +++ b/resources/views/components/icon/moon.blade.php @@ -0,0 +1 @@ + diff --git a/resources/views/components/icon/sun.blade.php b/resources/views/components/icon/sun.blade.php new file mode 100644 index 00000000..2a32cad5 --- /dev/null +++ b/resources/views/components/icon/sun.blade.php @@ -0,0 +1 @@ + diff --git a/resources/views/components/theme-selector.blade.php b/resources/views/components/theme-selector.blade.php new file mode 100644 index 00000000..f097c2cd --- /dev/null +++ b/resources/views/components/theme-selector.blade.php @@ -0,0 +1,23 @@ +@props([ + 'theme', +]) + +
twMerge(['class' => 'inline-flex items-center justify-start rounded-lg bg-gray-100/50 p-1 h-10 ring-1 ring-gray-200 dark:ring-white/10 dark:bg-gray-800 sm:w-auto']) }} +> + @foreach(config('lcm.supported_themes') as $supportedThemes) + + @endforeach +
diff --git a/resources/views/livewire/components/user/preferences.blade.php b/resources/views/livewire/components/user/preferences.blade.php index af875f0d..fab2750d 100644 --- a/resources/views/livewire/components/user/preferences.blade.php +++ b/resources/views/livewire/components/user/preferences.blade.php @@ -4,5 +4,11 @@ :description="__('pages/account.settings.preferences_description')" /> -
+
+ + + {{ $this->form }} + + + diff --git a/resources/views/livewire/pages/account/settings.blade.php b/resources/views/livewire/pages/account/settings.blade.php index 18d15cf0..30fc4c74 100644 --- a/resources/views/livewire/pages/account/settings.blade.php +++ b/resources/views/livewire/pages/account/settings.blade.php @@ -66,9 +66,9 @@
-
-

Subscription

-
+{{--
--}} +{{--

Subscription

--}} +{{--
--}} From 423371a757fcd98746d913b0c325afea7a71f191 Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 24 Dec 2024 23:04:28 +0100 Subject: [PATCH 2/2] feat: [LAR-145] update user preferences --- app/Livewire/Components/User/Preferences.php | 48 ++++++++++--------- config/lcm.php | 2 - resources/js/app.js | 47 ++++++++++++++++++ .../views/components/icon/moon.blade.php | 1 - resources/views/components/icon/sun.blade.php | 1 - .../views/components/theme-selector.blade.php | 23 --------- resources/views/layouts/app.blade.php | 21 +++++++- .../components/user/preferences.blade.php | 9 ++-- .../livewire/pages/account/settings.blade.php | 8 ++-- 9 files changed, 100 insertions(+), 60 deletions(-) delete mode 100644 resources/views/components/icon/moon.blade.php delete mode 100644 resources/views/components/icon/sun.blade.php delete mode 100644 resources/views/components/theme-selector.blade.php diff --git a/app/Livewire/Components/User/Preferences.php b/app/Livewire/Components/User/Preferences.php index 47c58486..8a7a6f63 100644 --- a/app/Livewire/Components/User/Preferences.php +++ b/app/Livewire/Components/User/Preferences.php @@ -5,7 +5,7 @@ namespace App\Livewire\Components\User; use App\Models\User; -use Filament\Forms\Components\Select; +use Filament\Forms; use Filament\Forms\Concerns\InteractsWithForms; use Filament\Forms\Contracts\HasForms; use Filament\Forms\Form; @@ -23,58 +23,60 @@ final class Preferences extends Component implements HasForms { use InteractsWithForms; - public string $theme = 'light'; - public ?array $data = []; - #[Computed] - public function user(): User + public function mount(): void { - return Auth::user(); // @phpstan-ignore-line + $this->form->fill([ + 'theme' => $this->user->setting('theme', 'light'), + 'locale' => $this->user->setting('locale', config('app.locale')), + ]); } - public function mount(): void + #[Computed] + public function user(): User { - $this->theme = get_current_theme(); + return Auth::user(); // @phpstan-ignore-line } public function form(Form $form): Form { return $form ->schema([ - Select::make('setting') + Forms\Components\ToggleButtons::make('theme') + ->label('Theme') + ->options([ + 'light' => 'Light', + 'dark' => 'Dark', + ]) + ->icons([ + 'light' => 'phosphor-sun-duotone', + 'dark' => 'phosphor-moon-duotone', + ]) + ->grouped(), + Forms\Components\Select::make('locale') ->label(__('global.language')) - ->in(config('lcm.supported_locales')) - ->required() ->options([ 'fr' => __('global.french'), 'en' => __('global.english'), ]), ]) - ->statePath('data') - ->model(Auth::user()); + ->statePath('data'); } public function save(): void { $this->validate(); - $this->user->settings(['locale' => data_get($this->form->getState(), 'setting')]); + $this->user->settings($this->form->getState()); + + $this->dispatch('theme-changed', get_current_theme()); Notification::make() ->success() ->title(__('notifications.user.profile_updated')) ->duration(3500) ->send(); - - $this->redirectRoute('settings', navigate: true); - } - - public function changeTheme(string $value): void - { - $this->user->settings(['theme' => $value]); - - $this->redirectRoute('settings'); } public function render(): View diff --git a/config/lcm.php b/config/lcm.php index a469f1c3..bc0c0c24 100644 --- a/config/lcm.php +++ b/config/lcm.php @@ -28,8 +28,6 @@ 'supported_locales' => ['fr', 'en'], - 'supported_themes' => ['light', 'dark'], - 'spa_url' => env('FRONTEND_APP_URL', 'http://localhost:4200'), 'notch-pay-public-token' => env('NOTCHPAY_PUBLIC_KEY', null), diff --git a/resources/js/app.js b/resources/js/app.js index 0feeb03c..c5495184 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -19,4 +19,51 @@ Alpine.plugin(collapse) window.Alpine = Alpine +document.addEventListener('alpine:init', () => { + const theme = + localStorage.getItem('theme') ?? + getComputedStyle(document.documentElement).getPropertyValue( + '--default-theme-mode', + ) + + window.Alpine.store( + 'theme', + theme === 'dark' || + (theme === 'system' && + window.matchMedia('(prefers-color-scheme: dark)').matches) + ? 'dark' + : 'light', + ) + + window.addEventListener('theme-changed', (event) => { + let theme = event.detail + + localStorage.setItem('theme', theme) + + if (theme === 'system') { + theme = window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light' + } + + window.Alpine.store('theme', theme) + }) + + window + .matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', (event) => { + if (localStorage.getItem('theme') === 'system') { + window.Alpine.store('theme', event.matches ? 'dark' : 'light') + } + }) + + window.Alpine.effect(() => { + const theme = window.Alpine.store('theme') + + theme === 'dark' + ? document.documentElement.classList.add('dark') + : document.documentElement.classList.remove('dark') + }) +}) + Livewire.start() diff --git a/resources/views/components/icon/moon.blade.php b/resources/views/components/icon/moon.blade.php deleted file mode 100644 index e525fed6..00000000 --- a/resources/views/components/icon/moon.blade.php +++ /dev/null @@ -1 +0,0 @@ - diff --git a/resources/views/components/icon/sun.blade.php b/resources/views/components/icon/sun.blade.php deleted file mode 100644 index 2a32cad5..00000000 --- a/resources/views/components/icon/sun.blade.php +++ /dev/null @@ -1 +0,0 @@ - diff --git a/resources/views/components/theme-selector.blade.php b/resources/views/components/theme-selector.blade.php deleted file mode 100644 index f097c2cd..00000000 --- a/resources/views/components/theme-selector.blade.php +++ /dev/null @@ -1,23 +0,0 @@ -@props([ - 'theme', -]) - -
twMerge(['class' => 'inline-flex items-center justify-start rounded-lg bg-gray-100/50 p-1 h-10 ring-1 ring-gray-200 dark:ring-white/10 dark:bg-gray-800 sm:w-auto']) }} -> - @foreach(config('lcm.supported_themes') as $supportedThemes) - - @endforeach -
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index d6dde482..f2079e7b 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,7 +1,7 @@ @props(['title' => null, 'canonical' => null]) - + @@ -29,6 +29,25 @@ @filamentStyles @vite(['resources/css/app.css', 'resources/js/app.js']) @include('partials._analytics') + + @if (! auth()->check()) + + @else + + @endif
diff --git a/resources/views/livewire/components/user/preferences.blade.php b/resources/views/livewire/components/user/preferences.blade.php index fab2750d..277aec2e 100644 --- a/resources/views/livewire/components/user/preferences.blade.php +++ b/resources/views/livewire/components/user/preferences.blade.php @@ -4,11 +4,12 @@ :description="__('pages/account.settings.preferences_description')" /> -
- - + {{ $this->form }} - +
diff --git a/resources/views/livewire/pages/account/settings.blade.php b/resources/views/livewire/pages/account/settings.blade.php index 30fc4c74..732cb463 100644 --- a/resources/views/livewire/pages/account/settings.blade.php +++ b/resources/views/livewire/pages/account/settings.blade.php @@ -44,13 +44,13 @@ {{ __('global.navigation.notifications') }} - {{ __('global.navigation.subscription') }} - + --}}
@@ -66,9 +66,7 @@
-{{--
--}} -{{--

Subscription

--}} -{{--
--}} +