Merge branch 'feat/admin-pannel-structure' into 'dev'

Feat/admin pannel structure

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!147

src/app/admin/admin-pannel.scss

+.selector {
+  margin-bottom: 20px;
+  .option {
+    margin-right: 30px;
+  }
+}
+
+.results-tab {
+  margin-bottom: 20px;
+}
+
+.results-column {
+  width: 30%;
+}

src/app/admin/admin.module.ts

@@ -5,10 +5,11 @@ import { ClaimStructureComponent } from './components/claim-structure/claim-stru
 import { DeleteUserComponent } from './components/delete-user/delete-user.component';
 import { SharedModule } from '../shared/shared.module';
 import { NewsletterUsersComponent } from './components/newsletter-users/newsletter-users.component';
+import { AdminStructuresListComponent } from './components/structures-list/admin-structures-list.component';
 import { AdminRoutingModule } from './admin-routing.module';
 
 @NgModule({
-  declarations: [PanelComponent, ClaimStructureComponent, DeleteUserComponent, NewsletterUsersComponent],
+  declarations: [PanelComponent, ClaimStructureComponent, DeleteUserComponent, NewsletterUsersComponent, AdminStructuresListComponent],
   imports: [CommonModule, AdminRoutingModule, SharedModule],
 })
 export class AdminModule {}

src/app/admin/components/claim-structure/claim-structure.component.html

-<div fxLayout="row" fxLayoutAlign="center center">
-  <table *ngIf="demandsAttachment" aria-describedby="demands attachment results">
+<div fxLayout="column" fxLayoutAlign="center center">
+  <table *ngIf="isClaimedStructure" aria-describedby="demands attachment results" class="results-tab">
     <thead>
       <th scope="col">Utilisateur</th>
       <th scope="col">Structure</th>
       <th scope="col">Options</th>
     </thead>
     <tbody>
-      <tr *ngFor="let demand of demandsAttachment">
-        <td>{{ demand.userEmail }}</td>
-        <td>{{ demand.structureName }}</td>
+      <tr *ngFor="let structure of demandsAttachment">
+        <td>{{ structure.userEmail }}</td>
+        <td>{{ structure.structureName }}</td>
         <td>
-          <button (click)="acceptDemand(demand)">Valider</button><button (click)="refuseDemand(demand)">Refuser</button>
+          <button (click)="acceptDemand(structure)">Valider</button
+          ><button (click)="refuseDemand(structure)">Refuser</button>
         </td>
       </tr>
-      <tr *ngIf="!demandsAttachment.length">
+      <tr *ngIf="!demandsAttachment?.length">
         <td colspan="3">Aucune demande en attente</td>
       </tr>
     </tbody>

src/app/admin/components/claim-structure/claim-structure.component.ts

 import { Component, OnInit } from '@angular/core';
-import { DemandAttachment } from '../../models/demandAttachment.model';
+import { StructureAdminInfo } from '../../models/demandAttachment.model';
 import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-admin-claim-structure',
   templateUrl: './claim-structure.component.html',
+  styleUrls: ['../../admin-pannel.scss'],
 })
 export class ClaimStructureComponent implements OnInit {
-  public demandsAttachment: DemandAttachment[];
+  public demandsAttachment: StructureAdminInfo[];
+  public structuresUnclaimed: StructureAdminInfo[];
+  public isClaimedStructure: boolean = true;
+  public isUnclaimedStructure: boolean = false;
   constructor(private adminService: AdminService) {}
 
   ngOnInit(): void {
@@ -16,7 +20,7 @@ export class ClaimStructureComponent implements OnInit {
     });
   }
 
