- Refining & Enhancing dynamic fields
- Creating a specialized Form class for handling dynamic fields - Refinement of HTML-macros to handle dynamic fields - Introduction of dynamic fields for Catalogs
This commit is contained in:
@@ -11,12 +11,22 @@ When you change chunking of embedding information, you'll need to manually refre
|
||||
{% block content %}
|
||||
<form method="post">
|
||||
{{ form.hidden_tag() }}
|
||||
{% set disabled_fields = [] %}
|
||||
{% set exclude_fields = [] %}
|
||||
{% for field in form %}
|
||||
{% set disabled_fields = ['type'] %}
|
||||
{% set exclude_fields = [] %}
|
||||
<!-- Render Static Fields -->
|
||||
{% for field in form.get_static_fields() %}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
<button type="submit" class="btn btn-primary">Save Catalog</button>
|
||||
<!-- Render Dynamic Fields -->
|
||||
{% for collection_name, fields in form.get_dynamic_fields().items() %}
|
||||
{% if fields|length > 0 %}
|
||||
<h4 class="mt-4">{{ collection_name }}</h4>
|
||||
{% endif %}
|
||||
{% for field in fields %}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<button type="submit" class="btn btn-primary">Save Retriever</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends 'base.html' %}
|
||||
{% from "macros.html" import render_field2, render_dynamic_fields %}
|
||||
{% from "macros.html" import render_field %}
|
||||
|
||||
{% block title %}Edit Retriever{% endblock %}
|
||||
|
||||
@@ -13,13 +13,15 @@
|
||||
{% set exclude_fields = [] %}
|
||||
<!-- Render Static Fields -->
|
||||
{% for field in form.get_static_fields() %}
|
||||
{{ render_field2(field, disabled_fields, exclude_fields) }}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
<!-- Render Dynamic Fields -->
|
||||
{% for collection_name, fields in form.get_dynamic_fields().items() %}
|
||||
<h4 class="mt-4">{{ collection_name }}</h4>
|
||||
{% if fields|length > 0 %}
|
||||
<h4 class="mt-4">{{ collection_name }}</h4>
|
||||
{% endif %}
|
||||
{% for field in fields %}
|
||||
{{ render_field2(field, disabled_fields, exclude_fields) }}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<button type="submit" class="btn btn-primary">Save Retriever</button>
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
{% macro render_field(field, disabled_fields=[], exclude_fields=[], class='') %}
|
||||
{% set disabled = field.name in disabled_fields %}
|
||||
{% set exclude_fields = exclude_fields + ['csrf_token', 'submit'] %}
|
||||
{% if field.name not in exclude_fields %}
|
||||
{% if field.type == 'BooleanField' %}
|
||||
<div class="form-check">
|
||||
{{ field(class="form-check-input " + class, type="checkbox", id="flexSwitchCheckDefault") }}
|
||||
{{ field.label(class="form-check-label", for="flexSwitchCheckDefault", disabled=disabled) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-group">
|
||||
{{ field.label(class="form-label") }}
|
||||
{{ field(class="form-control " + class, disabled=disabled) }}
|
||||
{% if field.errors %}
|
||||
<div class="invalid-feedback">
|
||||
{% for error in field.errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
<!--{% macro render_field(field, disabled_fields=[], exclude_fields=[], class='') %}-->
|
||||
<!-- {% set disabled = field.name in disabled_fields %}-->
|
||||
<!-- {% set exclude_fields = exclude_fields + ['csrf_token', 'submit'] %}-->
|
||||
<!-- {% if field.name not in exclude_fields %}-->
|
||||
<!-- {% if field.type == 'BooleanField' %}-->
|
||||
<!-- <div class="form-check">-->
|
||||
<!-- {{ field(class="form-check-input " + class, type="checkbox", id="flexSwitchCheckDefault") }}-->
|
||||
<!-- {{ field.label(class="form-check-label", for="flexSwitchCheckDefault", disabled=disabled) }}-->
|
||||
<!-- </div>-->
|
||||
<!-- {% else %}-->
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- {{ field.label(class="form-label") }}-->
|
||||
<!-- {{ field(class="form-control " + class, disabled=disabled) }}-->
|
||||
<!-- {% if field.errors %}-->
|
||||
<!-- <div class="invalid-feedback">-->
|
||||
<!-- {% for error in field.errors %}-->
|
||||
<!-- {{ error }}-->
|
||||
<!-- {% endfor %}-->
|
||||
<!-- </div>-->
|
||||
<!-- {% endif %}-->
|
||||
<!-- </div>-->
|
||||
<!-- {% endif %}-->
|
||||
<!-- {% endif %}-->
|
||||
<!--{% endmacro %}-->
|
||||
|
||||
{% macro render_field2(field, disabled_fields=[], exclude_fields=[], class='') %}
|
||||
{% macro render_field_old(field, disabled_fields=[], exclude_fields=[], class='') %}
|
||||
<!-- Debug info -->
|
||||
<!-- Field name: {{ field.name }}, Field type: {{ field.__class__.__name__ }} -->
|
||||
|
||||
@@ -34,7 +34,14 @@
|
||||
<div class="form-group">
|
||||
<div class="form-check form-switch">
|
||||
{{ field(class="form-check-input " + class, disabled=disabled) }}
|
||||
{{ field.label(class="form-check-label") }}
|
||||
{% if field.description %}
|
||||
{{ field.label(class="form-check-label",
|
||||
**{'data-bs-toggle': 'tooltip',
|
||||
'data-bs-placement': 'right',
|
||||
'title': field.description}) }}
|
||||
{% else %}
|
||||
{{ field.label(class="form-check-label") }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if field.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
@@ -46,8 +53,82 @@
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-group">
|
||||
{{ field.label(class="form-label") }}
|
||||
{{ field(class="form-control " + class, disabled=disabled) }}
|
||||
{% if field.description %}
|
||||
{{ field.label(class="form-label",
|
||||
**{'data-bs-toggle': 'tooltip',
|
||||
'data-bs-placement': 'right',
|
||||
'title': field.description}) }}
|
||||
{% else %}
|
||||
{{ field.label(class="form-label") }}
|
||||
{% endif %}
|
||||
|
||||
{% if field.type == 'TextAreaField' and 'json-editor' in class %}
|
||||
<div id="{{ field.id }}-editor" class="json-editor-container"></div>
|
||||
{{ field(class="form-control d-none " + class, disabled=disabled) }}
|
||||
{% else %}
|
||||
{{ field(class="form-control " + class, disabled=disabled) }}
|
||||
{% endif %}
|
||||
|
||||
{% if field.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{% for error in field.errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_field(field, disabled_fields=[], exclude_fields=[], class='') %}
|
||||
<!-- Debug info -->
|
||||
<!-- Field name: {{ field.name }}, Field type: {{ field.__class__.__name__ }} -->
|
||||
|
||||
{% set disabled = field.name in disabled_fields %}
|
||||
{% set exclude_fields = exclude_fields + ['csrf_token', 'submit'] %}
|
||||
{% if field.name not in exclude_fields %}
|
||||
{% if field.type == 'BooleanField' %}
|
||||
<div class="form-group">
|
||||
<div class="form-check form-switch">
|
||||
{{ field(class="form-check-input " + class, disabled=disabled) }}
|
||||
{% if field.description %}
|
||||
{{ field.label(class="form-check-label",
|
||||
**{'data-bs-toggle': 'tooltip',
|
||||
'data-bs-placement': 'right',
|
||||
'title': field.description}) }}
|
||||
{% else %}
|
||||
{{ field.label(class="form-check-label") }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if field.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{% for error in field.errors %}
|
||||
{{ error }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-group">
|
||||
{% if field.description %}
|
||||
{{ field.label(class="form-label",
|
||||
**{'data-bs-toggle': 'tooltip',
|
||||
'data-bs-placement': 'right',
|
||||
'title': field.description}) }}
|
||||
{% else %}
|
||||
{{ field.label(class="form-label") }}
|
||||
{% endif %}
|
||||
|
||||
{% if field.type == 'TextAreaField' and 'json-editor' in class %}
|
||||
<div id="{{ field.id }}-editor" class="json-editor-container"></div>
|
||||
{{ field(class="form-control d-none " + class, disabled=disabled) }}
|
||||
{% elif field.type == 'SelectField' %}
|
||||
{{ field(class="form-control form-select " + class, disabled=disabled) }}
|
||||
{% else %}
|
||||
{{ field(class="form-control " + class, disabled=disabled) }}
|
||||
{% endif %}
|
||||
|
||||
{% if field.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{% for error in field.errors %}
|
||||
|
||||
@@ -14,4 +14,58 @@
|
||||
<script src="{{url_for('static', filename='assets/js/material-kit-pro.min.js')}}?v=3.0.4 type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.css" rel="stylesheet" type="text/css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
});
|
||||
|
||||
// Initialize JSON editors
|
||||
document.querySelectorAll('.json-editor').forEach(function(textarea) {
|
||||
// Create container for editor
|
||||
var container = document.getElementById(textarea.id + '-editor');
|
||||
|
||||
// Initialize the editor
|
||||
var editor = new JSONEditor(container, {
|
||||
mode: 'code',
|
||||
modes: ['code', 'tree'],
|
||||
onChangeText: function(jsonString) {
|
||||
textarea.value = jsonString;
|
||||
}
|
||||
});
|
||||
|
||||
// Set initial value
|
||||
try {
|
||||
const initialValue = textarea.value ? JSON.parse(textarea.value) : {};
|
||||
editor.set(initialValue);
|
||||
} catch (e) {
|
||||
console.error('Error parsing initial JSON:', e);
|
||||
editor.set({});
|
||||
}
|
||||
|
||||
// Add validation indicator
|
||||
editor.validate().then(function(errors) {
|
||||
if (errors.length) {
|
||||
container.style.border = '2px solid red';
|
||||
} else {
|
||||
container.style.border = '1px solid #ccc';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.json-editor-container {
|
||||
height: 400px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user