💄 Amélioration de l'affichage de la liste des personnes d'une liste (#…

…129) * 💄 Amélioration de l'affichage de la liste des personnes partagés. * 💄 Amélioration de l'affichage de la liste des personnes partagés. * 💄 use a list to display list of shared - this have a better display in mobile phone. * list userShare with avatar and delete button on right. Co-authored-by: manudss <[email protected]>
patou · Nov 4, 2020 · e7af641 · e7af641
1 parent 17a96d1
commit e7af641
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 56 deletions.
diff --git a/liste-envies-front/src/app/page/add-list/add-update-list.component.html b/liste-envies-front/src/app/page/add-list/add-update-list.component.html
@@ -126,7 +126,7 @@ <h1>Créer une nouvelle liste</h1>
                 Limité / Privé
               </mat-radio-button>
               <mat-radio-button value="OPEN">
-                Ouvert / connecté
+                Ouvert / Connecté
               </mat-radio-button>
               <mat-radio-button value="PUBLIC">
                 Libre / Publique
@@ -245,7 +245,7 @@ <h3>Arrière plan</h3>
           <ng-template #addButtonLabel>Créer la liste</ng-template>
         </button>
         <button mat-button (click)="stepper.reset()" [disabled]="sending">
-          Reset
+          Réinitialiser
         </button>
       </div>
     </mat-step>

diff --git a/liste-envies-front/src/app/page/home/home.component.html b/liste-envies-front/src/app/page/home/home.component.html
@@ -8,6 +8,7 @@ <h1>
         </h1>
       </div>
       <ng-template #showLogin>
+
         <div class="row">
           <div class="col-4">
             <img
@@ -62,6 +63,7 @@ <h2 class="intro2">
             ></ngx-auth-firebaseui-providers>
           </div>
         </div>
+
       </ng-template>
     </section>
   </mat-card>

diff --git a/liste-envies-front/src/app/shared/user-share/user-share.component.html b/liste-envies-front/src/app/shared/user-share/user-share.component.html
@@ -1,5 +1,10 @@
-<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="10">
-  <mat-form-field class="col-10 no-padding">
+<div
+  fxLayout="row wrap"
+  fxLayoutAlign="space-between center"
+  fxLayoutGap="10px"
+  class="user-share-add"
+>
+  <mat-form-field appearance="outline" class="col-12">
     <mat-label>Emails</mat-label>
     <input
       matInput="email"
@@ -8,7 +13,6 @@
       [formControl]="addEmailsControl"
       [matAutocomplete]="auto"
     />
-
     <mat-autocomplete
       #auto="matAutocomplete"
       (optionSelected)="selectedUsers($event)"
@@ -17,60 +21,75 @@
         {{ user.email }} - {{ user.name }}
       </mat-option>
     </mat-autocomplete>
+    <button mat-mini-fab matSuffix (click)="addUsers()" class="col-1">
+      <mat-icon>person_add</mat-icon>
+    </button>
+    <mat-hint
+      ><mat-checkbox
+        name="addOwnersControl"
+        [formControl]="addOwnersControl"
+        value="true"
+        labelPosition="left"
+        matTooltip="Cette personne recevra les cadeaux avec vous, pourra modifier la liste, et ne pourra pas voir les envies donnés"
+      >
+        Co-Bénéficiaire
+      </mat-checkbox></mat-hint
+    >
   </mat-form-field>
-
-  <mat-checkbox
-    name="addOwnersControl"
-    [formControl]="addOwnersControl"
-    value="true"
-    labelPosition="left"
-  >
-    co-Propriétaire
-  </mat-checkbox>
-
-  <button mat-mini-fab (click)="addUsers()" class="col-1">
-    <mat-icon>add</mat-icon>
-  </button>
 </div>
 <mat-error *ngIf="addEmailsControl.value">
-  Cliquez sur l'icone + pour partager à cet emails
+  Cliquez sur l'icone + pour partager à cet email
 </mat-error>
