From cba71cbdb77c0d4e4f67566d7d97f224d68dd02a Mon Sep 17 00:00:00 2001 From: Philipp Jenni Date: Wed, 29 May 2024 10:22:15 +0200 Subject: [PATCH] feat: simplify usage of confirm dialog (#91) * feat: simplify usage of confirm dialog * doc: update documentation --- .../src/app/confirm/confirm.component.html | 15 +++--- .../src/app/confirm/confirm.component.ts | 39 +++++++++++++-- .../src/app/confirm/confirm.component.html | 15 +++--- .../src/app/confirm/confirm.component.ts | 22 +++++++++ .../src/app/confirm/confirm.component.html | 15 +++--- .../src/app/confirm/confirm.component.ts | 49 +++++++++++++++---- .../src/controls/confirm/confirm.html | 2 +- .../src/controls/confirm/confirm.html | 2 +- .../src/controls/confirm/confirm.html | 2 +- .../src/controls/confirm/confirm.button.ts | 2 +- docs/bootstrap3/classes/SacConfirmButton.html | 6 ++- .../components/SacConfirmComponent.html | 4 +- .../directives/SacContextmenuCommon.html | 16 +++--- docs/bootstrap3/js/search/search_index.js | 4 +- docs/bootstrap3/miscellaneous/variables.html | 28 +++++------ .../modules/SACBootstrap3CheckboxModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap3FormModule.html | 8 +-- .../SACBootstrap3FormModule/dependencies.svg | 8 +-- .../modules/SACBootstrap3InputModule.html | 8 +-- .../SACBootstrap3InputModule/dependencies.svg | 8 +-- .../modules/SACBootstrap3LayoutModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap3ListModule.html | 8 +-- .../SACBootstrap3ListModule/dependencies.svg | 8 +-- .../SACBootstrap3StaticLabelModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap3TabsModule.html | 8 +-- .../SACBootstrap3TabsModule/dependencies.svg | 8 +-- .../modules/SACBootstrap3TtreeviewModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap3UploadModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap3WizardModule.html | 8 +-- .../dependencies.svg | 8 +-- docs/bootstrap4/classes/SacConfirmButton.html | 6 ++- .../components/SacConfirmComponent.html | 4 +- .../components/SacContextmenuComponent.html | 6 +-- .../SacMultilanguagemenuComponent.html | 6 +-- .../directives/SacContextmenuCommon.html | 16 +++--- docs/bootstrap4/js/search/search_index.js | 4 +- .../modules/SACBootstrap4ButtonModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap4CheckboxModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap4ConfirmModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap4DialogModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap4ListModule.html | 8 +-- .../SACBootstrap4ListModule/dependencies.svg | 8 +-- .../modules/SACBootstrap4TabsModule.html | 8 +-- .../SACBootstrap4TabsModule/dependencies.svg | 8 +-- .../modules/SACBootstrap4TinyMceModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap4UploadModule.html | 8 +-- .../dependencies.svg | 8 +-- docs/bootstrap5/classes/SacConfirmButton.html | 6 ++- .../components/SacConfirmComponent.html | 4 +- .../components/SacContextmenuComponent.html | 6 +-- .../SacMultilanguagemenuComponent.html | 6 +-- .../directives/SacContextmenuCommon.html | 16 +++--- docs/bootstrap5/js/search/search_index.js | 4 +- .../modules/SACBootstrap5ButtonModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5CheckboxModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5ConfirmModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5DialogModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5DropdownModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5GridModule.html | 8 +-- .../SACBootstrap5GridModule/dependencies.svg | 8 +-- .../modules/SACBootstrap5InputModule.html | 8 +-- .../SACBootstrap5InputModule/dependencies.svg | 8 +-- .../modules/SACBootstrap5TabsModule.html | 8 +-- .../SACBootstrap5TabsModule/dependencies.svg | 8 +-- .../modules/SACBootstrap5TinyMceModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5UploadModule.html | 8 +-- .../dependencies.svg | 8 +-- .../modules/SACBootstrap5WizardModule.html | 8 +-- .../dependencies.svg | 8 +-- 85 files changed, 437 insertions(+), 332 deletions(-) diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.html index bd0657b7b..7f7f697e1 100644 --- a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.html +++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.html @@ -1,10 +1,11 @@

Confirm

- -
-
Confirm Dialog
- -
- - +
+
Confirm Dialog
+ +
+
+
Confirm Dialog
+ +
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.ts index 4752c7102..fe8ebe5d1 100644 --- a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.ts +++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/confirm/confirm.component.ts @@ -1,12 +1,13 @@ +import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { - ServiceConfirm, - SACBootstrap3FormModule, SACBootstrap3ButtonModule, SACBootstrap3ConfirmModule, + SACBootstrap3FormModule, + ServiceConfirm, } from '@simpleangularcontrols/sac-bootstrap3'; -import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; +import { take } from 'rxjs/operators'; @Component({ selector: 'app-confirm', @@ -22,7 +23,14 @@ import { CommonModule } from '@angular/common'; ], }) export class DemoConfirmComponent { + // #region Constructors + constructor(private confirmService: ServiceConfirm) {} + + // #endregion Constructors + + // #region Public Methods + public confirmExample(): void { this.confirmService .ConfirmMessage('Benutzer löschen', 'Soll der Benutzer gelöscht werden?') @@ -35,4 +43,27 @@ export class DemoConfirmComponent { } }); } + + public confirmExample2(): void { + this.confirmService + .ConfirmMessage( + 'Benutzer löschen', + 'Soll der Benutzer gelöscht werden?', + [ + { key: 'ok', text: 'OK', role: 'primary' }, + { key: 'cancel', text: 'Abbrechen' }, + ] + ) + .pipe(take(1)) + .subscribe((result) => { + console.log('Action called'); + if (result === 'ok') { + alert('True'); + } else { + alert('False'); + } + }); + } + + // #endregion Public Methods } diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.html index bd0657b7b..7f7f697e1 100644 --- a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.html +++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.html @@ -1,10 +1,11 @@

Confirm

- -
-
Confirm Dialog
- -
- - +
+
Confirm Dialog
+ +
+
+
Confirm Dialog
+ +
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.ts index d5e8d8a99..1b39c2968 100644 --- a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.ts +++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/confirm/confirm.component.ts @@ -6,6 +6,7 @@ import { SACBootstrap4FormModule, ServiceConfirm, } from '@simpleangularcontrols/sac-bootstrap4'; +import { take } from 'rxjs/operators'; @Component({ selector: 'app-confirm', @@ -40,5 +41,26 @@ export class DemoConfirmComponent { }); } + public confirmExample2(): void { + this.confirmService + .ConfirmMessage( + 'Benutzer löschen', + 'Soll der Benutzer gelöscht werden?', + [ + { key: 'ok', text: 'OK', role: 'primary' }, + { key: 'cancel', text: 'Abbrechen' }, + ] + ) + .pipe(take(1)) + .subscribe((result) => { + console.log('Action called'); + if (result === 'ok') { + alert('True'); + } else { + alert('False'); + } + }); + } + // #endregion Public Methods } diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.html index bd0657b7b..7f7f697e1 100644 --- a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.html +++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.html @@ -1,10 +1,11 @@

Confirm

- -
-
Confirm Dialog
- -
- - +
+
Confirm Dialog
+ +
+
+
Confirm Dialog
+ +
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.ts index 3061dda9b..f706ed04e 100644 --- a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.ts +++ b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/confirm/confirm.component.ts @@ -1,19 +1,27 @@ import { Component } from '@angular/core'; -import { ServiceConfirm, SACBootstrap5FormModule, SACBootstrap5ButtonModule } from '@simpleangularcontrols/sac-bootstrap5'; import { FormsModule } from '@angular/forms'; +import { + SACBootstrap5ButtonModule, + SACBootstrap5FormModule, + ServiceConfirm, +} from '@simpleangularcontrols/sac-bootstrap5'; +import { take } from 'rxjs/operators'; @Component({ - selector: 'app-confirm', - templateUrl: './confirm.component.html', - standalone: true, - imports: [ - FormsModule, - SACBootstrap5FormModule, - SACBootstrap5ButtonModule, - ], + selector: 'app-confirm', + templateUrl: './confirm.component.html', + standalone: true, + imports: [FormsModule, SACBootstrap5FormModule, SACBootstrap5ButtonModule], }) export class DemoConfirmComponent { + // #region Constructors + constructor(private confirmService: ServiceConfirm) {} + + // #endregion Constructors + + // #region Public Methods + public confirmExample(): void { this.confirmService .ConfirmMessage('Benutzer löschen', 'Soll der Benutzer gelöscht werden?') @@ -26,4 +34,27 @@ export class DemoConfirmComponent { } }); } + + public confirmExample2(): void { + this.confirmService + .ConfirmMessage( + 'Benutzer löschen', + 'Soll der Benutzer gelöscht werden?', + [ + { key: 'ok', text: 'OK', role: 'primary' }, + { key: 'cancel', text: 'Abbrechen' }, + ] + ) + .pipe(take(1)) + .subscribe((result) => { + console.log('Action called'); + if (result === 'ok') { + alert('True'); + } else { + alert('False'); + } + }); + } + + // #endregion Public Methods } diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/confirm/confirm.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/confirm/confirm.html index 4471a6f0e..efb9b4e0b 100644 --- a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/confirm/confirm.html +++ b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/confirm/confirm.html @@ -17,7 +17,7 @@ diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/confirm/confirm.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/confirm/confirm.html index 46aafc570..0af7fa6d8 100644 --- a/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/confirm/confirm.html +++ b/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/confirm/confirm.html @@ -20,7 +20,7 @@ diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/confirm/confirm.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/confirm/confirm.html index 43243c55d..86ea29831 100644 --- a/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/confirm/confirm.html +++ b/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/confirm/confirm.html @@ -22,7 +22,7 @@ diff --git a/ch.jnetwork.sac-controls/projects/sac-common/src/controls/confirm/confirm.button.ts b/ch.jnetwork.sac-controls/projects/sac-common/src/controls/confirm/confirm.button.ts index 742235ba5..a5187b945 100644 --- a/ch.jnetwork.sac-controls/projects/sac-common/src/controls/confirm/confirm.button.ts +++ b/ch.jnetwork.sac-controls/projects/sac-common/src/controls/confirm/confirm.button.ts @@ -13,7 +13,7 @@ export class SacConfirmButton { /** * Layout of the button */ - public role: BUTTONROLETYPE = 'secondary'; + public role?: BUTTONROLETYPE | null = 'secondary'; /** * Display text of the buttonAnzeigetext des Buttons */ diff --git a/docs/bootstrap3/classes/SacConfirmButton.html b/docs/bootstrap3/classes/SacConfirmButton.html index ad253b347..6095490e1 100644 --- a/docs/bootstrap3/classes/SacConfirmButton.html +++ b/docs/bootstrap3/classes/SacConfirmButton.html @@ -159,6 +159,7 @@
Properties
  • Public + Optional role
  • @@ -316,6 +317,7 @@

    Public + Optional role @@ -323,7 +325,7 @@

    - Type : BUTTONROLETYPE + Type : BUTTONROLETYPE | null @@ -412,7 +414,7 @@

    /** * Layout of the button */ - public role: BUTTONROLETYPE = 'secondary'; + public role?: BUTTONROLETYPE | null = 'secondary'; /** * Display text of the buttonAnzeigetext des Buttons */ diff --git a/docs/bootstrap3/components/SacConfirmComponent.html b/docs/bootstrap3/components/SacConfirmComponent.html index 05431fe4f..8b0917165 100644 --- a/docs/bootstrap3/components/SacConfirmComponent.html +++ b/docs/bootstrap3/components/SacConfirmComponent.html @@ -796,7 +796,7 @@

    <sac-button [name]="button.key" [text]="button.text" - [role]="button.role" + [role]="button.role || 'default'" (clicked)="confirm(button.key)" style="margin-left: 15px" ></sac-button> @@ -832,7 +832,7 @@