From e200d339eb155259f8fff5983be22d84c7479f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 9 Apr 2021 20:03:08 +0300
Subject: [PATCH] Bulk actions on csv import file attributes dialog

---
 ...ttributes-csv-import-dialog.component.html | 53 +++++++++++++++++++
 ...ttributes-csv-import-dialog.component.scss | 12 +++++
 ...-attributes-csv-import-dialog.component.ts |  6 +++
 apps/red-ui/src/assets/i18n/en.json           |  9 +++-
 apps/red-ui/src/assets/styles/red-menu.scss   |  4 ++
 5 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index c2f6df05c..2fc9d6f53 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -123,6 +123,20 @@
                     </span>
 
                     <ng-container *ngIf="areSomeFieldsSelected">
+                        <redaction-circle-button
+                            [matMenuTriggerFor]="readOnlyMenu"
+                            tooltip="file-attributes-csv-import.table-header.actions.read-only"
+                            type="dark-bg"
+                            icon="red:read-only"
+                        >
+                        </redaction-circle-button>
+                        <redaction-circle-button
+                            [matMenuTriggerFor]="displayMenu"
+                            tooltip="file-attributes-csv-import.table-header.actions.display"
+                            type="dark-bg"
+                            icon="red:visibility"
+                        >
+                        </redaction-circle-button>
                         <redaction-circle-button
                             (action)="deactivateSelection()"
                             tooltip="file-attributes-csv-import.table-header.actions.remove-selected"
@@ -130,6 +144,45 @@
                             icon="red:trash"
                         >
                         </redaction-circle-button>
+
+                        <div class="separator"></div>
+
+                        <redaction-chevron-button
+                            text="file-attributes-csv-import.table-header.actions.type"
+                            [matMenuTriggerFor]="typeMenu"
+                        ></redaction-chevron-button>
+
+                        <mat-menu #readOnlyMenu="matMenu" class="no-padding-bottom">
+                            <button
+                                mat-menu-item
+                                (click)="setAttributeForSelection('readonly', true)"
+                                translate="file-attributes-csv-import.table-header.actions.enable-read-only"
+                            ></button>
+                            <button
+                                mat-menu-item
+                                (click)="setAttributeForSelection('readonly', false)"
+                                translate="file-attributes-csv-import.table-header.actions.disable-read-only"
+                            ></button>
+                        </mat-menu>
+
+                        <mat-menu #displayMenu="matMenu" class="no-padding-bottom">
+                            <button
+                                mat-menu-item
+                                (click)="setAttributeForSelection('display', true)"
+                                translate="file-attributes-csv-import.table-header.actions.enable-display"
+                            ></button>
+                            <button
+                                mat-menu-item
+                                (click)="setAttributeForSelection('display', false)"
+                                translate="file-attributes-csv-import.table-header.actions.disable-display"
+                            ></button>
+                        </mat-menu>
+
+                        <mat-menu #typeMenu="matMenu" class="no-padding-bottom">
+                            <button *ngFor="let type of ['Text', 'Number', 'Date']" mat-menu-item (click)="setAttributeForSelection('type', type)">
+                                {{ 'file-attributes-csv-import.types.' + type | translate }}
+                            </button>
+                        </mat-menu>
                     </ng-container>
                 </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index e3a102101..5591d34bd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -173,6 +173,18 @@
             .all-caps-label {
                 margin-right: 10px;
             }
+
+            redaction-circle-button {
+                margin-right: 2px;
+            }
+
+            .separator {
+                margin-left: 14px;
+                background-color: $separator;
+                width: 1px;
+                height: 30px;
+                margin-right: 16px;
+            }
         }
 
         cdk-virtual-scroll-viewport {
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 345bea46d..e0daa4fb5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -177,6 +177,12 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
         this.selectedFields = [];
     }
 
+    public setAttributeForSelection(attribute: string, value: any) {
+        for (const csvColumn of this.selectedFields) {
+            this.activeFields.find((f) => f.csvColumn === csvColumn)[attribute] = value;
+        }
+    }
+
     public async save() {
         await this._fileAttributesControllerService
             .addOrUpdateFileAttributesConfig(
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index c1e6f5a9e..0fde8352e 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1135,7 +1135,14 @@
         "table-header": {
             "title": "{{length}} file attributes",
             "actions": {
-                "remove-selected": "Remove Selected"
+                "remove-selected": "Remove Selected",
+                "read-only": "Make Read-only",
+                "enable-read-only": "Enable Read-only for all attributes",
+                "disable-read-only": "Disable Read-only for all attributes",
+                "display": "Toggle Display",
+                "enable-display": "Enable Display for all attributes",
+                "disable-display": "Disable Display for all attributes",
+                "type": "Type"
             }
         },
         "file": "File:",
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index 31745e2f0..d515f69b3 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -12,6 +12,10 @@
         padding-bottom: 24px;
     }
 
+    &.no-padding-bottom .mat-menu-content:not(:empty) {
+        padding-bottom: 8px;
+    }
+
     .mat-menu-item {
         font-size: 13px;
         color: $accent;