zrb 1.2.1__py3-none-any.whl → 1.3.0__py3-none-any.whl

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/content/auth/user.html

@@ -0,0 +1,377 @@
+<link rel="stylesheet" href="/static/crud/style.css">
+
+<main id="crud-app" 
+    class="container"
+    data-page-size='{{ page_size | tojson }}'
+    data-page='{{ page | tojson }}'
+    data-sort='{{ sort | tojson }}'
+    data-filter='{{ filter | tojson }}'
+    data-allow-create='{{ allow_create | tojson }}'
+    data-allow-update='{{ allow_update | tojson }}'
+    data-allow-delete='{{ allow_delete | tojson }}'>
+    <article>
+        <h1>User</h1>
+
+        <fieldset id="crud-table-fieldset" user="group" class="grid">
+            <input id="crud-filter-input" placeholder="🔍 Filter" aria-label="Search" />
+            <button id="crud-search-button">🔍 Search</button>
+            {% if allow_create %}
+            <button id="crud-show-create-button" class="contrast">➕ Add</button>
+            {% endif %}
+        </fieldset>
+
+        <div id="crud-table-container">
+            <table id="crud-table" class="striped">
+                <thead>
+                    <tr>
+                        <th scope="col">ID</th>
+                        <th scope="col">Username</th>
+                        <th scope="col">Status</th>
+                        <th scope="col">Roles/Permissions</th>
+                        {% if allow_update or allow_delete %}
+                        <th scope="col">Actions</th>
+                        {% endif %}
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+        <div id="crud-pagination"></div>
+
+        {% if allow_create %}
+        <dialog id="crud-create-form-dialog">
+            <article>
+                <h2>New User</h2>
+                <form id="crud-create-form">
+                    <label>
+                        Username:
+                        <input type="text" name="username" required>
+                    </label>
+                    <label>
+                        Password:
+                        <input type="password" name="password" required>
+                    </label>
+                    <label>
+                        Active:
+                        <input type="checkbox" name="active" value="true">
+                    </label>
+                    <label>
+                        Role Names:
+                        <textarea name="role_names" required>[]</textarea>
+                    </label>
+                    <footer>
+                        <button id="crud-create-button">➕ Save</button>
+                        <button id="crud-cancel-create-button" class="secondary">❌ Cancel</button>
+                    </footer>
+                </form>
+            </article>
+        </dialog>
+        {% endif %}
+
+        {% if allow_update %}
+        <dialog id="crud-update-form-dialog">
+            <article>
+                <h2>Update User</h2>
+                <form id="crud-update-form">
+                    <label>
+                        Username:
+                        <input type="text" name="username" required>
+                    </label>
+                    <label>
+                        Password:
+                        <input type="password" name="password">
+                    </label>
+                    <label>
+                        Active:
+                        <input type="checkbox" name="active" value="true">
+                    </label>
+                    <label>
+                        Role Names:
+                        <textarea name="role_names" required></textarea>
+                    </label>
+                    <footer>
+                        <button id="crud-update-button">✏️ Save</button>
+                        <button id="crud-cancel-update-button" class="secondary">❌ Cancel</button>
+                    </footer>
+                </form>
+            </article>
+        </dialog>
+        {% endif %}
+
+        {% if allow_delete %}
+        <dialog id="crud-delete-form-dialog">
+            <article>
+                <h2>Delete User</h2>
+                <form id="crud-delete-form">
+                    <label>
+                        Username:
+                        <input type="text" name="username" readonly>
+                    </label>
+                    <label>
+                        Active:
+                        <input type="checkbox" name="active" value="true" readonly>
+                    </label>
+                    <label>
+                        Role Names:
+                        <textarea name="role_names" readonly></textarea>
+                    </label>
+                    <footer>
+                        <button id="crud-cancel-delete-button" class="secondary">❌ Cancel</button>
+                        <button id="crud-delete-button">🗑️ Delete</button>
+                    </footer>
+                </form>
+            </article>
+        </dialog>
+        {% endif %}
+
+        <dialog id="crud-alert-dialog">
+            <article>
+                <h2 id="crud-alert-title">Error</h2>
+                <pre id="crud-alert-message"></pre>
+                <footer>
+                    <button id="crud-alert-close-button">Close</button>
+                </footer>
+            </article>
+        </dialog>
+    </article>
+</main>
+
+<script src="/static/crud/util.js"></script>
+<script>
+    class CrudApp {
+        constructor(apiUrl, initialState) {
+            this.apiUrl = apiUrl;
+            this.state = { ...initialState };
+            this.init();
+        }
+
+        init() {
+            // Cache common elements
+            this.filterInput = document.getElementById("crud-filter-input");
+            this.searchButton = document.getElementById("crud-search-button");
+            this.filterInput.value = this.state.filter;
+
+            this.filterInput.addEventListener("change", (e) => this.applySearch(e));
+            this.searchButton.addEventListener("click", (e) => this.applySearch(e));
+
+            // Attach optional events if elements exist
+            this.attachEvent("crud-show-create-button", this.showCreateForm.bind(this));
+            this.attachEvent("crud-create-button", this.createRow.bind(this));
+            this.attachEvent("crud-cancel-create-button", this.hideCreateForm.bind(this));
+            this.attachEvent("crud-update-button", this.updateRow.bind(this));
+            this.attachEvent("crud-cancel-update-button", this.hideUpdateForm.bind(this));
+            this.attachEvent("crud-delete-button", this.deleteRow.bind(this));
+            this.attachEvent("crud-cancel-delete-button", this.hideDeleteForm.bind(this));
+            this.attachEvent("crud-alert-close-button", this.hideAlert.bind(this));
+
+            // Initial data fetch
+            this.fetchRows(this.state.currentPage);
+        }
+
+        attachEvent(elementId, handler) {
+            const el = document.getElementById(elementId);
+            if (el) el.addEventListener("click", handler);
+        }
+
+        async applySearch(event) {
+            if (event) event.preventDefault();
+            this.state.filter = this.filterInput.value;
+            await this.fetchRows(this.state.currentPage);
+        }
+
+        async fetchRows(page = null) {
+            try {
+                if (page !== null) {
+                    this.state.currentPage = page;
+                }
+                const defaultSearchColumn = "username";
+                // Update address bar
+                const searchParam = CRUD_UTIL.getSearchParam(this.state, defaultSearchColumn, false);
+                const newUrl = `${window.location.pathname}?${searchParam}`;
+                window.history.pushState({ path: newUrl }, "", newUrl);
+
+                // Fetch table data
+                const apiSearchParam = CRUD_UTIL.getSearchParam(this.state, defaultSearchColumn, true);
+                const result = await UTIL.fetchAPI(`${this.apiUrl}?${apiSearchParam}`, { method: "GET" });
+                this.renderRows(result.data);
+                const crudPagination = document.getElementById("crud-pagination");
+                CRUD_UTIL.renderPagination(crudPagination, this, result.count);
+            } catch (error) {
+                console.error("Error fetching items:", error);
+            }
+        }
+
+        renderRows(rows) {
+            const tableBody = document.querySelector("#crud-table tbody");
+            let tableBodyHTML = "";
+            rows.forEach(row => {
+                const rowComponents = this.getRowComponents(row);
+                let actionColumn = "";
+                if (this.state.allowUpdate) {
+                    actionColumn += `<button class="contrast" data-id="${row.id}" data-action="edit">✏️ Edit</button>`;
+                }
+                if (this.state.allowDelete) {
+                    actionColumn += `<button class="secondary" data-id="${row.id}" data-action="delete">🗑️ Delete</button>`;
+                }
+                if (this.state.allowUpdate || this.state.allowDelete) {
+                    actionColumn = `<td><fieldset class="grid" user="group">${actionColumn}</fieldset></td>`;
+                }
+                tableBodyHTML += `<tr>${rowComponents.join('')}${actionColumn}</tr>`;
+            });
+            tableBody.innerHTML = tableBodyHTML;
+            this.attachRowActionListeners();
+        }
+
+        attachRowActionListeners() {
+            document.querySelectorAll('button[data-action="edit"]').forEach(button => {
+                button.addEventListener("click", () => {
+                    this.showUpdateForm(button.getAttribute("data-id"));
+                });
+            });
+            document.querySelectorAll('button[data-action="delete"]').forEach(button => {
+                button.addEventListener("click", () => {
+                    this.showDeleteForm(button.getAttribute("data-id"));
+                });
+            });
+        }
+
+        getRowComponents(row) {
+            const rowComponents = [
+                `<td>${row.id}</td>`,
+                `<td>${row.username}</td>`,
+                `<td>${row.active ? "Active" : "Inactive"}</td>`,
+                `<td>
+                    Roles: ${row.role_names.join(", ")}
+                    <br />
+                    Permissions: ${row.permission_names.join(", ")}
+                </td>`
+            ];
+            return rowComponents;
+        }
+
+        // Create methods
+        showCreateForm(event = null) {
+            if (event) event.preventDefault();
+            const createDialog = document.getElementById("crud-create-form-dialog");
+            const createForm = document.getElementById("crud-create-form");
+            UTIL.clearFormData(createForm);
+            createDialog.showModal();
+        }
+
+        async createRow(event = null) {
+            if (event) event.preventDefault();
+            try {
+                const createForm = document.getElementById("crud-create-form");
+                const formData = UTIL.getFormData(createForm);
+                formData.role_names = JSON.parse(formData.role_names);
+                await UTIL.fetchAPI(this.apiUrl, { method: "POST", body: JSON.stringify(formData) });
+                await this.fetchRows();
+                this.hideCreateForm();
+            } catch (error) {
+                console.error(error);
+                this.showAlert("Create User Error", error);
+            }
+        }
+
+        hideCreateForm(event = null) {
+            if (event) event.preventDefault();
+            document.getElementById("crud-create-form-dialog").close();
+        }
+
+        // Update methods
+        async showUpdateForm(id) {
+            this.state.updatedRowId = id;
+            const updateDialog = document.getElementById("crud-update-form-dialog");
+            const updateForm = document.getElementById("crud-update-form");
+            const rawFormData = await UTIL.fetchAPI(`${this.apiUrl}/${id}`, { method: "GET" });
+            const { role_names, ...formData } = rawFormData;
+            UTIL.setFormData(updateForm, formData);
+            updateForm.querySelector('[name="role_names"]').value = JSON.stringify(role_names);
+            updateDialog.showModal();
+        }
+
+        async updateRow(event = null) {
+            if (event) event.preventDefault();
+            try {
+                const updateForm = document.getElementById("crud-update-form");
+                const formData = UTIL.getFormData(updateForm);
+                if (!formData.password) {
+                    delete formData.password;
+                }
+                formData.role_names = JSON.parse(formData.role_names);
+                await UTIL.fetchAPI(`${this.apiUrl}/${this.state.updatedRowId}`, {
+                    method: "PUT",
+                    body: JSON.stringify(formData)
+                });
+                await this.fetchRows();
+                this.hideUpdateForm();
+            } catch (error) {
+                console.error(error);
+                this.showAlert("Update User Error", error);
+            }
+        }
+
+        hideUpdateForm(event = null) {
+            if (event) event.preventDefault();
+            document.getElementById("crud-update-form-dialog").close();
+        }
+
+        // Delete methods
+        async showDeleteForm(id) {
+            this.state.deletedRowId = id;
+            const deleteDialog = document.getElementById("crud-delete-form-dialog");
+            const deleteForm = document.getElementById("crud-delete-form");
+            const rawFormData = await UTIL.fetchAPI(`${this.apiUrl}/${id}`, { method: "GET" });
+            const { role_names, ...formData } = rawFormData;
+            UTIL.setFormData(deleteForm, formData);
+            deleteForm.querySelector('[name="role_names"]').value = JSON.stringify(role_names);
+            deleteDialog.showModal();
+        }
+
+        async deleteRow(event = null) {
+            if (event) event.preventDefault();
+            try {
+                await UTIL.fetchAPI(`${this.apiUrl}/${this.state.deletedRowId}`, { method: "DELETE" });
+                await this.fetchRows();
+                this.hideDeleteForm();
+            } catch (error) {
+                console.error(error);
+                this.showAlert("Delete User Error", error);
+            }
+        }
+
+        hideDeleteForm(event = null) {
+            if (event) event.preventDefault();
+            document.getElementById("crud-delete-form-dialog").close();
+        }
+
+        // Alert methods
+        showAlert(title, error) {
+            const alertDialog = document.getElementById("crud-alert-dialog");
+            document.getElementById("crud-alert-title").textContent = title;
+            document.getElementById("crud-alert-message").textContent = error.message || String(error);
+            alertDialog.showModal();
+        }
+
+        hideAlert(event = null) {
+            if (event) event.preventDefault();
+            document.getElementById("crud-alert-dialog").close();
+        }
+    }
+
+    // Initialize the CrudApp on DOM ready
+    document.addEventListener("DOMContentLoaded", () => {
+        const app = document.getElementById("crud-app");
+        new CrudApp("/api/v1/users", {
+            pageSize: JSON.parse(app.dataset.pageSize),
+            currentPage: JSON.parse(app.dataset.page),
+            sort: JSON.parse(app.dataset.sort),
+            filter: JSON.parse(app.dataset.filter),
+            allowCreate: JSON.parse(app.dataset.allowCreate),
+            allowUpdate: JSON.parse(app.dataset.allowUpdate),
+            allowDelete: JSON.parse(app.dataset.allowDelete),
+            updatedRowId: null,
+            deletedRowId: null,
+        });
+    });
+</script>

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/common/util.js

