django-spire 0.22.0__tar.gz → 0.22.1__tar.gz

{django_spire-0.22.0 → django_spire-0.22.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: django-spire
-Version: 0.22.0
+Version: 0.22.1
 Summary: A project for Django Spire
 Author-email: Brayden Carlson <braydenc@stratusadv.com>, Nathan Johnson <nathanj@stratusadv.com>
 License: Copyright (c) 2024 Stratus Advanced Technologies and Contributors.

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/consts.py

@@ -1,4 +1,4 @@
-__VERSION__ = '0.22.0'
+__VERSION__ = '0.22.1'
 
 MAINTENANCE_MODE_SETTINGS_NAME = 'MAINTENANCE_MODE'
 

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/contrib/generic_views/portal_views.py

@@ -270,6 +270,49 @@ def model_form_view(
     )
 
 
+def table_view(
+    request: WSGIRequest,
+    *,
+    queryset: QuerySet,
+    queryset_name: str,
+    template: str,
+    context_data: dict[str, Any] | None = None
+) -> TemplateResponse:
+    if context_data is None:
+        context_data = {}
+
+    default_batch_size = 25
+
+    page = int(request.GET.get('page', 1))
+
+    batch_size = (
+        context_data.get('batch_size')
+        if 'batch_size' in context_data
+        else request.GET.get('batch_size', default_batch_size)
+    )
+
+    batch_size = int(batch_size)
+    offset = (page - 1) * batch_size
+
+    total_count = queryset.count()
+    object_list = queryset[offset:offset + batch_size]
+    has_next = offset + batch_size < total_count
+
+    base_context_data = {
+        queryset_name: object_list,
+        'has_next': has_next,
+        'total_count': total_count,
+    }
+
+    context_data.update(base_context_data)
+
+    return TemplateResponse(
+        request,
+        context=context_data,
+        template=template
+    )
+
+
 def template_view(
     request: WSGIRequest,
     page_title: str,

django_spire-0.22.1/django_spire/core/models.py

@@ -0,0 +1,9 @@
+from __future__ import annotations
+
+# These imports are for the migrations to work as a single app "django_spire_core"
+
+from django_spire.core.tag import models
+
+# Must assert to stop unused import removals.
+
+assert models

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/core/static/django_spire/css/bootstrap-extension.css

@@ -378,6 +378,47 @@ h1, h2, h3, h4, h5, h6 {
     transform: translateX(0);
 }
 
+.skeleton-box {
+    background: linear-gradient(
+        90deg,
+        rgba(var(--bs-secondary-rgb), 0.1) 0%,
+        rgba(var(--bs-secondary-rgb), 0.2) 50%,
+        rgba(var(--bs-secondary-rgb), 0.1) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+@keyframes skeleton-loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+.skeleton-row {
+    pointer-events: none;
+    user-select: none;
+}
+
+.table tbody {
+    transition: opacity 0.15s ease-in-out;
+}
+
+.table-fixed {
+    table-layout: fixed;
+}
+
+.table-fixed th,
+.table-fixed td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .text-200 {
     font-weight: 200 !important;
 }

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/core/static/django_spire/css/bootstrap-override.css

@@ -135,11 +135,11 @@
     --bs-popover-header-bg: var(--app-layer-two);
     --bs-popover-header-color: var(--app-default-text-color);
 
-    --bs-table-bg: transparent;
-    --bs-table-border-color: var(--app-layer-three);
+    --bs-table-bg: var(--app-table-row-color);
+    --bs-table-border-color: var(--bs-border-color);
     --bs-table-color: var(--app-default-text-color);
-    --bs-table-hover-bg: var(--app-layer-two);
-    --bs-table-striped-bg: var(--app-layer-two);
+    --bs-table-hover-bg: var(--app-table-row-hover-color);
+    --bs-table-striped-bg: var(--app-table-row-alt-color);
 
     --bs-tooltip-bg: var(--app-dark);
     --bs-tooltip-color: var(--app-light);
@@ -263,6 +263,30 @@
     background-color: var(--app-primary);
 }
 
+.table > :not(caption) > * > * {
+    color: var(--app-default-text-color);
+}
+
+.table-striped tbody tr:nth-of-type(4n+1),
+.table-striped tbody tr:nth-of-type(4n+2) {
+    --bs-table-bg-type: var(--app-table-row-alt-color);
+    background-color: var(--app-table-row-alt-color);
+    color: var(--app-default-text-color);
+}
+
+.table-striped tbody tr:nth-of-type(4n+3),
+.table-striped tbody tr:nth-of-type(4n+4) {
+    --bs-table-bg-type: color-mix(in srgb, var(--app-secondary) 10%, transparent);
+    background-color: color-mix(in srgb, var(--app-secondary) 10%, transparent);
+    color: var(--app-default-text-color);
+}
+
+.table-hover > tbody > tr:hover > * {
+    --bs-table-bg-state: var(--app-table-row-hover-color);
+    background-color: var(--app-table-row-hover-color);
+    color: var(--app-default-text-color);
+}
+
 .ce-block__content [data-placeholder]:empty::before,
 .ce-block__content [data-placeholder][data-empty="true"]::before {
     color: var(--app-primary) !important;

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/core/tag/models.py

@@ -35,4 +35,3 @@ class Tag(models.Model):
         db_table = 'django_spire_core_tag'
         verbose_name = 'Tag'
         verbose_name_plural = 'Tags'
-

django_spire-0.22.1/django_spire/core/templates/django_spire/dropdown/ellipsis_table_dropdown.html

@@ -0,0 +1,26 @@
+{% extends 'django_spire/dropdown/dropdown.html' %}
+
+{% block dropdown_position %}start-0 top-100{% endblock %}
+
+{% block dropdown_trigger %}
+    <span
+        class="bi bi-three-dots-vertical px-1 {% block ellipsis_class %}{% endblock %}"
+        style="overflow: visible;"
+        x-bind="trigger"
+    >
+    </span>
+{% endblock %}
+
+{% block dropdown_content %}
+    {% if view_url %}
+        {% include 'django_spire/dropdown/element/ellipsis_dropdown_modal_link_element.html' with view_url=view_url link_text='View' %}
+    {% endif %}
+
+    {% if edit_url %}
+        {% include 'django_spire/dropdown/element/ellipsis_dropdown_modal_link_element.html' with view_url=edit_url link_text='Edit' %}
+    {% endif %}
+
+    {% if delete_url %}
+        {% include 'django_spire/dropdown/element/ellipsis_dropdown_modal_link_element.html' with view_url=delete_url link_text='Delete' link_css='text-app-danger' %}
+    {% endif %}
+{% endblock %}

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/core/templates/django_spire/filtering/form/base_session_filter_form.html

@@ -1,7 +1,7 @@
 <form
-        method="get"
-        action="{% block session_filter_url %}{% endblock %}"
-        class="row border-bottom"
+    method="get"
+    action="{% block session_filter_url %}{% endblock %}"
+    class="row border-bottom"
 >
     <div class="col-12">
         <input type="text" hidden value="{% block session_filter_key %}{% endblock %}" name="session_filter_key">
@@ -9,7 +9,7 @@
         {% block filter_content %}{% endblock %}
 
         {% block filter_buttons %}
-            <div class="py-2">
+            <div class="pt-2 pb-5">
                 <input
                     type="submit"
                     name="action"

{django_spire-0.22.0 → django_spire-0.22.1}/django_spire/core/templates/django_spire/modal/content/dispatch_modal_delete_confirmation_content.html

@@ -1,7 +1,7 @@
 {% extends 'django_spire/modal/content/modal_title_content.html' %}
 
 {% block modal_content_title %}
-	{{ form_title }}
+	{{ form_title|truncatechars:75 }}
 {% endblock %}
 
 {% block modal_content_content %}
@@ -16,14 +16,16 @@
         }"
     >
         {% csrf_token %}
+
         {{ form_description }}
 
         {% include 'django_glue/form/field/input_field.html' with glue_field='should_delete' %}
 
         <div class="d-flex mt-3">
-            {% include 'django_spire/contrib/form/button/form_submit_button.html' with button_text='Delete' button_class='btn-app-danger btn-sm shadow-sm' %}
-            <span class="ms-2" @click="close_modal()" >
-                {% include 'django_spire/button/secondary_button.html' with button_text='Cancel' %}
+            {% include 'django_spire/contrib/form/button/form_submit_button.html' with button_text='Delete' button_class='btn-app-danger shadow-sm' %}
+
+            <span class="ms-2" @click="close_modal()">
+                {% include 'django_spire/button/secondary_button.html' with button_text='Cancel' button_class='btn' %}
             </span>
         </div>
     </form>

django_spire-0.22.1/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>