16-1 Affichage avancé de la liste

La liste s'affiche bien, mais cette dernière est relativement simple. En effet, une application réelle afficherait les projets sous forme de liste, avec de l'information sur ces derniers: image, description, dernière date de mise à jour, etc.

Pour afficher les projets, j'utiliserai les List Group de Bootstrap (https://getbootstrap.com/docs/5.3/components/list-group/) et plus particulièrement la version "flush" (https://getbootstrap.com/docs/5.3/components/list-group/#flush)

L'objectif est d'arriver à ce résultat:

http://localhost:4200

Modifier la liste pour le type List group

Pour la suite, retravaillons la liste de projets avec la classe de liste de liste list-group et la classe d'élément de liste list-group-item.

Vous pouvez récupérer le code HTML ci-bas comme référence pour démarrer:

src/app/features/projets/components/projets-liste.ts

@Component({
  selector: 'app-projets-liste',
  imports: [
    RouterLink
  ],
  template: `
    <div class="mb-3">
      <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>
    </div>

    @if(projets && projets.length > 0) {
      <ul class="list-group list-group-flush">
        @for (projet of projets; track $index) {
          <li class="list-group-item">
            <div class="row d-flex justify-content-between align-items-start align-items-center">
              <div class="col-lg-8 d-flex">
                <div>
                  <!-- L'image ira ici -->
                </div>
                <div class="ms-4 me-auto">
                  <h5><a [routerLink]="['/projets', projet.id]">{{projet.nom}}</a></h5>
                  <p>{{projet.description}}</p>
                </div>
              </div>
              <div class="col-lg-4 d-flex flex-column align-items-end">
                <small class="text-body-secondary">Créé le: {{projet.created_at}}</small>
                <button (click)="supprimerProjet(projet.id)" class="btn btn-link text-danger btn-sm px-0">Supprimer</button>
              </div>
            </div>
          </li>
        }
      </ul>
    } @else {
      <div class="alert alert-info">
        Aucun projet disponible.
      </div>
    }
  `
})

Vous devriez avoir pour le moment un visuel ressemblant à ceci:

http://localhost:4200