@@ -116,20 +116,39 @@ const UTIL = {
 
     setFormData(form, data) {
         for (const key in data) {
-            // Only search within this form for an element with the matching name
             const element = form.querySelector(`[name="${key}"]`);
-            if (element) {
-                // For checkboxes or radio buttons, update each matching element within the form
-                if (element.type === 'checkbox' || element.type === 'radio') {
-                    const elements = form.querySelectorAll(`[name="${key}"]`);
-                    elements.forEach(el => {
-                        el.checked = (el.value === data[key]);
+            if (!element) {
+                continue;
+            }
+            const value = data[key];
+            // Handle checkboxes and radio buttons
+            if (element.type === 'checkbox' || element.type === 'radio') {
+                const elements = form.querySelectorAll(`[name="${key}"]`);
+                elements.forEach(el => {
+                    // If value is an array, check if this option is included;
+                    // otherwise compare to a single value.
+                    if (Array.isArray(value)) {
+                        el.checked = value.includes(el.value);
+                    } else {
+                        el.checked = (value === true) || (el.value == value);
+                    }
+                });
+            }
+            // Handle select elements
+            else if (element.tagName === "SELECT") {
+                if (element.multiple && Array.isArray(value)) {
+                    // For multi-select, mark options as selected if their value is in the array.
+                    Array.from(element.options).forEach(option => {
+                        option.selected = value.includes(option.value);
                     });
                 } else {
-                    // For other types of inputs, selects, and textareas, simply set the value
-                    element.value = data[key];
+                    element.value = value;
                 }
             }
+            // Handle all other inputs (including textarea)
+            else {
+                element.value = value;
+            }
         }
     },
 
@@ -139,7 +158,13 @@ const UTIL = {
             if (element.type === "checkbox" || element.type === "radio") {
                 element.checked = element.defaultChecked; // Restore default checked state
             } else if (element.tagName === "SELECT") {
-                element.selectedIndex = 0; // Select the first option by default
+                if (element.multiple) {
+                    // Deselect all options for multi-select.
+                    Array.from(element.options).forEach(option => option.selected = false);
+                } else {
+                    // Select the first option by default
+                    element.selectedIndex = 0;
+                }
             } else {
                 element.value = element.defaultValue || ""; // Reset to default value or empty
             }
@@ -150,9 +175,39 @@ const UTIL = {
     getFormData(form) {
         const formData = new FormData(form);
         const data = {};
-        // Convert FormData to a plain object
-        formData.forEach((value, key) => {
-            data[key] = value;
+        // Populate data from FormData (this covers inputs, textareas, selects, and checked radio buttons)
+        for (const [key, value] of formData.entries()) {
+            // If key already exists, it’s part of a multi-value field.
+            if (key in data) {
+                if (!Array.isArray(data[key])) {
+                    data[key] = [data[key]];
+                }
+                data[key].push(value);
+            } else {
+                data[key] = value;
+            }
+        }
+        // Process all checkbox inputs.
+        const checkboxes = form.querySelectorAll("input[type='checkbox']");
+        // Use a Set to iterate over unique checkbox names.
+        const checkboxNames = new Set();
+        checkboxes.forEach(el => checkboxNames.add(el.name));
+        checkboxNames.forEach(name => {
+            const elems = form.querySelectorAll(`input[type='checkbox'][name="${name}"]`);
+            if (elems.length === 1) {
+                // Unique checkbox: convert its presence in formData to a boolean.
+                // If it wasn’t included by FormData (because it was unchecked), default to false.
+                data[name] = elems[0].checked;
+            } else {
+                // Multiple checkboxes: ensure the value is an array.
+                // If none of the checkboxes were checked, ensure an empty array is returned.
+                if (!(name in data)) {
+                    data[name] = [];
+                } else if (!Array.isArray(data[name])) {
+                    // This case can happen if only one checkbox in the group was checked.
+                    data[name] = [data[name]];
+                }
+            }
         });
         return data;
     },

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/module/gateway/view/static/crud/util.js

@@ -1,51 +1,72 @@
 const CRUD_UTIL = {
 
-    renderPagination(paginationComponent, crudState, total, fetchFunction = "fetchRows") {
-        const totalPages = Math.ceil(total / crudState.pageSize);
+    renderPagination(paginationComponent, crudApp, total) {
+        const { pageSize, currentPage } = crudApp.state;
+        const totalPages = Math.ceil(total / pageSize);
         paginationComponent.innerHTML = "";
-        // Ensure left alignment (if not already handled by PicoCSS or external CSS)
+        // Ensure left alignment
         paginationComponent.style.textAlign = "left";
-        let paginationHTML = "";
-        // Only show "First" and "Previous" if we're not on page 1
-        if (crudState.currentPage > 1) {
-            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(1)">&laquo;</button>`;
-            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${crudState.currentPage - 1})">&lt;</button>`;
+        let buttons = [];
+        // "First" and "Previous" buttons if not on the first page
+        if (currentPage > 1) {
+            buttons.push({ label: "&laquo;", page: 1 });
+            buttons.push({ label: "&lt;", page: currentPage - 1 });
         }
         if (totalPages <= 5) {
-            // If total pages are few, simply list them all
+            // List all pages
             for (let i = 1; i <= totalPages; i++) {
-                paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${i})" ${i === crudState.currentPage ? "disabled" : ""}>${i}</button>`;
+                buttons.push({ label: i, page: i });
             }
         } else {
-            // Always show first page
-            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(1)" ${crudState.currentPage === 1 ? "disabled" : ""}>1</button>`;
-            // Determine start and end for the page range around current page
-            const start = Math.max(2, crudState.currentPage - 1);
-            const end = Math.min(totalPages - 1, crudState.currentPage + 1);
-            // Add ellipsis if there's a gap between first page and the start of the range
+            // Always show the first page
+            buttons.push({ label: "1", page: 1, disabled: currentPage === 1 });
+            const start = Math.max(2, currentPage - 1);
+            const end = Math.min(totalPages - 1, currentPage + 1);
+            // Add ellipsis if there's a gap
             if (start > 2) {
-                paginationHTML += `<span style="padding: 0 5px;">...</span>`;
+                buttons.push({ label: "...", isSpan: true });
             }
-            // Render the range around the current page
+            // Pages around current page
             for (let i = start; i <= end; i++) {
-                paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${i})" ${i === crudState.currentPage ? "disabled" : ""}>${i}</button>`;
+                buttons.push({ label: i, page: i });
             }
-            // Add ellipsis if there's a gap between the end of the range and the last page
             if (end < totalPages - 1) {
-                paginationHTML += `<span style="padding: 0 5px;">...</span>`;
+                buttons.push({ label: "...", isSpan: true });
             }
-            // Always show last page
-            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${totalPages})" ${crudState.currentPage === totalPages ? "disabled" : ""}>${totalPages}</button>`;
+            // Always show the last page
+            buttons.push({ label: totalPages, page: totalPages, disabled: currentPage === totalPages });
         }
-        // Only show "Next" and "Last" if we're not on the last page
-        if (crudState.currentPage < totalPages) {
-            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${crudState.currentPage + 1})">&gt;</button>`;
-            paginationHTML += `<button class="secondary" onclick="${fetchFunction}(${totalPages})">&raquo;</button>`;
+        // "Next" and "Last" buttons if not on the last page
+        if (currentPage < totalPages) {
+            buttons.push({ label: "&gt;", page: currentPage + 1 });
+            buttons.push({ label: "&raquo;", page: totalPages });
         }
-        paginationComponent.innerHTML = paginationHTML;
+        // Render buttons and spans
+        buttons.forEach(btn => {
+            if (btn.isSpan) {
+                paginationComponent.insertAdjacentHTML("beforeend", `<span style="padding: 0 5px;">${btn.label}</span>`);
+            } else {
+                const buttonEl = document.createElement("button");
+                buttonEl.className = "secondary";
+                buttonEl.innerHTML = btn.label;
+                if (btn.disabled) {
+                    buttonEl.disabled = true;
+                } else {
+                    buttonEl.dataset.page = btn.page;
+                }
+                paginationComponent.appendChild(buttonEl);
+            }
+        });
+        // Attach event listeners to pagination buttons
+        paginationComponent.querySelectorAll("button[data-page]").forEach(button => {
+            button.addEventListener("click", () => {
+                const page = parseInt(button.dataset.page);
+                crudApp.fetchRows(page);
+            });
+        });
     },
 
-    splitUnescaped(query, delimiter=",") {
+    splitUnescaped(query, delimiter = ",") {
         const parts = [];
         let current = "";
         let escaped = false;

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/schema/permission.py

@@ -25,7 +25,9 @@ class PermissionUpdate(SQLModel):
     description: str | None = None
 
     def with_audit(self, updated_by: str) -> "PermissionUpdateWithAudit":
-        return PermissionUpdateWithAudit(**self.model_dump(), updated_by=updated_by)
+        return PermissionUpdateWithAudit(
+            **self.model_dump(exclude_none=True), updated_by=updated_by
+        )
 
 
 class PermissionUpdateWithAudit(PermissionUpdate):

zrb/builtin/project/add/fastapp/fastapp_template/my_app_name/schema/role.py

@@ -7,11 +7,10 @@ from sqlmodel import Field, SQLModel
 
 class RoleBase(SQLModel):
     name: str
+    description: str = ""
 
 
 class RoleCreate(RoleBase):
-    description: str
-
     def with_audit(self, created_by: str) -> "RoleCreateWithAudit":
         return RoleCreateWithAudit(**self.model_dump(), created_by=created_by)
 
@@ -51,7 +50,9 @@ class RoleUpdate(SQLModel):
     description: str | None = None
 
     def with_audit(self, updated_by: str) -> "RoleUpdateWithAudit":
-        return RoleUpdateWithAudit(**self.model_dump(), updated_by=updated_by)
+        return RoleUpdateWithAudit(
+            **self.model_dump(exclude_none=True), updated_by=updated_by
+        )
 
 
 class RoleUpdateWithAudit(RoleUpdate):
@@ -63,7 +64,7 @@ class RoleUpdateWithPermissions(RoleUpdate):
 
     def with_audit(self, updated_by: str) -> "RoleUpdateWithPermissionsAndAudit":
         return RoleUpdateWithPermissionsAndAudit(
-            **self.model_dump(), updated_by=updated_by
+            **self.model_dump(exclude_none=True), updated_by=updated_by
         )
 
 
@@ -73,7 +74,7 @@ class RoleUpdateWithPermissionsAndAudit(RoleUpdateWithPermissions):
     def get_role_update_with_audit(self) -> RoleUpdateWithAudit:
         data = {
             key: val
-            for key, val in self.model_dump().items()
+            for key, val in self.model_dump(exclude_none=True).items()
             if key != "permission_names"
         }
         return RoleUpdateWithAudit(**data)