Delete file attribute

apps/red-ui/src/app/app.module.ts

@@ -117,6 +117,7 @@ import { FileAttributesListingScreenComponent } from './screens/admin/file-attri
 import { SearchInputComponent } from './components/search-input/search-input.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
+import { ConfirmDeleteFileAttributeDialogComponent } from './dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -220,7 +221,8 @@ const matImports = [
         PaginationComponent,
         FileAttributesListingScreenComponent,
         SearchInputComponent,
-        AddEditFileAttributeDialogComponent
+        AddEditFileAttributeDialogComponent,
+        ConfirmDeleteFileAttributeDialogComponent
     ],
     imports: [
         BrowserModule,

apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html

@@ -0,0 +1,21 @@
+<section class="dialog">
+    <div class="dialog-header heading-l">
+        {{ 'confirm-delete-file-attribute.title' | translate: { name: fileAttribute.name } }}
+    </div>
+
+    <div class="dialog-content">
+        <div class="heading" translate="confirm-delete-file-attribute.warning"></div>
+
+        <mat-checkbox *ngFor="let checkbox of checkboxes; let idx = index" [(ngModel)]="checkbox.value" color="primary">
+            {{ 'confirm-delete-file-attribute.checkbox-' + (idx + 1) | translate }}
+        </mat-checkbox>
+    </div>
+
+    <div class="dialog-actions">
+        <button [disabled]="!valid" color="primary" mat-flat-button (click)="deleteFileAttribute()">
+            {{ 'confirm-delete-file-attribute.delete' | translate }}
+        </button>
+        <div class="all-caps-label cancel" (click)="cancel()" translate="confirm-delete-file-attribute.cancel"></div>
+    </div>
+    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+</section>

apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss

@@ -0,0 +1,13 @@
+@import '../../../assets/styles/red-variables';
+
+.dialog-header {
+    color: $primary;
+}
+
+.heading {
+    margin-bottom: 24px;
+}
+
+mat-checkbox:not(:last-of-type) {
+    margin-bottom: 6px;
+}

apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts

@@ -0,0 +1,38 @@
+import { Component, Inject } from '@angular/core';
+import { AppStateService } from '../../state/app-state.service';
+import { FileAttribute, FileAttributesControllerService } from '@redaction/red-ui-http';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'redaction-confirm-delete-file-attribute-dialog',
+    templateUrl: './confirm-delete-file-attribute-dialog.component.html',
+    styleUrls: ['./confirm-delete-file-attribute-dialog.component.scss']
+})
+export class ConfirmDeleteFileAttributeDialogComponent {
+    public fileAttribute: FileAttribute;
+    public ruleSetId: string;
+    public checkboxes = [{ value: false }, { value: false }];
+
+    constructor(
+        private readonly _appStateService: AppStateService,
+        private readonly _fileAttributesService: FileAttributesControllerService,
+        public dialogRef: MatDialogRef<ConfirmDeleteFileAttributeDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: FileAttribute; ruleSetId: string }
+    ) {
+        this.fileAttribute = data.fileAttribute;
+        this.ruleSetId = data.ruleSetId;
+    }
+
+    public get valid() {
+        return this.checkboxes[0].value && this.checkboxes[1].value;
+    }
+
+    async deleteFileAttribute() {
+        console.log('deleting...');
+        this.dialogRef.close(true);
+    }
+
+    public cancel() {
+        this.dialogRef.close();
+    }
+}

apps/red-ui/src/app/dialogs/dialog.service.ts

@@ -29,6 +29,7 @@ import { EditColorDialogComponent } from './edit-color-dialog/edit-color-dialog.
 import { RemoveAnnotationsDialogComponent } from './remove-annotations-dialog/remove-annotations-dialog.component';
 import { ForceRedactionDialogComponent } from './force-redaction-dialog/force-redaction-dialog.component';
 import { AddEditFileAttributeDialogComponent } from './add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
