0

Tengo la siguiente tabla donde los campos descripcion, inhabilM e inhabilC son editables, y el update que realizo es a traves del campo fechaInhabil

<div class="container">
    <div class="page">
  
        <div class="scrollme">
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                <ng-container matColumnDef="fechaInhabil">
                    <th mat-header-cell *matHeaderCellDef> FECHA INHÁBIL </th>
                    <td mat-cell *matCellDef="let element"> {{element.fechaInhabil | date: 'yyyy-MM-dd'}} </td>
                </ng-container>


                <ng-container matColumnDef="descDiaInhabil">
                    <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-form-field>
                            <textarea matInput [value]="element.descDiaInhabil" [disabled]="!element.editable"
                                (keyup)="obtenerDescrip($event.target,element)"></textarea>
                        </mat-form-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="inhabilM">
                    <th mat-header-cell *matHeaderCellDef> INHAB M </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-form-field>
                            <mat-select [value]="element.inhabilM" [disabled]="!element.editable"
                                (selectionChange)="selectInhabilM($event.value,element)"
                                [disableOptionCentering]="true">
                                <mat-option *ngFor="let inhabilMex of inhabMexder" [value]="inhabilMex.valor">
                                    {{inhabilMex.label}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="inhabilC">
                    <th mat-header-cell *matHeaderCellDef> INHAB C </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-form-field>
                            <mat-select (value)="element.inhabilC" [disabled]="!element.editable"
                                (selectionChange)="selectInhabilC($event.value,element)"
                                [disableOptionCentering]="true">
                                <mat-option *ngFor="let inhabilChic of inhabChic" [value]="inhabilChic.valor">
                                    {{inhabilChic.label}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </td>
                </ng-container>

                <ng-container matColumnDef="botonEdit">
                    <th mat-header-cell *matHeaderCellDef> EDITAR </th>
                    <td mat-cell *matCellDef="let element">
                        <button mat-icon-button color="primary" (click)="actualizar(element,inhabilModel)">
                            <mat-icon>edit</mat-icon>
                        </button>
                    </td>
                </ng-container>

                <ng-container matColumnDef="botonDelete">
                    <th mat-header-cell *matHeaderCellDef> ELIMINAR </th>
                    <td mat-cell *matCellDef="let element">
                        <button mat-icon-button color="warn">
                            <mat-icon>delete</mat-icon>
                        </button>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
        </div>
        <mat-paginator #paginator [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10]" showFirstLastButtons>
        </mat-paginator>
    </div>
</div>

en el metodo actualizar() recupero los datos de los campos editables, y utilizo la funcion formatDateToString() para darle este formato a la fecha (dd/MM/yyyy) y asi mandar los parametros al service de Angular

actualizar(element: any, inhabilModel: DiaInhabil) {
    if (element.editable) {
      element.editable = false;
    
        inhabilModel.fechaInhabil = this.formatDateToString(this.idSelecc);
        inhabilModel.descripcion =  this.descripcionIngresada;
        inhabilModel.inhabilM = this.inhabilMSelecc;
        inhabilModel.inhabilC = this.inhabilCSelecc;
        this.diaInhaervice.actualizarDia(inhabilModel).subscribe(data => {
          inhabilModel = data;
         
         this.idSelecc = null
          this.descripcionIngresada = null;
          this.inhabilMexderSelecc = null;
          this.inhabilChicagoSelecc = null;
          Swal.fire({
            icon: 'success',
            title: 'Éxito',
            text: 'Registro actualizado correctamente'
          });
        });
      

    } else {
      element.editable = true;
    }

  }
  
  
  //funcion para darle formato a la fecha
  formatDateToString(date: Date): string {
    if (date) {
      const format = 'dd/MM/yyyy';
      const locale = 'en-US';
      return formatDate(date, format, locale);
    }
    return '';
  }

Mi Service de Angular para realizar una peticion PUT, pero al ejecutarse manda el siguiente error en el navegador

export class DiaInhabService {

  constructor(private httpCli: HttpClient) { }


    private baseUrl = "http://localhost:8086/api/domain/public/v1.0.0/pymt/example/actualizarDia";
  
 

   

  actualizarDia(diaInhab: DiaInhabil){
    return this.httpCli.put<DiaInhabil>(this.baseUrl+"/"+diaInhab.fechaInhabil,diaInhab);
  }

ERROR

core.js:4442 ERROR 
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url:

'http://localhost:8086/api/domain/public/v1.0.0/example/actualizarDia/20/07/2023', ok: false, …} error : ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …} headers : HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)} message : "Http failure response for http://localhost:8086/api/domain/public/v1.0.0/example/actualizarDia/20/07/2023: 0 Unknown Error" name : "HttpErrorResponse"

