django-spire 0.22.3__py3-none-any.whl → 0.23.0__py3-none-any.whl

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

@@ -1,409 +1,221 @@
-<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);
-            }
+{% extends 'django_spire/infinite_scroll/base.html' %}
 
-            return params;
-        },
+{% block scroll_xdata %}
+    responsive_mode: '{{ responsive_mode|default:"collapse" }}',
+    table_id: $id('table'),
 
-        async check_container_height() {
-            let table_container = this.$refs.table_container;
-            let trigger = this.$refs.infinite_scroll_trigger;
+    any_row_has_children: false,
+    average_row_height: 0,
+    column_breakpoints: [],
+    column_count: 0,
+    is_row_open: {},
+    select_all: false,
+    selected_rows: new Set(),
 
-            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();
-            }
-        },
+    {% block table_xdata %}{% endblock %}
 
-        cleanup_loading_state() {
-            this.is_loading = false;
-            this.skeleton_count = 0;
-        },
+    apply_column_breakpoints(row_element) {
+        if (this.responsive_mode !== 'collapse') {
+            return;
+        }
 
-        disconnect_observer() {
-            if (this.observer) {
-                this.observer.disconnect();
-            }
-        },
-
-        async fetch_rows(next_page) {
-            if (!this.endpoint) {
-                return { success: false, error: 'No endpoint provided' };
-            }
+        let cells = Array.from(row_element.children);
 
-            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) : {});
+        cells.forEach((cell, index) => {
+            let breakpoint = this.column_breakpoints[index];
 
-            if (next_page === 1) {
-                this.$dispatch('clear-rows', { table_id: this.table_id });
-                this.$refs.table_body.innerHTML = '';
+            if (breakpoint && cell.tagName === 'TD') {
+                cell.classList.add('d-none', `d-${breakpoint}-table-cell`);
             }
+        });
+    },
 
-            let previous_count = this.loaded_count;
-
-            await view.render_insert_adjacent(this.$refs.table_body, {}, 'beforeend');
-
-            let added = this.loaded_count - previous_count;
+    handle_header_mounted(event) {
+        this.column_count = event.detail.count;
+    },
 
-            return { success: true, added: added };
-        },
+    handle_header_registered(event) {
+        this.column_breakpoints[event.detail.index] = event.detail.breakpoint;
+    },
 
-        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) {
+    handle_row_deselected(event) {
+        if (event.detail.table_id === this.table_id) {
             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);
+    handle_row_mounted(event) {
+        if (event.detail.table_id !== this.table_id) {
+            return;
+        }
 
-                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;
-        },
+        this.loaded_count++;
 
-        handle_toggle_all() {
-            this.select_all = !this.select_all;
+        if (event.detail.row_element) {
+            this.apply_column_breakpoints(event.detail.row_element);
 
-            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 });
+            if (this.average_row_height === 0) {
+                this.average_row_height = event.detail.row_element.offsetHeight;
             }
-        },
+        }
+    },
 
-        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;
+    handle_row_selected(event) {
+        if (event.detail.table_id === this.table_id) {
+            this.selected_rows.add(event.detail.row_id);
+        }
+    },
 
-            if (this.has_next) {
-                setTimeout(() => {
-                    this.setup_observer();
+    handle_row_cleared() {
+        this.loaded_count = 0;
+        this.selected_rows.clear();
+        this.select_all = false;
+    },
 
-                    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;
-            }
+    handle_table_total_count_updated(event) {
+        if (event.detail.table_id !== this.table_id) {
+            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;
-            }
+        this.total_count = event.detail.total_count;
 
-            if (this.sort_column === column) {
-                this.sort_direction = this.sort_direction === 'asc' ? 'desc' : 'asc';
-            } else {
-                this.sort_column = column;
-                this.sort_direction = 'asc';
-            }
+        if (event.detail.batch_size) {
+            this.batch_size = event.detail.batch_size;
+        }
+    },
 
-            await this.refresh_table();
-        },
+    handle_toggle_all() {
+        this.select_all = !this.select_all;
 
-        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()"
+        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="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"
+    @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;')"
         >
-            <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 %}
+            <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 %}
-                    </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_header %}{% endblock %}
 
-                    {% block table_body %}
+                        {% block table_header_end %}
+                            <th style="min-width: 70px; width: 70px;">Actions</th>
+                        {% endblock %}
                     {% endblock %}
+                </tr>
+            </thead>
 
-                    {% block loading_skeleton %}
-                        {% include 'django_spire/table/element/loading_skeleton.html' %}
-                    {% endblock %}
-                </tbody>
-            </table>
+            <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 trigger %}
-                {% include 'django_spire/table/element/trigger.html' %}
+            {% 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>
-    {% endblock %}
 
-    {% block table_footer %}
-        {% include 'django_spire/table/element/footer.html' %}
-    {% endblock %}
-</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/footer.html

@@ -1,17 +1,9 @@
-<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>
+{% extends 'django_spire/infinite_scroll/element/footer.html' %}
 
-    <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 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 table_toolbar_button %}{% endblock %}
-        {% endblock %}
-    </div>
-</div>
+    {% block footer_table_action %}{% endblock %}
+{% endblock %}

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

@@ -1,7 +1,7 @@
 <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:'' }}"
+    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 });"
 >