cycles.component.html

<seed-page [config]="{ title: 'Cycles', action: createCycle, actionIcon: 'fa-solid:plus', actionText: 'Create Cycle' }" title="Cycles">
  <!-- Cycles Table -->
  <seed-page-inventory-table-container>
    <table class="mat-elevation-z8 w-full bg-transparent" mat-table matSort [dataSource]="cyclesDataSource" [trackBy]="trackByFn">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let cycle">{{ cycle.id }}</td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let cycle">{{ cycle.name }}</td>
      </ng-container>

      <ng-container matColumnDef="start">
        <th mat-header-cell *matHeaderCellDef>Start Date</th>
        <td mat-cell *matCellDef="let cycle">{{ cycle.start }}</td>
      </ng-container>

      <ng-container matColumnDef="end">
        <th mat-header-cell *matHeaderCellDef>End Date</th>
        <td mat-cell *matCellDef="let cycle">{{ cycle.end }}</td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="select-none">Actions</th>
        <td mat-cell *matCellDef="let cycle">
          <a mat-stroked-button (click)="editCycle(cycle)" class="mr-2">
            <mat-icon class="icon-size-4" svgIcon="fa-solid:pencil"></mat-icon>
          </a>
          <a mat-stroked-button color="warn" (click)="deleteCycle(cycle)">
            <mat-icon class="icon-size-4" svgIcon="fa-solid:x"></mat-icon>
          </a>
        </td>
      </ng-container>

      <thead>
        <tr mat-header-row *matHeaderRowDef="cyclesColumns"></tr>
      </thead>
      <tbody>
        <tr mat-row *matRowDef="let row; columns: cyclesColumns"></tr>
      </tbody>
    </table>
  </seed-page-inventory-table-container>
</seed-page>