Jusqu'à présent, notre galerie photo est globalement fonctionnelle. Dans ce chapitre, nous allons nous concentrer sur la création d'une page de profil pour les utilisateurs afin de leur permettre de modifier leurs informations personnelles, telles que leur adresse email, leur pagination et leur statut adulte. En plus de cela, pour respecter les directives du RGPD, nous leur donnerons la possibilité de supprimer leur compte s'ils le souhaitent.
Les thèmes de daisyUI
On sait que tous les styles de MaryUI sont issus de DaisyUI.
DaisyUI fournit un ensemble de thèmes intégrés qui peuvent être utilisés sans effort supplémentaire. Chaque thème définit un jeu de couleurs qui seront appliquées à tous les éléments de DaisyUI, ce qui garantit une apparence cohérente et esthétique pour votre application.
Pour bénéficier de ces thèmes prédéfinis, vous n'avez pas besoin de configurer manuellement les couleurs pour chaque composant de DaisyUI. Au lieu de cela, vous pouvez simplement choisir le thème qui correspond le mieux à votre application et l'appliquer à tous les éléments en une seule étape.
Ces thèmes intégrés offrent plusieurs avantages :- facilité d'utilisation : grâce à l'intégration directe de ces thèmes, il n'est pas nécessaire de définir manuellement les couleurs pour chaque composant de DaisyUI. Cela facilite et accélère grandement le processus de création de votre interface utilisateur
- cohérence visuelle : les thèmes prédéfinis garantissent une apparence cohérente de votre application, car les mêmes couleurs sont appliquées à tous les éléments de DaisyUI. Cela contribue à créer une expérience utilisateur harmonieuse et agréable
- personnalisation : DaisyUI propose un large choix de thèmes, ce qui vous permet de personnaliser l'apparence de votre application en fonction de vos préférences ou des besoins de votre marque. Vous pouvez ainsi donner à votre interface utilisateur un aspect unique et distinctif.
Pour résumer, DaisyUI offre un ensemble de thèmes prédéfinis qui simplifient grandement la création d'une interface utilisateur attrayante, cohérente et personnalisée. En choisissant un de ces thèmes, vous pouvez facilement définir les couleurs de tous les éléments de DaisyUI.
Et le moins qu'on puisse dire est qu'on a du choix :
MaryUI est équipé d'un composant pour basculer le thème de light à un thème sombre qu'il faut définir. Pour ajouter le thème sombre, c'est très simple, ça se passe dans tailwind.config.js :
/** @type {import('tailwindcss').Config} */
export default {
...
daisyui: {
themes: ["dark"],
},
// Add daisyUI
plugins: [require("daisyui")]
}Il faut ensuite rafraîchir la compilation :
npm run buildEnsuite on place le composant de bascule où on veut :
<x-theme-toggle /><x-theme-toggle class="btn btn-circle" />
<x-theme-toggle class="btn btn-circle btn-ghost" />Un composant
On crée un nouveau composant Volt :
php artisan make:volt auth/profile --class
Et une route :
Route::middleware('auth')->group(function () {
Volt::route('profile', 'auth.profile')->name('profile');
...
});On ajoute le lien dans le menu :
@if($user = auth()->user())
<x-menu-separator />
...
<x-menu-item title="{{__('Profile')}}" icon="o-user" link="{{ route('profile') }}" />
<x-menu-separator />
@elseOn a besoin d'une traduction :
"Profile": "Profil"
Il nous faut maintenant coder notre composant. Pour le formulaire, on va avoir un réglage de la pagination. MaryUI propose un joli contrôle Range Slider :
Il va parfaitement nous convenir pour la valeur de la pagination. Pour le reste, ce seront des contrôles classiques. Voici le code complet du composant :
<?php
use Livewire\Volt\Component;
use Illuminate\Support\Facades\Auth;
use App\Models\User;
use Illuminate\Validation\Rule;
use Mary\Traits\Toast;
new class extends Component
{
use Toast;
public User $user;
public int $pagination;
public string $email;
public bool $adult;
public function mount(): void
{
$this->user = Auth::user();
$this->fill($this->user);
}
public function save(): void
{
$data = $this->validate([
'email' => [
'required','email',
Rule::unique('users')->ignore($this->user->id),
],
'pagination' => 'required|integer|min:3|max:20',
'adult' => 'required|boolean',
]);
$this->user->update($data);
$this->success(__('Profile updated with success.'), redirectTo: '/profile');
}
public function deleteAccount(): void
{
$this->user->delete();
$this->success(__('Account deleted with success.'), redirectTo: '/');
}
}; ?>
<div>
<x-card class="h-screen flex items-center justify-center" title="{{__('Update profile')}}">
<x-form wire:submit="save">
<x-input label="{{__('E-mail')}}" value="{{ $email }}" wire:model="email" icon="o-envelope" inline />
<x-range
wire:model.live.debounce="pagination"
label="Pagination ({{ $pagination }})"
min="3"
max="20"
step="1"
hint="{{__('Between 3 and 20')}}"
class="range-accent"/>
<x-checkbox label="{{ __('I am an adult') }}" wire:model="adult"/>
<x-slot:actions>
<x-button
label="{{__('Delete account')}}"
icon="c-hand-thumb-down"
wire:confirm="{{__('Are you sure to delete your account?')}}"
wire:click="deleteAccount"
class="btn-warning" />
<x-button label="{{__('Save')}}" icon="o-paper-airplane" spinner="save" type="submit" class="btn-primary" />
</x-slot:actions>
</x-form>
</x-card>
</div>"I am an adult": "Je suis un adulte",
"Profile updated with success.": "Le profil a bien été modifié",
"Update profile": "Modifier le profil",
"Delete account": "Supprimer le compte",
"Are you sure to delete your account?": "Voulez-vous vraiment supprimer votre compte ?",
"Account deleted with success.": "Le compte a bien été supprimé",
"Between 3 and 20": "Entre 3 et 20"On obtient cet aspect :
On a un peu de couleurs grâce au thème qu'on a ajouté précédemment. Voilà le rendu avec le thème Luxury :
Il ne faut pas oublier de compléter la propriété $fillable du modèle User pour éviter de se retrouver avec un bug difficile à résoudre :
protected $fillable = [
'name',
'email',
'password',
'adult',
'pagination',
];Le code du composant doit vous paraître désormais classique avec ce qu'on a vu auparavant.
La méthode fill()
Livewire fournit une méthode pratique nommée fill(), qui automatise le remplissage des propriétés des composants en correspondance avec les champs du modèle cible. Cette méthode simplifie grandement la mise en œuvre de vos composants en évitant d'avoir à définir manuellement chaque propriété.
Pour utiliser la méthode fill(), vous devez tout d'abord créer un modèle qui contient les champs de données que vous souhaitez afficher ou modifier dans votre composant. Ensuite, lorsque vous créez votre composant, vous pouvez simplement appeler la méthode fill() en passant votre modèle en tant que paramètre.
La méthode fill() effectue alors une correspondance automatique entre les propriétés du composant et les champs de données de votre modèle, remplissant ainsi automatiquement les propriétés du composant avec les valeurs appropriées.
Cette fonctionnalité offre plusieurs avantages :- réduction du code : en automatisant le remplissage des propriétés des composants, la méthode fill() évite d'avoir à répéter manuellement les attributs du modèle, ce qui réduit le code dupliqué et améliore la lisibilité
- simplification de la mise en œuvre des formulaires : lorsque vous travaillez avec des formulaires, la méthode fill() est particulièrement utile pour initialiser rapidement les champs du formulaire avec les valeurs du modèle, simplifiant ainsi grandement la mise en œuvre
Conclusion
Dans ce chapitre on a :- ajouté un item dans le menu pour le profil
- créé la route pour le profil
- créé le formulaire de modification du profil
- codé le traitement du formulaire
- ajouté la suppression du compte
Par bestmomo
Aucun commentaire