feat(plex): incorpora params a swap modal service (#351)

andes · Jan 7, 2025 · e9b56ec · e9b56ec
1 parent 4ebb12d
commit e9b56ec
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 30 deletions.
diff --git a/src/demo/app/swal-modal/swal-modal.html b/src/demo/app/swal-modal/swal-modal.html
@@ -1,7 +1,7 @@
 <plex-layout>
   <plex-layout-main>
     <!--Info-->
-    <h4>Plex.info()</h4>
+    <plex-title titulo="Plex.info()"></plex-title>
     <div class="row margin-bottom">
       <div class="col-8">
         <plex-text label="Ingrese el texto" [(ngModel)]="alertText"></plex-text>
@@ -14,28 +14,59 @@ <h4>Plex.info()</h4>
         <plex-int label="Cerrar después de" suffix="ms" [(ngModel)]="alertTimeout"></plex-int>
       </div>
     </div>
-    <!--Toast-->
-    <h4 class="pt-4">Plex.toast()</h4>
+
+    <h5 class="pt-4">Parámetros</h5>
     <div class="row margin-bottom">
-      <div class="col-8">
-        <plex-text label="Ingrese el texto" [(ngModel)]="toastText"></plex-text>
-        <plex-button label="INFO" type="info" (click)="toast('info')"></plex-button>
-        <plex-button label="WARNING" type="warning" (click)="toast('warning')"></plex-button>
-        <plex-button label="DANGER" type="danger" (click)="toast('danger')"></plex-button>
-        <plex-button label="SUCCESS" type="success" (click)="toast('success')"></plex-button>
-      </div>
-      <div class="col-4">
-        <plex-int label="Cerrar después de" suffix="ms" [(ngModel)]="toastTimeout"></plex-int>
+      <ul>
+        <li><strong>type</strong>: Tipo del mensaje (success, danger, warning, info). Si es <code>danger</code>, será tratado como <code>error</code>.</li>
+        <li><strong>content</strong>: Texto o contenido HTML del mensaje.</li>
+        <li><strong>title</strong> (opcional): Título del cuadro de diálogo. Por defecto, "Información".</li>
+        <li><strong>timeOut</strong> (opcional): Tiempo en milisegundos antes de que el mensaje se cierre automáticamente. Por defecto, no se cierra automáticamente.</li>
+        <li><strong>confirmButtonText</strong> (opcional): Texto del botón de confirmación. Por defecto, "Aceptar".</li>
+        <li><strong>customClass</strong> (opcional): Clase CSS personalizada para el cuadro de diálogo.</li>
+      </ul>
+    </div>
+
+    <!--Toast-->
+    <div>
+      <plex-title class="mt-4" titulo="Plex.toast()"></plex-title>
+      <div class="row margin-bottom">
+        <div class="col-8">
+          <plex-text label="Ingrese el texto" [(ngModel)]="toastText"></plex-text>
+          <plex-button label="INFO" type="info" (click)="toast('info')"></plex-button>
+          <plex-button label="WARNING" type="warning" (click)="toast('warning')"></plex-button>
+          <plex-button label="DANGER" type="danger" (click)="toast('danger')"></plex-button>
+          <plex-button label="SUCCESS" type="success" (click)="toast('success')"></plex-button>
+        </div>
+        <div class="col-4">
+          <plex-int label="Cerrar después de" suffix="ms" [(ngModel)]="toastTimeout"></plex-int>
+        </div>
       </div>
     </div>
+
     <!--Confirm-->
-    <h4 class="pt-4">Plex.confirm()</h4>
+    <plex-title class="mt-4" titulo="Plex.confirm()"></plex-title>
     <div class="row margin-bottom">
       <div class="col-12 rtl">
         <plex-text label="Ingrese el texto" [(ngModel)]="confirmText"></plex-text>
         <plex-button label="MOSTRAR" type="primary" (click)="confirm()"></plex-button>
         <pre *ngIf="resultado !== undefined">Resultado de la confirmación: <strong>{{ resultado }}</strong></pre>
       </div>
     </div>
+
+    <!--Options-->
+    <h5 class="pt-4">Parámetros</h5>
+    <div class="row margin-bottom">
+      <ul>
+        <li><strong>content</strong>: Texto o contenido HTML del mensaje que se mostrará.</li>
+        <li><strong>title</strong> (opcional): Título del cuadro de diálogo. Por defecto, "Confirmación".</li>
+        <li><strong>confirmButtonText</strong> (opcional): Texto del botón de confirmación. Por defecto, "Confirmar".</li>
+        <li><strong>cancelButtonText</strong> (opcional): Texto del botón de cancelación. Por defecto, "Cancelar".</li>
+        <li><strong>confirmButtonType</strong> (opcional): Estilo del botón de confirmación (success, danger, warning, info). Por defecto, "danger".</li>
+        <li><strong>cancelButtonType</strong> (opcional): Estilo del botón de cancelación. Por defecto, "success".</li>
+        <li><strong>type</strong> (opcional): Tipo del cuadro de diálogo (question, warning, success, danger, warning, info). Por defecto, "question".</li>
+        <li><strong>customClass</strong> (opcional): Clase CSS personalizada para el cuadro de diálogo.</li>
+      </ul>
+    </div>
   </plex-layout-main>
 </plex-layout>
diff --git a/src/lib/core/service.ts b/src/lib/core/service.ts
@@ -1,14 +1,14 @@
-import { BehaviorSubject, Subject } from 'rxjs';
-import { Injectable, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { TitleCasePipe } from '@angular/common';
+import { ComponentFactoryResolver, Injectable, ViewContainerRef } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import * as introJs from 'intro.js';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { default as swal, SweetAlertType } from 'sweetalert2';
 import { DropdownItem } from './../dropdown/dropdown-item.inteface';
 import { NotificationsService } from './../toast/simple-notifications/services/notifications.service';
-import { default as swal } from 'sweetalert2';
-import { WizardConfig } from './wizard-config.interface';
 import { PlexTitle } from './plex-title.interface';
-import * as introJs from 'intro.js';
-import { BreakpointObserver } from '@angular/cdk/layout';
+import { WizardConfig } from './wizard-config.interface';
 
 @Injectable()
 export class Plex {
@@ -113,11 +113,13 @@ export class Plex {
      *
      * @memberof Plex
      */
-    confirm(params: { content: string, title: string, confirmButtonText: string, cancelButtonText: string });
+    confirm(params: {
+        content: string, title: string, confirmButtonText: string, cancelButtonText: string, confirmButtonType?: string, cancelButtonType?: string, type?: string, customClass?: string
+    });
 
-    confirm(content: string, title?: string, confirmButtonText?: string, cancelButtonText?: string);
+    confirm(content: string, title?: string, confirmButtonText?: string, cancelButtonText?: string, confirmButtonType?: string, cancelButtonType?: string, type?: string, customClass?: string);
 
-    confirm(content, title = 'Confirmación', confirmButtonText = 'Confirmar', cancelButtonText = 'Cancelar'): Promise<any> {
+    confirm(content, title = 'Confirmación', confirmButtonText = 'Confirmar', cancelButtonText = 'Cancelar', confirmButtonType = 'danger', cancelButtonType = 'success', type = 'question', customClass = ''): Promise<any> {
 
         let htmlContent;
 
@@ -127,6 +129,10 @@ export class Plex {
             htmlContent = content.content;
             confirmButtonText = content.confirmButtonText || 'Confirmar';
             cancelButtonText = content.cancelButtonText || 'Cancelar';
+            confirmButtonType = content.confirmButtonType || 'danger';
+            cancelButtonType = content.cancelButtonType || 'success';
+            type = content.type || 'question';
+            customClass = content.customClass || '';
         } else {
             htmlContent = content;
         }
@@ -135,13 +141,14 @@ export class Plex {
             swal({
                 title,
                 html: htmlContent,
-                type: 'question',
+                type: type as SweetAlertType,
                 showCancelButton: true,
                 confirmButtonText: confirmButtonText.toLocaleUpperCase(),
                 cancelButtonText: cancelButtonText.toLocaleUpperCase(),
                 buttonsStyling: false,
-                confirmButtonClass: 'btn btn-success',
-                cancelButtonClass: 'btn btn-danger',
+                confirmButtonClass: `btn btn-${confirmButtonType}`,
+                cancelButtonClass: `btn btn-${cancelButtonType}`,
+                customClass
             }).then(() => resolve(true))
                 .catch(() => resolve(false));
         });
@@ -158,9 +165,9 @@ export class Plex {
      *
      * @memberof Plex
      */
-    info(type: String, content: String, title?: String, timeOut?: Number, confirmButtonText?: String);
-    info(params: { type: String, content: String, title: String, confirmButtonText: String, timeOut?: Number });
-    info(type, content = '', title = 'Información', timeOut = 0, confirmButtonText = 'Aceptar') {
+    info(type: String, content: String, title?: String, timeOut?: Number, confirmButtonText?: String, customClass?: string);
+    info(params: { type: String, content: String, title: String, confirmButtonText: String, timeOut?: Number, customClass?: string });
+    info(type, content = '', title = 'Información', timeOut = 0, confirmButtonText = 'Aceptar', customClass = '') {
         let modalType;
 
         // Para compatibilidad
@@ -171,6 +178,7 @@ export class Plex {
             title = type.title || 'Información';
             confirmButtonText = type.confirmButtonText ? type.confirmButtonText.toLocaleUpperCase() : 'Aceptar';
             timeOut = type.timeOut || 0;
+            customClass = type.customClass || '';
         } else {
             // TODO: Usar el tipo SweetAlertType?
             if (type === 'danger') {
@@ -187,6 +195,7 @@ export class Plex {
             buttonsStyling: false,
             confirmButtonClass: `btn btn-${modalType === 'error' ? 'danger' : modalType}`,
             timer: timeOut || null,
+            customClass
         }).catch(swal.noop);
     }
 

diff --git a/src/lib/text/text.component.ts b/src/lib/text/text.component.ts
@@ -196,7 +196,7 @@ export class PlexTextComponent implements OnInit, AfterViewInit, ControlValueAcc
 
     registerOnChange(fn: any) {
         this.onChange = (value) => {
-            value = value || null;
+            value = value || '';
 
             if (this.customValidation) {
                 if (this.control && this.control.control) {