From 6487dab132b373c2f7af321806236e3970a8def8 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Thu, 8 Feb 2024 10:23:06 -0800 Subject: [PATCH] Enhancement: confirm buttons (#5680) --- src-ui/messages.xlf | 325 ++++++++---------- src-ui/src/app/app.module.ts | 2 + .../admin/settings/settings.component.html | 10 +- .../admin/settings/settings.component.spec.ts | 2 + .../confirm-button.component.html | 22 ++ .../confirm-button.component.scss | 12 + .../confirm-button.component.spec.ts | 37 ++ .../confirm-button.component.ts | 55 +++ .../workflow-edit-dialog.component.html | 20 +- .../workflow-edit-dialog.component.spec.ts | 2 + .../profile-edit-dialog.component.html | 29 +- .../profile-edit-dialog.component.spec.ts | 2 + .../management-list.component.html | 62 ++-- .../management-list.component.spec.ts | 18 +- .../management-list.component.ts | 48 +-- 15 files changed, 368 insertions(+), 278 deletions(-) create mode 100644 src-ui/src/app/components/common/confirm-button/confirm-button.component.html create mode 100644 src-ui/src/app/components/common/confirm-button/confirm-button.component.scss create mode 100644 src-ui/src/app/components/common/confirm-button/confirm-button.component.spec.ts create mode 100644 src-ui/src/app/components/common/confirm-button/confirm-button.component.ts diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index a959d9fb2..3739605b3 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -458,7 +458,7 @@ src/app/components/admin/settings/settings.component.html - 346 + 354 src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html @@ -498,11 +498,11 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 159 + 167 src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 92 + 99 src/app/components/document-detail/document-detail.component.html @@ -600,7 +600,7 @@ src/app/components/admin/settings/settings.component.html - 334 + 342 src/app/components/admin/tasks/tasks.component.html @@ -644,19 +644,19 @@ src/app/components/manage/management-list/management-list.component.html - 51 + 48 src/app/components/manage/management-list/management-list.component.html - 51 + 48 src/app/components/manage/management-list/management-list.component.html - 51 + 48 src/app/components/manage/management-list/management-list.component.html - 51 + 48 @@ -1048,11 +1048,11 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 104 + 112 src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 123 + 131 src/app/components/common/input/permissions/permissions-form/permissions-form.component.html @@ -1075,11 +1075,11 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 112 + 120 src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 131 + 139 src/app/components/common/input/permissions/permissions-form/permissions-form.component.html @@ -1105,7 +1105,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 137 + 145 src/app/components/common/input/permissions/permissions-form/permissions-form.component.html @@ -1262,35 +1262,35 @@ src/app/components/manage/management-list/management-list.component.html - 20 + 17 src/app/components/manage/management-list/management-list.component.html - 20 + 17 src/app/components/manage/management-list/management-list.component.html - 20 + 17 src/app/components/manage/management-list/management-list.component.html - 20 + 17 src/app/components/manage/management-list/management-list.component.html - 37 + 34 src/app/components/manage/management-list/management-list.component.html - 37 + 34 src/app/components/manage/management-list/management-list.component.html - 37 + 34 src/app/components/manage/management-list/management-list.component.html - 37 + 34 src/app/components/manage/workflows/workflows.component.html @@ -1346,7 +1346,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 60 + 64 src/app/components/document-detail/document-detail.component.html @@ -1370,19 +1370,19 @@ src/app/components/manage/management-list/management-list.component.html - 43 + 40 src/app/components/manage/management-list/management-list.component.html - 43 + 40 src/app/components/manage/management-list/management-list.component.html - 43 + 40 src/app/components/manage/management-list/management-list.component.html - 43 + 40 src/app/components/manage/workflows/workflows.component.html @@ -1393,7 +1393,7 @@ Delete src/app/components/admin/settings/settings.component.html - 322 + 324 src/app/components/admin/users-groups/users-groups.component.html @@ -1413,7 +1413,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 80 + 84 src/app/components/common/permissions-select/permissions-select.component.html @@ -1445,55 +1445,35 @@ src/app/components/manage/management-list/management-list.component.html - 9 + 81 src/app/components/manage/management-list/management-list.component.html - 9 + 81 src/app/components/manage/management-list/management-list.component.html - 9 + 81 src/app/components/manage/management-list/management-list.component.html - 9 + 81 src/app/components/manage/management-list/management-list.component.html - 84 + 93 src/app/components/manage/management-list/management-list.component.html - 84 + 93 src/app/components/manage/management-list/management-list.component.html - 84 + 93 src/app/components/manage/management-list/management-list.component.html - 84 - - - src/app/components/manage/management-list/management-list.component.html - 96 - - - src/app/components/manage/management-list/management-list.component.html - 96 - - - src/app/components/manage/management-list/management-list.component.html - 96 - - - src/app/components/manage/management-list/management-list.component.html - 96 - - - src/app/components/manage/management-list/management-list.component.ts - 208 + 93 src/app/components/manage/workflows/workflows.component.html @@ -1504,7 +1484,7 @@ No saved views defined. src/app/components/admin/settings/settings.component.html - 328 + 336 @@ -1897,35 +1877,35 @@ src/app/components/manage/management-list/management-list.component.html - 83 + 80 src/app/components/manage/management-list/management-list.component.html - 83 + 80 src/app/components/manage/management-list/management-list.component.html - 83 + 80 src/app/components/manage/management-list/management-list.component.html - 83 + 80 src/app/components/manage/management-list/management-list.component.html - 93 + 90 src/app/components/manage/management-list/management-list.component.html - 93 + 90 src/app/components/manage/management-list/management-list.component.html - 93 + 90 src/app/components/manage/management-list/management-list.component.html - 93 + 90 src/app/components/manage/workflows/workflows.component.html @@ -2019,10 +1999,6 @@ src/app/components/manage/mail/mail.component.ts 173 - - src/app/components/manage/management-list/management-list.component.ts - 320 - src/app/components/manage/workflows/workflows.component.ts 97 @@ -2058,10 +2034,6 @@ src/app/components/manage/mail/mail.component.ts 175 - - src/app/components/manage/management-list/management-list.component.ts - 322 - src/app/components/manage/workflows/workflows.component.ts 99 @@ -2204,19 +2176,19 @@ src/app/components/manage/management-list/management-list.component.html - 90 + 87 src/app/components/manage/management-list/management-list.component.html - 90 + 87 src/app/components/manage/management-list/management-list.component.html - 90 + 87 src/app/components/manage/management-list/management-list.component.html - 90 + 87 @@ -2461,6 +2433,13 @@ 55 + + Are you sure? + + src/app/components/common/confirm-button/confirm-button.component.ts + 20 + + Confirmation @@ -2539,7 +2518,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 158 + 166 src/app/components/common/permissions-dialog/permissions-dialog.component.html @@ -2547,7 +2526,7 @@ src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 91 + 98 src/app/components/common/select-dialog/select-dialog.component.html @@ -2723,7 +2702,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 182 + 190 @@ -3089,7 +3068,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 92 + 100 @@ -3107,7 +3086,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 93 + 101 @@ -3125,7 +3104,7 @@ src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 156 + 164 src/app/components/common/toasts/toasts.component.html @@ -3459,175 +3438,175 @@ Apply Actions: src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 66 + 70 Add Action src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 68 + 72 Action type src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 86 + 94 Assign title src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 90 + 98 Can include some placeholders, see <a target='_blank' href='https://docs.paperless-ngx.com/usage/#workflows'>documentation</a>. src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 90 + 98 Assign tags src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 91 + 99 Assign storage path src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 94 + 102 Assign custom fields src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 95 + 103 Assign owner src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 98 + 106 Assign view permissions src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 100 + 108 Assign edit permissions src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 119 + 127 Trigger type src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 166 + 174 Trigger for documents that match all filters specified below. src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 167 + 175 Filter filename src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 170 + 178 Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive. src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 170 + 178 Filter sources src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 172 + 180 Filter path src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 173 + 181 Apply to documents that match this path. Wildcards specified as * are allowed. Case-normalized.</a> src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 173 + 181 Filter mail rule src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 174 + 182 Apply to documents consumed via this mail rule. src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 174 + 182 Content matching algorithm src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 177 + 185 Content matching pattern src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 179 + 187 Has tags src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 188 + 196 Has correspondent src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 189 + 197 Has document type src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html - 190 + 198 @@ -3749,19 +3728,19 @@ src/app/components/manage/management-list/management-list.component.html - 12 + 9 src/app/components/manage/management-list/management-list.component.html - 12 + 9 src/app/components/manage/management-list/management-list.component.html - 12 + 9 src/app/components/manage/management-list/management-list.component.html - 12 + 9 @@ -4133,14 +4112,14 @@ Regenerate auth token src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 44 + 45 Copied! src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 48 + 53 src/app/components/common/share-links-dropdown/share-links-dropdown.component.html @@ -4151,28 +4130,21 @@ Warning: changing the token cannot be undone src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 50 + 55 Connected social accounts src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 54 + 59 Set a password before disconnecting social account. src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 58 - - - - Disconnect social account - - src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 68 + 63 @@ -4182,18 +4154,25 @@ 69 + + Disconnect social account + + src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html + 71 + + Warning: disconnecting social accounts cannot be undone src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 74 + 81 Connect new social account src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html - 79 + 86 @@ -5020,14 +4999,6 @@ src/app/components/document-detail/document-detail.component.ts 717 - - src/app/components/manage/management-list/management-list.component.ts - 204 - - - src/app/components/manage/management-list/management-list.component.ts - 318 - Do you really want to delete document ""? @@ -6220,109 +6191,109 @@ src/app/components/manage/management-list/management-list.component.ts - 305 + 285 Filter by: src/app/components/manage/management-list/management-list.component.html - 19 + 16 src/app/components/manage/management-list/management-list.component.html - 19 + 16 src/app/components/manage/management-list/management-list.component.html - 19 + 16 src/app/components/manage/management-list/management-list.component.html - 19 + 16 Matching src/app/components/manage/management-list/management-list.component.html - 38 + 35 src/app/components/manage/management-list/management-list.component.html - 38 + 35 src/app/components/manage/management-list/management-list.component.html - 38 + 35 src/app/components/manage/management-list/management-list.component.html - 38 + 35 Document count src/app/components/manage/management-list/management-list.component.html - 39 + 36 src/app/components/manage/management-list/management-list.component.html - 39 + 36 src/app/components/manage/management-list/management-list.component.html - 39 + 36 src/app/components/manage/management-list/management-list.component.html - 39 + 36 Filter Documents src/app/components/manage/management-list/management-list.component.html - 82 + 79 src/app/components/manage/management-list/management-list.component.html - 82 + 79 src/app/components/manage/management-list/management-list.component.html - 82 + 79 src/app/components/manage/management-list/management-list.component.html - 82 + 79 {VAR_PLURAL, plural, =1 {One } other { total }} src/app/components/manage/management-list/management-list.component.html - 110 + 113 src/app/components/manage/management-list/management-list.component.html - 110 + 113 src/app/components/manage/management-list/management-list.component.html - 110 + 113 src/app/components/manage/management-list/management-list.component.html - 110 + 113 Automatic src/app/components/manage/management-list/management-list.component.ts - 116 + 110 src/app/data/matching-model.ts @@ -6333,7 +6304,7 @@ None src/app/components/manage/management-list/management-list.component.ts - 118 + 112 src/app/data/matching-model.ts @@ -6344,70 +6315,42 @@ Successfully created . src/app/components/manage/management-list/management-list.component.ts - 161 + 155 Error occurred while creating . src/app/components/manage/management-list/management-list.component.ts - 166 + 160 Successfully updated . src/app/components/manage/management-list/management-list.component.ts - 181 + 175 Error occurred while saving . src/app/components/manage/management-list/management-list.component.ts - 186 - - - - Associated documents will not be deleted. - - src/app/components/manage/management-list/management-list.component.ts - 206 + 180 Error while deleting element src/app/components/manage/management-list/management-list.component.ts - 222 + 204 Permissions updated successfully src/app/components/manage/management-list/management-list.component.ts - 298 - - - - This operation will permanently delete all objects. - - src/app/components/manage/management-list/management-list.component.ts - 319 - - - - Objects deleted successfully - - src/app/components/manage/management-list/management-list.component.ts - 333 - - - - Error deleting objects - - src/app/components/manage/management-list/management-list.component.ts - 339 + 278 diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index a20a69eb8..395ddc04f 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -112,6 +112,7 @@ import { SwitchComponent } from './components/common/input/switch/switch.compone import { ConfigComponent } from './components/admin/config/config.component' import { FileComponent } from './components/common/input/file/file.component' import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' +import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component' import { archive, arrowCounterclockwise, @@ -439,6 +440,7 @@ function initializeApp(settings: SettingsService) { SwitchComponent, ConfigComponent, FileComponent, + ConfirmButtonComponent, ], imports: [ BrowserModule, diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html index 8b239e772..5b9ce7d9f 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.html +++ b/src-ui/src/app/components/admin/settings/settings.component.html @@ -319,7 +319,15 @@
- + + +
} diff --git a/src-ui/src/app/components/admin/settings/settings.component.spec.ts b/src-ui/src/app/components/admin/settings/settings.component.spec.ts index 6e105ed11..6a9ca36da 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts +++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts @@ -38,6 +38,7 @@ import { PageHeaderComponent } from '../../common/page-header/page-header.compon import { SettingsComponent } from './settings.component' import { IfOwnerDirective } from 'src/app/directives/if-owner.directive' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' +import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component' const savedViews = [ { id: 1, name: 'view1', show_in_sidebar: true, show_on_dashboard: true }, @@ -83,6 +84,7 @@ describe('SettingsComponent', () => { PermissionsUserComponent, PermissionsGroupComponent, IfOwnerDirective, + ConfirmButtonComponent, ], providers: [CustomDatePipe, DatePipe, PermissionsGuard], imports: [ diff --git a/src-ui/src/app/components/common/confirm-button/confirm-button.component.html b/src-ui/src/app/components/common/confirm-button/confirm-button.component.html new file mode 100644 index 000000000..a82a06c4b --- /dev/null +++ b/src-ui/src/app/components/common/confirm-button/confirm-button.component.html @@ -0,0 +1,22 @@ + + + +
+ {{confirmMessage}}  +
+ diff --git a/src-ui/src/app/components/common/confirm-button/confirm-button.component.scss b/src-ui/src/app/components/common/confirm-button/confirm-button.component.scss new file mode 100644 index 000000000..14d19be51 --- /dev/null +++ b/src-ui/src/app/components/common/confirm-button/confirm-button.component.scss @@ -0,0 +1,12 @@ +// Taken from bootstrap rules, obv +::ng-deep .input-group > pngx-confirm-button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > button, +::ng-deep .btn-group > pngx-confirm-button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + ::ng-deep .input-group:not(.has-validation) > pngx-confirm-button:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > button, + ::ng-deep .btn-group:not(.has-validation) > pngx-confirm-button:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } diff --git a/src-ui/src/app/components/common/confirm-button/confirm-button.component.spec.ts b/src-ui/src/app/components/common/confirm-button/confirm-button.component.spec.ts new file mode 100644 index 000000000..d67777d45 --- /dev/null +++ b/src-ui/src/app/components/common/confirm-button/confirm-button.component.spec.ts @@ -0,0 +1,37 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { ConfirmButtonComponent } from './confirm-button.component' +import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap' +import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' + +describe('ConfirmButtonComponent', () => { + let component: ConfirmButtonComponent + let fixture: ComponentFixture + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ConfirmButtonComponent], + imports: [NgbPopoverModule, NgxBootstrapIconsModule.pick(allIcons)], + }).compileComponents() + + fixture = TestBed.createComponent(ConfirmButtonComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should show confirm on click', () => { + expect(component.popover.isOpen()).toBeFalsy() + expect(component.confirming).toBeFalsy() + component.onClick(new MouseEvent('click')) + expect(component.popover.isOpen()).toBeTruthy() + expect(component.confirming).toBeTruthy() + }) + + it('should emit confirm on confirm', () => { + const confirmSpy = jest.spyOn(component.confirm, 'emit') + component.onConfirm(new MouseEvent('click')) + expect(confirmSpy).toHaveBeenCalled() + expect(component.popover.isOpen()).toBeFalsy() + expect(component.confirming).toBeFalsy() + }) +}) diff --git a/src-ui/src/app/components/common/confirm-button/confirm-button.component.ts b/src-ui/src/app/components/common/confirm-button/confirm-button.component.ts new file mode 100644 index 000000000..f6746f99d --- /dev/null +++ b/src-ui/src/app/components/common/confirm-button/confirm-button.component.ts @@ -0,0 +1,55 @@ +import { + Component, + EventEmitter, + Input, + Output, + ViewChild, +} from '@angular/core' +import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' + +@Component({ + selector: 'pngx-confirm-button', + templateUrl: './confirm-button.component.html', + styleUrl: './confirm-button.component.scss', +}) +export class ConfirmButtonComponent { + @Input() + label: string + + @Input() + confirmMessage: string = $localize`Are you sure?` + + @Input() + buttonClasses: string = 'btn-primary' + + @Input() + iconName: string + + @Input() + disabled: boolean = false + + @Output() + confirm: EventEmitter = new EventEmitter() + + @ViewChild('popover') popover: NgbPopover + + public confirming: boolean = false + + public onClick(event: MouseEvent) { + if (!this.confirming) { + this.confirming = true + this.popover.open() + } + + event.preventDefault() + event.stopImmediatePropagation() + } + + public onConfirm(event: MouseEvent) { + this.confirm.emit() + this.confirming = false + + event.preventDefault() + event.stopImmediatePropagation() + } +} diff --git a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html index c393df944..623119605 100644 --- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html +++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html @@ -38,9 +38,13 @@ @if(trigger.id > -1) { ID: {{trigger.id}} } - + +
@@ -76,9 +80,13 @@ @if(action.id > -1) { ID: {{action.id}} } - + +
diff --git a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts index a901e20ac..f7eeb1bf0 100644 --- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts @@ -38,6 +38,7 @@ import { WorkflowActionType, } from 'src/app/data/workflow-action' import { MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/matching-model' +import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component' const workflow: Workflow = { name: 'Workflow 1', @@ -85,6 +86,7 @@ describe('WorkflowEditDialogComponent', () => { PermissionsUserComponent, PermissionsGroupComponent, SafeHtmlPipe, + ConfirmButtonComponent, ], providers: [ NgbActiveModal, diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html index 6b06dfa8e..713d68864 100644 --- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html +++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html @@ -41,9 +41,14 @@ } - + +
Copied! @@ -60,14 +65,16 @@ [disablePopover]="hasUsablePassword" triggers="mouseenter:mouseleave"> {{account.name}} ({{account.provider}}) - + + } diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts index 36888d4bd..b57cf07f2 100644 --- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts @@ -21,6 +21,7 @@ import { of, throwError } from 'rxjs' import { ToastService } from 'src/app/services/toast.service' import { Clipboard } from '@angular/cdk/clipboard' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' +import { ConfirmButtonComponent } from '../confirm-button/confirm-button.component' const socialAccount = { id: 1, @@ -52,6 +53,7 @@ describe('ProfileEditDialogComponent', () => { ProfileEditDialogComponent, TextComponent, PasswordComponent, + ConfirmButtonComponent, ], providers: [NgbActiveModal], imports: [ diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.html b/src-ui/src/app/components/manage/management-list/management-list.component.html index 58101c388..d627a1540 100644 --- a/src-ui/src/app/components/manage/management-list/management-list.component.html +++ b/src-ui/src/app/components/manage/management-list/management-list.component.html @@ -88,33 +88,39 @@
- - -
- - - } - - - - - @if (!isLoading) { -
- @if (collectionSize > 0) { -
- {collectionSize, plural, =1 {One {{typeName}}} other {{{collectionSize || 0}} total {{typeNamePlural}}}} - @if (selectedObjects.size > 0) { -  ({{selectedObjects.size}} selected) - } + + + +
- } - @if (collectionSize > 20) { - - } -
+ + } + + + + + @if (!isLoading) { +
+ @if (collectionSize > 0) { +
+ {collectionSize, plural, =1 {One {{typeName}}} other {{{collectionSize || 0}} total {{typeNamePlural}}}} + @if (selectedObjects.size > 0) { +  ({{selectedObjects.size}} selected) + } +
+ } + @if (collectionSize > 20) { + + } +
+ } diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts b/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts index 710d3018a..280c40ca8 100644 --- a/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts +++ b/src-ui/src/app/components/manage/management-list/management-list.component.spec.ts @@ -13,6 +13,7 @@ import { NgbModalModule, NgbModalRef, NgbPaginationModule, + NgbPopoverModule, } from '@ng-bootstrap/ng-bootstrap' import { of, throwError } from 'rxjs' import { Tag } from 'src/app/data/tag' @@ -37,6 +38,7 @@ import { MATCH_NONE } from 'src/app/data/matching-model' import { MATCH_LITERAL } from 'src/app/data/matching-model' import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' +import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component' import { BulkEditObjectOperation } from 'src/app/services/rest/abstract-name-filter-service' const tags: Tag[] = [ @@ -76,6 +78,7 @@ describe('ManagementListComponent', () => { SafeHtmlPipe, ConfirmDialogComponent, PermissionsDialogComponent, + ConfirmButtonComponent, ], providers: [ { @@ -97,6 +100,7 @@ describe('ManagementListComponent', () => { NgbModalModule, RouterTestingModule.withRoutes(routes), NgxBootstrapIconsModule.pick(allIcons), + NgbPopoverModule, ], }).compileComponents() @@ -193,27 +197,23 @@ describe('ManagementListComponent', () => { }) it('should support delete, show notification on error / success', () => { - let modal: NgbModalRef - modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) const toastErrorSpy = jest.spyOn(toastService, 'showError') const deleteSpy = jest.spyOn(tagService, 'delete') const reloadSpy = jest.spyOn(component, 'reloadData') - const deleteButton = fixture.debugElement.queryAll(By.css('button'))[8] - deleteButton.triggerEventHandler('click') - - expect(modal).not.toBeUndefined() - const editDialog = modal.componentInstance as ConfirmDialogComponent + const deleteButton = fixture.debugElement.query( + By.directive(ConfirmButtonComponent) + ) // fail first deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting'))) - editDialog.confirmClicked.emit() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) expect(toastErrorSpy).toHaveBeenCalled() expect(reloadSpy).not.toHaveBeenCalled() // succeed deleteSpy.mockReturnValueOnce(of(true)) - editDialog.confirmClicked.emit() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) expect(reloadSpy).toHaveBeenCalled() }) diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.ts b/src-ui/src/app/components/manage/management-list/management-list.component.ts index 0b0365f06..8f0947f1c 100644 --- a/src-ui/src/app/components/manage/management-list/management-list.component.ts +++ b/src-ui/src/app/components/manage/management-list/management-list.component.ts @@ -15,10 +15,7 @@ import { MATCH_NONE, } from 'src/app/data/matching-model' import { ObjectWithId } from 'src/app/data/object-with-id' -import { - ObjectWithPermissions, - PermissionsObject, -} from 'src/app/data/object-with-permissions' +import { ObjectWithPermissions } from 'src/app/data/object-with-permissions' import { SortableDirective, SortEvent, @@ -197,34 +194,21 @@ export abstract class ManagementListComponent ]) } - openDeleteDialog(object: T) { - var activeModal = this.modalService.open(ConfirmDialogComponent, { - backdrop: 'static', - }) - activeModal.componentInstance.title = $localize`Confirm delete` - activeModal.componentInstance.messageBold = this.getDeleteMessage(object) - activeModal.componentInstance.message = $localize`Associated documents will not be deleted.` - activeModal.componentInstance.btnClass = 'btn-danger' - activeModal.componentInstance.btnCaption = $localize`Delete` - activeModal.componentInstance.confirmClicked.subscribe(() => { - activeModal.componentInstance.buttonsEnabled = false - this.service - .delete(object) - .pipe(takeUntil(this.unsubscribeNotifier)) - .subscribe({ - next: () => { - activeModal.close() - this.reloadData() - }, - error: (error) => { - activeModal.componentInstance.buttonsEnabled = true - this.toastService.showError( - $localize`Error while deleting element`, - error - ) - }, - }) - }) + deleteObject(object: T) { + this.service + .delete(object) + .pipe(takeUntil(this.unsubscribeNotifier)) + .subscribe({ + next: () => { + this.reloadData() + }, + error: (error) => { + this.toastService.showError( + $localize`Error while deleting element`, + error + ) + }, + }) } get nameFilter() {