Toggle bulk select and add on project listing

2020-11-02 04:25:44 +02:00 · 2020-11-02 04:25:44 +02:00 · db8827e381
commit db8827e381
parent 558eeb8a1e
8 changed files with 133 additions and 42 deletions
--- 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 }}
--- 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 {
--- 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;
+    }
 }
--- 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)"
--- 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 {
--- 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) {
--- 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;
+    }
+}
--- 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;
+}