GDU - Agregar una fecha de vencimiento para permisos por efector

src/app/apps/gestor-usuarios/views/usuarios-edit.view.html

@@ -1,11 +1,28 @@
 <plex-layout [main]="4">
     <plex-layout-main>
         <header>
+
             <plex-title [titulo]="orgName" size="md">
                 <plex-button label="VOLVER" (click)="volver()" type="danger"></plex-button>
             </plex-title>
+
+            <div class="fecha-vencimiento" *ngIf="canEditAccount">
+                <plex-badge size="sm" [type]="isExpired ? 'danger' : 'warning'">
+                    VENCIMIENTO
+                    <span dato>
+                        {{ (fechaVencimiento | date: 'dd/MM/yyyy') || 'Sin fecha' }}
+                    </span>
+                </plex-badge>
+
+                <plex-datetime type="date" [(ngModel)]="fechaVencimiento" (change)="onEditarFechaVencimiento()"
+                               tooltip="Agregar fecha" name="fechaVencimiento" [min]="hoy" [btnOnly]="true" size="sm">
+                </plex-datetime>
+                <plex-button icon="clock" type="danger" size="sm" (click)="onEliminarFechaVencimiento()"
+                             tooltip="Eliminar fecha" tooltipPosition="right"></plex-button>
+            </div>
             <ng-container *ngIf="user$ | async as user">
                 <gestor-usuarios-usuario-detalle [usuario]="user"></gestor-usuarios-usuario-detalle>
+
             </ng-container>
         </header>
         <ng-container *ngIf="arbolPermisos.length && perfiles.length">
@@ -20,6 +37,7 @@
                     </div>
                 </ng-container>
             </div>
+
         </ng-container>
     </plex-layout-main>
     <plex-layout-sidebar>
@@ -42,4 +60,5 @@
                         [organizacion]="organizacionId">
         </arbol-permisos>
     </plex-layout-sidebar>
+
 </plex-layout>

src/app/apps/gestor-usuarios/views/usuarios-edit.view.scss

@@ -0,0 +1,7 @@
+.fecha-vencimiento {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 10px;
+    margin-top: 30px;
+}

src/app/apps/gestor-usuarios/views/usuarios-edit.view.ts

@@ -13,12 +13,14 @@ import { Auth } from '@andes/auth';
 
 @Component({
     selector: 'gestor-usarios-usuarios-edit',
-    templateUrl: 'usuarios-edit.view.html'
+    templateUrl: 'usuarios-edit.view.html',
+    styleUrls: ['usuarios-edit.view.scss']
 })
 export class UsuariosEditComponent implements OnInit, OnDestroy {
     destroy$: Subject<boolean> = new Subject<boolean>();
 
     @ViewChild(ArbolPermisosComponent, { static: true }) arbol: ArbolPermisosComponent;
+
     private userId = '';
     private _permisos = new BehaviorSubject([]);
 
@@ -29,6 +31,17 @@ export class UsuariosEditComponent implements OnInit, OnDestroy {
     public perfiles = [];
     public arbolPermisos = [];
     public habilitados = {};
+    public fechaVencimiento: Date;
+    public canEditAccount = this.auth.check('usuarios:cuenta');
+    public hoy = new Date();
+    public get isExpired() {
+        if (!this.fechaVencimiento) {
+            return false;
+        }
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return new Date(this.fechaVencimiento) < today;
+    }
 
     get permisos() {
         return this._permisos.getValue();
@@ -100,6 +113,7 @@ export class UsuariosEditComponent implements OnInit, OnDestroy {
                         if (orgPermisos) {
                             this.orgName = orgPermisos.nombre;
                             this.permisos = orgPermisos.permisos;
+                            this.fechaVencimiento = orgPermisos.fechaVencimiento;
                         }
                     })
                 ),
@@ -122,7 +136,9 @@ export class UsuariosEditComponent implements OnInit, OnDestroy {
                     _id: p.id,
                     nombre: p.nombre
                 };
-            })
+            }),
+            fechaVencimiento: this.fechaVencimiento,
+            activo: !this.isExpired
         };
 
         if (
@@ -182,6 +198,20 @@ export class UsuariosEditComponent implements OnInit, OnDestroy {
         }
     }
 
+    onEliminarFechaVencimiento() {
+        this.fechaVencimiento = null;
+        this.onEditarFechaVencimiento();
+    }
+    onEditarFechaVencimiento() {
+        this.usuariosHttp.updateOrganizacion(this.userId, this.organizacionId, {
+            id: this.organizacionId,
+            fechaVencimiento: this.fechaVencimiento,
+            activo: !this.isExpired
+        }).subscribe(() => {
+            this.plex.toast('success', 'Usuario modificado exitosamente');
+        });
+    }
+
     copy() {
         this.permisosService.copy(this.permisos);
     }