Add register survey template

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

@@ -3,19 +3,20 @@
     <span jhiTranslate="dataSurveyApp.plantilla.home.title">Plantillas</span>
 
     <div class="d-flex justify-content-end">
-      <button class="ds-btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading">
+      <button class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
         <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
         <span jhiTranslate="dataSurveyApp.plantilla.home.refreshListLabel">Refresh List</span>
       </button>
 
       <button
-        id="jh-create-entity"
+        *ngIf="isAdmin() && isAuthenticated()"
-        data-cy="entityCreateButton"
+        type="button"
-        class="ds-btn ds-btn--primary jh-create-entity create-plantilla"
+        class="ds-btn ds-btn--primary"
-        [routerLink]="['/plantilla/new']"
+        (click)="resetCreateTemplateForm()"
+        data-toggle="modal"
+        data-target="#crearPlantilla"
       >
-        <fa-icon icon="plus"></fa-icon>
+        Crear plantilla
-        <span jhiTranslate="dataSurveyApp.plantilla.home.createLabel"> Create a new Template </span>
       </button>
     </div>
   </h2>
@@ -46,15 +47,11 @@
         <tr *ngFor="let plantilla of plantillas; trackBy: trackId" data-cy="entityTable">
           <td>{{ plantilla.nombre }}</td>
           <td>{{ plantilla.descripcion }}</td>
-          <td>{{ plantilla.fechaCreacion | formatMediumDatetime }}</td>
+          <!-- <td>{{ plantilla.fechaCreacion | formatMediumDatetime }}</td> -->
-          <td>{{ plantilla.fechaPublicacionTienda | formatMediumDatetime }}</td>
+          <td>{{ plantilla.fechaPublicacionTienda | formatShortDatetime | titlecase }}</td>
           <td jhiTranslate="{{ 'dataSurveyApp.EstadoPlantilla.' + plantilla.estado }}">{{ plantilla.estado }}</td>
           <td>{{ plantilla.precio }}</td>
-          <td>
+          <td>{{ plantilla.categoria?.nombre }}</td>
-            <div *ngIf="plantilla.categoria">
-              <a [routerLink]="['/categoria', plantilla.categoria?.id, 'view']">{{ plantilla.categoria?.nombre }}</a>
-            </div>
-          </td>
           <td class="text-right">
             <div class="btn-group">
               <button
@@ -88,3 +85,157 @@
     </table>
   </div>
 </div>
+
+<!-- Modal -->
+<div
+  class="modal fade ds-modal"
+  id="crearPlantilla"
+  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="templateCreateForm"
+        role="form"
+        novalidate
+        (ngSubmit)="save()"
+        [formGroup]="templateCreateForm"
+      >
+        <div class="modal-header">
+          <h1 class="modal-title" id="exampleModalLongTitle">Crear Plantilla</h1>
+        </div>
+        <div class="modal-body">
+          <!-- Template Registration 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="
+                  templateCreateForm.get('nombre')!.invalid &&
+                  (templateCreateForm.get('nombre')!.dirty || templateCreateForm.get('nombre')!.touched)
+                "
+              >
+                <small
+                  class="form-text text-danger"
+                  *ngIf="templateCreateForm.get('nombre')?.errors?.required"
+                  jhiTranslate="entity.validation.required"
+                >
+                  This field is required.
+                </small>
+                <small
+                  class="form-text text-danger"
+                  *ngIf="templateCreateForm.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="templateCreateForm.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.plantilla.precio" for="field_precio">Precio</label>
+              <input type="number" class="form-control" name="precio" id="field_precio" data-cy="precio" formControlName="precio" />
+              <div
+                *ngIf="
+                  templateCreateForm.get('precio')!.invalid &&
+                  (templateCreateForm.get('precio')!.dirty || templateCreateForm.get('precio')!.touched)
+                "
+              >
+                <small
+                  class="form-text text-danger"
+                  *ngIf="templateCreateForm.get('precio')?.errors?.required"
+                  jhiTranslate="entity.validation.required"
+                >
+                  This field is required.
+                </small>
+                <small
+                  class="form-text text-danger"
+                  [hidden]="!templateCreateForm.get('precio')?.errors?.number"
+                  jhiTranslate="entity.validation.number"
+                >
+                  This field should be a number.
+                </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 === templateCreateForm.get('categoria')!.value?.id
+                      ? templateCreateForm.get('categoria')!.value
+                      : categoriaOption
+                  "
+                  *ngFor="let categoriaOption of categoriasSharedCollection; trackBy: trackCategoriaById"
+                >
+                  {{ categoriaOption.nombre }}
+                </option>
+              </select>
+              <div
+                *ngIf="
+                  templateCreateForm.get('categoria')!.invalid &&
+                  (templateCreateForm.get('categoria')!.dirty || templateCreateForm.get('categoria')!.touched)
+                "
+              >
+                <small
+                  class="form-text text-danger"
+                  *ngIf="templateCreateForm.get('categoria')?.errors?.required"
+                  jhiTranslate="entity.validation.required"
+                >
+                  This field is required.
+                </small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <input id="createAnother" type="checkbox" (change)="createAnotherTemplateChange($event)" />
+          <label for="createAnother">Crear otra</label>
+          <button id="cancelBtn" 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]="templateCreateForm.invalid || isSaving"
+          >
+            <span jhiTranslate="entity.action.create">Create</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

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

