Merge branch 'feat/admin-v3' into 'dev'

feat(ui): update admin section

See merge request !699

.vscode/settings.json

@@ -47,6 +47,7 @@
     "grandlyon",
     "instagram",
     "linkedin",
+    "lockdown",
     "matomo",
     "metropole",
     "Metropole",

src/app/admin/admin.scss

 @import 'color';
 
+header {
+  padding-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+}
+
 .adminLayout {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 1rem;
   margin: auto;
   padding-bottom: 1rem;
   width: 80%;
 }
 
+h3.inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
 .incomplete {
   color: $red;
 }
@@ -29,26 +54,6 @@
   font-weight: bold;
 }
 
-.lockdownCheckbox {
-  background: $white;
-  border-radius: 4px;
-  padding: 0 16px;
-  height: 44px;
-  padding-top: 22px;
-  outline: none;
-  border: 1px solid;
-  margin: 8px 0;
-  &.checked {
-    color: $white;
-    background: $green-1;
-    border: none;
-  }
-  input,
-  label {
-    cursor: pointer;
-  }
-}
-
 ::ng-deep .ag-row-group-leaf-indent {
   margin-left: 0 !important;
 }

src/app/admin/components/lockdown-info/manage-lockdown-info.component.html

@@ -2,19 +2,15 @@
 <div *ngIf="isLoading" class="loader" aria-busy="true">
   <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
 </div>
-<div *ngIf="!isLoading" fxLayout="column" fxLayoutAlign="center center">
+<div *ngIf="!isLoading" class="adminLayout">
   <h2>Gestion de l'affichage des infos Covid</h2>
   <div *ngIf="lockdownInfoDisplay">Les infos covid sont actuellement affichées dans les fiches structure.</div>
   <div *ngIf="!lockdownInfoDisplay">Les infos covid ne sont actuellement pas affichées dans les fiches structure.</div>
-  <div *ngIf="!error" class="lockdownCheckbox" [ngClass]="{ checked: lockdownInfoDisplay }">
-    <input
-      type="checkbox"
-      name="lockdownInfo"
-      id="lockdownInfo"
-      [checked]="lockdownInfoDisplay"
-      (change)="toggleLockdownInfo()"
-    />
-    <label for="lockdownInfo"> Afficher les infos covid</label>
-  </div>
+  <app-switch
+    *ngIf="!error"
+    label="Afficher les infos covid"
+    [checked]="lockdownInfoDisplay"
+    (action)="toggleLockdownInfo()"
+  />
   <p *ngIf="error" class="error">Une erreur s'est produite a l'enregistrement, veuillez ré-essayer plus tard.</p>
 </div>

src/app/admin/components/manage-employers/manage-employers.component.html

 <app-admin-nav-bar />
-<div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+<div class="adminLayout">
   <h2>
     Gestion des employeurs
     <span *ngIf="unvalidatedEmployers && validatedEmployers">

src/app/admin/components/manage-jobs/manage-jobs.component.html

 <app-admin-nav-bar />
-<div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+<div class="adminLayout">
   <h2>
     Gestion des fonctions
     <span *ngIf="unvalidatedJobs && validatedJobs"> ({{ unvalidatedJobs.length + validatedJobs.length }}) </span>
@@ -41,7 +41,7 @@
     <button type="submit" [ngClass]="{ invalid: !newJobForm.valid }">Créer</button>
   </form>
 
-  <div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+  <div class="adminLayout">
     <h2>
       Gestion des groupes de fonctions
       <span *ngIf="jobsGroups"> ({{ jobsGroups.length }}) </span>

src/app/admin/components/manage-users/manage-users.component.html

 <app-admin-nav-bar />
-<div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center" class="userBlock">
+<div class="adminLayout">
   <h2>
     Gestion des utilisateurs
     <span *ngIf="unVerifiedUsers && unAttachedUsers && attachedUsers">
@@ -23,7 +23,7 @@
     [frameworkComponents]="frameworkComponents"
   />
 
-  <h3 *ngIf="unAttachedUsers" class="title">
+  <h3 *ngIf="unAttachedUsers" class="title inline">
     Utilisateurs non rattachés ({{ unAttachedUsers.length }})
     <app-v3-button
       [label]="'Exporter'"
@@ -47,7 +47,7 @@
     (gridReady)="onGridReady($event, 'unattached')"
   />
 
-  <h3 *ngIf="attachedUsers" class="title">
+  <h3 *ngIf="attachedUsers" class="title inline">
     Utilisateurs rattachés ({{ attachedUsers.length }})
     <app-v3-button
       [label]="'Exporter'"

src/app/admin/components/nav-bar/nav-bar.component.html

-<div fxLayout="column" fxLayoutGap="20px" class="content-container">
-  <div fxLayout="row" fxLayoutAlign="center center">
-    <h1>Administration</h1>
-  </div>
-  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center center">
+<header>
+  <h1>Administration</h1>
+  <nav>
     <app-v3-button
       [label]="'Revendication structure'"
       [variant]="buttonTypeEnumV3.Secondary"
@@ -43,6 +41,6 @@
       [variant]="buttonTypeEnumV3.Secondary"
       (click)="router.navigateByUrl(routes.lockdownInfo.link)"
     />
-    <a target="_blank" class="custom-link" rel="noopener noreferrer" [href]="ghostLink">Ghost</a>
-  </div>
-</div>
+    <app-v3-button [variant]="buttonTypeEnumV3.Tertiary" [label]="'Ghost'" (click)="openGhost()" />
+  </nav>
+</header>

src/app/admin/components/nav-bar/nav-bar.component.ts

@@ -7,6 +7,7 @@ import { AdminRoutes } from '../../admin-routing.module';
 @Component({
   selector: 'app-admin-nav-bar',
   templateUrl: './nav-bar.component.html',
+  styleUrl: '../../admin.scss',
 })
 export class NavBarComponent {
   public ghostLink = this.runtimeConfigLoaderService.getConfigObjectKey('ghostAdmin');
@@ -17,4 +18,8 @@ export class NavBarComponent {
     private runtimeConfigLoaderService: RuntimeConfigLoaderService,
     public router: Router,
   ) {}
+
+  public openGhost(): void {
+    window.open(this.ghostLink);
+  }
 }