Add edit survey from survey list

src/main/webapp/app/entities/encuesta/list/encuesta.component.html

@@ -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>&nbsp;&nbsp;<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>

src/main/webapp/app/entities/encuesta/list/encuesta.component.ts

@@ -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;
 
@@ -465,18 +473,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';
         }
@@ -508,4 +520,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,
+    });
+  }
 }

src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html

@@ -1,7 +1,9 @@
 <div>
   <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
     <div class="d-flex align-items-center">
-      <p class="ds-title ds-title--interactive" contenteditable="true" (blur)="updateSurveyName($event)">{{ encuesta!.nombre }}</p>
+      <p class="ds-title ds-title--interactive" contenteditable="true" spellcheck="false" (blur)="updateSurveyName($event)">
+        {{ encuesta!.nombre }}
+      </p>
       &nbsp;&nbsp;<fa-icon
         class="ds-info--icon"
         [icon]="faQuestion"

src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts

@@ -421,13 +421,10 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     if (updatedSurveyName !== this.encuesta?.nombre) {
       const survey = { ...this.encuesta };
       survey.nombre = updatedSurveyName;
+      // Prevent user update by setting to null
       survey.usuarioExtra!.user = null;
-      console.log(survey);
 
-      this.encuestaService.updateSurvey(survey).subscribe(res => {
+      this.encuestaService.updateSurvey(survey).subscribe(res => {});
-        console.log('UPDATED');
-        console.log(res);
-      });
     }
   }
 

src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss

@@ -14,6 +14,7 @@
     border: 2.25px solid transparent;
     border-radius: 3px;
     outline: 0;
+    text-transform: none;
 
     &:hover {
       border: 2.25px solid #e5e5e5;