Arch/templates/schemas/edit.html

277 lines
14 KiB
HTML

{% extends "base.html" %}
{% block title %}Editar Esquema: {{ schema.nombre }}{% endblock %}
{% block content %}
<div class="container mt-4">
<h2>Editar Esquema</h2>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" id="nombre" name="nombre" value="{{ schema.nombre }}" required>
</div>
<div class="mb-3">
<label for="descripcion" class="form-label">Descripción</label>
<textarea class="form-control" id="descripcion" name="descripcion" rows="3">{{ schema.descripcion }}</textarea>
</div>
<h4 class="mt-4">Tipos de Documentos</h4>
<div id="documents-container">
{% for doc in schema.documentos %}
<div class="card mb-3 document-card">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<label class="form-label">Tipo</label>
<select class="form-select" name="doc_tipo_{{ loop.index0 }}" required>
{% for extension, filetype in filetypes.items() %}
<option value="{{ extension }}" {% if doc.tipo == extension %}selected{% endif %}>
{{ filetype.descripcion }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-4">
<label class="form-label">Nombre</label>
<input type="text" class="form-control" name="doc_nombre_{{ loop.index0 }}"
value="{{ doc.nombre }}" required>
</div>
<div class="col-md-2">
<label class="form-label">Nivel Ver</label>
<input type="number" class="form-control" name="doc_nivel_ver_{{ loop.index0 }}"
value="{{ doc.nivel_ver }}" min="0" max="9999">
</div>
<div class="col-md-2">
<label class="form-label">Nivel Editar</label>
<input type="number" class="form-control" name="doc_nivel_editar_{{ loop.index0 }}"
value="{{ doc.nivel_editar }}" min="0" max="9999">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-danger btn-sm mt-4 remove-document">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<input type="hidden" id="document_count" name="document_count" value="{{ schema.documentos|length }}">
<button type="button" id="add-document" class="btn btn-secondary mb-3">
<i class="fas fa-plus"></i> Añadir Tipo de Documento
</button>
<h4 class="mt-4">Campos</h4>
<div id="fields-container">
{% for field in schema.fields %}
<div class="card mb-3 field-card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<label class="form-label">Nombre</label>
<input type="text" class="form-control" name="field_name_{{ loop.index0 }}" value="{{ field.name }}" required>
</div>
<div class="col-md-4">
<label class="form-label">Tipo</label>
<select class="form-select" name="field_type_{{ loop.index0 }}">
<option value="text" {% if field.type == 'text' %}selected{% endif %}>Texto</option>
<option value="textarea" {% if field.type == 'textarea' %}selected{% endif %}>Área de texto</option>
<option value="richtext" {% if field.type == 'richtext' %}selected{% endif %}>Texto enriquecido</option>
<option value="number" {% if field.type == 'number' %}selected{% endif %}>Número</option>
<option value="date" {% if field.type == 'date' %}selected{% endif %}>Fecha</option>
<option value="tags" {% if field.type == 'tags' %}selected{% endif %}>Etiquetas</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label">Requerido</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" name="field_required_{{ loop.index0 }}" {% if field.required %}checked{% endif %}>
<label class="form-check-label">Es requerido</label>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-danger btn-sm mt-4 remove-field">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<input type="hidden" id="field_count" name="field_count" value="{{ schema.fields|length }}">
<button type="button" id="add-field" class="btn btn-secondary mb-3">
<i class="fas fa-plus"></i> Añadir Campo
</button>
<div class="mt-4">
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
<a href="{{ url_for('schemas.list') }}" class="btn btn-secondary">Cancelar</a>
</div>
</form>
</div>
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
let fieldCount = {{ schema.fields|length }};
// Add new field
document.getElementById('add-field').addEventListener('click', function() {
const fieldsContainer = document.getElementById('fields-container');
const newField = document.createElement('div');
newField.className = 'card mb-3 field-card';
newField.innerHTML = `
<div class="card-body">
<div class="row">
<div class="col-md-4">
<label class="form-label">Nombre</label>
<input type="text" class="form-control" name="field_name_${fieldCount}" required>
</div>
<div class="col-md-4">
<label class="form-label">Tipo</label>
<select class="form-select" name="field_type_${fieldCount}">
<option value="text">Texto</option>
<option value="textarea">Área de texto</option>
<option value="richtext">Texto enriquecido</option>
<option value="number">Número</option>
<option value="date">Fecha</option>
<option value="tags">Etiquetas</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label">Requerido</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" name="field_required_${fieldCount}">
<label class="form-check-label">Es requerido</label>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-danger btn-sm mt-4 remove-field">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
`;
fieldsContainer.appendChild(newField);
fieldCount++;
document.getElementById('field_count').value = fieldCount;
// Add event listener to new remove button
newField.querySelector('.remove-field').addEventListener('click', removeField);
});
// Remove field functionality
function removeField() {
this.closest('.field-card').remove();
fieldCount--;
document.getElementById('field_count').value = fieldCount;
// Renumber fields to keep proper sequence
updateFieldNumbers();
}
// Add event listeners to existing remove buttons
document.querySelectorAll('.remove-field').forEach(button => {
button.addEventListener('click', removeField);
});
// Update field numbering when fields are removed
function updateFieldNumbers() {
const fieldCards = document.querySelectorAll('.field-card');
fieldCards.forEach((card, index) => {
const fieldNameInput = card.querySelector('input[name^="field_name_"]');
const fieldTypeSelect = card.querySelector('select[name^="field_type_"]');
const fieldRequiredCheck = card.querySelector('input[name^="field_required_"]');
fieldNameInput.name = `field_name_${index}`;
fieldTypeSelect.name = `field_type_${index}`;
fieldRequiredCheck.name = `field_required_${index}`;
});
}
// Document types functionality
let documentCount = {{ schema.documentos|length }};
document.getElementById('add-document').addEventListener('click', function() {
const documentsContainer = document.getElementById('documents-container');
const newDocument = document.createElement('div');
newDocument.className = 'card mb-3 document-card';
newDocument.innerHTML = `
<div class="card-body">
<div class="row">
<div class="col-md-3">
<label class="form-label">Tipo</label>
<select class="form-select" name="doc_tipo_${documentCount}" required>
{% for extension, filetype in filetypes.items() %}
<option value="{{ extension }}">{{ filetype.descripcion }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-4">
<label class="form-label">Nombre</label>
<input type="text" class="form-control" name="doc_nombre_${documentCount}" required>
</div>
<div class="col-md-2">
<label class="form-label">Nivel Ver</label>
<input type="number" class="form-control" name="doc_nivel_ver_${documentCount}"
value="0" min="0" max="9999">
</div>
<div class="col-md-2">
<label class="form-label">Nivel Editar</label>
<input type="number" class="form-control" name="doc_nivel_editar_${documentCount}"
value="5000" min="0" max="9999">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-danger btn-sm mt-4 remove-document">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
`;
documentsContainer.appendChild(newDocument);
documentCount++;
document.getElementById('document_count').value = documentCount;
newDocument.querySelector('.remove-document').addEventListener('click', removeDocument);
});
function removeDocument() {
this.closest('.document-card').remove();
documentCount--;
document.getElementById('document_count').value = documentCount;
updateDocumentNumbers();
}
document.querySelectorAll('.remove-document').forEach(button => {
button.addEventListener('click', removeDocument);
});
function updateDocumentNumbers() {
const documentCards = document.querySelectorAll('.document-card');
documentCards.forEach((card, index) => {
const tipoSelect = card.querySelector('select[name^="doc_tipo_"]');
const nombreInput = card.querySelector('input[name^="doc_nombre_"]');
const nivelVerInput = card.querySelector('input[name^="doc_nivel_ver_"]');
const nivelEditarInput = card.querySelector('input[name^="doc_nivel_editar_"]');
tipoSelect.name = `doc_tipo_${index}`;
nombreInput.name = `doc_nombre_${index}`;
nivelVerInput.name = `doc_nivel_ver_${index}`;
nivelEditarInput.name = `doc_nivel_editar_${index}`;
});
}
});
</script>
{% endblock %}
{% endblock %}