django-spire 0.23.4__py3-none-any.whl

django_spire/core/templates/django_spire/table/base.html

@@ -0,0 +1,221 @@
+{% extends 'django_spire/infinite_scroll/base.html' %}
+
+{% block scroll_xdata %}
+    responsive_mode: '{{ responsive_mode|default:"collapse" }}',
+    table_id: $id('table'),
+
+    any_row_has_children: false,
+    average_row_height: 0,
+    column_breakpoints: [],
+    column_count: 0,
+    is_row_open: {},
+    select_all: false,
+    selected_rows: new Set(),
+
+    {% block table_xdata %}{% endblock %}
+
+    apply_column_breakpoints(row_element) {
+        if (this.responsive_mode !== 'collapse') {
+            return;
+        }
+
+        let cells = Array.from(row_element.children);
+
+        cells.forEach((cell, index) => {
+            let breakpoint = this.column_breakpoints[index];
+
+            if (breakpoint && cell.tagName === 'TD') {
+                cell.classList.add('d-none', `d-${breakpoint}-table-cell`);
+            }
+        });
+    },
+
+    handle_header_mounted(event) {
+        this.column_count = event.detail.count;
+    },
+
+    handle_header_registered(event) {
+        this.column_breakpoints[event.detail.index] = event.detail.breakpoint;
+    },
+
+    handle_row_deselected(event) {
+        if (event.detail.table_id === this.table_id) {
+            this.selected_rows.delete(event.detail.row_id);
+        }
+    },
+
+    handle_row_mounted(event) {
+        if (event.detail.table_id !== this.table_id) {
+            return;
+        }
+
+        this.loaded_count++;
+
+        if (event.detail.row_element) {
+            this.apply_column_breakpoints(event.detail.row_element);
+
+            if (this.average_row_height === 0) {
+                this.average_row_height = event.detail.row_element.offsetHeight;
+            }
+        }
+    },
+
+    handle_row_selected(event) {
+        if (event.detail.table_id === this.table_id) {
+            this.selected_rows.add(event.detail.row_id);
+        }
+    },
+
+    handle_row_cleared() {
+        this.loaded_count = 0;
+        this.selected_rows.clear();
+        this.select_all = false;
+    },
+
+    handle_table_total_count_updated(event) {
+        if (event.detail.table_id !== this.table_id) {
+            return;
+        }
+
+        this.total_count = event.detail.total_count;
+
+        if (event.detail.batch_size) {
+            this.batch_size = event.detail.batch_size;
+        }
+    },
+
+    handle_toggle_all() {
+        this.select_all = !this.select_all;
+
+        if (this.select_all) {
+            this.$dispatch('select-all-rows', { table_id: this.table_id });
+        } else {
+            this.selected_rows.clear();
+            this.$dispatch('deselect-all-rows', { table_id: this.table_id });
+        }
+    },
+
+    handle_toggle_row(event) {
+        if (event.detail.table_id !== this.table_id) {
+            return;
+        }
+
+        let row_id = event.detail.row_id;
+        this.is_row_open[row_id] = !this.is_row_open[row_id];
+
+        this.$dispatch('toggle-row-state', {
+            is_open: this.is_row_open[row_id],
+            row_id: row_id,
+            table_id: this.table_id
+        });
+    },
+
+    async refresh_table() {
+        await this.refresh();
+    },
+{% endblock %}
+
+{% block handle_item_mounted %}{% endblock %}
+{% block handle_item_cleared %}{% endblock %}
+{% block handle_total_count_updated %}{% endblock %}
+
+{% block scroll_reset_state %}
+    this.selected_rows.clear();
+    this.select_all = false;
+    this.is_row_open = {};
+{% endblock %}
+
+{% block scroll_event %}
+    @header-mounted="handle_header_mounted($event)"
+    @header-registered="handle_header_registered($event)"
+    @row-deselected.window="handle_row_deselected($event)"
+    @row-mounted.window="handle_row_mounted($event)"
+    @row-selected.window="handle_row_selected($event)"
+    @row-cleared.window="if ($event.detail.table_id === table_id) handle_row_cleared()"
+    @table-total-count-updated.window="handle_table_total_count_updated($event)"
+    @toggle-row.window="handle_toggle_row($event)"
+{% endblock %}
+
+{% block scroll_container %}
+    <div
+        class="position-relative table-container"
+        style="height: {{ table_height|default:'600px' }}; overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;"
+        x-ref="scroll_container"
+        :data-table-id="table_id"
+    >
+        <table
+            class="table table-hover table-striped fs-7 w-100 {% block table_class %}{% endblock %}"
+            :style="'min-width: ' + (responsive_mode === 'scroll' ? '100%' : '800px') + '; ' + (any_row_has_children ? 'table-layout: fixed;' : 'table-layout: auto;')"
+        >
+            <thead class="{% block table_head_class %}bg-app-layer-two sticky-top{% endblock %}">
+                <tr
+                    x-init="column_count = $el.children.length; $dispatch('header-mounted', { count: column_count })"
+                    x-ref="header_row"
+                >
+                    {% block table_header_container %}
+                        {% block table_header_start %}
+                            <th style="min-width: 30px; width: 30px;">
+                                <input
+                                    :checked="select_all"
+                                    :disabled="is_loading || is_refreshing"
+                                    @change="handle_toggle_all()"
+                                    type="checkbox"
+                                >
+                            </th>
+
+                            <th style="min-width: 30px; width: 30px;"></th>
+                        {% endblock %}
+
+                        {% block table_header %}{% endblock %}
+
+                        {% block table_header_end %}
+                            <th style="min-width: 70px; width: 70px;">Actions</th>
+                        {% endblock %}
+                    {% endblock %}
+                </tr>
+            </thead>
+
+            <tbody
+                x-ref="content_container"
+                x-show="!is_refreshing"
+                :data-table-id="table_id"
+            >
+                {% block table_body %}{% endblock %}
+            </tbody>
+
+            {% block refreshing_skeleton %}
+                {% include 'django_spire/table/element/refreshing_skeleton.html' %}
+            {% endblock %}
+
+            {% block loading_skeleton %}
+                {% include 'django_spire/table/element/loading_skeleton.html' %}
+            {% endblock %}
+
+            {% block no_data %}
+                {% include 'django_spire/table/item/no_data_item.html' %}
+            {% endblock %}
+        </table>
+
+        {% block trigger %}
+            {% include 'django_spire/table/element/trigger.html' %}
+        {% endblock %}
+    </div>
+{% endblock %}
+
+{% block scroll_footer %}
+    <div class="row mt-3">
+        <div class="col text-start">
+            <span class="fs-7 text-app-secondary">
+                Showing <span x-text="loaded_count"></span> of <span x-text="total_count"></span> rows
+            </span>
+        </div>
+
+        <div class="col-auto text-end">
+            <span class="fs-7 text-app-secondary" x-cloak x-show="selected_rows.size > 0">
+                <span x-text="selected_rows.size"></span> selected
+            </span>
+
+            {% block footer_table_action %}{% endblock %}
+        </div>
+    </div>
+{% endblock %}

