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,
date: parseDate(checkbox.date),
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);
};
// Vérifier si la tâche est archivée
const isArchived = checkbox.isArchived;
return (
<>
<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'
? '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)]'
}`}>
} ${isArchived ? 'opacity-60 bg-[var(--muted)]/20' : ''}`}>
{/* Checkbox */}
<input
type="checkbox"
checked={isChecked}
checked={isArchived ? false : isChecked}
onChange={handleOptimisticToggle}
disabled={saving}
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"
disabled={saving || isArchived}
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 */}
@@ -133,7 +140,7 @@ export function DailyCheckboxItem({
{/* Texte cliquable pour édition inline */}
<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 ${
checkbox.isChecked
isArchived || checkbox.isChecked
? 'line-through text-[var(--muted-foreground)]'
: 'text-[var(--foreground)]'
}`}

View File

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

View File

@@ -14,6 +14,7 @@ export interface CheckboxItemData {
id: string;
title: string;
};
isArchived?: boolean;
}
interface CheckboxItemProps {
@@ -112,15 +113,24 @@ export function CheckboxItem({
return 'border-l-green-500';
};
// Vérifier si la tâche est archivée
const isArchived = item.isArchived;
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 */}
<input
type="checkbox"
checked={isChecked}
checked={isArchived ? false : isChecked}
onChange={handleOptimisticToggle}
disabled={saving}
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"
disabled={saving || isArchived}
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 */}
@@ -138,7 +148,7 @@ export function CheckboxItem({
{/* Texte cliquable pour édition inline */}
<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 ${
item.isChecked
isArchived || item.isChecked
? 'line-through text-[var(--muted-foreground)]'
: 'text-[var(--foreground)]'
}`}

View File

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

View File

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

View File

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