Aller au contenu

Vue · Helpdesk

File de tickets

Disponible

Déclinaison du patron liste rapport pour le helpdesk : barre de recherche (Search) + barre de filtres (FilterPill) + DataTable des tickets (sujet, priorité, SLA, assigné, statut) paginée + légende des agents (AvatarGroup). Un seul NodeSpec → rendu identique en Svelte, React et Vue.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

File de tickets : support niveau 1 (données mock)

File de tickets

Agents :
Priorité Urgente, Haute Statut Fermé SLA Dépassé
Tickets ouverts : support niveau 1
T-2041Connexion impossible après MAJUrgente2 h restantesMarie LefebvreOuvert
T-2040Export PDF tronquéHaute5 h restantesKarim BenaliEn cours
T-2039Demande de nouvelle fonctionnalitéBasse3 j restantsSophie DurandOuvert
T-2038Facture en doubleMoyenne1 j restantLéa MoreauEn attente
T-2037Lenteur du tableau de bordHauteDépasséKarim BenaliEn cours
1–5 of 8
Voir le code (Svelte) 
<div class="ft-shell">
  <div class="ft-titlebar">
    <h2 class="ft-title">File de tickets</h2>
    <Button variant="primary" size="sm">Nouveau ticket</Button>
  </div>
  <div class="ft-agents">
    <span class="ft-agents-label">Agents :</span>
    <AvatarGroup max={4}>
      <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
      <Avatar name="Karim Benali" size="sm" tone="category2" />
      <Avatar name="Sophie Durand" size="sm" tone="category3" />
      <Avatar name="Léa Moreau" size="sm" tone="category4" />
    </AvatarGroup>
  </div>
  <div class="ft-toolbar">
    <div class="ft-search">
      <Search
        label="Rechercher un ticket"
        placeholder="Rechercher par sujet ou n°…"
      />
    </div>
    <FilterBar label="Filtres actifs">
      <FilterPill
        field="Priorité"
        operator="in"
        value="Urgente, Haute"
        active
        removable
      />
      <FilterPill field="Statut" operator="!=" value="Fermé" active removable />
      <FilterPill
        field="SLA"
        operator="="
        value="Dépassé"
        active={false}
        removable
      />
    </FilterBar>
  </div>
  <div class="ft-table">
    <DataTable
      caption="Tickets ouverts : support niveau 1"
      columns={[{"key":"ref","label":"#","sortable":true},{"key":"sujet","label":"Sujet","sortable":true},{"key":"priorite","label":"Priorité","sortable":true},{"key":"sla","label":"SLA","sortable":true},{"key":"assigne","label":"Assigné à","sortable":true},{"key":"statut","label":"Statut","sortable":true}]}
      rows={[{"id":"1","ref":"T-2041","sujet":"Connexion impossible après MAJ","priorite":"Urgente","sla":"2 h restantes","assigne":"Marie Lefebvre","statut":"Ouvert"},{"id":"2","ref":"T-2040","sujet":"Export PDF tronqué","priorite":"Haute","sla":"5 h restantes","assigne":"Karim Benali","statut":"En cours"},{"id":"3","ref":"T-2039","sujet":"Demande de nouvelle fonctionnalité","priorite":"Basse","sla":"3 j restants","assigne":"Sophie Durand","statut":"Ouvert"},{"id":"4","ref":"T-2038","sujet":"Facture en double","priorite":"Moyenne","sla":"1 j restant","assigne":"Léa Moreau","statut":"En attente"},{"id":"5","ref":"T-2037","sujet":"Lenteur du tableau de bord","priorite":"Haute","sla":"Dépassé","assigne":"Karim Benali","statut":"En cours"},{"id":"6","ref":"T-2036","sujet":"Mot de passe oublié","priorite":"Basse","sla":"Résolu","assigne":"Marie Lefebvre","statut":"Fermé"},{"id":"7","ref":"T-2035","sujet":"Erreur 500 sur l'API","priorite":"Urgente","sla":"1 h restante","assigne":"Sophie Durand","statut":"Ouvert"},{"id":"8","ref":"T-2034","sujet":"Traduction manquante (ES)","priorite":"Basse","sla":"5 j restants","assigne":"Léa Moreau","statut":"En attente"}]}
      sortable
      pageSize={5}
      size="sm"
    />
  </div>
</div>

Composants DS utilisés