From dc0ff91c24655ebafbb9713f538c80e10815ce2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Sat, 28 Nov 2020 00:40:02 +0200
Subject: [PATCH] Expanded team

---
 .../project-details.component.html            | 13 ++++++-------
 .../project-details.component.scss            | 14 +++++++++++++-
 .../project-details.component.ts              | 19 ++++++++++++++-----
 apps/red-ui/src/assets/i18n/en.json           |  1 +
 4 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
index 0c9c85e1a..59db220dd 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
@@ -32,17 +32,15 @@
 
 <div class="mt-16">
     <div class="all-caps-label" translate="project-details.members"></div>
-    <div class="flex members-container mt-12">
-        <div *ngFor="let userId of displayMembers" class="member">
+    <div class="flex members-container">
+        <div *ngFor="let userId of displayedMembers" class="member">
             <redaction-initials-avatar [userId]="userId" size="large" color="gray"></redaction-initials-avatar>
         </div>
-        <div *ngIf="overflowCount" class="member">
-            <div class="oval large white-dark">+{{ overflowCount }}</div>
+        <div *ngIf="overflowCount && !expandedTeam" class="member pointer">
+            <div class="oval large white-dark" (click)="toggleExpandedTeam()">+{{ overflowCount }}</div>
         </div>
-        <!--        <div (click)="openAssignProjectMembersDialog.emit()" *ngIf="permissionsService.isManager()" class="member pointer">-->
-        <!--            <div class="oval red-white large">+</div>-->
-        <!--        </div>-->
         <redaction-circle-button
+            class="member"
             (action)="openAssignProjectMembersDialog.emit()"
             icon="red:plus"
             *ngIf="permissionsService.isManager()"
@@ -51,6 +49,7 @@
         >
         </redaction-circle-button>
     </div>
+    <div class="all-caps-label see-less pointer" *ngIf="expandedTeam" translate="project-details.see-less" (click)="toggleExpandedTeam()"></div>
 </div>
 
 <div *ngIf="hasFiles" class="mt-24">
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
index f05663d58..07db76080 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
@@ -6,7 +6,19 @@
 }
 
 .members-container {
-    gap: 5px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+
+    .member {
+        margin-top: 4px;
+        margin-right: 2px;
+    }
+}
+
+.see-less {
+    opacity: 1;
+    color: $primary;
+    margin-top: 16px;
 }
 
 .legend {
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
index cccc80a0f..eef2ee1eb 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
@@ -16,6 +16,7 @@ import { StatusSorter } from '../../../common/sorters/status-sorter';
 })
 export class ProjectDetailsComponent implements OnInit {
     public documentsChartData: DoughnutChartConfig[] = [];
+    public expandedTeam = false;
     @Input() public filters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[] };
     @Output() public filtersChanged = new EventEmitter();
     @Output() public openAssignProjectMembersDialog = new EventEmitter();
@@ -32,17 +33,26 @@ export class ProjectDetailsComponent implements OnInit {
 
     ngOnInit(): void {
         this.calculateChartConfig();
-        this.appStateService.fileChanged.subscribe((event) => {
+        this.appStateService.fileChanged.subscribe(() => {
             this.calculateChartConfig();
         });
     }
 
-    public get displayMembers() {
-        return this.appStateService.activeProject.project.memberIds.slice(0, 6);
+    private get _memberIds(): string[] {
+        const ids = this.appStateService.activeProject.project.memberIds;
+        return [...ids, ...ids, ids[0], ids[1], ids[0]];
+    }
+
+    public get displayedMembers(): string[] {
+        return this.expandedTeam || !this.overflowCount ? this._memberIds : this._memberIds.slice(0, 7);
+    }
+
+    public toggleExpandedTeam() {
+        this.expandedTeam = !this.expandedTeam;
     }
 
     public get overflowCount() {
-        return this.appStateService.activeProject.project.memberIds.length > 6 ? this.appStateService.activeProject.project.memberIds.length - 6 : 0;
+        return this._memberIds.length > 8 ? this._memberIds.length - 7 : 0;
     }
 
     public calculateChartConfig(): void {
@@ -62,7 +72,6 @@ export class ProjectDetailsComponent implements OnInit {
     }
 
     public toggleFilter(filterType: 'needsWorkFilters' | 'statusFilters', key: string): void {
-        console.log(this.filters, filterType, this.filters[filterType], key);
         const filter = this.filters[filterType].find((f) => f.key === key);
         filter.checked = !filter.checked;
         this.filtersChanged.emit(this.filters);
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 6b769f02e..710e1ce47 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -142,6 +142,7 @@
         },
         "owner": "Owner",
         "members": "Members",
+        "see-less": "See less",
         "assign-members": "Assign Members",
         "expand": "Show Details",
         "collapse": "Hide Details"