django_spire/core/templates/django_spire/table/element/child_row.html

@@ -0,0 +1,59 @@
+<div
+    class="{{ wrapper_class|default:'' }}"
+    x-data="{
+        is_loading: false,
+        is_open: false,
+        has_loaded: false,
+        row_id: null,
+        endpoint: '{{ child_endpoint }}',
+        table_id: null,
+
+        init() {
+            this.table_id = this.$el.closest('[data-table-id]').dataset.tableId;
+
+            let parent = this.$el.closest('[data-row-id]');
+            this.row_id = parent ? parent.dataset.rowId : null;
+
+            this.$nextTick(() => {
+                if (this.row_id) {
+                    this.$dispatch('child-registered', { row_id: this.row_id, table_id: this.table_id });
+                }
+            });
+        },
+
+        async load_children() {
+            if (this.has_loaded || this.is_loading) return;
+
+            this.is_loading = true;
+
+            let view = new ViewGlue(this.endpoint, {});
+            await view.render_inner(this.$refs.child_container);
+
+            this.has_loaded = true;
+            this.is_loading = false;
+        },
+
+        handle_toggle_row_state(event) {
+            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
+                this.is_open = event.detail.is_open;
+
+                if (this.is_open) {
+                    this.load_children();
+                }
+            }
+        }
+    }"
+    @toggle-row-state.window="handle_toggle_row_state($event)"
+    x-show="is_open"
+    x-cloak
+>
+    <div x-show="is_loading" class="p-3">
+        <div class="mb-2">
+            <div class="skeleton-box" style="height: 20px; width: 80%; margin-left: 20px;"></div>
+            <div class="skeleton-box" style="height: 20px; width: 80%; margin-left: 20px;"></div>
+            <div class="skeleton-box" style="height: 20px; width: 80%; margin-left: 20px;"></div>
+        </div>
+    </div>
+
+    <div x-show="!is_loading" x-ref="child_container"></div>
+</div>

