Merge pull request #96 from Quantum-P3/feature/US-60
Add modificar encuestas
This commit is contained in:
		
						commit
						fc06774ae6
					
				| 
						 | 
				
			
			@ -136,6 +136,31 @@ public class EncuestaResource {
 | 
			
		|||
            .body(result);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @PutMapping("/encuestas/update/{id}")
 | 
			
		||||
    public ResponseEntity<Encuesta> updateEncuestaReal(
 | 
			
		||||
        @PathVariable(value = "id", required = false) final Long id,
 | 
			
		||||
        @Valid @RequestBody Encuesta encuesta
 | 
			
		||||
    ) throws URISyntaxException {
 | 
			
		||||
        log.debug("REST request to update Encuesta : {}, {}", id, encuesta);
 | 
			
		||||
        if (encuesta.getId() == null) {
 | 
			
		||||
            throw new BadRequestAlertException("Invalid id", ENTITY_NAME, "idnull");
 | 
			
		||||
        }
 | 
			
		||||
        if (!Objects.equals(id, encuesta.getId())) {
 | 
			
		||||
            throw new BadRequestAlertException("Invalid ID", ENTITY_NAME, "idinvalid");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (!encuestaRepository.existsById(id)) {
 | 
			
		||||
            throw new BadRequestAlertException("Entity not found", ENTITY_NAME, "idnotfound");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        Encuesta result = encuestaService.save(encuesta);
 | 
			
		||||
 | 
			
		||||
        return ResponseEntity
 | 
			
		||||
            .ok()
 | 
			
		||||
            .headers(HeaderUtil.createEntityUpdateAlert(applicationName, true, ENTITY_NAME, encuesta.getId().toString()))
 | 
			
		||||
            .body(result);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @PutMapping("/encuestas/publish/{id}")
 | 
			
		||||
    public ResponseEntity<Encuesta> publishEncuesta(
 | 
			
		||||
        @PathVariable(value = "id", required = false) final Long id,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -38,8 +38,8 @@
 | 
			
		|||
                </div>
 | 
			
		||||
                <div class="d-flex justify-content-center">
 | 
			
		||||
                  <button class="ds-btn ds-btn--primary" routerLink="/login" jhiTranslate="global.messages.info.authenticated.botonInicio">
 | 
			
		||||
                    sign in</button
 | 
			
		||||
                  >.
 | 
			
		||||
                    sign in
 | 
			
		||||
                  </button>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -97,7 +97,9 @@
 | 
			
		|||
        </div>
 | 
			
		||||
        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-edit--separator">
 | 
			
		||||
          <li class="d-justify justify-content-start" id="contextmenu-edit">
 | 
			
		||||
            <button type="button" (click)="openSurvey(null)"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Editar</button>
 | 
			
		||||
            <button type="button" data-toggle="modal" data-target="#editarEncuesta">
 | 
			
		||||
              <fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Editar
 | 
			
		||||
            </button>
 | 
			
		||||
          </li>
 | 
			
		||||
          <li id="contextmenu-preview">
 | 
			
		||||
            <button type="button" (click)="openPreview()">
 | 
			
		||||
| 
						 | 
				
			
			@ -401,3 +403,150 @@
 | 
			
		|||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<!-- Modal -->
 | 
			
		||||
<div
 | 
			
		||||
  class="modal fade ds-modal"
 | 
			
		||||
  id="editarEncuesta"
 | 
			
		||||
  tabindex="-1"
 | 
			
		||||
  role="dialog"
 | 
			
		||||
  aria-labelledby="exampleModalCenterTitle"
 | 
			
		||||
  aria-hidden="true"
 | 
			
		||||
>
 | 
			
		||||
  <div class="modal-dialog modal-dialog-centered" role="document">
 | 
			
		||||
    <div class="modal-content">
 | 
			
		||||
      <form
 | 
			
		||||
        autocomplete="off"
 | 
			
		||||
        class="ds-form"
 | 
			
		||||
        name="surveyEditForm"
 | 
			
		||||
        role="form"
 | 
			
		||||
        novalidate
 | 
			
		||||
        (ngSubmit)="editSurvey()"
 | 
			
		||||
        [formGroup]="surveyEditForm"
 | 
			
		||||
      >
 | 
			
		||||
        <div class="modal-header">
 | 
			
		||||
          <h1 class="modal-title" id="exampleModalLongTitle">Modificar Encuesta</h1>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="modal-body">
 | 
			
		||||
          <!-- Survey Modify Modal -->
 | 
			
		||||
          <div>
 | 
			
		||||
            <div class="form-group">
 | 
			
		||||
              <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.nombre" for="field_nombre">Nombre</label>
 | 
			
		||||
              <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
 | 
			
		||||
              <div
 | 
			
		||||
                *ngIf="
 | 
			
		||||
                  surveyEditForm.get('nombre')!.invalid && (surveyEditForm.get('nombre')!.dirty || surveyEditForm.get('nombre')!.touched)
 | 
			
		||||
                "
 | 
			
		||||
              >
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="surveyEditForm.get('nombre')?.errors?.required"
 | 
			
		||||
                  jhiTranslate="entity.validation.required"
 | 
			
		||||
                >
 | 
			
		||||
                  This field is required.
 | 
			
		||||
                </small>
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="surveyEditForm.get('nombre')?.errors?.minlength"
 | 
			
		||||
                  jhiTranslate="entity.validation.minlength"
 | 
			
		||||
                  [translateValues]="{ min: 1 }"
 | 
			
		||||
                >
 | 
			
		||||
                  This field is required to be at least 1 characters.
 | 
			
		||||
                </small>
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="surveyEditForm.get('nombre')?.errors?.maxlength"
 | 
			
		||||
                  jhiTranslate="entity.validation.maxlength"
 | 
			
		||||
                  [translateValues]="{ max: 50 }"
 | 
			
		||||
                >
 | 
			
		||||
                  This field cannot be longer than 50 characters.
 | 
			
		||||
                </small>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <div class="form-group">
 | 
			
		||||
              <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.descripcion" for="field_descripcion"
 | 
			
		||||
                >Descripcion</label
 | 
			
		||||
              >
 | 
			
		||||
              <input
 | 
			
		||||
                type="text"
 | 
			
		||||
                class="form-control"
 | 
			
		||||
                name="descripcion"
 | 
			
		||||
                id="field_descripcion"
 | 
			
		||||
                data-cy="descripcion"
 | 
			
		||||
                formControlName="descripcion"
 | 
			
		||||
              />
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <div class="form-group">
 | 
			
		||||
              <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.acceso" for="field_acceso">Acceso</label>
 | 
			
		||||
              <select class="form-control" name="acceso" formControlName="acceso" id="field_acceso" data-cy="acceso">
 | 
			
		||||
                <option [ngValue]="null">{{ 'dataSurveyApp.AccesoEncuesta.null' | translate }}</option>
 | 
			
		||||
                <option value="PUBLIC">{{ 'dataSurveyApp.AccesoEncuesta.PUBLIC' | translate }}</option>
 | 
			
		||||
                <option value="PRIVATE">{{ 'dataSurveyApp.AccesoEncuesta.PRIVATE' | translate }}</option>
 | 
			
		||||
              </select>
 | 
			
		||||
              <div
 | 
			
		||||
                *ngIf="
 | 
			
		||||
                  surveyEditForm.get('acceso')!.invalid && (surveyEditForm.get('acceso')!.dirty || surveyEditForm.get('acceso')!.touched)
 | 
			
		||||
                "
 | 
			
		||||
              >
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="surveyEditForm.get('acceso')?.errors?.required"
 | 
			
		||||
                  jhiTranslate="entity.validation.required"
 | 
			
		||||
                >
 | 
			
		||||
                  This field is required.
 | 
			
		||||
                </small>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <div class="form-group">
 | 
			
		||||
              <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.categoria" for="field_categoria">Categoría</label>
 | 
			
		||||
              <select class="form-control" id="field_categoria" data-cy="categoria" name="categoria" formControlName="categoria">
 | 
			
		||||
                <option [ngValue]="null" selected></option>
 | 
			
		||||
                <option
 | 
			
		||||
                  [ngValue]="
 | 
			
		||||
                    categoriaOption.id === surveyEditForm.get('categoria')!.value?.id
 | 
			
		||||
                      ? surveyEditForm.get('categoria')!.value
 | 
			
		||||
                      : categoriaOption
 | 
			
		||||
                  "
 | 
			
		||||
                  *ngFor="let categoriaOption of categoriasSharedCollection; trackBy: trackCategoriaById"
 | 
			
		||||
                >
 | 
			
		||||
                  {{ categoriaOption.nombre }}
 | 
			
		||||
                </option>
 | 
			
		||||
              </select>
 | 
			
		||||
              <div
 | 
			
		||||
                *ngIf="
 | 
			
		||||
                  surveyEditForm.get('categoria')!.invalid &&
 | 
			
		||||
                  (surveyEditForm.get('categoria')!.dirty || surveyEditForm.get('categoria')!.touched)
 | 
			
		||||
                "
 | 
			
		||||
              >
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="surveyEditForm.get('categoria')?.errors?.required"
 | 
			
		||||
                  jhiTranslate="entity.validation.required"
 | 
			
		||||
                >
 | 
			
		||||
                  This field is required.
 | 
			
		||||
                </small>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="modal-footer">
 | 
			
		||||
          <button id="cancelEditSurveyBtn" type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal">
 | 
			
		||||
            <fa-icon icon="arrow-left"></fa-icon>  <span jhiTranslate="entity.action.cancel">Cancel</span>
 | 
			
		||||
          </button>
 | 
			
		||||
          <button
 | 
			
		||||
            type="submit"
 | 
			
		||||
            id="save-entity"
 | 
			
		||||
            data-cy="entityCreateSaveButton"
 | 
			
		||||
            class="ds-btn ds-btn--primary"
 | 
			
		||||
            [disabled]="surveyEditForm.invalid || isSaving"
 | 
			
		||||
          >
 | 
			
		||||
            <span jhiTranslate="entity.action.edit">Edit</span>
 | 
			
		||||
          </button>
 | 
			
		||||
        </div>
 | 
			
		||||
      </form>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -99,6 +99,14 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
 | 
			
		|||
    // usuarioExtra: [],
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  surveyEditForm = this.fb.group({
 | 
			
		||||
    id: [],
 | 
			
		||||
    nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
 | 
			
		||||
    descripcion: [],
 | 
			
		||||
    acceso: [null, [Validators.required]],
 | 
			
		||||
    categoria: [null, [Validators.required]],
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  createAnother: Boolean = false;
 | 
			
		||||
  selectedSurveyId: number | null = null;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -469,18 +477,22 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
 | 
			
		|||
 | 
			
		||||
        let res = await this.encuestaService.find(this.selectedSurveyId).toPromise();
 | 
			
		||||
        this.selectedSurvey = res.body;
 | 
			
		||||
        // Fill in the edit survey
 | 
			
		||||
        this.fillSurveyEditForm();
 | 
			
		||||
        this.isPublished = this.selectedSurvey!.estado === 'ACTIVE' || this.selectedSurvey!.estado === 'FINISHED'; // QUE SE LE MUESTRE CUANDO ESTE EN DRAFT
 | 
			
		||||
 | 
			
		||||
        document.getElementById('contextmenu-create--separator')!.style.display = 'none';
 | 
			
		||||
        document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
 | 
			
		||||
        document.getElementById('contextmenu-delete--separator')!.style.display = 'block';
 | 
			
		||||
        document.getElementById('contextmenu-edit')!.style.display = 'block';
 | 
			
		||||
        document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
 | 
			
		||||
        document.getElementById('contextmenu-preview')!.style.display = 'block';
 | 
			
		||||
 | 
			
		||||
        if (!this.isPublished) {
 | 
			
		||||
          document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
 | 
			
		||||
          document.getElementById('contextmenu-edit')!.style.display = 'block';
 | 
			
		||||
          document.getElementById('contextmenu-publish')!.style.display = 'block';
 | 
			
		||||
          document.getElementById('contextmenu-duplicate')!.style.display = 'block';
 | 
			
		||||
        } else {
 | 
			
		||||
          document.getElementById('contextmenu-edit')!.style.display = 'none';
 | 
			
		||||
          document.getElementById('contextmenu-publish')!.style.display = 'none';
 | 
			
		||||
          document.getElementById('contextmenu-duplicate')!.style.display = 'none';
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			@ -512,4 +524,29 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
 | 
			
		|||
    const res = await this.encuestaService.duplicate(this.selectedSurveyId!).toPromise();
 | 
			
		||||
    this.loadAll();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  editSurvey(): void {
 | 
			
		||||
    const survey = { ...this.selectedSurvey };
 | 
			
		||||
    survey.nombre = this.surveyEditForm.get(['nombre'])!.value;
 | 
			
		||||
    survey.descripcion = this.surveyEditForm.get(['descripcion'])!.value;
 | 
			
		||||
    survey.acceso = this.surveyEditForm.get(['acceso'])!.value;
 | 
			
		||||
    survey.categoria = this.surveyEditForm.get(['categoria'])!.value;
 | 
			
		||||
    // Prevent user update by setting to null
 | 
			
		||||
    survey.usuarioExtra!.user = null;
 | 
			
		||||
    console.log(survey);
 | 
			
		||||
 | 
			
		||||
    this.encuestaService.updateSurvey(survey).subscribe(res => {
 | 
			
		||||
      this.loadAll();
 | 
			
		||||
      $('#cancelEditSurveyBtn').click();
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  fillSurveyEditForm(): void {
 | 
			
		||||
    this.surveyEditForm.patchValue({
 | 
			
		||||
      nombre: this.selectedSurvey!.nombre,
 | 
			
		||||
      descripcion: this.selectedSurvey!.descripcion,
 | 
			
		||||
      acceso: this.selectedSurvey!.acceso,
 | 
			
		||||
      categoria: this.selectedSurvey!.categoria,
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -33,6 +33,13 @@ export class EncuestaService {
 | 
			
		|||
      .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  updateSurvey(encuesta: IEncuesta): Observable<EntityResponseType> {
 | 
			
		||||
    const copy = this.convertDateFromClient(encuesta);
 | 
			
		||||
    return this.http
 | 
			
		||||
      .put<IEncuesta>(`${this.resourceUrl}/update/${getEncuestaIdentifier(encuesta) as number}`, copy, { observe: 'response' })
 | 
			
		||||
      .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  partialUpdate(encuesta: IEncuesta): Observable<EntityResponseType> {
 | 
			
		||||
    const copy = this.convertDateFromClient(encuesta);
 | 
			
		||||
    return this.http
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,7 +1,9 @@
 | 
			
		|||
<div>
 | 
			
		||||
  <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
 | 
			
		||||
    <div class="d-flex align-items-center">
 | 
			
		||||
      <p class="ds-title">{{ encuesta!.nombre }}</p>
 | 
			
		||||
      <p class="ds-title ds-title--interactive" contenteditable="true" spellcheck="false" (blur)="updateSurveyName($event)">
 | 
			
		||||
        {{ encuesta!.nombre }}
 | 
			
		||||
      </p>
 | 
			
		||||
        <fa-icon
 | 
			
		||||
        class="ds-info--icon"
 | 
			
		||||
        [icon]="faQuestion"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -176,7 +176,7 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  ngAfterViewChecked(): void {
 | 
			
		||||
    this.initListeners();
 | 
			
		||||
    // this.initListeners();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  trackId(index: number, item: IEPreguntaCerrada): number {
 | 
			
		||||
| 
						 | 
				
			
			@ -194,18 +194,18 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
    });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  initListeners(): void {
 | 
			
		||||
    const checkboxes = document.getElementsByClassName('ds-survey--checkbox');
 | 
			
		||||
    for (let i = 0; i < checkboxes.length; i++) {
 | 
			
		||||
      checkboxes[i].addEventListener('click', e => {
 | 
			
		||||
        if ((e.target as HTMLInputElement).checked) {
 | 
			
		||||
          (e.target as HTMLElement).offsetParent!.classList.add('ds-survey--closed-option--active');
 | 
			
		||||
        } else {
 | 
			
		||||
          (e.target as HTMLElement).offsetParent!.classList.remove('ds-survey--closed-option--active');
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  // initListeners(): void {
 | 
			
		||||
  //   const checkboxes = document.getElementsByClassName('ds-survey--checkbox');
 | 
			
		||||
  //   for (let i = 0; i < checkboxes.length; i++) {
 | 
			
		||||
  //     checkboxes[i].addEventListener('click', e => {
 | 
			
		||||
  //       if ((e.target as HTMLInputElement).checked) {
 | 
			
		||||
  //         (e.target as HTMLElement).offsetParent!.classList.add('ds-survey--closed-option--active');
 | 
			
		||||
  //       } else {
 | 
			
		||||
  //         (e.target as HTMLElement).offsetParent!.classList.remove('ds-survey--closed-option--active');
 | 
			
		||||
  //       }
 | 
			
		||||
  //     });
 | 
			
		||||
  //   }
 | 
			
		||||
  // }
 | 
			
		||||
 | 
			
		||||
  previousState(): void {
 | 
			
		||||
    window.history.back();
 | 
			
		||||
| 
						 | 
				
			
			@ -432,6 +432,18 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
    this.isSavingQuestion = false;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  updateSurveyName(event: any) {
 | 
			
		||||
    const updatedSurveyName = event.target.innerText;
 | 
			
		||||
    if (updatedSurveyName !== this.encuesta?.nombre) {
 | 
			
		||||
      const survey = { ...this.encuesta };
 | 
			
		||||
      survey.nombre = updatedSurveyName;
 | 
			
		||||
      // Prevent user update by setting to null
 | 
			
		||||
      survey.usuarioExtra!.user = null;
 | 
			
		||||
 | 
			
		||||
      this.encuestaService.updateSurvey(survey).subscribe(res => {});
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // previousState(): void {
 | 
			
		||||
  //   window.history.back();
 | 
			
		||||
  // }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -9,6 +9,21 @@
 | 
			
		|||
  letter-spacing: 0.025rem;
 | 
			
		||||
  text-transform: uppercase;
 | 
			
		||||
  font-size: 1.2rem;
 | 
			
		||||
 | 
			
		||||
  &--interactive {
 | 
			
		||||
    border: 2.25px solid transparent;
 | 
			
		||||
    border-radius: 3px;
 | 
			
		||||
    outline: 0;
 | 
			
		||||
    text-transform: none;
 | 
			
		||||
 | 
			
		||||
    &:hover {
 | 
			
		||||
      border: 2.25px solid #e5e5e5;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &:focus {
 | 
			
		||||
      border: 2.25px solid #2962ff;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ds-title--small {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue