From db8827e3813cd5dc088cfbbdb5d16d0c50946123 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 2 Nov 2020 04:25:44 +0200
Subject: [PATCH] Toggle bulk select and add on project listing

---
 .../project-listing-screen.component.html     | 40 +++++++++++++++----
 .../project-listing-screen.component.scss     | 11 +++++
 .../project-listing-screen.component.ts       | 40 ++++++++++++++++++-
 .../project-overview-screen.component.html    | 14 +++++--
 .../project-overview-screen.component.scss    | 38 +++++-------------
 .../project-overview-screen.component.ts      |  5 +++
 .../src/assets/styles/red-components.scss     | 13 ++++++
 .../src/assets/styles/red-page-layout.scss    | 14 +++++++
 8 files changed, 133 insertions(+), 42 deletions(-)

diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index c3e16403b..61c600699 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -52,14 +52,28 @@
 <div class="flex red-content-inner">
     <div class="left-container">
         <div class="table-header">
-            <span class="all-caps-label">
-                {{
-                    'project-listing.table-header.title.label'
-                        | translate: { length: appStateService.allProjects?.length || 0 }
-                }}
-            </span>
+            <div class="select-all-container">
+                <div
+                    *ngIf="bulkSelectActive"
+                    class="select-oval"
+                    [class.active]="areAllProjectsSelected()"
+                    (click)="toggleSelectAll()"
+                ></div>
+                <span class="all-caps-label">
+                    {{
+                        'project-listing.table-header.title.label'
+                            | translate: { length: appStateService.allProjects?.length || 0 }
+                    }}
+                </span>
+            </div>
+
             <div class="actions">
-                <div translate="project-listing.table-header.bulk-select.label"></div>
+                <div
+                    translate="project-listing.table-header.bulk-select.label"
+                    class="pointer"
+                    [class.active]="bulkSelectActive"
+                    (click)="toggleBulkSelect()"
+                ></div>
                 <mat-form-field appearance="none" class="red-select">
                     <mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
                         <mat-option *ngFor="let option of sortingOptions" [value]="option">
@@ -70,7 +84,9 @@
             </div>
         </div>
 
-        <div class="grid-container">
+        <div class="grid-container" [class.bulk-select]="bulkSelectActive">
+            <div class="table-col-name" *ngIf="bulkSelectActive"></div>
+
             <div class="table-col-name">
                 <span
                     class="small-label"
@@ -104,6 +120,14 @@
                 class="table-item"
                 [class.pointer]="canOpenProject(pw)"
             >
+                <div class="pr-0" *ngIf="bulkSelectActive">
+                    <div
+                        class="select-oval"
+                        [class.active]="isProjectSelected(pw)"
+                        (click)="toggleProjectSelected($event, pw)"
+                    ></div>
+                </div>
+
                 <div>
                     <div class="table-item-title">
                         {{ pw.project.projectName }}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index ca0443bde..6a39b63a9 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -13,6 +13,10 @@
 
     .grid-container {
         grid-template-columns: 2fr 1fr auto;
+
+        &.bulk-select {
+            grid-template-columns: auto 2fr 1fr auto;
+        }
     }
 
     .stats-subtitle {
@@ -22,6 +26,13 @@
     .status-container {
         width: 160px;
     }
+
+    .actions {
+        .active {
+            font-weight: 600;
+            color: $primary;
+        }
+    }
 }
 
 .right-fixed-container {
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index 098f7070e..b13d9372e 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Project } from '@redaction/red-ui-http';
+import { FileStatus, Project } from '@redaction/red-ui-http';
 import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
 import { UserService } from '../../user/user.service';
 import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
@@ -15,6 +15,8 @@ import * as moment from 'moment';
     styleUrls: ['./project-listing-screen.component.scss']
 })
 export class ProjectListingScreenComponent implements OnInit {
+    private _selectedProjectIds: string[] = [];
+
     public projectsChartData: DoughnutChartConfig[] = [];
     public documentsChartData: DoughnutChartConfig[] = [];
     public sortingOptions: SortingOption[] = [
@@ -26,6 +28,7 @@ export class ProjectListingScreenComponent implements OnInit {
         }
     ];
     public sortingOption: SortingOption = this.sortingOptions[0];
+    public bulkSelectActive = false;
 
     statusFilters: FilterModel[];
     dueDateFilters: FilterModel[];
@@ -118,6 +121,10 @@ export class ProjectListingScreenComponent implements OnInit {
         this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
     }
 
+    public toggleBulkSelect() {
+        this.bulkSelectActive = !this.bulkSelectActive;
+    }
+
     public getProjectStatusConfig(pw: ProjectWrapper) {
         const obj = pw.files.reduce((acc, file) => {
             const status = file.status;
@@ -248,4 +255,35 @@ export class ProjectListingScreenComponent implements OnInit {
         }
         return filterMatched;
     }
+
+    public toggleProjectSelected($event: MouseEvent, pw: ProjectWrapper) {
+        $event.stopPropagation();
+        const idx = this._selectedProjectIds.indexOf(pw.project.projectId);
+        if (idx === -1) {
+            this._selectedProjectIds.push(pw.project.projectId);
+        } else {
+            this._selectedProjectIds.splice(idx, 1);
+        }
+    }
+
+    public toggleSelectAll() {
+        if (this.areAllProjectsSelected()) {
+            this._selectedProjectIds = [];
+        } else {
+            this._selectedProjectIds = this.appStateService.allProjects.map(
+                (pw) => pw.project.projectId
+            );
+        }
+    }
+
+    public areAllProjectsSelected(): boolean {
+        return (
+            this.appStateService.allProjects.length !== 0 &&
+            this._selectedProjectIds.length === this.appStateService.allProjects.length
+        );
+    }
+
+    public isProjectSelected(pw: ProjectWrapper): boolean {
+        return this._selectedProjectIds.indexOf(pw.project.projectId) !== -1;
+    }
 }
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index b55b25408..5c9046ed5 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -48,6 +48,7 @@
         <div class="table-header">
             <div class="select-all-container">
                 <div
+                    *ngIf="bulkSelectActive"
                     class="select-oval"
                     [class.active]="areAllFilesSelected()"
                     (click)="toggleSelectAll()"
@@ -61,7 +62,12 @@
                 </span>
             </div>
             <div class="actions">
-                <div translate="project-overview.table-header.bulk-select.label"></div>
+                <div
+                    translate="project-overview.table-header.bulk-select.label"
+                    class="pointer"
+                    [class.active]="bulkSelectActive"
+                    (click)="toggleBulkSelect()"
+                ></div>
                 <mat-form-field appearance="none" class="red-select">
                     <mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
                         <mat-option *ngFor="let option of sortingOptions" [value]="option">
@@ -72,9 +78,9 @@
             </div>
         </div>
 
-        <div class="grid-container">
+        <div class="grid-container" [class.bulk-select]="bulkSelectActive">
             <!--      Table column names-->
-            <div class="table-col-name"></div>
+            <div class="table-col-name" *ngIf="bulkSelectActive"></div>
 
             <div class="table-col-name">
                 <span
@@ -135,7 +141,7 @@
                         : []
                 "
             >
-                <div class="pr-0">
+                <div class="pr-0" *ngIf="bulkSelectActive">
                     <div
                         class="select-oval"
                         [class.active]="isFileSelected(fileStatus)"
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
index 5af26257f..8204dc11c 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@@ -4,39 +4,19 @@
     display: none;
 }
 
-.select-all-container {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-
-    .select-oval {
-        margin-left: 0;
-    }
-}
-
-.pr-0 {
-    padding-right: 0 !important;
-}
-
-.select-oval {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 1px solid $grey-5;
-    background-color: $white;
-    cursor: pointer;
-
-    &.active {
-        background-color: $primary;
-    }
-
-    &.placeholder {
-        visibility: hidden;
+.actions {
+    .active {
+        font-weight: 600;
+        color: $primary;
     }
 }
 
 .grid-container {
-    grid-template-columns: auto 3fr 2fr 1fr 2fr auto;
+    grid-template-columns: 3fr 2fr 1fr 2fr auto;
+
+    &.bulk-select {
+        grid-template-columns: auto 3fr 2fr 1fr 2fr auto;
+    }
 
     .table-item {
         .disabled {
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index 228414884..00db6ecaf 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -49,6 +49,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     ];
     public sortingOption: SortingOption = this.sortingOptions[0];
     public documentsChartData: DoughnutChartConfig[] = [];
+    public bulkSelectActive = false;
 
     constructor(
         public readonly appStateService: AppStateService,
@@ -117,6 +118,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         );
     }
 
+    public toggleBulkSelect() {
+        this.bulkSelectActive = !this.bulkSelectActive;
+    }
+
     private _displayNewRuleToast() {
         // @ts-ignore
         if (!this.appStateService.activeProject.files.filter((file) => file.newRule).length) {
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index 48797f95f..f61275622 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -131,3 +131,16 @@
     stroke: rgba($red-1, 0.1);
     background-color: rgba($red-1, 0.1);
 }
+
+.select-oval {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1px solid $grey-5;
+    background-color: $white;
+    cursor: pointer;
+
+    &.active {
+        background-color: $primary;
+    }
+}
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 393c23129..db111d584 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -181,3 +181,17 @@ body {
 .pointer {
     cursor: pointer;
 }
+
+.select-all-container {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    .select-oval {
+        margin-left: 0;
+    }
+}
+
+.pr-0 {
+    padding-right: 0 !important;
+}