feat: add isArchived property to DailyCheckbox and related components

- Introduced `isArchived` property to `DailyCheckbox` to track archived tasks.
- Updated `DailyCheckboxItem`, `CheckboxItem`, and `DailySection` components to reflect archived state in UI.
- Adjusted checkbox behavior to disable interactions for archived tasks and visually indicate their status.
- Enhanced task management services to include archived status during task creation and updates.
This commit is contained in:
Julien Froidefond
2025-10-02 11:02:29 +02:00
parent e0b5afb437
commit 63ef861360
7 changed files with 34 additions and 12 deletions

View File

@@ -109,7 +109,8 @@ export class DailyClient {
...checkbox, ...checkbox,
date: parseDate(checkbox.date), date: parseDate(checkbox.date),
createdAt: parseDate(checkbox.createdAt), createdAt: parseDate(checkbox.createdAt),
updatedAt: parseDate(checkbox.updatedAt) updatedAt: parseDate(checkbox.updatedAt),
isArchived: checkbox.text.includes('[ARCHIVÉ]')
}; };
} }

View File

@@ -102,20 +102,27 @@ export function DailyCheckboxItem({
setEditingCheckbox(null); setEditingCheckbox(null);
}; };
// Vérifier si la tâche est archivée
const isArchived = checkbox.isArchived;
return ( return (
<> <>
<div className={`flex items-center gap-3 px-3 py-2 sm:py-1.5 sm:gap-2 rounded border transition-colors group ${ <div className={`flex items-center gap-3 px-3 py-2 sm:py-1.5 sm:gap-2 rounded border transition-colors group ${
checkbox.type === 'meeting' checkbox.type === 'meeting'
? 'border-l-4 border-l-blue-500 border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)]' ? 'border-l-4 border-l-blue-500 border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)]'
: 'border-l-4 border-l-green-500 border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)]' : 'border-l-4 border-l-green-500 border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)]'
}`}> } ${isArchived ? 'opacity-60 bg-[var(--muted)]/20' : ''}`}>
{/* Checkbox */} {/* Checkbox */}
<input <input
type="checkbox" type="checkbox"
checked={isChecked} checked={isArchived ? false : isChecked}
onChange={handleOptimisticToggle} onChange={handleOptimisticToggle}
disabled={saving} disabled={saving || isArchived}
className="w-4 h-4 md:w-3.5 md:h-3.5 rounded border border-[var(--border)] text-[var(--primary)] focus:ring-[var(--primary)]/20 focus:ring-1" className={`w-4 h-4 md:w-3.5 md:h-3.5 rounded border text-[var(--primary)] focus:ring-[var(--primary)]/20 focus:ring-1 ${
isArchived
? 'border-[var(--muted)] cursor-not-allowed opacity-50'
: 'border-[var(--border)]'
}`}
/> />
{/* Contenu principal */} {/* Contenu principal */}
@@ -133,7 +140,7 @@ export function DailyCheckboxItem({
{/* Texte cliquable pour édition inline */} {/* Texte cliquable pour édition inline */}
<span <span
className={`flex-1 text-sm sm:text-xs font-mono transition-all cursor-pointer hover:bg-[var(--muted)]/50 py-0.5 px-1 rounded ${ className={`flex-1 text-sm sm:text-xs font-mono transition-all cursor-pointer hover:bg-[var(--muted)]/50 py-0.5 px-1 rounded ${
checkbox.isChecked isArchived || checkbox.isChecked
? 'line-through text-[var(--muted-foreground)]' ? 'line-through text-[var(--muted-foreground)]'
: 'text-[var(--foreground)]' : 'text-[var(--foreground)]'
}`} }`}

View File

@@ -93,7 +93,8 @@ export function DailySection({
isChecked: checkbox.isChecked, isChecked: checkbox.isChecked,
type: checkbox.type, type: checkbox.type,
taskId: checkbox.taskId, taskId: checkbox.taskId,
task: checkbox.task task: checkbox.task,
isArchived: checkbox.isArchived
}); });
return ( return (

View File

@@ -14,6 +14,7 @@ export interface CheckboxItemData {
id: string; id: string;
title: string; title: string;
}; };
isArchived?: boolean;
} }
interface CheckboxItemProps { interface CheckboxItemProps {
@@ -112,15 +113,24 @@ export function CheckboxItem({
return 'border-l-green-500'; return 'border-l-green-500';
}; };
// Vérifier si la tâche est archivée
const isArchived = item.isArchived;
return ( return (
<div className={`flex items-center gap-3 px-3 py-2 sm:py-1.5 sm:gap-2 rounded border transition-colors group border-l-4 ${getTypeBorderColor()} border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)] ${className}`}> <div className={`flex items-center gap-3 px-3 py-2 sm:py-1.5 sm:gap-2 rounded border transition-colors group border-l-4 ${getTypeBorderColor()} border-t-[var(--border)]/30 border-r-[var(--border)]/30 border-b-[var(--border)]/30 hover:border-t-[var(--border)] hover:border-r-[var(--border)] hover:border-b-[var(--border)] ${
isArchived ? 'opacity-60 bg-[var(--muted)]/20' : ''
} ${className}`}>
{/* Checkbox */} {/* Checkbox */}
<input <input
type="checkbox" type="checkbox"
checked={isChecked} checked={isArchived ? false : isChecked}
onChange={handleOptimisticToggle} onChange={handleOptimisticToggle}
disabled={saving} disabled={saving || isArchived}
className="w-4 h-4 md:w-3.5 md:h-3.5 rounded border border-[var(--border)] text-[var(--primary)] focus:ring-[var(--primary)]/20 focus:ring-1" className={`w-4 h-4 md:w-3.5 md:h-3.5 rounded border text-[var(--primary)] focus:ring-[var(--primary)]/20 focus:ring-1 ${
isArchived
? 'border-[var(--muted)] cursor-not-allowed opacity-50'
: 'border-[var(--border)]'
}`}
/> />
{/* Contenu principal */} {/* Contenu principal */}
@@ -138,7 +148,7 @@ export function CheckboxItem({
{/* Texte cliquable pour édition inline */} {/* Texte cliquable pour édition inline */}
<span <span
className={`flex-1 text-sm sm:text-xs font-mono transition-all cursor-pointer hover:bg-[var(--muted)]/50 py-0.5 px-1 rounded ${ className={`flex-1 text-sm sm:text-xs font-mono transition-all cursor-pointer hover:bg-[var(--muted)]/50 py-0.5 px-1 rounded ${
item.isChecked isArchived || item.isChecked
? 'line-through text-[var(--muted-foreground)]' ? 'line-through text-[var(--muted-foreground)]'
: 'text-[var(--foreground)]' : 'text-[var(--foreground)]'
}`} }`}

View File

@@ -435,6 +435,7 @@ export interface DailyCheckbox {
order: number; order: number;
taskId?: string; taskId?: string;
task?: Task; // Relation optionnelle vers une tâche task?: Task; // Relation optionnelle vers une tâche
isArchived?: boolean;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
} }

View File

@@ -235,6 +235,7 @@ export class DailyService {
jiraKey: checkbox.task.jiraKey || undefined, jiraKey: checkbox.task.jiraKey || undefined,
assignee: checkbox.task.assignee || undefined assignee: checkbox.task.assignee || undefined
} : undefined, } : undefined,
isArchived: checkbox.text.includes('[ARCHIVÉ]'),
createdAt: checkbox.createdAt, createdAt: checkbox.createdAt,
updatedAt: checkbox.updatedAt updatedAt: checkbox.updatedAt
}; };

View File

@@ -245,6 +245,7 @@ export class TasksService {
jiraType: checkbox.task.jiraType ?? undefined, jiraType: checkbox.task.jiraType ?? undefined,
assignee: checkbox.task.assignee ?? undefined assignee: checkbox.task.assignee ?? undefined
} : undefined, } : undefined,
isArchived: checkbox.text.includes('[ARCHIVÉ]'),
createdAt: checkbox.createdAt, createdAt: checkbox.createdAt,
updatedAt: checkbox.updatedAt updatedAt: checkbox.updatedAt
})); }));