diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 349868a28..90587e9f3 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/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, diff --git a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html new file mode 100644 index 000000000..2b44d76b5 --- /dev/null +++ b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html @@ -0,0 +1,21 @@ +
+
+ {{ 'confirm-delete-file-attribute.title' | translate: { name: fileAttribute.name } }} +
+ +
+
+ + + {{ 'confirm-delete-file-attribute.checkbox-' + (idx + 1) | translate }} + +
+ +
+ +
+
+ +
diff --git a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss new file mode 100644 index 000000000..7ae5f7b64 --- /dev/null +++ b/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; +} diff --git a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts new file mode 100644 index 000000000..62b3509a0 --- /dev/null +++ b/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, + @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(); + } +} diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index 09e75dfc9..263d5215c 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/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 { + 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(); diff --git a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html index f3fa5afba..633bf9e2a 100644 --- a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html @@ -61,9 +61,9 @@ column="name" > - + - +
@@ -83,11 +83,10 @@
{{ attribute.name }}
-
- - - - -
+ + + +
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; } } } diff --git a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts index 7482a8be9..15cf578f9 100644 --- a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts +++ b/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); diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index db7e1ef41..c0b0643b4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/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"