feat: simplify usage of confirm dialog (simpleangularcontrols#91)

* feat: simplify usage of confirm dialog * doc: update documentation
jnetwork-gmbh · May 29, 2024 · cba71cb · cba71cb
1 parent 0155f3a
commit cba71cb
Show file tree

Hide file tree

Showing 85 changed files with 437 additions and 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
@@ -1,10 +1,11 @@
 <h2>Confirm</h2>
 <form #myForm="sacform" labelsize="3">
-
-    <div>
-        <div>Confirm Dialog</div>
-        <sac-button text="Confirm" (clicked)="confirmExample()"></sac-button>
-      </div>
-
-
+  <div>
+    <div>Confirm Dialog</div>
+    <sac-button text="Confirm" (clicked)="confirmExample()"></sac-button>
+  </div>
+  <div>
+    <div>Confirm Dialog</div>
+    <sac-button text="Confirm2" (clicked)="confirmExample2()"></sac-button>
+  </div>
 </form>
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
@@ -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
@@ -1,10 +1,11 @@
 <h2>Confirm</h2>
 <form #myForm="sacform" labelsize="3">
-
-    <div>
-        <div>Confirm Dialog</div>
-        <sac-button text="Confirm" (clicked)="confirmExample()"></sac-button>
-      </div>
-
-
+  <div>
+    <div>Confirm Dialog</div>
+    <sac-button text="Confirm" (clicked)="confirmExample()"></sac-button>
+  </div>
+  <div>
+    <div>Confirm Dialog</div>
+    <sac-button text="Confirm2" (clicked)="confirmExample2()"></sac-button>
+  </div>
 </form>
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
@@ -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
@@ -1,10 +1,11 @@
 <h2>Confirm</h2>
 <form #myForm="sacform" labelsize="3">
-
-    <div>
-        <div>Confirm Dialog</div>
-        <sac-button text="Confirm" (clicked)="confirmExample()"></sac-button>
-      </div>
-
-
+  <div>
+    <div>Confirm Dialog</div>
+    <sac-button text="Confirm" (clicked)="confirmExample()"></sac-button>
+  </div>
+  <div>
+    <div>Confirm Dialog</div>
+    <sac-button text="Confirm2" (clicked)="confirmExample2()"></sac-button>
+  </div>
 </form>
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
@@ -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
@@ -17,7 +17,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>

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
@@ -20,7 +20,7 @@
       <sac-button
         [name]="button.key"
         [text]="button.text"
-        [role]="button.role"
+        [role]="button.role || 'default'"
         (clicked)="confirm(button.key)"
       ></sac-button>
     </ng-container>

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
@@ -22,7 +22,7 @@
       <sac-button
         [name]="button.key"
         [text]="button.text"
-        [role]="button.role"
+        [role]="button.role || 'default'"
         (clicked)="confirm(button.key)"
       ></sac-button>
     </ng-container>

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
@@ -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
@@ -159,6 +159,7 @@ <h6><b>Properties</b></h6>
                             </li>
                             <li>
                                     <span class="modifier">Public</span>
+                                    <span class="modifier">Optional</span>
                                 <a href="#role" >role</a>
                             </li>
                             <li>
@@ -316,14 +317,15 @@ <h3 id="inputs">
                     <a name="role"></a>
                     <span class="name">
                             <span class="modifier">Public</span>
+                            <span class="modifier">Optional</span>
                         <span ><b>role</b></span>
                         <a href="#role"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#BUTTONROLETYPE" target="_self" >BUTTONROLETYPE</a></code>
+                        <i>Type : </i>        <code><a href="../miscellaneous/typealiases.html#BUTTONROLETYPE" target="_self" >BUTTONROLETYPE | null</a></code>
 
                     </td>
                 </tr>
@@ -412,7 +414,7 @@ <h3 id="inputs">
   /**
    * Layout of the button
    */
-  public role: BUTTONROLETYPE &#x3D; &#x27;secondary&#x27;;
+  public role?: BUTTONROLETYPE | null &#x3D; &#x27;secondary&#x27;;
   /**
    * Display text of the buttonAnzeigetext des Buttons
    */

diff --git a/docs/bootstrap3/components/SacConfirmComponent.html b/docs/bootstrap3/components/SacConfirmComponent.html
@@ -796,7 +796,7 @@ <h3 id="inputs">
       &lt;sac-button
         [name]&#x3D;&quot;button.key&quot;
         [text]&#x3D;&quot;button.text&quot;
-        [role]&#x3D;&quot;button.role&quot;
+        [role]&#x3D;&quot;button.role || &#x27;default&#x27;&quot;
         (clicked)&#x3D;&quot;confirm(button.key)&quot;
         style&#x3D;&quot;margin-left: 15px&quot;
       &gt;&lt;/sac-button&gt;
@@ -832,7 +832,7 @@ <h3 id="inputs">
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><sac-dialog  [(isvisible)]="isvisible"  [title]="title"  [allowesc]="false"  [closebutton]="false">  <div dialogbody>    <div class="media">      <div class="media-left media-middle" *ngIf="hasImage()">        <img [attr.src]="image" />      </div>      <div class="media-body">{{message}}</div>    </div>  </div>  <div dialogfooter>    <ng-container *ngFor="let button of buttons">      <sac-button        [name]="button.key"        [text]="button.text"        [role]="button.role"        (clicked)="confirm(button.key)"        style="margin-left: 15px"      ></sac-button>    </ng-container>  </div></sac-dialog></div>'
+        var COMPONENT_TEMPLATE = '<div><sac-dialog  [(isvisible)]="isvisible"  [title]="title"  [allowesc]="false"  [closebutton]="false">  <div dialogbody>    <div class="media">      <div class="media-left media-middle" *ngIf="hasImage()">        <img [attr.src]="image" />      </div>      <div class="media-body">{{message}}</div>    </div>  </div>  <div dialogfooter>    <ng-container *ngFor="let button of buttons">      <sac-button        [name]="button.key"        [text]="button.text"        [role]="button.role || \'default\'"        (clicked)="confirm(button.key)"        style="margin-left: 15px"      ></sac-button>    </ng-container>  </div></sac-dialog></div>'
     var COMPONENTS = [{'name': 'SacButtonComponent', 'selector': 'sac-button'},{'name': 'SacCheckboxComponent', 'selector': 'sac-checkbox'},{'name': 'SacConfirmComponent', 'selector': 'sac-confirm'},{'name': 'SacDateComponent', 'selector': 'sac-date'},{'name': 'SacDateSelectorComponent', 'selector': 'sac-dateselector'},{'name': 'SacDateTimeComponent', 'selector': 'sac-datetime'},{'name': 'SacDialogComponent', 'selector': 'sac-dialog'},{'name': 'SacDropdownComponent', 'selector': 'sac-dropdown'},{'name': 'SacGridButtonComponent', 'selector': 'sac-gridbutton'},{'name': 'SacGridColumnActionComponent', 'selector': 'sac-gridcolumnaction'},{'name': 'SacGridColumnComponent', 'selector': 'sac-gridcolumn'},{'name': 'SacGridComponent', 'selector': 'sac-grid'},{'name': 'SacGridImageComponent', 'selector': 'sac-gridimage'},{'name': 'SacInputAreaComponent', 'selector': 'sac-inputarea'},{'name': 'SacInputComponent', 'selector': 'sac-input'},{'name': 'SacInputCurrencyComponent', 'selector': 'sac-inputcurrency'},{'name': 'SacInputDecimalComponent', 'selector': 'sac-inputdecimal'},{'name': 'SacInputEmailComponent', 'selector': 'sac-inputemail'},{'name': 'SacInputIntegerComponent', 'selector': 'sac-inputinteger'},{'name': 'SacInputPasswordComponent', 'selector': 'sac-inputpassword'},{'name': 'SacInputSearchComponent', 'selector': 'sac-inputsearch'},{'name': 'SacListboxComponent', 'selector': 'sac-listbox'},{'name': 'SacPagingComponent', 'selector': 'sac-paging'},{'name': 'SacRadiobuttonComponent', 'selector': 'sac-radiobutton'},{'name': 'SacRadiobuttonsComponent', 'selector': 'sac-radiobuttons'},{'name': 'SacStaticFormContainerComponent', 'selector': 'sac-staticformcontainer'},{'name': 'SacStaticLabelComponent', 'selector': 'sac-staticlabel'},{'name': 'SacTabComponent', 'selector': 'sac-tab'},{'name': 'SacTabItemComponent', 'selector': 'sac-tabitem'},{'name': 'SacTimeComponent', 'selector': 'sac-time'},{'name': 'SacTinyMceComponent', 'selector': 'sac-tinymce'},{'name': 'SacTooltipComponent', 'selector': 'sac-tooltip'},{'name': 'SacTreeItemActionComponent', 'selector': 'sac-treeitemaction'},{'name': 'SacTreeViewChildComponent', 'selector': 'sac-treeviewchild'},{'name': 'SacTreeViewComponent', 'selector': 'sac-treeview'},{'name': 'SacUploadComponent', 'selector': 'sac-upload'},{'name': 'SacUploadMultipleComponent', 'selector': 'sac-uploadmultiple'},{'name': 'SacValidationSummaryComponent', 'selector': 'sac-validationsummary'},{'name': 'SacWizardComponent', 'selector': 'sac-wizard'},{'name': 'SacWizardItemComponent', 'selector': 'sac-wizarditem'}];
     var DIRECTIVES = [{'name': 'SacBaseDateTimeControl', 'selector': ''},{'name': 'SacBaseListControl', 'selector': ''},{'name': 'SacBaseModelControl', 'selector': ''},{'name': 'SacBaseSelectControl', 'selector': ''},{'name': 'SacButtonCommon', 'selector': ''},{'name': 'SacCheckboxCommon', 'selector': ''},{'name': 'SacConfirmCommon', 'selector': ''},{'name': 'SacContextmenuAnchorCommon', 'selector': ''},{'name': 'SacContextmenuCommon', 'selector': ''},{'name': 'SacContextMenuContrainerCommon', 'selector': ''},{'name': 'SacContextmenuItemButtonCommon', 'selector': ''},{'name': 'SacContextmenuItemCommon', 'selector': ''},{'name': 'SacDateCommon', 'selector': ''},{'name': 'SacDateSelectorCommon', 'selector': ''},{'name': 'SacDateTimeCommon', 'selector': ''},{'name': 'SacDialogCommon', 'selector': ''},{'name': 'SacDropdownCommon', 'selector': ''},{'name': 'SacDropdownOptionCommon', 'selector': ''},{'name': 'SacDropdownOptionDirective', 'selector': 'option,[sacOption]'},{'name': 'SacDropzoneMultipleCommon', 'selector': ''},{'name': 'SacDropzoneSingleCommon', 'selector': ''},{'name': 'SacFileBrowserCommon', 'selector': ''},{'name': 'SacFormCommon', 'selector': ''},{'name': 'SacFormDirective', 'selector': 'form:not([ngNoForm]):not([formGroup]),[ngForm]'},{'name': 'SacFormLayoutCommon', 'selector': ''},{'name': 'SacFormLayoutDirective', 'selector': '[sacFormLayout]'},{'name': 'SacGridButtonCommon', 'selector': ''},{'name': 'SacGridColumnActionCommon', 'selector': ''},{'name': 'SacGridColumnBaseCommon', 'selector': ''},{'name': 'SacGridColumnCommon', 'selector': ''},{'name': 'SacGridCommon', 'selector': ''},{'name': 'SacGridImageCommon', 'selector': ''},{'name': 'SacInheritFormDirective', 'selector': '[sacInheritForm]'},{'name': 'SacInputAreaCommon', 'selector': ''},{'name': 'SacInputBase', 'selector': ''},{'name': 'SacInputCommon', 'selector': ''},{'name': 'SacInputCurrencyCommon', 'selector': ''},{'name': 'SacInputDecimalCommon', 'selector': ''},{'name': 'SacInputEmailCommon', 'selector': ''},{'name': 'SacInputIntegerCommon', 'selector': ''},{'name': 'SacInputPasswordCommon', 'selector': ''},{'name': 'SacInputSearchCommon', 'selector': ''},{'name': 'SacListboxCommon', 'selector': ''},{'name': 'SacListboxOptionCommon', 'selector': ''},{'name': 'SacMultilanguageInputAreaCommon', 'selector': ''},{'name': 'SacMultilanguageInputCommon', 'selector': ''},{'name': 'SacPagingCommon', 'selector': ''},{'name': 'SacRadiobuttonCommon', 'selector': ''},{'name': 'SacRadiobuttonsCommon', 'selector': ''},{'name': 'SacStaticFormContainerCommon', 'selector': ''},{'name': 'SacStaticLabelCommon', 'selector': ''},{'name': 'SacTabCommon', 'selector': ''},{'name': 'SacTabItemCommon', 'selector': ''},{'name': 'SacTimeCommon', 'selector': ''},{'name': 'SacTinyMceCommon', 'selector': ''},{'name': 'SacTooltipCommon', 'selector': ''},{'name': 'SacTreeItemActionCommon', 'selector': ''},{'name': 'SacTreeViewChildCommon', 'selector': ''},{'name': 'SacTreeViewCommon', 'selector': ''},{'name': 'SacUploadBase', 'selector': ''},{'name': 'SacUploadMultipleCommon', 'selector': ''},{'name': 'SacUploadSingleCommon', 'selector': ''},{'name': 'SacValidationSummaryCommon', 'selector': ''},{'name': 'SacWizardCommon', 'selector': ''},{'name': 'SacWizardItemCommon', 'selector': ''}];
     var ACTUAL_COMPONENT = {'name': 'SacConfirmComponent'};

diff --git a/docs/bootstrap3/directives/SacContextmenuCommon.html b/docs/bootstrap3/directives/SacContextmenuCommon.html
@@ -619,8 +619,8 @@ <h3 id="methods">
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="205"
-                                    class="link-to-prism">projects/sac-common/src/controls/contextmenu/contextmenu.ts:205</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="209"
+                                    class="link-to-prism">projects/sac-common/src/controls/contextmenu/contextmenu.ts:209</a></div>
                         </td>
                     </tr>
 
@@ -817,8 +817,8 @@ <h3 id="methods">
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="182"
-                                    class="link-to-prism">projects/sac-common/src/controls/contextmenu/contextmenu.ts:182</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="186"
+                                    class="link-to-prism">projects/sac-common/src/controls/contextmenu/contextmenu.ts:186</a></div>
                         </td>
                     </tr>
 
@@ -858,8 +858,8 @@ <h3 id="methods">
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="190"
-                                    class="link-to-prism">projects/sac-common/src/controls/contextmenu/contextmenu.ts:190</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="194"
+                                    class="link-to-prism">projects/sac-common/src/controls/contextmenu/contextmenu.ts:194</a></div>
                         </td>
                     </tr>
 
@@ -1136,6 +1136,10 @@ <h3 id="accessors">
    * Event wenn Component entfernt wird.
    */
   public ngOnDestroy(): void {
+    if (this.isopen) {
+      this.close();
+    }
+
     this.zoneSubscription.unsubscribe();
   }
 

diff --git a/docs/bootstrap3/js/search/search_index.js b/docs/bootstrap3/js/search/search_index.js