Add add/remove group admin functionallity

src/app/components/group/group.component.html

@@ -13,30 +13,20 @@
 
         <span id="username">{{groupProfile.name}}</span>
         <div class="button-box">
-          <button mat-icon-button *ngIf="!groupProfile.joined"
+          <button mat-icon-button *ngIf="!groupProfile.joined" class="request-button" matTooltip="join group"
-                  class="request-button"
+            matTooltipShowDelay="500" (click)="joinGroup(groupProfile)" [disabled]="!groupProfile.allowedToJoinGroup">
-                  matTooltip="join group" matTooltipShowDelay="500"
-                  (click)="joinGroup(groupProfile)"
-                  [disabled]="!groupProfile.allowedToJoinGroup">
             <mat-icon>group_add</mat-icon>
           </button>
-          <button mat-icon-button *ngIf="groupProfile.joined"
+          <button mat-icon-button *ngIf="groupProfile.joined" class="request-button" matTooltip="leave group"
-                  class="request-button"
+            matTooltipShowDelay="500" (click)="leaveGroup(groupProfile)">
-                  matTooltip="leave group" matTooltipShowDelay="500"
-                  (click)="leaveGroup(groupProfile)">
             <mat-icon>directions_run</mat-icon>
           </button>
-          <button mat-icon-button
+          <button mat-icon-button class="request-button" matTooltip="create event" matTooltipShowDelay="500"
-                  class="request-button"
+            (click)="openDialog()" [disabled]="!isAdmin">
-                  matTooltip="create event" matTooltipShowDelay="500"
-                  (click)="openDialog()"
-                  [disabled]="!isAdmin">
             <mat-icon>event</mat-icon>
           </button>
           <div style="display: contents;" *ngIf="groupProfile.deletable">
-            <button mat-icon-button
+            <button mat-icon-button class="request-button" matTooltip="delete this group" matTooltipShowDelay="0"
-                    class="request-button"
-                    matTooltip="delete this group" matTooltipShowDelay="0"
               (click)="deleteGroup()">
               <mat-icon>delete</mat-icon>
             </button>
@@ -45,8 +35,8 @@
       </mat-toolbar-row>
       <mat-toolbar-row>
         <div class="info-box">
