paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-07-28 18:24:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: confirm buttons (#5680)

Browse Source
This commit is contained in:
shamoon
2024-02-08 10:23:06 -08:00
committed by GitHub
parent b643a68fa3
commit 6487dab132
15 changed files with 368 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src-ui/src/app/components/common/confirm-button/confirm-button.component.html Normal file
View File

@@ -0,0 +1,22 @@
<button
type="button"
class="btn {{buttonClasses}}"
(click)="onClick($event)"
[disabled]="disabled"
[ngbPopover]="popoverContent"
[autoClose]="true"
(hidden)="confirming = false"
#popover="ngbPopover"
popoverClass="popover-slim"
>
@if (iconName) {
<i-bs [class.me-1]="label" name="{{iconName}}"></i-bs>
}
<ng-container>{{label}}</ng-container>
</button>
<ng-template #popoverContent>
<div>
{{confirmMessage}}&nbsp;<button class="btn btn-link btn-sm text-danger p-0 m-0 lh-1" type="button" (click)="onConfirm($event)">Yes</button>
</div>
</ng-template>

12
src-ui/src/app/components/common/confirm-button/confirm-button.component.scss Normal file
View File

@@ -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;
}

37
src-ui/src/app/components/common/confirm-button/confirm-button.component.spec.ts Normal file
View File

@@ -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<ConfirmButtonComponent>
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()
})
})

55
src-ui/src/app/components/common/confirm-button/confirm-button.component.ts Normal file
View File

@@ -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<void> = new EventEmitter<void>()
@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()
}
}

20
src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
View File

@@ -38,9 +38,13 @@
@if(trigger.id > -1) {
<span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{trigger.id}}</span>
}
<button type="button" class="btn btn-link text-danger ms-2" (click)="removeTrigger(i)">
<i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button>
<pngx-confirm-button
label="Delete"
i18n-label
(confirm)="removeTrigger(i)"
buttonClasses="btn-link text-danger ms-2"
iconName="trash">
</pngx-confirm-button>
</button>
</div>
<div ngbAccordionCollapse>
@@ -76,9 +80,13 @@
@if(action.id > -1) {
<span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
}
<button type="button" class="btn btn-link text-danger ms-2" (click)="removeAction(i)">
<i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
</button>
<pngx-confirm-button
label="Delete"
i18n-label
(confirm)="removeAction(i)"
buttonClasses="btn-link text-danger ms-2"
iconName="trash">
</pngx-confirm-button>
</button>
</div>
<div ngbAccordionCollapse>

2
src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts
View File

@@ -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,

29
src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
View File

@@ -41,9 +41,14 @@
}
<span class="visually-hidden" i18n>Copy</span>
</button>
<button type="button" class="btn btn-outline-secondary" (click)="generateAuthToken()" i18n-title title="Regenerate auth token">
<i-bs width="1.2em" height="1.2em" name="arrow-repeat"></i-bs>
</button>
<pngx-confirm-button
title="Regenerate auth token"
i18n-title
buttonClasses=" btn-outline-secondary"
iconName="arrow-repeat"
[disabled]="!hasUsablePassword"
(confirm)="generateAuthToken()">
</pngx-confirm-button>
</div>
<span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
</div>
@@ -60,14 +65,16 @@
[disablePopover]="hasUsablePassword"
triggers="mouseenter:mouseleave">
{{account.name}} ({{account.provider}})
<button
type="button"
class="btn btn-outline-danger btn-sm ms-2 align-baseline"
[disabled]="!hasUsablePassword && socialAccounts.length === 1"
(click)="disconnectSocialAccount(account.id)"
i18n-title title="Disconnect {{ account.name }} social account">
<ng-container i18n>Disconnect</ng-container>&nbsp;<i-bs name="trash"></i-bs>
</button>
<pngx-confirm-button
label="Disconnect"
i18n-label
title="Disconnect {{ account.name }} social account"
i18n-title
buttonClasses="btn-outline-danger btn-sm ms-2 align-baseline"
iconName="trash"
[disabled]="!hasUsablePassword"
(confirm)="disconnectSocialAccount(account.id)">
</pngx-confirm-button>
</li>
}
</ul>

2
src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
View File

@@ -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: [