From 0c8109b36676c40ccdd9a40748011314a53c6741 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Wed, 12 Feb 2025 13:54:01 +0100 Subject: [PATCH] =?UTF-8?q?docs(devbook):=20mise=20=C3=A0=20jour=20des=20f?= =?UTF-8?q?onctionnalit=C3=A9s=20de=20la=20page=20settings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devbook.md | 18 +- src/app/settings/page.tsx | 349 +++++++++++++++++++++++++++----------- 2 files changed, 259 insertions(+), 108 deletions(-) diff --git a/devbook.md b/devbook.md index 42865f9..09e015e 100644 --- a/devbook.md +++ b/devbook.md @@ -46,9 +46,9 @@ Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga - [ ] Synchronisation de l'état de lecture avec Komga - [ ] Revue du système de cache - [ ] Optimisation du cache côté serveur - - [ ] Gestion intelligente du TTL par type de données + - [x] Gestion intelligente du TTL par type de données - [ ] Invalidation du cache sur les mutations - - [ ] Stratégie de revalidation à la demande + - [x] Stratégie de revalidation à la demande ### Gestion des utilisateurs @@ -125,14 +125,22 @@ Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga - [x] Redirection après connexion - [x] Page de paramètres - [x] Formulaire de configuration Komga - - [x] Validation de l'URL du serveur - - [x] Test de connexion en direct - - [x] Vérification des credentials via l'API Komga + - [x] Validation de l'URL du serveur + - [x] Test de connexion en direct - [x] Gestion des erreurs détaillée - [x] Messages d'erreur contextuels - [x] Sauvegarde des préférences - [x] Stockage sécurisé des credentials Komga - [x] Persistance des paramètres + - [x] Configuration du cache + - [x] Gestion des TTL par type de données + - [x] Interface de configuration intuitive + - [x] Nettoyage du cache à la demande + - [x] UI/UX optimisée + - [x] Layout compact et centré + - [x] Hiérarchie visuelle claire + - [x] Composants redimensionnés + - [x] Espacement optimisé ## 📱 Interface utilisateur diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index cf767a7..71d4f3f 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -5,6 +5,7 @@ import { Loader2, Network, Trash2 } from "lucide-react"; import { useRouter } from "next/navigation"; import { storageService } from "@/lib/services/storage.service"; import { AuthError } from "@/types/auth"; +import { useToast } from "@/components/ui/use-toast"; interface ErrorMessage { message: string; @@ -12,7 +13,7 @@ interface ErrorMessage { export default function SettingsPage() { const router = useRouter(); - const formRef = useRef(null); + const { toast } = useToast(); const [isLoading, setIsLoading] = useState(false); const [isCacheClearing, setIsCacheClearing] = useState(false); const [error, setError] = useState(null); @@ -22,6 +23,14 @@ export default function SettingsPage() { username: "", password: "", }); + const [ttlConfig, setTTLConfig] = useState({ + defaultTTL: 5, + homeTTL: 5, + librariesTTL: 1440, + seriesTTL: 5, + booksTTL: 5, + imagesTTL: 1440, + }); useEffect(() => { // Charger la configuration existante @@ -33,6 +42,12 @@ export default function SettingsPage() { password: savedConfig.credentials?.password || "", }); } + + // Charger la configuration des TTL + const savedTTLConfig = storageService.getTTLConfig(); + if (savedTTLConfig) { + setTTLConfig(savedTTLConfig); + } }, []); const handleClearCache = async () => { @@ -50,13 +65,17 @@ export default function SettingsPage() { throw new Error(data.error || "Erreur lors de la suppression du cache"); } - setSuccess("Cache serveur supprimé avec succès"); - router.refresh(); // Rafraîchir la page pour recharger les données + toast({ + title: "Cache supprimé", + description: "Cache serveur supprimé avec succès", + }); + router.refresh(); } catch (error) { console.error("Erreur:", error); - setError({ - code: "CACHE_CLEAR_ERROR", - message: error instanceof Error ? error.message : "Une erreur est survenue", + toast({ + variant: "destructive", + title: "Erreur", + description: error instanceof Error ? error.message : "Une erreur est survenue", }); } finally { setIsCacheClearing(false); @@ -86,12 +105,16 @@ export default function SettingsPage() { throw new Error(data.error || "Erreur lors du test de connexion"); } - setSuccess("Connexion réussie"); + toast({ + title: "Connexion réussie", + description: "La connexion au serveur Komga a été établie avec succès", + }); } catch (error) { console.error("Erreur:", error); - setError({ - code: "TEST_CONNECTION_ERROR", - message: error instanceof Error ? error.message : "Une erreur est survenue", + toast({ + variant: "destructive", + title: "Erreur", + description: error instanceof Error ? error.message : "Une erreur est survenue", }); } finally { setIsLoading(false); @@ -122,151 +145,271 @@ export default function SettingsPage() { ); setConfig(newConfig); - setSuccess("Configuration sauvegardée avec succès"); + toast({ + title: "Configuration sauvegardée", + description: "La configuration a été sauvegardée avec succès", + }); + }; + + const handleInputChange = (event: React.ChangeEvent) => { + const { name, value } = event.target; + setConfig((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleTTLChange = (event: React.ChangeEvent) => { + const { name, value } = event.target; + setTTLConfig((prev) => ({ + ...prev, + [name]: parseInt(value || "0", 10), + })); + }; + + const handleSaveTTL = (event: React.FormEvent) => { + event.preventDefault(); + setSuccess(null); + + storageService.setTTLConfig(ttlConfig); + toast({ + title: "Configuration TTL sauvegardée", + description: "La configuration des TTL a été sauvegardée avec succès", + }); }; return ( -
+

Préférences

-
+ {/* Messages de succès/erreur */} + {error && ( +
+

{error.message}

+
+ )} + {success && ( +
+

{success}

+
+ )} + +
{/* Section Configuration Komga */} -
-
-

Configuration Komga

-

- Configurez les informations de connexion à votre serveur Komga. Ces informations sont - nécessaires pour accéder à votre bibliothèque. -

-
-
+
+
+
+

+ + Configuration Komga +

+

+ Configurez les informations de connexion à votre serveur Komga. +

+
+ {/* Formulaire de configuration */} -
-
+ +
-

- L'adresse de votre serveur Komga, par exemple : https://komga.votredomaine.com -

-

- Votre identifiant de connexion au serveur Komga -

-

- Votre mot de passe de connexion au serveur Komga -

+
+
- -
- - {/* Actions */} -
-
-

Actions

-

- Outils de gestion de la connexion et du cache -

-
-
- -

- Vérifie que la connexion au serveur est fonctionnelle avec les paramètres - actuels -

-
-
- -

- Vide le cache du serveur pour forcer le rechargement des données. Utile en cas - de problème d'affichage. -

-
-
+
-
+
- {/* Messages de succès/erreur */} - {error && ( -
-

{error.message}

+ {/* Section Configuration du Cache */} +
+
+
+

+ + Configuration du Cache +

+

+ Gérez les paramètres de mise en cache des données. +

+
+ + {/* Formulaire TTL */} +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
- )} - {success && ( -
-

{success}

-
- )} +
);