-  public acceptDemand(demand: DemandAttachment): void {
+  public acceptDemand(demand: StructureAdminInfo): void {
     this.adminService
       .acceptStructureClaim(demand.userEmail, demand.structureId, demand.structureName)
       .subscribe((data) => {
@@ -24,11 +28,15 @@ export class ClaimStructureComponent implements OnInit {
       });
   }
 
-  public refuseDemand(demand: DemandAttachment): void {
+  public refuseDemand(demand: StructureAdminInfo): void {
     this.adminService
       .refuseStructureClaim(demand.userEmail, demand.structureId, demand.structureName)
       .subscribe((data) => {
         this.demandsAttachment = data;
       });
   }
+
+  public claimedStructure(event: boolean): void {
+    this.isClaimedStructure = !this.isClaimedStructure;
+  }
 }

src/app/admin/components/panel/panel.component.html

 <div fxLayout="column" fxLayoutGap="20px" class="content-container full-screen">
   <div fxLayout="row" fxLayoutAlign="center center"><h1>Administration</h1></div>
   <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center center">
-    <button (click)="changeActiveFeature(features.pendingStructures)">Gestion structure</button>
+    <button (click)="changeActiveFeature(features.pendingStructures)">Revendication structure</button>
+    <button (click)="changeActiveFeature(features.structuresList)">Liste structures</button>
     <button (click)="changeActiveFeature(features.deleteUsers)">Suppression d'utilisateurs</button>
     <button (click)="changeActiveFeature(features.newsletterUsers)">Newsletter</button>
     <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="ghostLink">Ghost</a>
   </div>
+  <div *ngIf="selectedFeature === features.structuresList">
+    <app-admin-structures-list></app-admin-structures-list>
+  </div>
   <div *ngIf="selectedFeature === features.deleteUsers">
     <app-admin-delete-user></app-admin-delete-user>
   </div>

src/app/admin/components/structures-list/admin-structures-list.component.html

+<div fxLayout="column" fxLayoutAlign="center center">
+  <div fxLayout="row" class="selector">
+    <div fxLayout="row" class="checkbox no-width">
+      <div class="checkboxItem">
+        <label>
+          <input type="checkbox" [checked]="isInClaimStructure" (change)="inClaimStructure($event)" />
+          <span class="customCheck"></span>
+          <div class="label pass option">En revendication</div>
+        </label>
+      </div>
+      <div class="checkboxItem">
+        <label>
+          <input type="checkbox" [checked]="isClaimedStructure" (change)="claimedStructure($event)" />
+          <span class="customCheck"></span>
+          <div class="label pass option">Revendiquées</div>
+        </label>
+      </div>
+      <div class="checkboxItem">
+        <label>
+          <input type="checkbox" [checked]="isToClaimStructure" (change)="toClaimStructure($event)" />
+          <span class="customCheck"></span>
+          <div class="label pass option">Non revendiquées</div>
+        </label>
+      </div>
+      <div class="checkboxItem">
+        <label>
+          <input type="checkbox" [checked]="isAll" (change)="allStructure($event)" />
+          <span class="customCheck"></span>
+          <div class="label pass option">Toutes</div>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="!isInClaimStructure && !isToClaimStructure && !isClaimedStructure">
+    Choisir un filtre pour afficher la liste des structures
+  </div>
+  <table *ngIf="isInClaimStructure" aria-describedby="demands attachment results" class="results-tab results-column">
+    <thead>
+      <th scope="col">Structures en cours de revendication ({{ structuresInClaim.length }})</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let structure of structuresInClaim">
+        <td>
+          <a href="/acteurs?id={{ structure.structureId }}" target="_blank"> {{ structure.structureName }}</a>
+        </td>
+      </tr>
+      <tr *ngIf="!structuresInClaim?.length">
+        <td colspan="3">Aucune structure</td>
+      </tr>
+    </tbody>
+  </table>
+  <table *ngIf="isToClaimStructure" aria-describedby="demands attachment results" class="results-tab results-column">
+    <thead>
+      <th scope="col">Structures à revendiquer ({{ structuresToClaim.length }})</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let structure of structuresToClaim">
+        <td>
+          <a href="/acteurs?id={{ structure.structureId }}" target="_blank"> {{ structure.structureName }}</a>
+        </td>
+      </tr>
+      <tr *ngIf="!structuresToClaim?.length">
+        <td colspan="3">Aucune structure</td>
+      </tr>
+    </tbody>
+  </table>
+  <table *ngIf="isClaimedStructure" aria-describedby="demands attachment results" class="results-tab results-column">
+    <thead>
+      <th scope="col">Structures revendiquées ({{ structuresClaimed.length }})</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let structure of structuresClaimed">
+        <td>
+          <a href="/acteurs?id={{ structure.structureId }}" target="_blank"> {{ structure.structureName }}</a>
+        </td>
+      </tr>
+      <tr *ngIf="!structuresInClaim?.length">
+        <td colspan="3">Aucune structure</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/admin/components/structures-list/admin-structures-list.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminStructuresListComponent } from './admin-structures-list.component';
+
+describe('AdminStructuresListComponent', () => {
+  let component: AdminStructuresListComponent;
+  let fixture: ComponentFixture<AdminStructuresListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AdminStructuresListComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminStructuresListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/components/structures-list/admin-structures-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { StructureAdminInfo } from '../../models/demandAttachment.model';
+import { AdminService } from '../../services/admin.service';
+
+@Component({
+  selector: 'app-admin-structures-list',
+  templateUrl: './admin-structures-list.component.html',
+  styleUrls: ['../../admin-pannel.scss'],
+})
+export class AdminStructuresListComponent implements OnInit {
+  public structuresInClaim: StructureAdminInfo[];
+  public structuresToClaim: StructureAdminInfo[];
+  public structuresClaimed: StructureAdminInfo[];
+  public isClaimedStructure: boolean = false;
+  public isToClaimStructure: boolean = false;
+  public isInClaimStructure: boolean = true;
+  public isAll: boolean = false;
+  constructor(private adminService: AdminService) {}
+
+  ngOnInit(): void {
+    this.adminService.getAllStructureAdmin().subscribe((structures) => {
+      this.structuresClaimed = structures.claimed;
+      this.structuresInClaim = structures.inClaim;
+      this.structuresToClaim = structures.toClaim;
+    });
+  }
+
+  public claimedStructure(event: boolean): void {
+    this.isClaimedStructure = !this.isClaimedStructure;
+  }
+
+  public toClaimStructure(event: boolean): void {
+    this.isToClaimStructure = !this.isToClaimStructure;
+  }
+
+  public inClaimStructure(event: boolean): void {
+    this.isInClaimStructure = !this.isInClaimStructure;
+  }
+
+  public allStructure(event: boolean): void {
+    if (!this.isAll) {
+      this.isAll = !this.isAll;
+      this.isInClaimStructure = true;
+      this.isToClaimStructure = true;
+      this.isClaimedStructure = true;
+    } else {
+      this.isAll = !this.isAll;
+      this.isInClaimStructure = false;
+      this.isToClaimStructure = false;
+      this.isClaimedStructure = false;
+    }
+  }
+}

src/app/admin/models/demandAttachment.model.ts

-export class DemandAttachment {
+export class StructureAdminInfo {
   userEmail: string;
   structureId: number;
   structureName: string;

src/app/admin/services/admin.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { NewsletterSubscription } from '../../models/subscription-model';
 import { User } from '../../models/user.model';
-import { DemandAttachment } from '../models/demandAttachment.model';
+import { StructureAdminInfo } from '../models/demandAttachment.model';
 
 @Injectable({
   providedIn: 'root',
@@ -13,8 +13,16 @@ export class AdminService {
   constructor(private http: HttpClient) {}
 
   // Return pendingAttachments of all profiles.
-  public getPendingStructure(): Observable<DemandAttachment[]> {
-    return this.http.get<DemandAttachment[]>(`${this.baseUrl}/pendingStructures`);
+  public getPendingStructure(): Observable<StructureAdminInfo[]> {
+    return this.http.get<StructureAdminInfo[]>(`${this.baseUrl}/pendingStructures`);
+  }
+
+  public getToClaimStructure(): Observable<StructureAdminInfo[]> {
+    return this.http.get<StructureAdminInfo[]>(`${this.baseUrl}/unclaimedStructures`);
+  }
+
+  public getAllStructureAdmin(): Observable<any> {
+    return this.http.get<StructureAdminInfo[]>(`${this.baseUrl}/adminStructuresList`);
   }
 
   public getUsers(): Observable<User[]> {
@@ -45,8 +53,8 @@ export class AdminService {
     userEmail: string,
     structureId: number,
     structureName: string
-  ): Observable<DemandAttachment[]> {
-    return this.http.post<DemandAttachment[]>(`${this.baseUrl}/validatePendingStructure`, {
+  ): Observable<StructureAdminInfo[]> {
+    return this.http.post<StructureAdminInfo[]>(`${this.baseUrl}/validatePendingStructure`, {
       userEmail,
       structureId,
       structureName,
@@ -57,8 +65,8 @@ export class AdminService {
     userEmail: string,
     structureId: number,
     structureName: string
-  ): Observable<DemandAttachment[]> {
-    return this.http.post<DemandAttachment[]>(`${this.baseUrl}/rejectPendingStructure`, {
+  ): Observable<StructureAdminInfo[]> {
+    return this.http.post<StructureAdminInfo[]>(`${this.baseUrl}/rejectPendingStructure`, {
       userEmail,
       structureId,
       structureName,

src/app/shared/enum/adminPanel.enum.ts

 export enum AdminPannelEnum {
   deleteUsers,
   pendingStructures,
-  newsletterUsers
+  newsletterUsers,
+  structuresList,
 }