Add custom data survey buttons
This commit is contained in:
Pablo Bonilla
parent
70ae52ffc6
commit
3686de93a8
|
|
@ -167,219 +167,211 @@
|
||||||
-------------------------------------------------------------------------------
|
-------------------------------------------------------------------------------
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<div>
|
<div class="row justify-content-center">
|
||||||
<div class="row justify-content-center">
|
<div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
|
||||||
<div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
|
<div class="col-lg-4 mr-lg-5">
|
||||||
<div class="col-lg-4 mr-lg-5">
|
<div class="row">
|
||||||
<div class="row">
|
<div class="w-100">
|
||||||
<div class="w-100">
|
<p><b>Perfil</b></p>
|
||||||
<p><b>Perfil</b></p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
|
<p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
|
||||||
<!-- Form -->
|
|
||||||
<div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<label class="form-control-label" for="field_email">Correo electrónico</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
name="email"
|
|
||||||
id="field_email"
|
|
||||||
data-cy="email"
|
|
||||||
formControlName="email"
|
|
||||||
[readonly]="true"
|
|
||||||
/>
|
|
||||||
<div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
|
|
||||||
<small
|
|
||||||
class="form-text text-danger"
|
|
||||||
*ngIf="editForm.get('email')?.errors?.required"
|
|
||||||
jhiTranslate="entity.validation.required"
|
|
||||||
>
|
|
||||||
This field is required.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
|
|
||||||
<input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
|
|
||||||
<div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
|
|
||||||
<small
|
|
||||||
class="form-text text-danger"
|
|
||||||
*ngIf="editForm.get('nombre')?.errors?.required"
|
|
||||||
jhiTranslate="entity.validation.required"
|
|
||||||
>
|
|
||||||
This field is required.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
|
|
||||||
>Fecha de nacimiento</label
|
|
||||||
>
|
|
||||||
<div class="d-flex">
|
|
||||||
<input
|
|
||||||
id="field_fechaNacimiento"
|
|
||||||
data-cy="fechaNacimiento"
|
|
||||||
type="datetime-local"
|
|
||||||
class="form-control"
|
|
||||||
name="fechaNacimiento"
|
|
||||||
formControlName="fechaNacimiento"
|
|
||||||
placeholder="YYYY-MM-DD HH:mm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<label for="iconoPerfil">Ícono de perfil</label>
|
|
||||||
<div class="d-flex">
|
|
||||||
<jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
|
|
||||||
<fa-icon icon="ban"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="save-entity"
|
|
||||||
data-cy="entityCreateSaveButton"
|
|
||||||
[disabled]="editForm.invalid || isSaving"
|
|
||||||
class="btn btn-primary"
|
|
||||||
>
|
|
||||||
<fa-icon icon="save"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row w-75 pb-lg-5 pr-lg-5">
|
<!-- Form -->
|
||||||
<div class="col-lg-4 mr-lg-5">
|
<form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
|
||||||
<div class="row">
|
<div class="row mb-2">
|
||||||
<div class="w-100">
|
<div class="form-group w-100">
|
||||||
<p><b>Contraseña</b></p>
|
<label class="form-control-label" for="field_email">Correo electrónico</label>
|
||||||
</div>
|
<input type="text" class="form-control" name="email" id="field_email" data-cy="email" formControlName="email" [readonly]="true" />
|
||||||
<div>
|
<div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
|
||||||
<p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
|
<small class="form-text text-danger" *ngIf="editForm.get('email')?.errors?.required" jhiTranslate="entity.validation.required">
|
||||||
|
This field is required.
|
||||||
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row mb-2">
|
||||||
<!-- Form -->
|
<div class="form-group w-100">
|
||||||
<div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
|
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
|
||||||
<div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
|
<input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
|
||||||
<div class="form-group w-100">
|
<div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
|
||||||
<label class="form-control-label" for="field_password">Contraseña actual</label>
|
<small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
|
||||||
<input
|
This field is required.
|
||||||
type="text"
|
</small>
|
||||||
class="form-control"
|
|
||||||
name="password"
|
|
||||||
id="field_password"
|
|
||||||
data-cy="password"
|
|
||||||
formControlName="password"
|
|
||||||
placeholder="Su contraseña actual"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
*ngIf="
|
|
||||||
passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<small
|
|
||||||
class="form-text text-danger"
|
|
||||||
*ngIf="passwordForm.get('password')?.errors?.required"
|
|
||||||
jhiTranslate="entity.validation.required"
|
|
||||||
>
|
|
||||||
This field is required.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-2">
|
</div>
|
||||||
<div class="form-group w-100">
|
<div class="row mb-2">
|
||||||
<label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
|
<div class="form-group w-100">
|
||||||
<input
|
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
|
||||||
type="text"
|
>Fecha de nacimiento</label
|
||||||
class="form-control"
|
|
||||||
name="passwordNew"
|
|
||||||
id="field_passwordNew"
|
|
||||||
data-cy="passwordNew"
|
|
||||||
formControlName="passwordNew"
|
|
||||||
placeholder="Contraseña nueva"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
*ngIf="
|
|
||||||
passwordForm.get('passwordNew')!.invalid &&
|
|
||||||
(passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<small
|
|
||||||
class="form-text text-danger"
|
|
||||||
*ngIf="passwordForm.get('passwordNew')?.errors?.required"
|
|
||||||
jhiTranslate="entity.validation.required"
|
|
||||||
>
|
|
||||||
This field is required.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="form-group w-100">
|
|
||||||
<label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
name="passwordNewConfirm"
|
|
||||||
id="field_passwordNewConfirm"
|
|
||||||
data-cy="passwordNewConfirm"
|
|
||||||
formControlName="passwordNewConfirm"
|
|
||||||
placeholder="Contraseña nueva"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
*ngIf="
|
|
||||||
passwordForm.get('passwordNewConfirm')!.invalid &&
|
|
||||||
(passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<small
|
|
||||||
class="form-text text-danger"
|
|
||||||
*ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
|
|
||||||
jhiTranslate="entity.validation.required"
|
|
||||||
>
|
|
||||||
This field is required.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
|
|
||||||
<fa-icon icon="ban"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="save-entity"
|
|
||||||
data-cy="entityCreateSaveButton"
|
|
||||||
[disabled]="passwordForm.invalid || isSaving"
|
|
||||||
class="btn btn-primary"
|
|
||||||
>
|
>
|
||||||
<fa-icon icon="save"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
|
<div class="d-flex">
|
||||||
</button>
|
<input
|
||||||
|
id="field_fechaNacimiento"
|
||||||
|
data-cy="fechaNacimiento"
|
||||||
|
type="datetime-local"
|
||||||
|
class="form-control"
|
||||||
|
name="fechaNacimiento"
|
||||||
|
formControlName="fechaNacimiento"
|
||||||
|
placeholder="YYYY-MM-DD HH:mm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="form-group w-100">
|
||||||
|
<label for="iconoPerfil">Ícono de perfil</label>
|
||||||
|
<div class="d-flex">
|
||||||
|
<jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="cancel-save"
|
||||||
|
data-cy="entityCreateCancelButton"
|
||||||
|
class="ds-btn ds-btn--secondary"
|
||||||
|
(click)="previousState()"
|
||||||
|
>
|
||||||
|
<fa-icon icon="arrow-left"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="save-entity"
|
||||||
|
data-cy="entityCreateSaveButton"
|
||||||
|
[disabled]="editForm.invalid || isSaving"
|
||||||
|
class="ds-btn ds-btn--primary"
|
||||||
|
>
|
||||||
|
<span jhiTranslate="entity.action.save">Save</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row w-75 pb-lg-5 pr-lg-5">
|
||||||
|
<div class="col-lg-4 mr-lg-5">
|
||||||
|
<div class="row">
|
||||||
|
<div class="w-100">
|
||||||
|
<p><b>Contraseña</b></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Form -->
|
||||||
|
<form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
|
||||||
|
<div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
|
||||||
|
<div class="form-group w-100">
|
||||||
|
<label class="form-control-label" for="field_password">Contraseña actual</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
name="password"
|
||||||
|
id="field_password"
|
||||||
|
data-cy="password"
|
||||||
|
formControlName="password"
|
||||||
|
placeholder="Su contraseña actual"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
*ngIf="passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="form-text text-danger"
|
||||||
|
*ngIf="passwordForm.get('password')?.errors?.required"
|
||||||
|
jhiTranslate="entity.validation.required"
|
||||||
|
>
|
||||||
|
This field is required.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="form-group w-100">
|
||||||
|
<label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
name="passwordNew"
|
||||||
|
id="field_passwordNew"
|
||||||
|
data-cy="passwordNew"
|
||||||
|
formControlName="passwordNew"
|
||||||
|
placeholder="Contraseña nueva"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
*ngIf="
|
||||||
|
passwordForm.get('passwordNew')!.invalid &&
|
||||||
|
(passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="form-text text-danger"
|
||||||
|
*ngIf="passwordForm.get('passwordNew')?.errors?.required"
|
||||||
|
jhiTranslate="entity.validation.required"
|
||||||
|
>
|
||||||
|
This field is required.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="form-group w-100">
|
||||||
|
<label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
name="passwordNewConfirm"
|
||||||
|
id="field_passwordNewConfirm"
|
||||||
|
data-cy="passwordNewConfirm"
|
||||||
|
formControlName="passwordNewConfirm"
|
||||||
|
placeholder="Contraseña nueva"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
*ngIf="
|
||||||
|
passwordForm.get('passwordNewConfirm')!.invalid &&
|
||||||
|
(passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="form-text text-danger"
|
||||||
|
*ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
|
||||||
|
jhiTranslate="entity.validation.required"
|
||||||
|
>
|
||||||
|
This field is required.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="cancel-save"
|
||||||
|
data-cy="entityCreateCancelButton"
|
||||||
|
class="ds-btn ds-btn--secondary"
|
||||||
|
(click)="previousState()"
|
||||||
|
>
|
||||||
|
<fa-icon icon="ban"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="save-entity"
|
||||||
|
data-cy="entityCreateSaveButton"
|
||||||
|
[disabled]="passwordForm.invalid || isSaving"
|
||||||
|
class="ds-btn ds-btn--primary"
|
||||||
|
>
|
||||||
|
<fa-icon icon="save"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@
|
||||||
// Core CSS
|
// Core CSS
|
||||||
@import 'paper-dashboard/nucleo-outline';
|
@import 'paper-dashboard/nucleo-outline';
|
||||||
@import 'paper-dashboard/buttons';
|
@import 'paper-dashboard/buttons';
|
||||||
|
@import 'paper-dashboard/datasurvey-buttons';
|
||||||
@import 'paper-dashboard/social-buttons';
|
@import 'paper-dashboard/social-buttons';
|
||||||
@import 'paper-dashboard/animated-buttons';
|
@import 'paper-dashboard/animated-buttons';
|
||||||
@import 'paper-dashboard/inputs';
|
@import 'paper-dashboard/inputs';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
.ds-btn {
|
||||||
|
border-width: $border-thick;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: $line-height;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
border: none;
|
||||||
|
margin: 10px 5px;
|
||||||
|
border-radius: $border-radius-small;
|
||||||
|
padding: $padding-btn-vertical $padding-btn-horizontal;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.025rem;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-btn--primary {
|
||||||
|
background-color: #2962ff;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #1c44b2;
|
||||||
|
top: -3px;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-btn--secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #2962ff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f7f9ff;
|
||||||
|
color: #1c44b2;
|
||||||
|
top: -3px;
|
||||||
|
box-shadow: rgba(80, 80, 80, 0.15) 0px 5px 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue