[ADD] AVANCE FORMULARIO

angular.json

@@ -27,6 +27,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -85,6 +86,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []

package-lock.json

@@ -9,13 +9,16 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^18.2.0",
+        "@angular/cdk": "^18.2.3",
         "@angular/common": "^18.2.0",
         "@angular/compiler": "^18.2.0",
         "@angular/core": "^18.2.0",
         "@angular/forms": "^18.2.0",
+        "@angular/material": "^18.2.3",
         "@angular/platform-browser": "^18.2.0",
         "@angular/platform-browser-dynamic": "^18.2.0",
         "@angular/router": "^18.2.0",
+        "axios": "^1.7.7",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.10"
@@ -351,6 +354,23 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "18.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.3.tgz",
+      "integrity": "sha512-lUcpYTxPZuntJ1FK7V2ugapCGMIhT6TUDjIGgXfS9AxGSSKgwr8HNs6Ze9pcjYC44UhP40sYAZuiaFwmE60A2A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "18.2.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.1.tgz",
@@ -484,6 +504,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "18.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.3.tgz",
+      "integrity": "sha512-JFfvXaMHMhskncaxxus4sDvie9VYdMkfYgfinkLXpZlPFyn1IzjDw0c1BcrcsuD7UxQVZ/v5tucCgq1FQfGRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^18.0.0 || ^19.0.0",
+        "@angular/cdk": "18.2.3",
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "@angular/forms": "^18.0.0 || ^19.0.0",
+        "@angular/platform-browser": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "18.2.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.2.tgz",
@@ -4943,6 +4981,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -4981,6 +5025,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
@@ -5718,6 +5773,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -6332,6 +6399,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6598,7 +6674,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -7208,7 +7284,6 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -7242,6 +7317,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9549,7 +9638,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -9559,7 +9647,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -10756,7 +10843,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
       "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^4.4.0"
@@ -11155,6 +11242,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",

package.json

@@ -11,13 +11,16 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.3",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.3",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "axios": "^1.7.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import {ConformidadComponent} from "./pages/conformidad/conformidad.componente";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ConformidadComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.config.ts

@@ -2,7 +2,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()]
 };

src/app/pages/conformidad/conformidad.componente.css

+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+.divisionGeneral{
+  margin: 0 20px;
+}
+
+.titulo-Principal{
+  margin: 20px;
+}
+
+.select-tipoTrabajo{
+  width: 20rem;
+}

src/app/pages/conformidad/conformidad.componente.ts