django_spire/core/templates/django_spire/table/element/expandable_row.html

@@ -0,0 +1,45 @@
+<div
+    class="{% block row_class %}{% endblock %}"
+    x-data="{
+        row_id: null,
+        table_id: null,
+        is_open: false,
+        has_children: false,
+
+        init() {
+            this.row_id = this.$id('expandable-row');
+            this.$el.setAttribute('data-row-id', this.row_id);
+            this.table_id = this.$el.closest('[data-table-id]').dataset.tableId;
+        },
+
+        handle_child_registered(event) {
+            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
+                this.has_children = true;
+            }
+        },
+
+        handle_toggle_row_state(event) {
+            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
+                this.is_open = event.detail.is_open;
+            }
+        }
+    }"
+    @child-registered.window="handle_child_registered($event)"
+    @toggle-row-state.window="handle_toggle_row_state($event)"
+>
+    <div class="d-flex align-items-center gap-2">
+        <template x-if="has_children">
+            <i
+                :class="is_open ? 'bi-chevron-down' : 'bi-chevron-right'"
+                @click="$dispatch('toggle-row', { row_id: row_id, table_id: table_id })"
+                class="bi cursor-pointer text-primary"
+            ></i>
+        </template>
+
+        {% block row_header %}{% endblock %}
+    </div>
+
+    {% block row_content %}{% endblock %}
+
+    {% block child_row %}{% endblock %}
+</div>

django_spire/core/templates/django_spire/table/element/footer.html

@@ -0,0 +1,9 @@
+{% extends 'django_spire/infinite_scroll/element/footer.html' %}
+
+{% block footer_action %}
+    <span class="fs-7 text-app-secondary" x-cloak x-show="selected_rows.size > 0">
+        <span x-text="selected_rows.size"></span> selected
+    </span>
+
+    {% block footer_table_action %}{% endblock %}
+{% endblock %}

django_spire/core/templates/django_spire/table/element/header.html

@@ -0,0 +1,9 @@
+<th
+    data-breakpoint="{{ breakpoint|default:'' }}"
+    {% if sort_key %}@click="sort_by('{{ sort_key }}')"{% endif %}
+    class="{% if sort_key %}cursor-pointer{% endif %} {% if breakpoint and responsive_mode != 'scroll' %}d-none d-{{ breakpoint }}-table-cell{% endif %} user-select-none {{ extra_class|default:'' }}"
+    style="{{ style|default:'' }}"
+    x-init="let index = Array.from($el.parentElement.children).indexOf($el); $dispatch('header-registered', { index: index, breakpoint: '{{ breakpoint|default:'' }}' || null });"
+>
+    {{ label }} {% if sort_key %}<i :class="get_sort_icon('{{ sort_key }}')" class="bi"></i>{% endif %}
+</th>

django_spire/core/templates/django_spire/table/element/loading_skeleton.html

@@ -0,0 +1,13 @@
+<tbody x-cloak x-show="is_loading && !is_refreshing">
+    <template x-if="column_count > 0">
+        <template x-for="i in skeleton_count" :key="i">
+            <tr class="skeleton-row" :style="average_row_height > 0 ? `height: ${average_row_height}px;` : ''">
+                <template x-for="j in column_count" :key="j">
+                    <td class="align-middle">
+                        <div class="skeleton-box" style="height: 25px; width: 90%;"></div>
+                    </td>
+                </template>
+            </tr>
+        </template>
+    </template>
+</tbody>