-          <span id="handle" class="pointer"
+          <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by
-                (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
+            {{groupProfile.creator.username}}
             @{{groupProfile.creator.handle}}</span>
         </div>
       </mat-toolbar-row>
@@ -67,34 +57,24 @@
           <img class="profile-picture" [src]="groupProfile.picture" />
         </div>
         <span id="username">{{groupProfile.name}}</span>
-        <span id="handle" class="pointer"
+        <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by
-              (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
+          {{groupProfile.creator.username}}
           @{{groupProfile.creator.handle}}</span>
         <div class="button-box">
-          <button mat-icon-button *ngIf="!groupProfile.joined"
+          <button mat-icon-button *ngIf="!groupProfile.joined" class="request-button" matTooltip="join group"
-                  class="request-button"
+            matTooltipShowDelay="500" (click)="joinGroup(groupProfile)" [disabled]="!groupProfile.allowedToJoinGroup">
-                  matTooltip="join group" matTooltipShowDelay="500"
-                  (click)="joinGroup(groupProfile)"
-                  [disabled]="!groupProfile.allowedToJoinGroup">
             <mat-icon>group_add</mat-icon>
           </button>
-          <button mat-icon-button *ngIf="groupProfile.joined"
+          <button mat-icon-button *ngIf="groupProfile.joined" class="request-button" matTooltip="leave group"
-                  class="request-button"
+            matTooltipShowDelay="500" (click)="leaveGroup(groupProfile)">
-                  matTooltip="leave group" matTooltipShowDelay="500"
-                  (click)="leaveGroup(groupProfile)">
             <mat-icon>directions_run</mat-icon>
           </button>
-          <button mat-icon-button
+          <button mat-icon-button class="request-button" matTooltip="create event" matTooltipShowDelay="500"
-                  class="request-button"
+            (click)="openDialog()" [disabled]="!isAdmin">
-                  matTooltip="create event" matTooltipShowDelay="500"
-                  (click)="openDialog()"
-                  [disabled]="!isAdmin">
             <mat-icon>event</mat-icon>
           </button>
           <div style="display: contents;" *ngIf="groupProfile.deletable">
-            <button mat-icon-button
+            <button mat-icon-button class="request-button" matTooltip="delete this group" matTooltipShowDelay="0"
-                    class="request-button"
-                    matTooltip="delete this group" matTooltipShowDelay="0"
               (click)="deleteGroup()">
               <mat-icon>delete</mat-icon>
             </button>
@@ -116,22 +96,18 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <div class="list">
-            <mat-card class="card" *ngFor="let event of groupProfile.events"
+            <mat-card class="card" *ngFor="let event of groupProfile.events" [class.selected]="event === selectedEvent"
-                      [class.selected]="event === selectedEvent"
               tabindex="0">
               <mat-card-header>
                 <mat-card-title>{{event.name}}</mat-card-title>
                 <mat-card-subtitle>{{event.date}}</mat-card-subtitle>
                 <div class="button-box">
-                  <button *ngIf="!event.joined" mat-icon-button class="request-button"
+                  <button *ngIf="!event.joined" mat-icon-button class="request-button" matTooltip="join event"
-                          matTooltip="join event" matTooltipShowDelay="500"
+                    matTooltipShowDelay="500" (click)="joinEvent(event)">
-                          (click)="joinEvent(event)">
                     <mat-icon>event_available</mat-icon>
                   </button>
-                  <button *ngIf="event.joined" mat-icon-button class="request-button"
+                  <button *ngIf="event.joined" mat-icon-button class="request-button" matTooltip="leave event"
-                          matTooltip="leave event" matTooltipShowDelay="500"
+                    matTooltipShowDelay="500" (click)="leaveEvent(event)" [disabled]="!event.joined">
-                          (click)="leaveEvent(event)"
-                          [disabled]="!event.joined">
                     <mat-icon>event_busy</mat-icon>
                   </button>
                 </div>
@@ -145,36 +121,30 @@
               Members
             </mat-panel-title>
           </mat-expansion-panel-header>
-          <div class="list">
-            <user-list [userList]="groupProfile.members"></user-list>
-          </div>
-        </mat-expansion-panel>
-        <mat-expansion-panel expanded>
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              Admins
-            </mat-panel-title>
-          </mat-expansion-panel-header>
           <div id="list">
-            <mat-card class="card" *ngFor="let admin of groupProfile.admins"
+            <mat-card class="member-card" *ngFor="let user of groupProfile.members"
-                      [class.selected]="admin === selectedAdmin"
+              [class.selected]="user === selectedUser" tabindex="0">
-                      tabindex="0">
               <mat-card-header>
-                <div id="button-box">
+                <div mat-card-avatar (click)="showUserProfile(user)">
-                  <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
+                  <img class="card-picture" [src]="user.profilePicture" />
+                </div>
+                <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
+                <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
+                <mat-card-subtitle *ngIf="user.isGroupAdmin" class="pointer" (click)="showUserProfile(user)">[admin]
+                </mat-card-subtitle>
+                <div id="icon-box" *ngIf="isAdmin">
+                  <button mat-icon-button [matMenuTriggerFor]="menu">
                     <mat-icon>more_vert</mat-icon>
                   </button>
                   <mat-menu #menu="matMenu">
-                    <button mat-menu-item (click)="removeFriend(friend)">
+                    <button *ngIf="!user.isGroupAdmin" mat-menu-item (click)="addGroupAdmin(user)">
-                      <span>remove friend</span>
+                      <span>give admin rights</span>
+                    </button>
+                    <button *ngIf="user.isGroupAdmin" mat-menu-item (click)="removeGroupAdmin(user)">
+                      <span>revoke admin rights</span>
                     </button>
                   </mat-menu>
                 </div>
-                <div mat-card-avatar (click)="showFriendProfile(admin)">
-                  <img class="profile-picture-small" [src]="admin.profilePicture"/>
-                </div>
-                <mat-card-title (click)="showFriendProfile(admin)">{{admin.username}}</mat-card-title>
-                <mat-card-subtitle (click)="showFriendProfile(admin)">{{admin.handle}}</mat-card-subtitle>
               </mat-card-header>
             </mat-card>
           </div>
@@ -187,4 +157,3 @@
   </div>
   <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
 </div>
-

src/app/components/group/group.component.sass

@@ -121,6 +121,48 @@ $mat-card-header-size-small: 54px !default
   z-index: 10
   object-fit: cover
 
+.member-card
+  box-sizing: border-box
+  width: 100%
+  margin-top: 0.5em
+  outline: none
+  user-select: none
+
+  ::ng-deep .mat-card-header-text
+    width: 1000%
+    margin: auto 0 auto 24px
+
+  .mat-card-subtitle
+    margin: 0
+    word-break: break-all
+
+  .mat-card-title
+    margin: 0
+    word-break: break-all
+
+  .request-button
+    margin-top: 0.5em
+    margin-bottom: 0.5em
+
+  .pointer:hover
+    cursor: pointer
+
+  .icon-box
+    text-align: right
+    width: 100%
+
+  $pic-size: 40px !default
+  .card-picture
+    cursor: pointer
+    height: $pic-size
+    width: $pic-size
+    border-radius: 50%
+    flex-shrink: 0
+    background-size: cover
+    transition-duration: 0.5s
+    z-index: 10
+    object-fit: cover
+
 
 .pointer
   cursor: pointer

src/app/components/group/group.component.ts

@@ -198,6 +198,14 @@ export class GroupComponent implements OnInit {
     });
   }
 
+  addGroupAdmin(user: User) {
+    this.groupService.addGroupAdmin(user.userID.toString(), this.id).subscribe();
+  }
+
+  removeGroupAdmin(user: User) {
+    this.groupService.removeGroupAdmin(user.userID.toString(), this.id).subscribe();
+  }
+
   openPfpLightbox() {
     this.lightbox.open([{
       src: this.groupProfile.picture,

src/app/models/group.ts

@@ -36,6 +36,13 @@ export class Group {
         user = new User();
         this.admins.push(user.assignFromResponse(admin));
       }
+      for (const admin of this.admins) {
+        for (const member of this.members) {
+          if (member.userID === admin.userID) {
+            member.isGroupAdmin = true;
+          }
+        }
+      }
     }
     if (groupDataResponse.events) {
       for (const event of groupDataResponse.events) {

src/app/models/user.ts

@@ -18,6 +18,7 @@ export class User {
   joinedAt: string;
   friendCount: number;
   groupCount: number;
+  isGroupAdmin: boolean;
 
   darkmode = false;
 

src/app/services/group/group.service.ts

@@ -18,7 +18,7 @@ const getGroupGraphqlQuery = `query($groupId: ID!) {
       picture
       deletable
       creator{id name handle}
-      admins{id name handle profilePicture}
+      admins{id name handle}
       members{id name handle profilePicture}
       events{id name dueDate joined}
   }