feat: Merge pull request #4 from udistrital/feature/registro_edicion_…

…usuarios

feat:  Creacion de la interfaz del microcliente de creación y actualización de usuarios udistrital/sisifo_documentacion#54

package.json

@@ -17,7 +17,7 @@
     "@angular/common": "^16.2.0",
     "@angular/compiler": "^16.2.0",
     "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
+    "@angular/forms": "^16.2.12",
     "@angular/material": "^16.2.14",
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
@@ -44,4 +44,4 @@
     "style-loader": "^3.3.1",
     "typescript": "~5.1.3"
   }
-}
+}

src/app/app-routing.module.ts

@@ -1,3 +1,4 @@
+import { GestionUsuariosModule } from './modules/gestion-usuarios/gestion-usuarios.module';
 import { APP_BASE_HREF } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { provideHttpClient, withFetch } from '@angular/common/http';
@@ -8,6 +9,10 @@ export const routes: Routes = [
     path: "gestion-roles",
     loadChildren: () => import ('./modules/gestion-roles/gestion-roles.module').then(m => m.GestionRolesModule),
   },
+  { 
+    path: "gestion-usuarios",
+    loadChildren: () => import ('./modules/gestion-usuarios/gestion-usuarios.module').then(m => m.GestionUsuariosModule),
+  },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -7,10 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     MatIconModule,
     BrowserAnimationsModule,

src/app/modules/gestion-roles/utils/constantes.ts

@@ -6,3 +6,4 @@ export const ROL_ANALISTA = 'ANALISTA';
 export const ROL_SOPORTE = 'SOPORTE';
 
 
+

src/app/modules/gestion-usuarios/actualizar-usuario/actualizar-usuario.component.html

@@ -0,0 +1,75 @@
+<br />
+<br />
+<br />
+<br />
+<div class="container-border">
+  <h2 class="titulo">Actualizar Usuario(a)</h2>
+
+  <div class="inputs">
+    <mat-form-field appearance="fill">
+      <mat-label>Documento de identidad:</mat-label>
+      <input type="text" matInput />
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" class="correo">
+      <mat-label>Correo:</mat-label>
+      <input type="text" matInput />
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+  </div>
+
+  <div class="nombre">
+    <mat-form-field appearance="fill">
+      <mat-label>Nombres y Apellidos:</mat-label>
+      <input type="text" matInput />
+    </mat-form-field>
+  </div>
+
+  <div class="selector">
+    <mat-form-field class="rol">
+      <mat-label>Rol:</mat-label>
+      <mat-select>
+        <mat-option mat-option *ngFor="let rol of roles" [value]="rol">
+          {{ rol }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Estado:</mat-label>
+      <mat-select>
+        <mat-option *ngFor="let estado of estados"[value]="estado">
+            {{estado}}
+        </mat-option>
+        </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div class="fechas">
+    <mat-form-field>
+      <mat-label>Fecha Inicial Rol:</mat-label>
+      <input matInput [matDatepicker]="picker1" />
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="picker1"
+      ></mat-datepicker-toggle>
+      <mat-datepicker #picker1></mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Fecha Final Rol:</mat-label>
+      <input matInput [matDatepicker]="picker2" />
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="picker2"
+      ></mat-datepicker-toggle>
+      <mat-datepicker #picker2></mat-datepicker>
+    </mat-form-field>
+  </div>
+
+  <div class="button-container">
+    <button mat-raised-button class="Bcancelar">Cancelar</button>
+    <button mat-raised-button color="primary">Guardar</button>
+  </div>
+</div>

src/app/modules/gestion-usuarios/actualizar-usuario/actualizar-usuario.component.scss

@@ -0,0 +1,58 @@
+.inputs{
+    display: flex;
+    gap: 5rem;
+    max-width: 80%;
+}
+
+.correo{
+    width: 300px;
+}
+
+.nombre{
+    display: flex;
+    flex-direction: column;
+    width: 78%;
+    max-width: 80%;
+}
+
+.selector{
+    display: flex;
+    gap: 6rem;
+
+}
+
+.rol{
+    width: 310px;
+}
+
+.container-border {
+    margin: 10% 10% 10% 10%;
+    width: 800px;
+    border: 1px solid var(--primary);
+    padding: 2% 5%;
+    border-radius: 50px;
+    max-width: 1200px;
+    margin: 3% auto ;
+}
+
+.fechas{
+    display: flex;
+    gap: 8rem;
+}
+
+.button-container {
+    margin: 1%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end; 
+    gap: 10px;
+}
+
+.titulo{
+    color: var(--primary);
+}
+
+.Bcancelar{
+    background-color: var(--danger-base) !important;
+    color: white !important;
+}

src/app/modules/gestion-usuarios/actualizar-usuario/actualizar-usuario.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActualizarUsuarioComponent } from './actualizar-usuario.component';
+
+describe('ActualizarUsuarioComponent', () => {
+  let component: ActualizarUsuarioComponent;
+  let fixture: ComponentFixture<ActualizarUsuarioComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ActualizarUsuarioComponent]
+    });
+    fixture = TestBed.createComponent(ActualizarUsuarioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/gestion-usuarios/actualizar-usuario/actualizar-usuario.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ROL_ADMINISTRADOR, ROL_ANALISTA, ROL_AUDITOR, ROL_EJECUTOR, ROL_JEFE, ROL_SOPORTE } from '../../gestion-roles/utils';
+
+
+@Component({
+  selector: 'app-actualizar-usuario',
+  templateUrl: './actualizar-usuario.component.html',
+  styleUrls: ['./actualizar-usuario.component.scss']
+})
+export class ActualizarUsuarioComponent {
+
+  roles =[
+    ROL_ADMINISTRADOR,
+    ROL_AUDITOR,
+    ROL_EJECUTOR,
+    ROL_JEFE,
+    ROL_ANALISTA,
+    ROL_SOPORTE
+  ]
+
+  estados =[
+    "ACTIVO",
+    "INACTIVO"
+  ]
+
+}

