django-spire 0.21.1__py3-none-any.whl → 0.22.1__py3-none-any.whl

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

@@ -0,0 +1,409 @@
+<div
+    x-data="{
+        current_page: parseInt('{{ current_page|default:0 }}'),
+        endpoint: '{{ endpoint }}',
+        has_next: {{ has_next|default:'true'|yesno:'true,false' }},
+        batch_size: parseInt('{{ batch_size|default:25 }}'),
+        responsive_mode: '{{ responsive_mode|default:"collapse" }}',
+        shared_payload: {},
+        skeleton_row: parseInt('{{ batch_size|default:25 }}'),
+        sort_column: {% if sort_column %}'{{ sort_column }}'{% else %}null{% endif %},
+        sort_direction: '{{ sort_direction|default:'asc' }}',
+        table_id: $id('table'),
+        total_count: parseInt('{{ total_count|default:0 }}'),
+
+        any_row_has_children: false,
+        average_row_height: 0,
+        column_breakpoints: [],
+        column_count: 0,
+        is_loading: false,
+        is_refreshing: false,
+        is_row_open: {},
+        loaded_count: 0,
+        observer: null,
+        select_all: false,
+        selected_rows: new Set(),
+        skeleton_count: 0,
+        prevent_auto_load: false,
+
+        {% block table_xdata %}{% endblock %}
+
+        async init() {
+            await this.$nextTick();
+            this.reset_scroll_position();
+
+            if (this.should_load_initial_data()) {
+                this.skeleton_count = this.skeleton_row;
+                await this.load_more();
+            }
+
+            if (this.has_next) {
+                setTimeout(() => this.setup_observer(), 500);
+            }
+        },
+
+        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`);
+                }
+            });
+        },
+
+        build_request_params(next_page) {
+            let params = new URLSearchParams({
+                page: next_page,
+                batch_size: this.batch_size
+            });
+
+            if (this.sort_column) {
+                params.set('sort', this.sort_column);
+                params.set('direction', this.sort_direction);
+            }
+
+            return params;
+        },
+
+        async check_container_height() {
+            let table_container = this.$refs.table_container;
+            let trigger = this.$refs.infinite_scroll_trigger;
+
+            if (!table_container || !trigger || !this.has_next || this.is_refreshing || this.prevent_auto_load || this.is_loading) {
+                return;
+            }
+
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            let container_rect = table_container.getBoundingClientRect();
+            let trigger_rect = trigger.getBoundingClientRect();
+
+            if (trigger_rect.top <= container_rect.bottom) {
+                await this.load_more();
+            }
+        },
+
+        cleanup_loading_state() {
+            this.is_loading = false;
+            this.skeleton_count = 0;
+        },
+
+        disconnect_observer() {
+            if (this.observer) {
+                this.observer.disconnect();
+            }
+        },
+
+        async fetch_rows(next_page) {
+            if (!this.endpoint) {
+                return { success: false, error: 'No endpoint provided' };
+            }
+
+            let params = this.build_request_params(next_page);
+            let url = `${this.endpoint}?${params}`;
+            let view = new ViewGlue(url, this.$refs.shared_payload ? JSON.parse(this.$refs.shared_payload.textContent) : {});
+
+            if (next_page === 1) {
+                this.$dispatch('clear-rows', { table_id: this.table_id });
+                this.$refs.table_body.innerHTML = '';
+            }
+
+            let previous_count = this.loaded_count;
+
+            await view.render_insert_adjacent(this.$refs.table_body, {}, 'beforeend');
+
+            let added = this.loaded_count - previous_count;
+
+            return { success: true, added: added };
+        },
+
+        get_sort_icon(column) {
+            if (this.sort_column !== column) {
+                return 'bi-chevron-expand';
+            }
+            return this.sort_direction === 'asc' ? 'bi-chevron-up' : 'bi-chevron-down';
+        },
+
+        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) {
+            this.selected_rows.delete(event.detail.row_id);
+        },
+
+        handle_row_mounted(event) {
+            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) {
+            this.selected_rows.add(event.detail.row_id);
+        },
+
+        handle_rows_cleared() {
+            this.loaded_count = 0;
+            this.selected_rows.clear();
+            this.select_all = false;
+        },
+
+        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) {
+            let row_id = event.detail.row_id;
+            this.is_row_open[row_id] = !this.is_row_open[row_id];
+
+            this.$dispatch('toggle-row-state', { row_id: row_id, is_open: this.is_row_open[row_id], table_id: this.table_id });
+        },
+
+        handle_total_count_updated(event) {
+            this.total_count = event.detail.total_count;
+
+            if (event.detail.batch_size) {
+                this.batch_size = event.detail.batch_size;
+            }
+        },
+
+        async load_more() {
+            if (!this.endpoint) {
+                return;
+            }
+
+            this.is_loading = true;
+            this.skeleton_count = this.batch_size;
+
+            if (!this.$refs.table_body) {
+                this.cleanup_loading_state();
+                return;
+            }
+
+            let result = await this.fetch_rows(this.current_page + 1);
+
+            if (!result.success) {
+                this.cleanup_loading_state();
+                return;
+            }
+
+            if (result.added > 0) {
+                this.current_page++;
+            }
+
+            if (result.added < this.batch_size) {
+                this.has_next = false;
+                this.disconnect_observer();
+            }
+
+            this.cleanup_loading_state();
+
+            await this.$nextTick();
+            await this.check_container_height();
+        },
+
+        async refresh_table() {
+            if (this.is_refreshing || this.is_loading) {
+                return;
+            }
+
+            this.disconnect_observer();
+
+            this.prevent_auto_load = true;
+            this.skeleton_count = this.batch_size;
+            this.is_refreshing = true;
+            this.select_all = false;
+
+            await this.$nextTick();
+
+            this.reset_table_state();
+
+            let result = await this.fetch_rows(1);
+            this.update_counts_after_refresh(result);
+
+            await this.$nextTick();
+            await new Promise(resolve => setTimeout(resolve, 150));
+
+            this.is_refreshing = false;
+            this.skeleton_count = 0;
+
+            if (this.has_next) {
+                setTimeout(() => {
+                    this.setup_observer();
+
+                    setTimeout(() => {
+                        this.prevent_auto_load = false;
+                    }, 100);
+                }, 500);
+            }
+        },
+
+        reset_scroll_position() {
+            requestAnimationFrame(() => {
+                if (this.$refs.table_container) {
+                    this.$refs.table_container.scrollTop = 0;
+                }
+            });
+        },
+
+        reset_table_state() {
+            this.current_page = 1;
+            this.has_next = true;
+            this.is_row_open = {};
+        },
+
+        async setup_observer() {
+            let trigger = this.$refs.infinite_scroll_trigger;
+
+            if (!trigger) {
+                return;
+            }
+
+            let options = {
+                root: null,
+                rootMargin: '200px',
+                threshold: 0.01
+            };
+
+            this.observer = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach(async entry => {
+                        if (entry.isIntersecting && this.has_next && !this.is_loading && !this.prevent_auto_load) {
+                            await this.load_more();
+                        }
+                    });
+                },
+                options
+            );
+
+            this.observer.observe(trigger);
+        },
+
+        should_load_initial_data() {
+            return this.loaded_count === 0 && this.current_page === 0;
+        },
+
+        async sort_by(column) {
+            if (this.is_refreshing || this.is_loading) {
+                return;
+            }
+
+            if (this.sort_column === column) {
+                this.sort_direction = this.sort_direction === 'asc' ? 'desc' : 'asc';
+            } else {
+                this.sort_column = column;
+                this.sort_direction = 'asc';
+            }
+
+            await this.refresh_table();
+        },
+
+        update_counts_after_refresh(result) {
+            if (result && result.added < this.batch_size) {
+                this.has_next = false;
+            }
+        },
+    }"
+    @clear-rows.window="if (!$event.detail || $event.detail.table_id === table_id) handle_rows_cleared()"
+    @filter-applied.window="if (!$event.detail || $event.detail.table_id === table_id) refresh_table()"
+    @header-mounted="handle_header_mounted($event)"
+    @header-registered="handle_header_registered($event)"
+    @row-deselected.window="if (!$event.detail || $event.detail.table_id === table_id) handle_row_deselected($event)"
+    @row-mounted.window="if (!$event.detail || $event.detail.table_id === table_id) handle_row_mounted($event)"
+    @row-selected.window="if (!$event.detail || $event.detail.table_id === table_id) handle_row_selected($event)"
+    @toggle-row.window="if (!$event.detail || $event.detail.table_id === table_id) handle_toggle_row($event)"
+    @total-count-updated.window="if (!$event.detail || $event.detail.table_id === table_id) handle_total_count_updated($event)"
+>
+    <script type="application/json" x-ref="shared_payload">{% if shared_payload %}{{ shared_payload|safe }}{% else %}{}{% endif %}</script>
+
+    {% block table_toolbar %}{% endblock %}
+
+    {% block table_container %}
+        <div
+            class="position-relative table-container"
+            style="height: {{ table_height|default:'600px' }}; overflow-y: auto; overflow-x: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;"
+            x-ref="table_container"
+            :data-table-id="table_id"
+        >
+            <table
+                class="table table-striped table-hover 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="z-1 {% 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_refreshing || is_loading"
+                                        @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="table_body"
+                    x-show="!is_refreshing"
+                    :data-table-id="table_id"
+                >
+                    {% block refreshing_skeleton %}
+                        {% include 'django_spire/table/element/refreshing_skeleton.html' %}
+                    {% endblock %}
+
+                    {% block table_body %}
+                    {% endblock %}
+
+                    {% block loading_skeleton %}
+                        {% include 'django_spire/table/element/loading_skeleton.html' %}
+                    {% endblock %}
+                </tbody>
+            </table>
+
+            {% block trigger %}
+                {% include 'django_spire/table/element/trigger.html' %}
+            {% endblock %}
+        </div>
+    {% endblock %}
+
+    {% block table_footer %}
+        {% include 'django_spire/table/element/footer.html' %}
+    {% endblock %}
+</div>

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,17 @@
+<div class="row mt-3">
+    <div class="col-6 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-md-6 text-end" style="min-height: 2rem;">
+        {% block toolbar_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 table_toolbar_button %}{% endblock %}
+        {% endblock %}
+    </div>
+</div>

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 %}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,94 @@
+{% if forloop.first %}
+    <div
+        x-data="{
+            init() {
+                let table_id = this.$el.closest('[data-table-id]').dataset.tableId;
+                this.$dispatch('total-count-updated', { total_count: {{ total_count }}, batch_size: {{ batch_size|default:25 }}, table_id: table_id });
+            }
+        }"
+        style="display: none;"
+    ></div>
+{% endif %}
+
+<tr
+    class="align-middle {% block unified_row_background_colour %}{% endblock %}"
+    data-row-id="{{ row.pk }}"
+    x-data="{
+        row_id: '{{ row.pk }}',
+        table_id: null,
+        is_checked: false,
+        is_open: false,
+        has_children: false,
+
+        init() {
+            this.table_id = this.$el.closest('[data-table-id]').dataset.tableId;
+            this.$dispatch('row-mounted', { row_id: this.row_id, row_element: this.$el, 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_cells %}{% 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>