Add register survey template
This commit is contained in:
Pablo Bonilla
parent
4a20bebc66
commit
bc8ef1941b
|
|
@ -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"
|
||||
data-cy="entityCreateButton"
|
||||
class="ds-btn ds-btn--primary jh-create-entity create-plantilla"
|
||||
[routerLink]="['/plantilla/new']"
|
||||
*ngIf="isAdmin() && isAuthenticated()"
|
||||
type="button"
|
||||
class="ds-btn ds-btn--primary"
|
||||
(click)="resetCreateTemplateForm()"
|
||||
data-toggle="modal"
|
||||
data-target="#crearPlantilla"
|
||||
>
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
<span jhiTranslate="dataSurveyApp.plantilla.home.createLabel"> Create a new Template </span>
|
||||
Crear plantilla
|
||||
</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.fechaPublicacionTienda | formatMediumDatetime }}</td>
|
||||
<!-- <td>{{ plantilla.fechaCreacion | formatMediumDatetime }}</td> -->
|
||||
<td>{{ plantilla.fechaPublicacionTienda | formatShortDatetime | titlecase }}</td>
|
||||
<td jhiTranslate="{{ 'dataSurveyApp.EstadoPlantilla.' + plantilla.estado }}">{{ plantilla.estado }}</td>
|
||||
<td>{{ plantilla.precio }}</td>
|
||||
<td>
|
||||
<div *ngIf="plantilla.categoria">
|
||||
<a [routerLink]="['/categoria', plantilla.categoria?.id, 'view']">{{ plantilla.categoria?.nombre }}</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ plantilla.categoria?.nombre }}</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> <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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue