- Implemented state management for filter and objective visibility using `useState`. - Integrated `userPreferencesService` to load and save user preferences on component mount and toggle actions. - Updated `KanbanBoardContainer` to conditionally render filters and objectives based on user preferences. - Enhanced UI with buttons for toggling visibility, improving user experience and customization.
229 lines
5.8 KiB
TypeScript
229 lines
5.8 KiB
TypeScript
import { TaskPriority, TaskStatus } from '@/lib/types';
|
|
|
|
// Types pour les préférences utilisateur
|
|
export interface KanbanFilters {
|
|
search?: string;
|
|
tags?: string[];
|
|
priorities?: TaskPriority[];
|
|
showCompleted?: boolean;
|
|
sortBy?: string;
|
|
}
|
|
|
|
export interface ViewPreferences {
|
|
compactView: boolean;
|
|
swimlanesByTags: boolean;
|
|
swimlanesMode?: 'tags' | 'priority';
|
|
showObjectives: boolean;
|
|
showFilters: boolean;
|
|
}
|
|
|
|
export interface ColumnVisibility {
|
|
hiddenStatuses: TaskStatus[];
|
|
}
|
|
|
|
export interface UserPreferences {
|
|
kanbanFilters: KanbanFilters;
|
|
viewPreferences: ViewPreferences;
|
|
columnVisibility: ColumnVisibility;
|
|
}
|
|
|
|
// Valeurs par défaut
|
|
const DEFAULT_PREFERENCES: UserPreferences = {
|
|
kanbanFilters: {
|
|
search: '',
|
|
tags: [],
|
|
priorities: [],
|
|
showCompleted: true
|
|
},
|
|
viewPreferences: {
|
|
compactView: false,
|
|
swimlanesByTags: false,
|
|
showObjectives: true,
|
|
showFilters: true
|
|
},
|
|
columnVisibility: {
|
|
hiddenStatuses: []
|
|
}
|
|
};
|
|
|
|
// Clés pour le localStorage
|
|
const STORAGE_KEYS = {
|
|
KANBAN_FILTERS: 'towercontrol_kanban_filters',
|
|
VIEW_PREFERENCES: 'towercontrol_view_preferences',
|
|
COLUMN_VISIBILITY: 'towercontrol_column_visibility'
|
|
} as const;
|
|
|
|
/**
|
|
* Service pour gérer les préférences utilisateur dans le localStorage
|
|
*/
|
|
export const userPreferencesService = {
|
|
// === FILTRES KANBAN ===
|
|
|
|
/**
|
|
* Sauvegarde les filtres Kanban
|
|
*/
|
|
saveKanbanFilters(filters: KanbanFilters): void {
|
|
try {
|
|
localStorage.setItem(STORAGE_KEYS.KANBAN_FILTERS, JSON.stringify(filters));
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la sauvegarde des filtres Kanban:', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Récupère les filtres Kanban
|
|
*/
|
|
getKanbanFilters(): KanbanFilters {
|
|
try {
|
|
const stored = localStorage.getItem(STORAGE_KEYS.KANBAN_FILTERS);
|
|
if (stored) {
|
|
return { ...DEFAULT_PREFERENCES.kanbanFilters, ...JSON.parse(stored) };
|
|
}
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la récupération des filtres Kanban:', error);
|
|
}
|
|
return DEFAULT_PREFERENCES.kanbanFilters;
|
|
},
|
|
|
|
// === PRÉFÉRENCES DE VUE ===
|
|
|
|
/**
|
|
* Sauvegarde les préférences de vue
|
|
*/
|
|
saveViewPreferences(preferences: ViewPreferences): void {
|
|
try {
|
|
localStorage.setItem(STORAGE_KEYS.VIEW_PREFERENCES, JSON.stringify(preferences));
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la sauvegarde des préférences de vue:', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Récupère les préférences de vue
|
|
*/
|
|
getViewPreferences(): ViewPreferences {
|
|
try {
|
|
const stored = localStorage.getItem(STORAGE_KEYS.VIEW_PREFERENCES);
|
|
if (stored) {
|
|
return { ...DEFAULT_PREFERENCES.viewPreferences, ...JSON.parse(stored) };
|
|
}
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la récupération des préférences de vue:', error);
|
|
}
|
|
return DEFAULT_PREFERENCES.viewPreferences;
|
|
},
|
|
|
|
// === VISIBILITÉ DES COLONNES ===
|
|
|
|
/**
|
|
* Sauvegarde la visibilité des colonnes
|
|
*/
|
|
saveColumnVisibility(visibility: ColumnVisibility): void {
|
|
try {
|
|
localStorage.setItem(STORAGE_KEYS.COLUMN_VISIBILITY, JSON.stringify(visibility));
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la sauvegarde de la visibilité des colonnes:', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Récupère la visibilité des colonnes
|
|
*/
|
|
getColumnVisibility(): ColumnVisibility {
|
|
try {
|
|
const stored = localStorage.getItem(STORAGE_KEYS.COLUMN_VISIBILITY);
|
|
if (stored) {
|
|
return { ...DEFAULT_PREFERENCES.columnVisibility, ...JSON.parse(stored) };
|
|
}
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la récupération de la visibilité des colonnes:', error);
|
|
}
|
|
return DEFAULT_PREFERENCES.columnVisibility;
|
|
},
|
|
|
|
// === MÉTHODES GLOBALES ===
|
|
|
|
/**
|
|
* Récupère toutes les préférences utilisateur
|
|
*/
|
|
getAllPreferences(): UserPreferences {
|
|
return {
|
|
kanbanFilters: this.getKanbanFilters(),
|
|
viewPreferences: this.getViewPreferences(),
|
|
columnVisibility: this.getColumnVisibility()
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Sauvegarde toutes les préférences utilisateur
|
|
*/
|
|
saveAllPreferences(preferences: UserPreferences): void {
|
|
this.saveKanbanFilters(preferences.kanbanFilters);
|
|
this.saveViewPreferences(preferences.viewPreferences);
|
|
this.saveColumnVisibility(preferences.columnVisibility);
|
|
},
|
|
|
|
/**
|
|
* Remet à zéro toutes les préférences
|
|
*/
|
|
resetAllPreferences(): void {
|
|
try {
|
|
Object.values(STORAGE_KEYS).forEach(key => {
|
|
localStorage.removeItem(key);
|
|
});
|
|
} catch (error) {
|
|
console.warn('Erreur lors de la remise à zéro des préférences:', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Vérifie si le localStorage est disponible
|
|
*/
|
|
isStorageAvailable(): boolean {
|
|
try {
|
|
const test = '__storage_test__';
|
|
localStorage.setItem(test, test);
|
|
localStorage.removeItem(test);
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
// === MÉTHODES UTILITAIRES ===
|
|
|
|
/**
|
|
* Met à jour partiellement les filtres Kanban
|
|
*/
|
|
updateKanbanFilters(updates: Partial<KanbanFilters>): void {
|
|
const current = this.getKanbanFilters();
|
|
this.saveKanbanFilters({ ...current, ...updates });
|
|
},
|
|
|
|
/**
|
|
* Met à jour partiellement les préférences de vue
|
|
*/
|
|
updateViewPreferences(updates: Partial<ViewPreferences>): void {
|
|
const current = this.getViewPreferences();
|
|
this.saveViewPreferences({ ...current, ...updates });
|
|
},
|
|
|
|
/**
|
|
* Met à jour la visibilité d'une colonne spécifique
|
|
*/
|
|
toggleColumnVisibility(status: TaskStatus): void {
|
|
const current = this.getColumnVisibility();
|
|
const hiddenStatuses = new Set(current.hiddenStatuses);
|
|
|
|
if (hiddenStatuses.has(status)) {
|
|
hiddenStatuses.delete(status);
|
|
} else {
|
|
hiddenStatuses.add(status);
|
|
}
|
|
|
|
this.saveColumnVisibility({
|
|
hiddenStatuses: Array.from(hiddenStatuses)
|
|
});
|
|
}
|
|
};
|