agent done

src/app/dashboard/pages/tpe-select/tpe-select.html

@@ -0,0 +1,35 @@
+<div class="p-4 border rounded-lg shadow bg-white dark:bg-gray-900">
+   @if (loading()) {
+    <div class="flex justify-center py-4">
+        <div class="w-6 h-6 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
+      </div>
+   } 
+    @if(!loading()){
+        @if(tpes().length > 0){
+          <div>
+            <app-data-table 
+            [data]="tpes()" 
+            [columns]="columns">
+              <ng-template #rowActions let-row>
+                <div class="flex gap-2 flex-wrap">
+                  <input type="checkbox" (click)="toggleTpe(row)" [checked] = "isChecked(row)" />
+                </div>
+              </ng-template>
+            </app-data-table>
+            <app-paginator
+              [total]="total()"
+              [page]="page()"
+              [perPage]="perPage()"
+              (pageChange)="page.set($event)"
+              (perPageChange)="perPage.set($event)">
+            </app-paginator>
+        </div>
+        }
+        @if (tpes().length === 0) {
+            <p  class="text-gray-500 dark:text-gray-400">
+                Aucun TPE disponible.
+            </p>
+        }  
+    }
+  </div>
+  

src/app/dashboard/pages/tpe-select/tpe-select.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TpeSelect } from './tpe-select';
+
+describe('TpeSelect', () => {
+  let component: TpeSelect;
+  let fixture: ComponentFixture<TpeSelect>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TpeSelect]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TpeSelect);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/pages/tpe-select/tpe-select.ts

@@ -0,0 +1,110 @@
+import { Component, effect, EventEmitter, Input, Output, signal } from '@angular/core';
+import { SortState, TableColumn, DataTable } from '@shared/components/data-table/data-table';
+import { ListParams, SortDir } from '@shared/paging/paging';
+import { Agent } from 'src/app/core/interfaces/agent';
+import { TpeDevice } from 'src/app/core/interfaces/tpe';
+import { TpeService } from 'src/app/core/services/tpe';
+import { Paginator } from "@shared/components/paginator/paginator";
+
+@Component({
+  selector: 'app-tpe-select',
+  imports: [DataTable, Paginator],
+  templateUrl: './tpe-select.html',
+  styleUrl: './tpe-select.css',
+})
+export class TpeSelect {
+  @Input() agent?: Agent; // Agent pour filtrer les TPE assignés
+  @Input() selected: string[] = []; // Ids de TPE à cocher par défaut
+
+  @Output() selectionChange = new EventEmitter<string[]>(); // TPE sélectionnés
+
+  tpes = signal<TpeDevice[]>([]);
+  total = signal(0);
+  loading = signal<boolean>(true);
+  selectedIds = signal<Set<string>>(new Set());
+  page = signal(0);
+  perPage = signal(10);
+  search = signal('');
+  sort = signal<SortState>({ key: 'id', dir: 'asc' });
+
+ 
+
+  columns:TableColumn<TpeDevice>[] = [
+    {
+      key: 'numeroSerie',
+      label: "Numero de serie"
+    },
+    {
+      key: 'versionLogicielle',
+      label: "Version du logiciel"
+    },
+    {
+      key: 'modeleAppareil',
+      label: "Model"
+    },
+    {
+      key: 'systemeExploitation',
+      label: 'Système d\'exploitation' 
+    },
+    {
+      key: 'versionOs',
+      label: 'Version Os'
+    }
+  ]
+
+   constructor(private tpeService: TpeService) {
+    effect(()=>{
+      const params = {
+        page: this.page(),
+        size: this.perPage(), 
+        sortKey: this.sort().key,
+        sortDir: this.sort().dir as SortDir,
+      }
+      this.loadTpes(params);
+    })
+  }
+
+  ngOnInit() {
+    // Initialiser les TPE sélectionnés si fournis
+    this.selectedIds.set(new Set(this.selected));
+
+  
+  }
+
+  private loadTpes(params:ListParams) {
+    this.loading.set(true);
+    this.tpeService.list(params).subscribe({
+      next: (res) => {
+        // Filtrer : TPE non assignés ou déjà assignés à cet agent
+        // console.log(res.content);
+        // const available = res.content.filter(
+        //   (t) =>
+        //     !t.agentConnecteId || t.agentConnecteId === this.agent?.id
+        // );
+        this.tpes.set(res.content);
+        this.total.set(res.pageable.total);
+        this.loading.set(false);
+      },
+      error: (err) => {
+        console.error(err);
+        this.loading.set(false);
+      },
+    });
+  }
+
+  toggleTpe(tpe: TpeDevice) {
+    const current = new Set(this.selectedIds());
+    if (current.has(tpe.id)) {
+      current.delete(tpe.id);
+    } else {
+      current.add(tpe.id);
+    }
+    this.selectedIds.set(current);
+    this.selectionChange.emit(Array.from(current));
+  }
+
+  isChecked(tpe: TpeDevice) {
+    return this.selectedIds().has(String(tpe.id));
+  }
+
+}