Table Interactivity & Form Helpers

The Table Interactivity & Form Helpers module provides the frontend logic for the IT Management system, focusing on user interface efficiency, data import/export, and record management. It enables advanced list-view features such as Excel/CSV imports, bulk record selection, and dynamic form enhancements without external package dependencies.

This system is built using Vanilla JavaScript and leverages global configuration variables injected via the application header. Key functionalities include the standard CRUD operation interceptors, multi-tenant scoped data handling, and CSRF-protected asynchronous requests.

Sources: js/AGENT_NOTES.md, includes/header.php:50-65

1. Spreadsheet Data Import (Excel/CSV)

The system allows users to import data directly into MySQL from CSV, XLS, or XLSX files using js/table-tools.js. The logic involves local parsing of spreadsheet rows into JSON, which is then transmitted to a module-specific endpoint.

Architecture & Data Flow

When a user initiates an import, the JavaScript logic reads the file, parses it using the xlsx.full.min.js vendor library, and extracts the headers and data rows. If the table element includes a data-itm-db-import-endpoint attribute, the data is sent to the server via a POST request.

The flow requires a valid CSRF token, typically retrieved from window.ITM_CSRF_TOKEN.

Sources: js/table-tools.js, wiki/Import-Excel.md:1-15

Import Implementation Details

Sources: wiki/Import-Excel.md, includes/header.php

2. Bulk Selection and Actions

Bulk operations are managed through js/bulk-delete-selection.js, which provides the logic for selecting multiple records in a list view to perform mass actions like deletion.

Bulk Delete Logic

The system uses a "Selection Mode" to toggle the visibility of checkboxes. Once records are selected, the "Bulk Delete" action sends the IDs to the server. A shared "Cancel" button is implemented to reset the UI state.

3. Form Helpers & Dynamic Dropdowns

Inline Parent Record Addition

The js/select-add-option.js utility allows users to add new options to a dropdown (representing parent records) without leaving the current form. This is critical for maintaining workflow when a required category or manufacturer does not yet exist.

Global Delete Interceptor

The application implements a global event listener in the header to intercept clicks on any link containing delete.php?id=. This ensures that destructive actions are converted from GET requests into secure POST requests.

// Example of the global delete interceptor logic
document.addEventListener('click', function (event) {
    const link = event.target.closest('a[href*="delete.php?id="]');
    if (!link) return;
    event.preventDefault();
    const ok = window.confirm('Are you sure you want to delete this record?');
    if (!ok) return;
    // Logic to programmatically submit POST form...
});

Sources: js/select-add-option.js, includes/header.php:73-100

4. UI Configuration & Multi-Tenancy

Frontend interactivity is governed by a global configuration object, window.ITM_UI_CONFIG, which is populated from the ui_configuration table. This determines the visibility of table actions, export toolbars, and pagination settings.

Key Configuration Elements

• CSRF Protection: Every asynchronous POST request must include the csrf_token.
• Tenant Isolation: The company_id is resolved server-side from the session; the frontend does not explicitly send it in payloads to prevent IDOR vulnerabilities.
• Themed Notifications: js/itm-user-errors.js provides itmNotifyError() and itmNotifySuccess() for standardized alert rendering.

Sources: includes/header.php:55-60, js/AGENT_NOTES.md, scripts/api.php:185-195

Conclusion

The Table Interactivity & Form Helpers represent a lightweight, zero-dependency approach to building a modern interactive experience within a legacy PHP architecture. By combining centralized event management in the header with modular scripts for spreadsheet handling and bulk actions, the system maintains high performance and strict security standards like CSRF enforcement and tenant isolation.