django_spire/core/templates/django_spire/table/element/refreshing_skeleton.html

@@ -0,0 +1,13 @@
+<tbody x-cloak x-show="is_refreshing">
+    <template x-if="column_count > 0">
+        <template x-for="i in skeleton_count" :key="i">
+            <tr class="skeleton-row" :style="average_row_height > 0 ? `height: ${average_row_height}px;` : ''">
+                <template x-for="j in column_count" :key="j">
+                    <td class="align-middle">
+                        <div class="skeleton-box" style="height: 25px; width: 90%;"></div>
+                    </td>
+                </template>
+            </tr>
+        </template>
+    </template>
+</tbody>

django_spire/core/templates/django_spire/table/element/row.html

@@ -0,0 +1,102 @@
+{% if forloop.first %}
+    <div
+        x-data="{
+            init() {
+                let table_id = this.$el.closest('[data-table-id]').dataset.tableId;
+                this.$dispatch('table-total-count-updated', {
+                    batch_size: {{ batch_size|default:25 }},
+                    table_id: table_id,
+                    total_count: {{ total_count }}
+                });
+            }
+        }"
+        style="display: none;"
+    ></div>
+{% endif %}
+
+<tr
+    class="align-middle {% block row_class %}{% endblock %}"
+    data-row-id="{{ row.pk }}"
+    x-data="{
+        has_children: false,
+        is_checked: false,
+        is_open: false,
+        row_id: '{{ row.pk }}',
+        table_id: null,
+
+        init() {
+            this.table_id = this.$el.closest('[data-table-id]').dataset.tableId;
+            this.$dispatch('row-mounted', {
+                row_element: this.$el,
+                row_id: this.row_id,
+                table_id: this.table_id
+            });
+        },
+
+        handle_checkbox_change() {
+            this.is_checked = !this.is_checked;
+
+            if (this.is_checked) {
+                this.$dispatch('row-selected', { row_id: this.row_id, table_id: this.table_id });
+            } else {
+                this.$dispatch('row-deselected', { row_id: this.row_id, table_id: this.table_id });
+            }
+        },
+
+        handle_child_registered(event) {
+            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
+                this.has_children = true;
+            }
+        },
+
+        handle_deselect_all_rows(event) {
+            if (!event.detail || event.detail.table_id === this.table_id) {
+                this.is_checked = false;
+                this.$dispatch('row-deselected', { row_id: this.row_id, table_id: this.table_id });
+            }
+        },
+
+        handle_select_all_rows(event) {
+            if (!event.detail || event.detail.table_id === this.table_id) {
+                this.is_checked = true;
+                this.$dispatch('row-selected', { row_id: this.row_id, table_id: this.table_id });
+            }
+        },
+
+        handle_toggle_row_state(event) {
+            if (event.detail.row_id === this.row_id && (!event.detail.table_id || event.detail.table_id === this.table_id)) {
+                this.is_open = event.detail.is_open;
+            }
+        },
+    }"
+    @child-registered.window="handle_child_registered($event)"
+    @deselect-all-rows.window="handle_deselect_all_rows($event)"
+    @select-all-rows.window="handle_select_all_rows($event)"
+    @toggle-row-state.window="handle_toggle_row_state($event)"
+>
+    <td>
+        <input
+            :checked="is_checked"
+            @change="handle_checkbox_change()"
+            type="checkbox"
+        >
+    </td>
+
+    <td>
+        <template x-if="has_children">
+            <i
+                :class="is_open ? 'bi-chevron-down' : 'bi-chevron-right'"
+                @click="$dispatch('toggle-row', { row_id: row_id, table_id: table_id })"
+                class="bi cursor-pointer"
+            ></i>
+        </template>
+    </td>
+
+    {% block table_cell %}{% endblock %}
+</tr>
+
+<tr class="align-middle" data-row-id="{{ row.pk }}">
+    <td class="p-0" x-effect="$el.setAttribute('colspan', column_count)">
+        {% block child_row %}{% endblock %}
+    </td>
+</tr>

django_spire/core/templates/django_spire/table/element/trigger.html