+import { ConfirmDeleteFileAttributeDialogComponent } from './confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component';
 
 const dialogConfig = {
     width: '662px',
@@ -354,6 +355,26 @@ export class DialogService {
         return ref;
     }
 
+    public openConfirmDeleteFileAttributeDialog(
+        fileAttribute: FileAttribute,
+        ruleSetId: string,
+        cb?: Function
+    ): MatDialogRef<ConfirmDeleteFileAttributeDialogComponent> {
+        const ref = this._dialog.open(ConfirmDeleteFileAttributeDialogComponent, {
+            ...dialogConfig,
+            data: { fileAttribute, ruleSetId },
+            autoFocus: true
+        });
+
+        ref.afterClosed().subscribe((result) => {
+            if (result && cb) {
+                cb(result);
+            }
+        });
+
+        return ref;
+    }
+
     openRemoveAnnotationModal($event: MouseEvent, annotation: AnnotationWrapper, callback: () => void) {
         $event?.stopPropagation();
 

apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html

@@ -61,9 +61,9 @@
                     column="name"
                 ></redaction-table-col-name>
 
-                <redaction-table-col-name label="file-attributes-listing.table-col-names.created-by" class="flex-center"></redaction-table-col-name>
+                <!-- <redaction-table-col-name label="file-attributes-listing.table-col-names.created-by" class="flex-center"></redaction-table-col-name>-->
 
-                <redaction-table-col-name label="file-attributes-listing.table-col-names.permissions" class="flex-center"></redaction-table-col-name>
+                <redaction-table-col-name label="file-attributes-listing.table-col-names.read-only" class="flex-center"></redaction-table-col-name>
 
                 <div></div>
 
@@ -83,11 +83,10 @@
                     <div>
                         {{ attribute.name }}
                     </div>
-                    <div class="center">
+                    <!-- TODO-->
-                        -
+                    <!-- <div class="center">-->
-                        <!-- TODO-->
+                    <!-- <redaction-initials-avatar [userId]="attribute.userId" [withName]="true" size="large"></redaction-initials-avatar>-->
-                        <!-- <redaction-initials-avatar [userId]="attribute.userId" [withName]="true" size="large"></redaction-initials-avatar>-->
+                    <!-- </div>-->
-                    </div>
                     <div class="center">
                         <redaction-circle-button
                             *ngIf="!attribute.editable"
@@ -108,7 +107,7 @@
                             >
                             </redaction-circle-button>
                             <redaction-circle-button
-                                (action)="openAddEditAttributeDialog($event, attribute)"
+                                (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                 tooltip="file-attributes-listing.action.delete"
                                 tooltipPosition="before"
                                 type="dark-bg"

apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.scss

@@ -30,7 +30,7 @@ redaction-table-col-name::ng-deep {
 
     cdk-virtual-scroll-viewport {
         ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 1fr 1fr 1fr 1fr 11px;
+            grid-template-columns: auto 1fr 1fr 3fr 11px;
 
             .table-item {
                 > div:not(.scrollbar-placeholder) {
@@ -47,7 +47,7 @@ redaction-table-col-name::ng-deep {
 
         &.has-scrollbar:hover {
             ::ng-deep.cdk-virtual-scroll-content-wrapper {
-                grid-template-columns: auto 1fr 1fr 1fr 1fr;
+                grid-template-columns: auto 1fr 1fr 3fr;
             }
         }
     }

apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts

@@ -81,6 +81,13 @@ export class FileAttributesListingScreenComponent implements OnInit {
         });
     }
 
+    public openConfirmDeleteAttributeDialog($event: MouseEvent, fileAttribute?: FileAttribute) {
+        $event.stopPropagation();
+        this._dialogService.openConfirmDeleteFileAttributeDialog(fileAttribute, this._appStateService.activeRuleSetId, async () => {
+            await this._loadData();
+        });
+    }
+
     public toggleAttributeSelected($event: MouseEvent, attribute: FileAttribute) {
         $event.stopPropagation();
         const idx = this.selectedFileAttributeIds.indexOf(attribute.id);

apps/red-ui/src/assets/i18n/en.json

@@ -715,7 +715,7 @@
         "table-col-names": {
             "name": "Name",
             "created-by": "Created by",
-            "permissions": "Permissions"
+            "read-only": "Read-Only"
         },
         "no-data": "No file attributes.",
         "read-only": "Read-only",
@@ -724,6 +724,14 @@
             "delete": "Delete attribute"
         }
     },
+    "confirm-delete-file-attribute": {
+        "title": "Delete {{name}}",
+        "warning": "Warning: this cannot be undone!",
+        "delete": "Delete Attribute",
+        "cancel": "Keep Attribute",
+        "checkbox-1": "All documents it is used on will be impacted",
+        "checkbox-2": "All inputted details on the documents will be lost"
+    },
     "user-listing": {
         "table-header": {
             "title": "{{length}} users"