Tasks

Monitor and manage background task queues — view pending, running, and completed jobs with real-time status updates and error tracking
Instructions Claude
Prompt utilisé pour régénérer cette page :
Page "Tasks" du toolbox de web-cylian-laboratory.
Catégorie : Toolbox — interface de gestion de file d'attente de tâches
connectée à l'API REST api.cylian.org.

=== FRONT MATTER (index.md) ===
title: "Tasks"
description: "Task queue management interface"
icon: "clipboard-list"
tags: [api, tasks, queue]
features:
  - Task queue visualization
  - Create, update, delete tasks
  - Real-time status monitoring
  - Filter by status and type

=== PAS DE WIDGETS ===
Aucun fichier _*.left.md ni _*.right.md — toute l'interface est dans
index.md + default.js + default.scss.

=== CONTENU HTML (index.md) ===

1. Container principal (div#tasks-container) :
   - Toolbar (div#tasks-toolbar) :
     <button id="btn-refresh" class="button">Refresh</button>
     <button id="btn-create" class="button fill color-info">New Task</button>
     <select id="filter-type">
       <option value="">Select type...</option>
     </select>
   - Liste des tâches (div#tasks-list) : peuplé dynamiquement
   - État vide (div#tasks-empty class="hidden") : "No tasks found"

2. Dialog création de tâche (<dialog id="task-dialog">) :
   <form id="task-form" method="dialog"> contenant :
   - <h3>New Task</h3>
   - Label "Type" : <input type="text" name="type" required
     placeholder="e.g. email, report, sync">
   - Label "Priority" : <input type="number" name="priority"
     value="0" min="0" max="10">
   - Label "Payload (JSON)" : <textarea name="payload" rows="4"
     placeholder='{"key": "value"}'>
   - div.dialog-actions :
     <button type="button" id="btn-cancel" class="button">Cancel</button>
     <button type="submit" class="button fill color-success">Create</button>

3. Dialog visualisation payload (<dialog id="payload-dialog">) :
   div.payload-view contenant :
   - <h3>Payload</h3>
   - <pre id="payload-content"></pre>
   - div.dialog-actions :
     <button type="button" id="btn-close-payload" class="button">Close</button>

=== JAVASCRIPT (default.js) ===
ES module. Import tasks depuis /_lib/tasks_v1.js.
Configuration : tasks.configure('https://api.cylian.org').

Tous les éléments DOM capturés au niveau module :
listEl, emptyEl, filterType, btnRefresh, btnCreate, dialog, form,
btnCancel, payloadDialog, payloadContent, btnClosePayload.

État : currentType = null (string|null), currentTasks = [] (array).

formatDate(isoDate) : retourne '-' si null, sinon new Date().toLocaleString().

getStatusClass(status) : mappe les statuts vers les classes CSS badge :
  pending → 'badge-warning', processing → 'badge-info',
  completed → 'badge-success', failed → 'badge-error',
  défaut → 'badge-default'

renderTask(task) :
- Extrait id (task.id || task._id || 'unknown')
- Tronque l'ID à 8 caractères + '...' si > 8
- Génère le HTML de la carte :
  div.task-card[data-id] contenant :
    div.task-header : span.task-id (shortId) + span.badge (status)
    div.task-meta : span.task-priority "Priority: N"
    div.task-dates : span "Created: date"
    div.task-actions : button.button.small.color-danger[data-id] "Delete"

renderTasks(taskList) :
- Si vide : vide la liste, affiche empty ("No tasks" ou "Select a type")
- Sinon : cache empty, remplit listEl avec les cartes
- Attache les event handlers delete et click sur chaque carte

loadTypes() :
- Appelle tasks.types(), met à jour le select filter-type
  avec les types retournés

loadTasks() :
- Si pas de currentType → renderTasks([])
- Appelle tasks.list(currentType)
- Met à jour currentTasks et appelle renderTasks

handleTaskClick(event) :
- Ignore les clicks sur les boutons (event.target.tagName === 'BUTTON')
- Trouve la tâche par data-id dans currentTasks
- Affiche le payload en JSON formaté (indent 2) dans payloadDialog
- payloadDialog.showModal()

handleDelete(event) :
- event.stopPropagation() pour ne pas trigger handleTaskClick
- Vérifie currentType, confirm "Delete this task?"
- Appelle tasks.remove(currentType, id)
- Si succès → recharge les tâches

handleCreate(event) :
- event.preventDefault()
- Lit FormData : type (obligatoire), priority (parseInt, défaut 0)
- Parse le payload JSON si fourni (alert "Invalid JSON payload" en cas d'erreur)
- Appelle tasks.create(type, task)
- Si succès → ferme dialog, reset form, recharge types
  Si currentType === type → recharge aussi les tâches

handleTypeChange() :
- Met à jour currentType depuis filterType.value ('' → null)
- Recharge les tâches

init() :
- Event listeners :
  btnRefresh → loadTypes() + loadTasks()
  btnCreate → dialog.showModal()
  btnCancel → dialog.close()
  btnClosePayload → payloadDialog.close()
  filterType → handleTypeChange
  form submit → handleCreate
- Appelle loadTypes()
- console.log('[Tasks] Initialized')

Exécution : init() appelé directement (pas de DOMContentLoaded — ES module).

=== SCSS (default.scss) ===
#tasks-container : flex column gap var(--layout-spacing)
#tasks-toolbar : flex gap 0.5rem, flex-wrap
  select : padding .5rem .75rem, border primary, background surface,
  color primary, 0.875rem, cursor pointer
#tasks-list : grid auto-fill minmax(300px, 1fr) gap 1rem
#tasks-empty : center padding 2rem, color secondary, &.hidden display none
.task-card : border surface, border-radius .5rem, padding 1rem,
  background surface, flex column gap 0.5rem
.task-header : flex space-between center
.task-type : bold 1.1rem
.task-meta : flex space-between, 0.85rem, color secondary
.task-id : monospace
.task-dates : 0.8rem, color secondary
.task-actions : flex end gap 0.5rem, margin-top 0.5rem
Badges : .badge padding .2rem .5rem, border-radius .25rem, 0.75rem uppercase
  badge-warning : background warning, color ground
  badge-info : background info, color ground
  badge-success : background success, color ground
  badge-error : background danger, color ground
  badge-default : background surface draw, color surface text
dialog#task-dialog : border surface, border-radius .5rem, padding 1.5rem,
  background ground, color surface, min-width 400px, max-width 90vw
  ::backdrop : rgba(0,0,0,0.5)
  h3 : margin 0 0 1rem, color primary
  label : flex column gap .25rem, margin-bottom 1rem
  input/textarea : padding .5rem, border surface, background surface
.dialog-actions : flex end gap .5rem, margin-top 1rem
dialog#payload-dialog : même style que task-dialog
  pre : padding 1rem, background surface, monospace 0.875rem, overflow-x auto
.error : color danger, padding 1rem, center

=== OBJECTIF ===
Interface de gestion de tâches par type (collection). Les tâches sont
filtrées par type via un dropdown peuplé dynamiquement par l'API.
Chaque tâche est affichée comme une carte avec ID tronqué, statut coloré
(badge), priorité et date de création. Le click sur une carte affiche
son payload JSON dans un dialog modal. La création utilise un formulaire
avec validation du type (obligatoire) et parsing JSON du payload.
Les statuts supportés sont : pending, processing, completed, failed.
Grille CSS responsive avec minmax(300px, 1fr) pour les cartes.
Page entièrement générée et maintenue par IA, sans intervention humaine.