yo pienso que quiza sea por el formato de fecha al final del endpoint, que quiza lo este tomando como si fueran 3 parametros, pero en realizad solo es un parametro de fecha el cual el formato es (20/07/2023) y no entra ni a mi servicio en SpringBoot

este es mi codigo de back

 @PutMapping("/actualizarDia/{fechaInhabil}")
    public void actualizarDiaInhab(@RequestBody DiaInhabilEntity entidad,
            @PathVariable("fechaInhabil") String fechaInhabil) throws Exception {
        try {
            diaInhabilService.actualizarDia(entidad, fechaInhabil);
        } catch (Exception e) {
            LOGGER.error("Error in  Values ");
            throw e;
        }

    }
    
    @Transactional
    @Override
    public void actualizarDia(DiaInhabilEntity entidad, String fechaInhabil) throws Exception {
        try {
            diaInhabilRepository.actualizarCatDia(entidad.getDescripcion(), entidad.getInhabilM(),
                    entidad.getInhabilC(), fechaInhabil);

        } catch (Exception e) {
            LOGGER.error("An error ocurred looking for Data");

        }

    }
    
    @Modifying
    @Query(value = "UPDATE DIA_INHABIL I SET I.DESCRIPCION=?1, I.INHABIL_M=?2, I.INHABIL_C=?3 WHERE I.FECHA_INHABIL=?4", nativeQuery = true)
    void actualizarCatDia(String descripcion, String inhabilM, String inhabilC, String fechaInhabil);
    

al realizar una prueba unitaria si realiza el Update, y lo mando como el mismo formato

@Test
    void testUpdate() {
        DiaInhabilEntity exec = new DiaInhabilEntity();
        exec.setDescripcion("PRUEBA DATOS");
        exec.setInhabilM("0");
        exec.setInhabilC("0");
        
        exec.setFechaInhabil("20/07/2023");
        
        
        repository.actualizarCatDia(exec.getDescripcion(), exec.getInhabilM(), exec.getInhabilC(), exec.getFechaInhabil());
    }

pero al momento de hacerlo desde el Front, manda ese error, como puedo hacer para que en el Endpoint no lo tome como si fueran 3 paraetros, sino uno solo?

1 respuesta 1

0

La URL no mapea con ningún método del servidor. En este caso la URL problemática es http://localhost:8086/api/domain/public/v1.0.0/example/actualizarDia/20/07/2023. El caracter / tiene un significado especial en una URL y si necesitas enviar un texto con este caracter debes usar codificación URL (URL Encoding). Por ejemplo, el caracter espacio en blanco se codifica en %20 y el caracter / se codifica en %2F.

Puedes consultar esta página externa sobre URL Encoding.

Afortunadamente, el API de JavaScript tiene un método para codificar estos caracteres especiales de URL. Se trata de encodeURIComponent(). Ejemplo de uso:

const url = "http://google.com?q=" + encodeURIComponent("Érase una vez");
console.log(url); // http://google.com?q=%C3%89rase%20una%20vez

Método actualizarDia() actualizado:

actualizarDia(diaInhab: DiaInhabil){
    return this.httpCli.put<DiaInhabil>(this.baseUrl+"/"
    +encodeURIComponent(diaInhab.fechaInhabil),diaInhab);
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.