@@ -0,0 +1 @@
+<div style="height: 10px;" x-ref="infinite_scroll_trigger"></div>

django_spire/core/templates/django_spire/table/item/no_data_item.html

@@ -0,0 +1,11 @@
+<tbody x-show="!is_loading && !is_refreshing && loaded_count === 0 && total_count === 0" x-transition style="display: none;">
+    <tr>
+        <td class="text-center text-app-secondary py-4" x-effect="$el.setAttribute('colspan', column_count)">
+            <span class="fs-6">
+                {% block table_no_data %}
+                    No data available
+                {% endblock %}
+            </span>
+        </td>
+    </tr>
+</tbody>

django_spire/core/templates/django_spire/tag/element/tag.html

@@ -0,0 +1 @@
+<span class="badge rounded-pill fw-normal border border-app-primary text-app-primary">{{ tag|title }} {{ weight|default:1 }}</span>

django_spire/core/templates/django_spire/wizard/wizard.html

@@ -0,0 +1,66 @@
+<div
+    x-data="{
+        current_page: 1,
+        total_pages: 0,
+        wizard_id: '{% block wizard_id %}{% endblock %}',
+
+        init() {
+            this.total_pages = this.$refs.wizard_body.querySelectorAll('.wizard-page').length;
+            this.current_page = Math.min(Math.max(this.current_page, 1), this.total_pages);
+        },
+
+        next_page() {
+            if (this.current_page < this.total_pages) {
+                this.current_page++;
+            }
+        },
+
+        previous_page() {
+            if (this.current_page > 1) {
+                this.current_page--;
+            }
+        }
+    }"
+>
+    <div class="wizard-body my-4" x-ref="wizard_body">
+        {% block wizard_pages %}
+        {% endblock %}
+    </div>
+
+    {% block wizard_pagination %}
+        <div class="wizard-footer d-flex justify-content-between align-items-center pt-4">
+            {% block wizard_back_button %}
+                <button type="button" class="btn btn-app-secondary" @click="previous_page()" :disabled="current_page === 1">
+                    Back
+                </button>
+            {% endblock %}
+
+            <div class="wizard-page-indicator no-select text-muted">
+                {% block wizard_page_indicator %}
+                    Page <span x-text="current_page"></span> of <span x-text="total_pages"></span>
+                {% endblock %}
+            </div>
+
+            {% block wizard_next_button %}
+                <template x-if="current_page < total_pages">
+                    <button type="button" class="btn btn-app-primary" @click="next_page()">Next</button>
+                </template>
+            {% endblock %}
+
+            {% block wizard_submit_button %}
+                <template x-if="current_page === total_pages">
+                    <button type="button" class="btn btn-app-success">Submit</button>
+                </template>
+            {% endblock %}
+        </div>
+
+        {% block wizard_progress_bar %}
+            <div class="progress my-2" style="height: 5px;">
+                <div
+                    class="progress-bar bg-app-primary"
+                    :style="{ width: (current_page / total_pages * 100) + '%' }"
+                ></div>
+            </div>
+        {% endblock %}
+    {% endblock %}
+</div>

django_spire/core/templates/django_spire/wizard/wizard_page.html

@@ -0,0 +1,3 @@
+<div class="wizard-page">
+    {% block wizard_page %}{% endblock %}
+</div>

django_spire/core/templatetags/json.py

@@ -0,0 +1,14 @@
+from typing import Sequence
+
+from django import template
+import json
+
+register = template.Library()
+
+
+@register.filter(name='to_json')
+def to_json(value: dict | Sequence) -> str:
+    try:
+        return json.dumps(value)
+    except (TypeError, ValueError) as e:
+        return ''

django_spire/core/templatetags/message.py

@@ -0,0 +1,24 @@
+from __future__ import annotations
+
+import json
+import random
+import string
+
+from django import template
+
+
+register = template.Library()
+
+
+@register.simple_tag()
+def django_messages_to_json(messages):
+    message_list = []
+
+    for message in messages:
+        message_list.append({
+            'id': ''.join(random.choice(string.ascii_letters) for _ in range(8)),
+            'message': message.message,
+            'type': message.level_tag
+        })
+
+    return json.dumps(message_list)