-<div *ngIf="value && value.length > 0">
-  <table mat-table [dataSource]="datasource" class="mat-elevation-z3">
-    <!--
-      - Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on the row definition"
-    -->
-
-    <!-- Position Column -->
-    <ng-container matColumnDef="email">
-      <th mat-header-cell *matHeaderCellDef>Email</th>
-      <td mat-cell *matCellDef="let element">{{ element.email }}</td>
-    </ng-container>
-
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef>Nom</th>
-      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
-    </ng-container>
-
-    <!-- Type Column -->
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef>Type</th>
-      <td mat-cell *matCellDef="let element">{{ element.type }}</td>
+<br />
+<mat-divider></mat-divider>
+<br /><br />
+<div
+  *ngIf="value && value.length > 0"
+  class="mat-elevation-z3 user-share-container"
+>
+  <mat-list>
+    <div mat-subheader>Co-Bénéficiaire</div>
+    <ng-container *ngFor="let owner of value">
+      <ng-container *ngIf="owner.type === 'OWNER'">
+        <ng-container
+          *ngTemplateOutlet="userShareLine; context: { $implicit: owner }"
+        >
+        </ng-container>
+      </ng-container>
     </ng-container>
-
-    <!-- Type Column -->
-    <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
-      <td mat-cell *matCellDef="let element">
-        <button mat-icon-button (click)="removeUser(element)">
-          <mat-icon aria-label="Supprimer">remove_circle</mat-icon>
-        </button>
-      </td>
+    <mat-divider></mat-divider>
+    <div mat-subheader>Participant</div>
+    <ng-container *ngFor="let participant of value">
+      <ng-container *ngIf="participant.type !== 'OWNER'">
+        <ng-container
+          *ngTemplateOutlet="userShareLine; context: { $implicit: participant }"
+        >
+        </ng-container>
+      </ng-container>
     </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
+  </mat-list>
+  <ng-template #userShareLine let-userShare>
+    <mat-list-item>
+      <ngx-avatar
+        matListAvatar
+        [gravatarId]="userShare?.email"
+        [matTooltip]="userShare?.name || userShare?.email"
+        [name]="userShare?.name || userShare?.email"
+        [round]="true"
+        matTooltipPosition="below"
+        size="30"
+      >
+      </ngx-avatar>
+      <div mat-line>{{ userShare?.name }}</div>
+      <div mat-line>{{ userShare?.email }}</div>
+      <button
+        mat-icon-button
+        class="button-remove-user"
+        matTooltip="Ne plus partager la liste avec cette personne"
+        (click)="removeUser(userShare)"
+      >
+        <mat-icon aria-label="Supprimer">person_remove</mat-icon>
+      </button>
+    </mat-list-item>
+  </ng-template>
 </div>
diff --git a/liste-envies-front/src/app/shared/user-share/user-share.component.scss b/liste-envies-front/src/app/shared/user-share/user-share.component.scss
@@ -0,0 +1,12 @@
+.user-share-container {
+  max-width: 100%;
+
+  .button-remove-user {
+    margin-bottom: 20px;
+    justify-self: flex-end;
+  }
+}
+
+.user-share-add {
+  flex-wrap: wrap;
+}
diff --git a/liste-envies-front/src/app/shared/user-share/user-share.component.ts b/liste-envies-front/src/app/shared/user-share/user-share.component.ts
@@ -55,7 +55,7 @@ export class UserShareComponent
   describedBy = "";
   addEmailsControl: FormControl = new FormControl("", Validators.email);
   addOwnersControl: FormControl = new FormControl(false);
-  displayedColumns: string[] = ["email", "name", "type", "action"];
+  displayedColumns: string[] = ["infos", "type", "action"];
   users: UserShare[] = [];
   public datasource: MatTableDataSource<UserShare> = new MatTableDataSource(
     this.value