|
|
@@ -1,27 +1,486 @@
|
|
|
+<!-- admin-form.component.html -->
|
|
|
<div class="centrar fadeIn">
|
|
|
<div class="fondo" [style.background-color]="color">
|
|
|
- <p class="content" [style.color]="textColor">Creacion de Formularios</p>
|
|
|
+ <p class="content" [style.color]="textColor">Creador de Formularios</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
+ <!-- Configuration Panel -->
|
|
|
+ <div class="container-formConfig">
|
|
|
+ <div class="title-form">Configuración General</div>
|
|
|
|
|
|
+ <!-- Form Title -->
|
|
|
+ <div class="config-section">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <p class="text">Título del formulario</p>
|
|
|
+ <button class="help-btn" (click)="showHelp('formTitle')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'formTitle'">
|
|
|
+ {{getHelpMessage('formTitle')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="form__input"
|
|
|
+ placeholder="Ej: Formulario de Contacto"
|
|
|
+ [(ngModel)]="formTitle">
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="container-formConfig">
|
|
|
+ <!-- Grid Configuration -->
|
|
|
+ <div class="config-section">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <p class="text">Diseño de la Cuadrícula</p>
|
|
|
+ <button class="help-btn" (click)="showHelp('gridConfig')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'gridConfig'">
|
|
|
+ Define cómo se organizarán los campos en tu formulario. Puedes crear una cuadrícula personalizada.
|
|
|
+ </div>
|
|
|
+ <div class="grid-config">
|
|
|
+ <div class="input-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Filas:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('rows')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'rows'">
|
|
|
+ {{getHelpMessage('rows')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ class="form__input-small"
|
|
|
+ [(ngModel)]="rows"
|
|
|
+ (ngModelChange)="onGridConfigChange()"
|
|
|
+ min="1"
|
|
|
+ max="10">
|
|
|
+ </div>
|
|
|
+ <div class="input-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Columnas:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('columns')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'columns'">
|
|
|
+ {{getHelpMessage('columns')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ class="form__input-small"
|
|
|
+ [(ngModel)]="columns"
|
|
|
+ (ngModelChange)="onGridConfigChange()"
|
|
|
+ min="1"
|
|
|
+ max="10">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="title-form">Configuracion deL Formulario </div>
|
|
|
- <form action="">
|
|
|
- <p class="text">Titulo del formulario</p>
|
|
|
+ <!-- Available Elements -->
|
|
|
+ <div class="config-section" *ngIf="showElementSelector">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <p class="text">Tipos de Campos Disponibles</p>
|
|
|
+ <button class="help-btn" (click)="showHelp('availableElements')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'availableElements'">
|
|
|
+ Selecciona el tipo de campo que quieres agregar a tu formulario. Cada tipo sirve para recopilar información diferente.
|
|
|
+ </div>
|
|
|
+ <div class="elements-grid">
|
|
|
+ <div class="element-btn-container" *ngFor="let element of availableElements">
|
|
|
+ <button
|
|
|
+ class="element-btn"
|
|
|
+ (click)="addElementToCell(element)">
|
|
|
+ {{element.label}}
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="element-help-btn"
|
|
|
+ (click)="showHelp(element.type + 'Field')"
|
|
|
+ type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ <div class="help-tooltip element-tooltip" *ngIf="showTooltip === element.type + 'Field'">
|
|
|
+ {{getHelpMessage(element.type + 'Field')}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <input type="text" class="form__input" placeholder="Titulo del Formulario">
|
|
|
- </form>
|
|
|
+ <!-- Generate JSON Button -->
|
|
|
+ <div class="config-section">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <button class="btn-generate" (click)="logConfiguration()">
|
|
|
+ Generar Configuración del Formulario
|
|
|
+ </button>
|
|
|
+ <button class="help-btn" (click)="showHelp('generateJson')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'generateJson'">
|
|
|
+ Genera el código de configuración de tu formulario que podrás usar para implementarlo.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- Form Grid -->
|
|
|
<div class="container-form">
|
|
|
+ <div class="title-form">Vista Previa del Formulario</div>
|
|
|
+ <div class="form-grid" [style.grid-template-columns]="'repeat(' + columns + ', 1fr)'">
|
|
|
+ <div
|
|
|
+ *ngFor="let row of grid; let i = index"
|
|
|
+ class="grid-row">
|
|
|
+ <div
|
|
|
+ *ngFor="let cell of row; let j = index"
|
|
|
+ class="grid-cell"
|
|
|
+ [class.selected]="cell.selected"
|
|
|
+ [class.has-element]="cell.element"
|
|
|
+ (click)="selectCell(cell)"
|
|
|
+ (dblclick)="selectElementForEditing(cell)">
|
|
|
+
|
|
|
+ <!-- Show element if exists -->
|
|
|
+ <div *ngIf="cell.element" class="cell-element">
|
|
|
+ <div class="element-label-container">
|
|
|
+ <label class="element-label">{{cell.element.label}}</label>
|
|
|
+ <span class="required-indicator" *ngIf="cell.element.required">*</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Text Input -->
|
|
|
+ <input
|
|
|
+ *ngIf="cell.element.type === 'text'"
|
|
|
+ type="text"
|
|
|
+ class="form-element"
|
|
|
+ [placeholder]="cell.element.placeholder"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled>
|
|
|
+
|
|
|
+ <!-- Number Input -->
|
|
|
+ <input
|
|
|
+ *ngIf="cell.element.type === 'number'"
|
|
|
+ type="number"
|
|
|
+ class="form-element"
|
|
|
+ [placeholder]="cell.element.placeholder"
|
|
|
+ [min]="cell.element.min"
|
|
|
+ [max]="cell.element.max"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled>
|
|
|
+
|
|
|
+ <!-- Email Input -->
|
|
|
+ <input
|
|
|
+ *ngIf="cell.element.type === 'email'"
|
|
|
+ type="email"
|
|
|
+ class="form-element"
|
|
|
+ [placeholder]="cell.element.placeholder"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled>
|
|
|
+
|
|
|
+ <!-- Date Input -->
|
|
|
+ <input
|
|
|
+ *ngIf="cell.element.type === 'date'"
|
|
|
+ type="date"
|
|
|
+ class="form-element"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled>
|
|
|
+
|
|
|
+ <!-- Select -->
|
|
|
+ <select
|
|
|
+ *ngIf="cell.element.type === 'select'"
|
|
|
+ class="form-element"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled>
|
|
|
+ <option value="">Selecciona una opción</option>
|
|
|
+ <option *ngFor="let option of cell.element.options || []" [value]="option">
|
|
|
+ {{option}}
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+
|
|
|
+ <!-- Radio Buttons -->
|
|
|
+ <div *ngIf="cell.element.type === 'radio'" class="radio-group">
|
|
|
+ <div *ngFor="let option of cell.element.options || []; let idx = index" class="radio-item">
|
|
|
+ <input
|
|
|
+ type="radio"
|
|
|
+ [name]="cell.element.name"
|
|
|
+ [id]="cell.element.id + '_' + idx"
|
|
|
+ [value]="option"
|
|
|
+ disabled>
|
|
|
+ <label [for]="cell.element.id + '_' + idx">{{option}}</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Checkbox -->
|
|
|
+ <div *ngIf="cell.element.type === 'checkbox'" class="checkbox-item">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ [id]="cell.element.id"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled>
|
|
|
+ <label [for]="cell.element.id">{{cell.element.label}}</label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Textarea -->
|
|
|
+ <textarea
|
|
|
+ *ngIf="cell.element.type === 'textarea'"
|
|
|
+ class="form-element"
|
|
|
+ [placeholder]="cell.element.placeholder"
|
|
|
+ [required]="cell.element.required"
|
|
|
+ disabled
|
|
|
+ rows="3">
|
|
|
+ </textarea>
|
|
|
+
|
|
|
+ <!-- Description -->
|
|
|
+ <small class="element-description" *ngIf="cell.element.description">
|
|
|
+ {{cell.element.description}}
|
|
|
+ </small>
|
|
|
|
|
|
- <div class="title-form"> Formulario</div>
|
|
|
+ <button
|
|
|
+ class="remove-btn"
|
|
|
+ (click)="removeElementFromCell(cell); $event.stopPropagation()"
|
|
|
+ title="Eliminar campo">
|
|
|
+ ×
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Show placeholder if empty -->
|
|
|
+ <div *ngIf="!cell.element" class="cell-placeholder">
|
|
|
+ <span>Posición {{i + 1}},{{j + 1}}</span>
|
|
|
+ <small>Haz clic para agregar un campo</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="container-formPropiedades">
|
|
|
|
|
|
- <div class="title-form">Propiedades </div>
|
|
|
+ <!-- Properties Panel -->
|
|
|
+ <div class="container-formPropiedades">
|
|
|
+ <div class="title-form">Propiedades del Campo</div>
|
|
|
+
|
|
|
+ <div *ngIf="editingElement" class="properties-panel">
|
|
|
+ <h4>Editando: {{editingElement.label}}</h4>
|
|
|
+
|
|
|
+ <!-- Common Properties -->
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Etiqueta del Campo:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('label')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'label'">
|
|
|
+ {{getHelpMessage('label')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.label"
|
|
|
+ placeholder="Ej: Nombre completo">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Identificador del Campo:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('fieldId')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'fieldId'">
|
|
|
+ {{getHelpMessage('fieldId')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.id"
|
|
|
+ placeholder="Se genera automáticamente">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Nombre del Campo:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('fieldName')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'fieldName'">
|
|
|
+ {{getHelpMessage('fieldName')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.name"
|
|
|
+ placeholder="nombre_campo">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label class="checkbox-label">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ [(ngModel)]="editingElement.required">
|
|
|
+ Campo obligatorio
|
|
|
+ </label>
|
|
|
+ <button class="help-btn" (click)="showHelp('required')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'required'">
|
|
|
+ {{getHelpMessage('required')}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Placeholder for text-based inputs -->
|
|
|
+ <div class="property-group" *ngIf="editingElement.type === 'text' || editingElement.type === 'email' || editingElement.type === 'textarea' || editingElement.type === 'number'">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Texto de Ayuda:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('placeholder')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'placeholder'">
|
|
|
+ {{getHelpMessage('placeholder')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.placeholder"
|
|
|
+ placeholder="Ej: Escribe tu nombre aquí">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Min/Max for number inputs -->
|
|
|
+ <div *ngIf="editingElement.type === 'number'" class="property-group">
|
|
|
+ <div class="number-range">
|
|
|
+ <div>
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Valor Mínimo:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('minValue')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'minValue'">
|
|
|
+ {{getHelpMessage('minValue')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ class="property-input-small"
|
|
|
+ [(ngModel)]="editingElement.min"
|
|
|
+ placeholder="0">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Valor Máximo:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('maxValue')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'maxValue'">
|
|
|
+ {{getHelpMessage('maxValue')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ class="property-input-small"
|
|
|
+ [(ngModel)]="editingElement.max"
|
|
|
+ placeholder="100">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Pattern for text inputs -->
|
|
|
+ <div class="property-group" *ngIf="editingElement.type === 'text'">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Formato Específico:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('pattern')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'pattern'">
|
|
|
+ {{getHelpMessage('pattern')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.pattern"
|
|
|
+ placeholder="Ej: [0-9]{3}-[0-9]{3}-[0-9]{4} para teléfono">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Options for select and radio -->
|
|
|
+ <div class="property-group" *ngIf="(editingElement.type === 'select' || editingElement.type === 'radio') && editingElement.options">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Opciones Disponibles:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('options')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'options'">
|
|
|
+ {{getHelpMessage('options')}}
|
|
|
+ </div>
|
|
|
+ <div class="options-list">
|
|
|
+ <div *ngFor="let option of editingElement.options; let i = index; trackBy: trackByIndex" class="option-item">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [value]="option"
|
|
|
+ (input)="updateOption(i, $event)"
|
|
|
+ placeholder="Nombre de la opción">
|
|
|
+ <button
|
|
|
+ class="remove-option-btn"
|
|
|
+ (click)="removeOption(i)"
|
|
|
+ title="Eliminar opción">
|
|
|
+ ×
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ class="add-option-btn"
|
|
|
+ (click)="addOption()">
|
|
|
+ + Agregar nueva opción
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Description -->
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Descripción o Instrucciones:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('description')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'description'">
|
|
|
+ {{getHelpMessage('description')}}
|
|
|
+ </div>
|
|
|
+ <textarea
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.description"
|
|
|
+ placeholder="Ej: Por favor ingresa tu número de teléfono con código de área"
|
|
|
+ rows="2">
|
|
|
+ </textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Default value -->
|
|
|
+ <div class="property-group">
|
|
|
+ <div class="input-with-help">
|
|
|
+ <label>Valor Predeterminado:</label>
|
|
|
+ <button class="help-btn" (click)="showHelp('defaultValue')" type="button">
|
|
|
+ <i class="help-icon">?</i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="help-tooltip" *ngIf="showTooltip === 'defaultValue'">
|
|
|
+ {{getHelpMessage('defaultValue')}}
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ class="property-input"
|
|
|
+ [(ngModel)]="editingElement.value"
|
|
|
+ placeholder="Valor que aparecerá por defecto">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div *ngIf="!editingElement" class="properties-panel">
|
|
|
+ <div class="empty-properties">
|
|
|
+ <div class="empty-icon">⚙️</div>
|
|
|
+ <p>Selecciona un campo para editarlo</p>
|
|
|
+ <small>Haz doble clic en cualquier campo del formulario para ver sus propiedades</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
FREDY