src/app/modules/gestion-usuarios/gestion-usuarios-routing.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RegistrarUsuarioComponent } from './registrar-usuario/registrar-usuario.component';
+import { ActualizarUsuarioComponent } from './actualizar-usuario/actualizar-usuario.component';
+
+const routes: Routes = [
+    { path:"",
+      children: [
+        {
+          path: 'registrar-usuario',
+          component: RegistrarUsuarioComponent
+        },
+        {
+        path: 'actualizar-usuario',
+        component: ActualizarUsuarioComponent
+        },
+      ],
+    }
+
+  ];
+
+  @NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+  })
+  export class GestionUsuariosRoutingModule { }
+

src/app/modules/gestion-usuarios/gestion-usuarios.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HttpClientModule,  provideHttpClient } from '@angular/common/http';
+import { RegistrarUsuarioComponent } from './registrar-usuario/registrar-usuario.component';
+import { GestionUsuariosRoutingModule } from './gestion-usuarios-routing.module';
+
+//Material
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDatepickerModule} from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { NgFor } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ActualizarUsuarioComponent } from './actualizar-usuario/actualizar-usuario.component';
+
+@NgModule({
+  declarations: [
+    RegistrarUsuarioComponent,
+    ActualizarUsuarioComponent
+    ],
+  imports: [
+    CommonModule,
+    GestionUsuariosRoutingModule,
+    HttpClientModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    NgFor,
+    MatCardModule,
+    MatFormFieldModule
+  ]
+})
+export class GestionUsuariosModule { }

src/app/modules/gestion-usuarios/registrar-usuario/registrar-usuario.component.html

@@ -0,0 +1,62 @@
+<br />
+<br />
+<br />
+<br />
+
+<div class="container-border">
+  <h2 class="titulo">Crear Usuario(a)</h2>
+
+  <div class="inputs">
+    <mat-form-field appearance="fill">
+      <mat-label>Documento de identidad:</mat-label>
+      <input type="text" matInput />
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" class="correo">
+      <mat-label>Correo:</mat-label>
+      <input type="text" matInput />
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+  </div>
+
+  <div class="nombre">
+    <mat-form-field appearance="fill">
+      <mat-label>Nombres y Apellidos:</mat-label>
+      <input type="text" matInput />
+    </mat-form-field>
+  </div>
+
+  <div class="Rol">
+    <mat-form-field class="rol-width">
+      <mat-label >Rol:</mat-label>
+        <mat-select  >
+            <mat-option  mat-option *ngFor="let rol of roles" [value]="rol">
+                {{ rol }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div class="fechas">
+    <mat-form-field >
+        <mat-label>Fecha Inicial Rol:</mat-label>
+        <input matInput [matDatepicker]="picker1">
+        <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field >
+        <mat-label>Fecha Final Rol:</mat-label>
+        <input matInput [matDatepicker]="picker2">
+        <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
+        <mat-datepicker #picker2></mat-datepicker>
+    </mat-form-field>
+
+  </div>
+
+  <div class="button-container">
+    <button mat-raised-button class="Bcancelar" >Cancelar</button>
+    <button mat-raised-button color="primary" (click)="printFormData()">Guardar</button>
+  </div>
+</div>