+import { Component, OnInit , ChangeDetectionStrategy , Renderer2 } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule , Validators} from '@angular/forms';
+import {MatIconModule} from '@angular/material/icon';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatButtonModule} from '@angular/material/button';
+import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {ConformidadHelper} from "./helper/conformidad.helper";
+import {NgForOf} from "@angular/common";
+import {MatCardModule} from '@angular/material/card';
+
+interface tiposTrabajo {
+  value: string;
+  viewValue: string;
+}
+
+@Component({
+  imports: [
+    MatDatepickerModule,
+    MatFormFieldModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatSelectModule,
+    MatInputModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    NgForOf,
+    MatCardModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule
+  ],
+  providers: [provideNativeDateAdapter()],
+  selector: 'app-conformidad',
+  standalone: true,
+  templateUrl: './conformidad.componente.html',
+  styleUrls: ['./conformidad.componente.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class ConformidadComponent implements OnInit {
+
+  listTipoTrabajo: tiposTrabajo[] = [
+    {value: '1', viewValue: 'Instalaciòn-Revisión'},
+    {value: '2', viewValue: 'Instalaciòn-Ampliación'},
+    {value: '3', viewValue: 'Mantenimiento-Reparación'},
+    {value: '4', viewValue: 'Mantenimiento-Remodelación'},
+    {value: '5', viewValue: 'Reposición'},
+    {value: '6', viewValue: 'Reinstalación'},
+
+  ];
+
+  // INICIALIZACION DEL RANGO DE FECHAS
+  readonly range = new FormGroup({
+    fechaInicio: new FormControl<Date | null>(null),
+    fechaFin: new FormControl<Date | null>(null),
+  })
+
+  selected = 'option2';
+  // INICIALIZACION DEL RANGO DE FECHAS
+
+
+  // DATALIST
+  personal_list: any = [];
+  sede_list: any = [];
+  // DATALIST
+
+  // GROUPO DE FORMULARIO
+  datos_personal = new FormGroup({
+     tecnicoPersonal : new FormControl(null ,Validators.required),
+     sedePersonal : new FormControl(null,Validators.required),
+     areaPersonal : new FormControl<String | null>(null ,Validators.required),
+     pasajePersonal : new FormControl(null ,Validators.required)
+  });
+
+  datos_servicio = new FormGroup({
+    requerimientoServicio : new FormControl(null ,Validators.required),
+    descripcionServicio : new FormControl(null ,Validators.required),
+    causaServicio : new FormControl(null ,Validators.required),
+    btnEvidenciaProblema : new FormControl(null ,Validators.required),
+    btnEvidenciaSolucion : new FormControl(null ,Validators.required)
+  });
+
+  datos_trabajo = new FormGroup({
+    tipoTrabajo : new FormControl(null ,Validators.required),
+    descripcionTrabajo : new FormControl(null ,Validators.required)
+  });
+
+  datos_material = new FormGroup({
+    materialSobrante : new FormControl(null ,Validators.required)
+  });
+
+  // GROUPO DE FORMULARIO
+
+  constructor(
+    private conformidadHelper: ConformidadHelper,
+    private renderer: Renderer2
+  ) {
+    renderer.setStyle(document.body, 'background', 'var(--light-theme-bg)');
+  }
+
+  //ACCESOS RAPIDOS A GRUPOS DE FORMULARIOS
+
+  accesoDP(){
+    return this.datos_personal.controls;
+  }
+
+  //ACCESOS RAPIDOS A GRUPOS DE FORMULARIOS
+
+  async ngOnInit(): Promise<void> {
+
+    const [
+      personal,
+      sede
+    ] = await Promise.all([
+      this.conformidadHelper.cargarPersonal(),
+      this.conformidadHelper.cargarSede(),
+    ]);
+
+    this.personal_list = personal;
+    this.sede_list = sede;
+
+    console.log(personal, sede);
+  }
+
+  onEventTecnico(event: any) { // IMPRIMER EL ÁREA DEL TÉCNICO AL SELECCIONARLO
+
+    const areaControl = this.accesoDP().areaPersonal;
+    const areaElemento = this.renderer.selectRootElement('[formControlName="areaPersonal"]');
+
+    const codigoPer = event.value;
+    const personal_list = this.personal_list;
+    const personal_datos = personal_list.find((item: any) => item.codper === codigoPer);
+
+    if(Object.keys(personal_datos).length  > 0){
+      areaControl.setValue(personal_datos.descargo);
+    }else{
+      areaControl.setValue('Sin Cargo');
+    }
+
+    areaControl.updateValueAndValidity();
+  }
+
+  onBusquedaRequerimiento(event: any){
+
+  }
+
+}
+

src/app/pages/conformidad/helper/conformidad.helper.ts

+import {ConformidadService} from "../../../service/conformidad_service/conformidad.service";
+import {Injectable} from "@angular/core";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConformidadHelper {
+
+  constructor(public ConformidadService : ConformidadService) {}
+
+  async cargarPersonal(){
+    const respuesta = await this.ConformidadService.listadoGeneral(1);
+    if(respuesta?.status){
+      return respuesta.data;
+    }else{
+      return [];
+    }
+  }
+
+  async cargarSede(){
+    const respuesta = await this.ConformidadService.listadoGeneral(2);
+    if(respuesta?.status){
+      return respuesta.data;
+    }else{
+      return [];
+    }
+  }
+
+  async registrarPostulanteADM(json: any) {
+
+  }
+
+}

src/app/service/conformidad_service/conformidad.service.ts

+import {Injectable} from "@angular/core";
+import axios from "axios";
+import {environment} from "../../../environment/env";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConformidadService {
+
+  t_asistencia_rest_link = environment.t_asistencia_rest_link;
+  t_horizon_rest_link = environment.horizon_services_link;
+
+  constructor() {
+  }
+
+  async listadoGeneral(opcion: number) {
+    try {
+      const respuesta = await axios.post(this.t_asistencia_rest_link + '/api/v1/Conformidad/listadoGeneral',
+        {
+          v_opcion: opcion,
+        });
+      return respuesta.data;
+    } catch (e) {
+      return e;
+    }
+  }
+
+  async registroConformidad(json: any) {
+    try {
+      const respuesta = await axios.post(this.t_asistencia_rest_link + '/api/v1/Conformidad/registroConformidad', json);
+      return respuesta.data;
+    } catch (e) {
+      return e;
+    }
+  }
+
+  async listadoRequerimientos(json: any) {
+    try {
+      const respuesta = await axios.post(this.t_horizon_rest_link + '/api/procedure/Procedimiento', json);
+      return respuesta.data;
+    } catch (e) {
+      return e;
+    }
+  }
+}

src/environment/env.prod.ts

+export const environment = {
+  isProduction: true,
+  trismegisto_services_link: 'https://tp-services.sacooliveros.edu.pe',
+  t_asistencia_rest_link: 'https://tp-rest.sacooliveros.edu.pe',
+  redireccionamiento: 'https://fichaonline.sacooliveros.edu.pe',
+  facturacion_electronica_link: 'http://localhost:8080/FacturacionElectronicaSIIAA',
+};

src/environment/env.ts

+export const environment = {
+  isProduction: false,
+  trismegisto_services_link: 'https://tp-services.sacooliveros.edu.pe',
+  t_asistencia_rest_link: 'http://localhost:8080/tasistencia-rest',
+  redireccionamiento: 'https://fichaonline.sacooliveros.edu.pe',
+  facturacion_electronica_link: 'http://localhost:8080/FacturacionElectronicaSIIAA',
+  horizon_services_link: 'http://localhost:8080/trismegisto-api-horizons',
+
+};
+
+
+//  /api/v1/Conformidad/listadoGeneral

src/index.html

@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }