0d05499d2b
- correction of some bugs: - dynamic fields for adding documents / urls to dossier catalog - tabs in latest bootstrap version no longer functional - partner association of license tier not working when no partner selected - data-type dynamic field needs conversion to isoformat - Add public tables to env.py of tenant schema
460 lines
19 KiB
HTML
460 lines
19 KiB
HTML
{# Helper functie om veilig de class van een veld te krijgen #}
|
|
{% macro get_field_class(field, default='') %}
|
|
{% if field.render_kw is not none and field.render_kw.get('class') is not none %}
|
|
{{ field.render_kw.get('class') }}
|
|
{% else %}
|
|
{{ default }}
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro render_field_content(field, disabled=False, readonly=False, class='') %}
|
|
{% if field.type == 'BooleanField' %}
|
|
<div class="form-group">
|
|
<div class="form-check form-switch">
|
|
{{ field(class="form-check-input " + class, disabled=disabled, readonly=readonly, required=False) }}
|
|
{% if field.description %}
|
|
{{ field.label(class="form-check-label",
|
|
**{'data-bs-toggle': 'tooltip',
|
|
'data-bs-placement': 'right',
|
|
'title': field.description}) }}
|
|
{% if field.flags.required %}
|
|
<span class="required-field-indicator" aria-hidden="true">
|
|
<i class="material-symbols-outlined required-icon">check_circle</i>
|
|
</span>
|
|
<span class="visually-hidden">Required field</span>
|
|
{% endif %}
|
|
{% else %}
|
|
{{ field.label(class="form-check-label") }}
|
|
{% if field.flags.required %}
|
|
<span class="required-field-indicator" aria-hidden="true">
|
|
<i class="material-symbols-outlined required-icon">check_circle</i>
|
|
</span>
|
|
<span class="visually-hidden">Required field</span>
|
|
{% endif %}
|
|
{% 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}) }}
|
|
{% if field.flags.required %}
|
|
<span class="required-field-indicator" aria-hidden="true">
|
|
<i class="material-symbols-outlined required-icon">check_circle</i>
|
|
</span>
|
|
<span class="visually-hidden">Required field</span>
|
|
{% endif %}
|
|
{% else %}
|
|
{{ field.label(class="form-label") }}
|
|
{% if field.flags.required %}
|
|
<span class="required-field-indicator" aria-hidden="true">
|
|
<i class="material-symbols-outlined required-icon">check_circle</i>
|
|
</span>
|
|
<span class="visually-hidden">Required field</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% set field_class = get_field_class(field) %}
|
|
{% 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, readonly=readonly) }}
|
|
{% elif field.type == 'OrderedListField' or 'ordered-list-field' in field_class %}
|
|
{# Create container for ordered list editor and hide the textarea #}
|
|
<div id="{{ field.id }}-editor" class="ordered-list-editor"></div>
|
|
{{ field(class="form-control d-none " + field_class|trim, disabled=disabled, readonly=readonly) }}
|
|
{% elif field.type == 'SelectField' %}
|
|
{{ field(class="form-control form-select " + class, disabled=disabled, readonly=readonly) }}
|
|
{% else %}
|
|
{{ field(class="form-control " + class, disabled=disabled, readonly=readonly) }}
|
|
{% endif %}
|
|
|
|
{% if field.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{% for error in field.errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
|
|
{% macro render_field(field, disabled_fields=[], readonly_fields=[], exclude_fields=[], class='') %}
|
|
<!-- Debug info -->
|
|
<!-- Field name: {{ field.name }}, Field type: {{ field.__class__.__name__ }} -->
|
|
|
|
{% set disabled = field.name in disabled_fields %}
|
|
{% set readonly = field.name in readonly_fields %}
|
|
{% set exclude_fields = exclude_fields + ['csrf_token', 'submit'] %}
|
|
{% if field.name not in exclude_fields %}
|
|
{{ render_field_content(field, disabled, readonly, class) }}
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro render_included_field(field, disabled_fields=[], readonly_fields=[], include_fields=[], class='') %}
|
|
{% set disabled = field.name in disabled_fields %}
|
|
{% set readonly = field.name in readonly_fields %}
|
|
{% if field.name in include_fields %}
|
|
{{ render_field_content(field, disabled, readonly, class) }}
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro render_table(headers, rows) %}
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center mb-0">
|
|
<thead>
|
|
<tr>
|
|
{% for header in headers %}
|
|
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ header }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
{% for cell in row %}
|
|
<td class="{{ cell.class }}">
|
|
{% if cell.type == 'image' %}
|
|
<div class="d-flex px-2 py-1">
|
|
<div>
|
|
<img src="{{ cell.value }}" class="avatar avatar-sm me-3">
|
|
</div>
|
|
</div>
|
|
{% elif cell.type == 'text' %}
|
|
<p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
|
|
{% elif cell.type == 'badge' %}
|
|
<span class="badge badge-sm {{ cell.badge_class }}">{{ cell.value }}</span>
|
|
{% elif cell.type == 'link' %}
|
|
<a href="{{ cell.href }}" class="text-secondary font-weight-normal text-xs" data-bs-toggle="tooltip" data-original-title="{{ cell.title }}">{{ cell.value }}</a>
|
|
{% else %}
|
|
{{ cell.value }}
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_selectable_table(headers, rows, selectable, id, is_component_selector=False) %}
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center mb-0" id="{{ id }}">
|
|
<thead>
|
|
<tr>
|
|
{% if selectable %}
|
|
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Select</th>
|
|
{% endif %}
|
|
{% for header in headers %}
|
|
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ header }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
{% if selectable %}
|
|
<td>
|
|
<input type="radio"
|
|
name="selected_row"
|
|
value="{{ row[0] }}"
|
|
{% if is_component_selector %}
|
|
data-component-selector="true"
|
|
{% endif %}>
|
|
</td>
|
|
{% endif %}
|
|
{% for cell in row %}
|
|
<td class="{{ cell.class }}">
|
|
{% if cell.type == 'image' %}
|
|
<div class="d-flex px-2 py-1">
|
|
<div>
|
|
<img src="{{ cell.value }}" class="avatar avatar-sm me-3">
|
|
</div>
|
|
</div>
|
|
{% elif cell.type == 'text' %}
|
|
<p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
|
|
{% elif cell.type == 'badge' %}
|
|
<span class="badge badge-sm {{ cell.badge_class }}">{{ cell.value }}</span>
|
|
{% elif cell.type == 'link' %}
|
|
<a href="{{ cell.href }}" class="text-secondary font-weight-normal text-xs" data-bs-toggle="tooltip" data-original-title="{{ cell.title }}">{{ cell.value }}</a>
|
|
{% else %}
|
|
{{ cell.value }}
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_selectable_sortable_table(headers, rows, selectable, id, sort_by, sort_order) %}
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center mb-0" id="{{ id }}">
|
|
<thead>
|
|
<tr>
|
|
{% if selectable %}
|
|
<th>Select</th>
|
|
{% endif %}
|
|
{% for header in headers %}
|
|
<th class="sortable" data-sort="{{ header|lower|replace(' ', '_') }}">
|
|
{{ header }}
|
|
{% if sort_by == header|lower|replace(' ', '_') %}
|
|
{% if sort_order == 'asc' %}
|
|
<i class="fas fa-sort-up"></i>
|
|
{% elif sort_order == 'desc' %}
|
|
<i class="fas fa-sort-down"></i>
|
|
{% endif %}
|
|
{% else %}
|
|
<i class="fas fa-sort"></i>
|
|
{% endif %}
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
{% if selectable %}
|
|
<td><input type="radio" name="selected_row" value="{{ row[0].value }}"></td>
|
|
{% endif %}
|
|
{% for cell in row %}
|
|
<td>{{ cell.value }}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_selectable_sortable_table_with_dict_headers(headers, rows, selectable, id, sort_by, sort_order) %}
|
|
<div class="card">
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center mb-0" id="{{ id }}">
|
|
<thead>
|
|
<tr>
|
|
{% if selectable %}
|
|
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Select</th>
|
|
{% endif %}
|
|
{% for header in headers %}
|
|
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 sortable" data-sort="{{ header['sort'] }}">
|
|
{{ header['text'] }}
|
|
{% if sort_by == header['sort'] %}
|
|
{% if sort_order == 'asc' %}
|
|
<i class="fas fa-sort-up"></i>
|
|
{% elif sort_order == 'desc' %}
|
|
<i class="fas fa-sort-down"></i>
|
|
{% endif %}
|
|
{% else %}
|
|
<i class="fas fa-sort"></i>
|
|
{% endif %}
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
{% if selectable %}
|
|
<td><input type="radio" name="selected_row" value="{{ row[0].value }}"></td>
|
|
{% endif %}
|
|
{% for cell in row %}
|
|
<td>{{ cell.value }}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_accordion(accordion_id, accordion_items, header_title, header_description) %}
|
|
<div class="accordion-1">
|
|
<div class="container">
|
|
<div class="row my-5">
|
|
<div class="col-md-6 mx-auto text-center">
|
|
<h2>{{ header_title }}</h2>
|
|
<p>{{ header_description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-10 mx-auto">
|
|
<div class="accordion" id="{{ accordion_id }}">
|
|
{% for item in accordion_items %}
|
|
<div class="accordion-item mb-3">
|
|
<h5 class="accordion-header" id="heading{{ loop.index }}">
|
|
<button class="accordion-button border-bottom font-weight-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
|
|
{{ item.title }}
|
|
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
|
|
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
|
|
</button>
|
|
</h5>
|
|
<div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#{{ accordion_id }}">
|
|
<div class="accordion-body text-sm opacity-8">
|
|
{{ item.content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_nested_table(headers, rows) %}
|
|
<div class="">
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center mb-0">
|
|
<thead>
|
|
<tr>
|
|
{% for header in headers %}
|
|
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ header }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
{% for cell in row %}
|
|
{% if cell.is_group %}
|
|
<td colspan="{{ cell.colspan }}" class="{{ cell.class }}">
|
|
{{ render_nested_table(cell.headers, cell.sub_rows) }}
|
|
</td>
|
|
{% else %}
|
|
<td class="{{ cell.class }}">
|
|
{% if cell.type == 'image' %}
|
|
<div class="d-flex px-2 py-1">
|
|
<div>
|
|
<img src="{{ cell.value }}" class="avatar avatar-sm me-3">
|
|
</div>
|
|
</div>
|
|
{% elif cell.type == 'text' %}
|
|
<p class="text-xs {{ cell.text_class }}">{{ cell.value }}</p>
|
|
{% elif cell.type == 'badge' %}
|
|
<span class="badge badge-sm {{ cell.badge_class }}">{{ cell.value }}</span>
|
|
{% elif cell.type == 'link' %}
|
|
<a href="{{ cell.href }}" class="text-secondary font-weight-normal text-xs" data-bs-toggle="tooltip" data-original-title="{{ cell.title }}">{{ cell.value }}</a>
|
|
{% else %}
|
|
{{ cell.value }}
|
|
{% endif %}
|
|
</td>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{#{% macro render_pagination(pagination, endpoint) %}#}
|
|
{#<nav aria-label="Page navigation">#}
|
|
{# <ul class="pagination">#}
|
|
{# <!-- Previous Button -->#}
|
|
{# <li class="page-item {{ 'disabled' if not pagination.has_prev }}">#}
|
|
{# <a class="page-link" href="{{ url_for(endpoint, page=pagination.prev_num) if pagination.has_prev else 'javascript:;' }}" tabindex="-1">#}
|
|
{# <span class="material-symbols-outlined">keyboard_double_arrow_left</span>#}
|
|
{# </a>#}
|
|
{# </li>#}
|
|
{##}
|
|
{# <!-- Page Number Buttons -->#}
|
|
{# {% for page in pagination.iter_pages(left_edge=1, left_current=2, right_current=3, right_edge=1) %}#}
|
|
{# <li class="page-item {{ 'active' if page == pagination.page }}">#}
|
|
{# <a class="page-link" href="{{ url_for(endpoint, page=page) }}">#}
|
|
{# {% if page == pagination.page %}#}
|
|
{# <span class="material-symbols-outlined">target</span>#}
|
|
{# {% else %}#}
|
|
{# {{ page }}#}
|
|
{# {% endif %}#}
|
|
{# </a>#}
|
|
{# </li>#}
|
|
{# {% endfor %}#}
|
|
{##}
|
|
{# <!-- Next Button -->#}
|
|
{# <li class="page-item {{ 'disabled' if not pagination.has_next }}">#}
|
|
{# <a class="page-link" href="{{ url_for(endpoint, page=pagination.next_num) if pagination.has_next else 'javascript:;' }}">#}
|
|
{# <span class="material-symbols-outlined">keyboard_double_arrow_right</span>#}
|
|
{# <span class="sr-only">Next</span>#}
|
|
{# </a>#}
|
|
{# </li>#}
|
|
{# </ul>#}
|
|
{#</nav>#}
|
|
{#{% endmacro %}#}
|
|
|
|
{% macro render_pagination(pagination, endpoint) %}
|
|
{# Deze macro is een wrapper rond de globale get_pagination_html functie #}
|
|
{# Ondersteunt nu expliciet een session_id parameter #}
|
|
{{ get_pagination_html(pagination, endpoint) }}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro render_filter_field(field_name, label, options, current_value) %}
|
|
<div class="form-group">
|
|
<label for="{{ field_name }}">{{ label }}</label>
|
|
<select class="form-control" id="{{ field_name }}" name="{{ field_name }}">
|
|
<option value="">All</option>
|
|
{% for value, text in options %}
|
|
<option value="{{ value }}" {% if value == current_value %}selected{% endif %}>{{ text }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_date_filter_field(field_name, label, current_value) %}
|
|
<div class="form-group">
|
|
<label for="{{ field_name }}">{{ label }}</label>
|
|
<input type="date" class="form-control" id="{{ field_name }}" name="{{ field_name }}" value="{{ current_value }}">
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro render_collapsible_section(id, title, content) %}
|
|
<div class="accordion" id="accordion{{ id }}">
|
|
<div class="accordion-item mb-3">
|
|
<h5 class="accordion-header" id="heading{{ id }}">
|
|
<button class="accordion-button border-bottom font-weight-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ id }}" aria-expanded="false" aria-controls="collapse{{ id }}">
|
|
{{ title }}
|
|
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
|
|
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3" aria-hidden="true"></i>
|
|
</button>
|
|
</h5>
|
|
<div id="collapse{{ id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ id }}" data-bs-parent="#accordion{{ id }}">
|
|
<div class="accordion-body text-sm opacity-8">
|
|
{{ content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro debug_to_console(var_name, var_value) %}
|
|
<script>
|
|
console.log('{{ var_name }}:', {{ var_value|tojson }});
|
|
</script>
|
|
{% endmacro %}
|
|
|