@@ -1,11 +1,23 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpResponse } from '@angular/common/http';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs';
+import { finalize, map } from 'rxjs/operators';
 
-import { IPlantilla } from '../plantilla.model';
+import { IPlantilla, Plantilla } from '../plantilla.model';
 import { PlantillaService } from '../service/plantilla.service';
 import { PlantillaDeleteDialogComponent } from '../delete/plantilla-delete-dialog.component';
 
+import { AccountService } from 'app/core/auth/account.service';
+import { Account } from 'app/core/auth/account.model';
+import { FormBuilder, Validators } from '@angular/forms';
+import { EstadoPlantilla } from 'app/entities/enumerations/estado-plantilla.model';
+import { ICategoria } from 'app/entities/categoria/categoria.model';
+import { CategoriaService } from 'app/entities/categoria/service/categoria.service';
+
+import * as dayjs from 'dayjs';
+import { DATE_TIME_FORMAT } from 'app/config/input.constants';
+
 @Component({
   selector: 'jhi-plantilla',
   templateUrl: './plantilla.component.html',
@@ -13,8 +25,27 @@ import { PlantillaDeleteDialogComponent } from '../delete/plantilla-delete-dialo
 export class PlantillaComponent implements OnInit {
   plantillas?: IPlantilla[];
   isLoading = false;
+  isSaving = false;
+  createAnotherTemplate: Boolean = false;
 
-  constructor(protected plantillaService: PlantillaService, protected modalService: NgbModal) {}
+  account: Account | null = null;
+  categoriasSharedCollection: ICategoria[] = [];
+
+  templateCreateForm = this.fb.group({
+    id: [],
+    nombre: [null, [Validators.minLength(1), Validators.maxLength(50)]],
+    descripcion: [],
+    precio: [null, [Validators.required]],
+    categoria: [],
+  });
+
+  constructor(
+    protected plantillaService: PlantillaService,
+    protected modalService: NgbModal,
+    protected accountService: AccountService,
+    protected fb: FormBuilder,
+    protected categoriaService: CategoriaService
+  ) {}
 
   loadAll(): void {
     this.isLoading = true;
@@ -32,6 +63,7 @@ export class PlantillaComponent implements OnInit {
 
   ngOnInit(): void {
     this.loadAll();
+    this.loadRelationshipsOptions();
   }
 
   trackId(_index: number, item: IPlantilla): number {
@@ -48,4 +80,90 @@ export class PlantillaComponent implements OnInit {
       }
     });
   }
+
+  isAdmin(): boolean {
+    return this.accountService.hasAnyAuthority('ROLE_ADMIN');
+  }
+
+  isAuthenticated(): boolean {
+    return this.accountService.isAuthenticated();
+  }
+
+  resetCreateTemplateForm(): void {
+    this.templateCreateForm.reset();
+  }
+
+  createAnotherTemplateChange(event: any): void {
+    // ID: #crearPlantilla
+    this.createAnotherTemplate = event.target.checked;
+  }
+
+  previousState(): void {
+    window.history.back();
+  }
+
+  save(): void {
+    this.isSaving = true;
+    const plantilla = this.createFromForm();
+    if (plantilla.id !== undefined) {
+      this.subscribeToSaveResponse(this.plantillaService.update(plantilla));
+    } else {
+      this.subscribeToSaveResponse(this.plantillaService.create(plantilla));
+    }
+  }
+
+  trackCategoriaById(index: number, item: ICategoria): number {
+    return item.id!;
+  }
+
+  protected subscribeToSaveResponse(result: Observable<HttpResponse<IPlantilla>>): void {
+    result.pipe(finalize(() => this.onSaveFinalize())).subscribe(
+      () => this.onSaveSuccess(),
+      () => this.onSaveError()
+    );
+  }
+
+  protected onSaveSuccess(): void {
+    this.templateCreateForm.reset();
+    this.plantillas = [];
+    this.loadAll();
+    if (!this.createAnotherTemplate) {
+      $('#cancelBtn').click();
+    }
+  }
+
+  protected onSaveError(): void {
+    // Api for inheritance.
+  }
+
+  protected onSaveFinalize(): void {
+    this.isSaving = false;
+  }
+
+  protected loadRelationshipsOptions(): void {
+    this.categoriaService
+      .query()
+      .pipe(map((res: HttpResponse<ICategoria[]>) => res.body ?? []))
+      .pipe(
+        map((categorias: ICategoria[]) =>
+          this.categoriaService.addCategoriaToCollectionIfMissing(categorias, this.templateCreateForm.get('categoria')!.value)
+        )
+      )
+      .subscribe((categorias: ICategoria[]) => (this.categoriasSharedCollection = categorias));
+  }
+
+  protected createFromForm(): IPlantilla {
+    const now = dayjs();
+
+    return {
+      ...new Plantilla(),
+      id: undefined,
+      nombre: this.templateCreateForm.get(['nombre'])!.value,
+      descripcion: this.templateCreateForm.get(['descripcion'])!.value,
+      fechaCreacion: dayjs(now, DATE_TIME_FORMAT),
+      estado: EstadoPlantilla.DRAFT,
+      precio: this.templateCreateForm.get(['precio'])!.value,
+      categoria: this.templateCreateForm.get(['categoria'])!.value,
+    };
+  }
 }