@keenmate/pure-admin-core 2.9.0-rc03 → 2.9.0-rc05

package/src/js/search-autocomplete.js

@@ -0,0 +1,434 @@
+/**
+ * Search Field Autocomplete with Token-Based Query Builder
+ * Provides field name suggestions when user types ":"
+ * Then provides operator suggestions based on field type
+ * Resolved fragments appear as token badges
+ * Example: :name starts_with abc → [name][starts_with][abc]
+ */
+
+class SearchAutocomplete {
+    constructor(inputElement, fields, options = {}) {
+        this.input = inputElement;
+        this.fields = fields;
+        this.popup = null;
+        this.tokensContainer = null;
+        this.activeIndex = -1;
+        this.isOpen = false;
+        this.resolvedTokens = []; // { type: 'field'|'operator'|'value', value: string, variant: string }
+        this.currentQueryState = 'idle'; // 'idle' | 'expecting-operator' | 'expecting-value'
+        this.autocompleteResults = [];
+
+        // Operator definitions by field type with shortcuts
+        this.operators = {
+            text: [
+                { value: 'equals', label: 'Equals', shortcuts: ['eq', '='], description: 'Exact match' },
+                { value: 'not_equals', label: 'Not Equals', shortcuts: ['neq', 'ne', '!='], description: 'Does not match' },
+                { value: 'starts_with', label: 'Starts With', shortcuts: ['sw', 'startswith'], description: 'Starts with text' },
+                { value: 'ends_with', label: 'Ends With', shortcuts: ['ew', 'endswith'], description: 'Ends with text' },
+                { value: 'contains', label: 'Contains', shortcuts: ['c', 'has'], description: 'Contains text' },
+                { value: 'not_contains', label: 'Not Contains', shortcuts: ['nc', 'notcontains'], description: 'Does not contain' }
+            ],
+            number: [
+                { value: '=', label: 'Equals', shortcuts: ['eq', '=='], description: 'Exact value' },
+                { value: '!=', label: 'Not Equals', shortcuts: ['neq', 'ne'], description: 'Different value' },
+                { value: '>', label: 'Greater Than', shortcuts: ['gt'], description: 'Greater than value' },
+                { value: '<', label: 'Less Than', shortcuts: ['lt'], description: 'Less than value' },
+                { value: 'between', label: 'Between', shortcuts: ['bw', 'btw'], description: 'Between two values' },
+                { value: '>=', label: 'Greater or Equal', shortcuts: ['gte', 'ge'], description: 'Greater or equal' },
+                { value: '<=', label: 'Less or Equal', shortcuts: ['lte', 'le'], description: 'Less or equal' }
+            ],
+            date: [
+                { value: 'equals', label: 'On Date', shortcuts: ['eq', '=', 'on'], description: 'Exact date' },
+                { value: 'before', label: 'Before', shortcuts: ['bf', '<'], description: 'Before date' },
+                { value: 'after', label: 'After', shortcuts: ['af', '>'], description: 'After date' },
+                { value: 'between', label: 'Between', shortcuts: ['bw', 'btw'], description: 'Date range' },
+                { value: 'in_last', label: 'In Last', shortcuts: ['last', 'past'], description: 'In last X days' },
+                { value: 'in_next', label: 'In Next', shortcuts: ['next', 'future'], description: 'In next X days' }
+            ]
+        };
+
+        this.init();
+    }
+
+    init() {
+        // Find or create tokens container
+        const wrapper = this.input.parentElement;
+        this.tokensContainer = wrapper.querySelector('.pa-search-tokens');
+
+        if (!this.tokensContainer) {
+            this.tokensContainer = document.createElement('div');
+            this.tokensContainer.className = 'pa-search-tokens';
+            wrapper.insertBefore(this.tokensContainer, this.input);
+        }
+
+        // Create popup element
+        this.popup = document.createElement('div');
+        this.popup.className = 'pa-search-autocomplete';
+        this.popup.style.display = 'none';
+        document.body.appendChild(this.popup);
+
+        // Event listeners
+        this.input.addEventListener('input', (e) => this.handleInput(e));
+        this.input.addEventListener('keydown', (e) => this.handleKeydown(e));
+        document.addEventListener('click', (e) => this.handleClickOutside(e));
+
+        // Initialize state
+        this.updateQueryState();
+    }
+
+    /**
+     * Update query state based on number of tokens
+     */
+    updateQueryState() {
+        const tokenCount = this.resolvedTokens.length % 3;
+
+        if (tokenCount === 0) {
+            this.currentQueryState = 'idle';
+        } else if (tokenCount === 1) {
+            this.currentQueryState = 'expecting-operator';
+        } else if (tokenCount === 2) {
+            this.currentQueryState = 'expecting-value';
+        }
+    }
+
+    /**
+     * Search for autocomplete suggestions
+     */
+    searchAutocomplete(query) {
+        if (this.currentQueryState === 'idle') {
+            // Search for fields (must start with :)
+            if (query.startsWith(':')) {
+                const searchTerm = query.substring(1).toLowerCase();
+                return this.fields.filter(field =>
+                    field.name.toLowerCase().includes(searchTerm)
+                ).map(field => ({
+                    value: field.name,
+                    label: field.name,
+                    description: `${field.type} field`,
+                    type: field.type
+                }));
+            }
+        } else if (this.currentQueryState === 'expecting-operator') {
+            // Get the last resolved field token
+            const lastFieldToken = this.resolvedTokens[this.resolvedTokens.length - 1];
+            const fieldDef = this.fields.find(f => f.name === lastFieldToken.value);
+
+            if (!fieldDef) return [];
+
+            const operators = this.operators[fieldDef.type] || [];
+            const searchTerm = query.toLowerCase();
+
+            return operators.filter(op =>
+                searchTerm === '' ||
+                op.value.toLowerCase().includes(searchTerm) ||
+                op.label.toLowerCase().includes(searchTerm) ||
+                (op.shortcuts && op.shortcuts.some(s => s.toLowerCase().includes(searchTerm)))
+            );
+        }
+
+        return [];
+    }
+
+    /**
+     * Render autocomplete dropdown
+     */
+    renderAutocomplete() {
+        if (this.autocompleteResults.length === 0) {
+            this.close();
+            return;
+        }
+
+        const isFieldSearch = this.currentQueryState === 'idle';
+        let html = '';
+
+        this.autocompleteResults.forEach((item, index) => {
+            const isActive = index === this.activeIndex;
+            const icon = isFieldSearch ? '🔍' : '⚡';
+
+            html += `
+                <div class="pa-search-autocomplete__item ${isActive ? 'pa-search-autocomplete__item--active' : ''}" data-index="${index}">
+                    <span class="pa-search-autocomplete__item-icon">${icon}</span>
+                    <div class="pa-search-autocomplete__item-content">
+                        <span class="pa-search-autocomplete__item-name">${item.label}</span>
+                        <span class="pa-search-autocomplete__item-type">${item.description}</span>
+                    </div>
+                    <span class="pa-search-autocomplete__item-badge">${item.value}</span>
+                </div>
+            `;
+        });
+
+        this.popup.innerHTML = html;
+
+        // Add click handlers
+        this.popup.querySelectorAll('.pa-search-autocomplete__item').forEach((item, index) => {
+            item.addEventListener('click', () => {
+                this.selectAutocomplete(this.autocompleteResults[index]);
+            });
+        });
+
+        this.position();
+        this.open();
+    }
+
+    /**
+     * Select autocomplete item
+     */
+    selectAutocomplete(item) {
+        if (!item) return;
+
+        // Determine token type and variant
+        let tokenType, variant;
+
+        if (this.currentQueryState === 'idle') {
+            tokenType = 'field';
+            variant = 'primary';
+        } else if (this.currentQueryState === 'expecting-operator') {
+            tokenType = 'operator';
+            variant = 'secondary';
+        }
+
+        // Add token
+        this.resolvedTokens.push({
+            type: tokenType,
+            value: item.value,
+            variant: variant
+        });
+
+        // Update state
+        this.updateQueryState();
+
+        // Clear input and autocomplete
+        this.input.value = '';
+        this.autocompleteResults = [];
+        this.activeIndex = -1;
+
+        // Re-render
+        this.renderTokens();
+        this.close();
+        this.input.focus();
+
+        // If we just selected a field, automatically show operators
+        if (tokenType === 'field') {
+            // Trigger operator autocomplete immediately
+            setTimeout(() => {
+                this.autocompleteResults = this.searchAutocomplete('');
+                this.activeIndex = this.autocompleteResults.length > 0 ? 0 : -1;
+                if (this.autocompleteResults.length > 0) {
+                    this.renderAutocomplete();
+                }
+            }, 0);
+        }
+    }
+
+    /**
+     * Resolve value token (when user presses Enter or Tab)
+     */
+    resolveValueToken() {
+        const value = this.input.value.trim();
+
+        if (value && this.currentQueryState === 'expecting-value') {
+            this.resolvedTokens.push({
+                type: 'value',
+                value: value,
+                variant: 'success'
+            });
+
+            this.updateQueryState();
+            this.input.value = '';
+            this.renderTokens();
+        }
+    }
+
+    /**
+     * Render tokens as badge groups
+     */
+    renderTokens() {
+        this.tokensContainer.innerHTML = '';
+
+        // Group tokens into sets of 3 (field, operator, value)
+        for (let i = 0; i < this.resolvedTokens.length; i += 3) {
+            const queryTokens = this.resolvedTokens.slice(i, i + 3);
+
+            // Create group container
+            const group = document.createElement('div');
+            group.className = 'pa-search-token-group';
+
+            queryTokens.forEach((token, index) => {
+                const badge = document.createElement('span');
+                badge.className = `pa-badge pa-badge--${token.variant}`;
+                badge.textContent = token.value;
+                badge.style.margin = '0';
+                badge.style.borderRadius = '0';
+
+                // Round corners on first and last badges
+                if (index === 0) {
+                    badge.style.borderTopLeftRadius = '4px';
+                    badge.style.borderBottomLeftRadius = '4px';
+                }
+                if (index === queryTokens.length - 1 || i + index === this.resolvedTokens.length - 1) {
+                    badge.style.borderTopRightRadius = '4px';
+                    badge.style.borderBottomRightRadius = '4px';
+                }
+
+                group.appendChild(badge);
+            });
+
+            // Add remove button
+            const removeBtn = document.createElement('button');
+            removeBtn.className = 'pa-search-token-remove';
+            removeBtn.innerHTML = '×';
+            removeBtn.onclick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.removeTokenGroup(i);
+            };
+
+            group.appendChild(removeBtn);
+            this.tokensContainer.appendChild(group);
+        }
+    }
+
+    /**
+     * Remove a token group
+     */
+    removeTokenGroup(startIndex) {
+        this.resolvedTokens.splice(startIndex, 3);
+        this.updateQueryState();
+        this.renderTokens();
+        this.input.focus();
+    }
+
+    /**
+     * Handle input changes
+     */
+    handleInput(e) {
+        const inputValue = this.input.value;
+
+        // Check for autocomplete
+        if (this.currentQueryState === 'idle' || this.currentQueryState === 'expecting-operator') {
+            this.autocompleteResults = this.searchAutocomplete(inputValue);
+            this.activeIndex = this.autocompleteResults.length > 0 ? 0 : -1;
+
+            if (this.autocompleteResults.length > 0) {
+                this.renderAutocomplete();
+            } else {
+                this.close();
+            }
+        }
+    }
+
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeydown(e) {
+        // Handle autocomplete navigation
+        if (this.autocompleteResults.length > 0 && this.isOpen) {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.navigateAutocompletePrevious();
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.navigateAutocompleteNext();
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                this.selectAutocomplete(this.autocompleteResults[this.activeIndex]);
+                return;
+            }
+        }
+
+        // Handle value resolution
+        if (this.currentQueryState === 'expecting-value' && (e.key === 'Enter' || e.key === 'Tab')) {
+            e.preventDefault();
+            this.resolveValueToken();
+            return;
+        }
+
+        // Backspace at start - remove last token
+        if (e.key === 'Backspace' && this.input.value === '' && this.resolvedTokens.length > 0) {
+            e.preventDefault();
+            this.resolvedTokens.pop();
+            this.updateQueryState();
+            this.renderTokens();
+            return;
+        }
+
+        // Escape to close
+        if (e.key === 'Escape') {
+            this.close();
+        }
+    }
+
+    /**
+     * Navigate autocomplete suggestions
+     */
+    navigateAutocompletePrevious() {
+        if (this.autocompleteResults.length === 0) return;
+
+        this.activeIndex = this.activeIndex <= 0
+            ? this.autocompleteResults.length - 1
+            : this.activeIndex - 1;
+
+        this.renderAutocomplete();
+    }
+
+    navigateAutocompleteNext() {
+        if (this.autocompleteResults.length === 0) return;
+
+        this.activeIndex = this.activeIndex >= this.autocompleteResults.length - 1
+            ? 0
+            : this.activeIndex + 1;
+
+        this.renderAutocomplete();
+    }
+
+    /**
+     * Position popup below input
+     */
+    position() {
+        const inputRect = this.input.getBoundingClientRect();
+        this.popup.style.position = 'absolute';
+        this.popup.style.left = inputRect.left + 'px';
+        this.popup.style.top = (inputRect.bottom + 4) + 'px';
+        this.popup.style.minWidth = Math.max(inputRect.width, 250) + 'px';
+    }
+
+    /**
+     * Open popup
+     */
+    open() {
+        this.popup.style.display = 'block';
+        this.isOpen = true;
+    }
+
+    /**
+     * Close popup
+     */
+    close() {
+        this.popup.style.display = 'none';
+        this.isOpen = false;
+        this.activeIndex = -1;
+        this.autocompleteResults = [];
+    }
+
+    /**
+     * Handle click outside
+     */
+    handleClickOutside(e) {
+        if (this.isOpen && !this.popup.contains(e.target) && e.target !== this.input) {
+            this.close();
+        }
+    }
+
+    /**
+     * Destroy instance
+     */
+    destroy() {
+        if (this.popup && this.popup.parentNode) {
+            this.popup.parentNode.removeChild(this.popup);
+        }
+    }
+}

package/src/js/settings-panel.js

@@ -0,0 +1,245 @@
+/**
+ * Pure Admin Settings Panel
+ * Global settings management for theme, layout, sidebar, fonts, and display options
+ */
+
+(function() {
+    'use strict';
+
+    // Wait for DOM to be ready
+    document.addEventListener('DOMContentLoaded', function() {
+        // Settings Panel Elements
+        const settingsPanel = document.getElementById('settingsPanel');
+        const settingsToggle = document.getElementById('settingsToggle');
+
+        // Check if elements exist
+        if (!settingsPanel || !settingsToggle) {
+            console.error('Settings panel elements not found');
+            return;
+        }
+
+        const themeSelector = document.getElementById('themeSelector');
+        const fontSizeSelector = document.getElementById('fontSizeSelector');
+        const fontFamilySelector = document.getElementById('fontFamilySelector');
+        const sidebarCollapsed = document.getElementById('sidebarCollapsed');
+        const sidebarBehaviorSelector = document.getElementById('sidebarBehaviorSelector');
+        const sidebarModeSelector = document.getElementById('sidebarModeSelector');
+        const compactMode = document.getElementById('compactMode');
+        const containerWidthSelector = document.getElementById('containerWidthSelector');
+        const resetSettings = document.getElementById('resetSettings');
+        const body = document.body;
+
+        // Load saved settings
+        const loadSettings = () => {
+            // Theme - use server-provided currentTheme from global config
+            const currentTheme = window.PURE_ADMIN_CONFIG?.currentTheme || 'audi';
+            themeSelector.value = currentTheme;
+
+            // Font size
+            const savedFontSize = localStorage.getItem('font-size') || 'default';
+            fontSizeSelector.value = savedFontSize;
+            document.documentElement.classList.remove('font-size-small', 'font-size-default', 'font-size-large', 'font-size-xlarge');
+            if (savedFontSize !== 'default') {
+                document.documentElement.classList.add(`font-size-${savedFontSize}`);
+            }
+
+            // Font family
+            const savedFontFamily = localStorage.getItem('font-family') || 'default';
+            fontFamilySelector.value = savedFontFamily;
+            body.classList.remove('font-family-serif', 'font-family-mono');
+            if (savedFontFamily !== 'default') {
+                body.classList.add(`font-family-${savedFontFamily}`);
+            }
+
+            // Sidebar collapsed
+            const isSidebarCollapsed = localStorage.getItem('sidebar-hidden') === 'true';
+            sidebarCollapsed.checked = isSidebarCollapsed;
+
+            // Sidebar behavior
+            const sidebarBehavior = localStorage.getItem('sidebar-behavior') || 'hide';
+            sidebarBehaviorSelector.value = sidebarBehavior;
+            const sidebar = document.querySelector('.pa-layout__sidebar');
+            const burgerMenu = document.querySelector('.burger-menu');
+            if (sidebar) {
+                sidebar.classList.remove('pa-layout__sidebar--icon-collapse');
+                if (sidebarBehavior === 'icon-collapse') {
+                    sidebar.classList.add('pa-layout__sidebar--icon-collapse');
+                    // In icon-collapse mode, check if expanded or collapsed
+                    const isExpanded = !body.classList.contains('sidebar-hidden');
+                    if (burgerMenu) {
+                        if (isExpanded) {
+                            burgerMenu.classList.add('active'); // Expanded, show X
+                        } else {
+                            burgerMenu.classList.remove('active'); // Collapsed to icons, show hamburger
+                        }
+                    }
+                } else {
+                    // In hide mode, burger active = sidebar visible
+                    if (burgerMenu) {
+                        if (body.classList.contains('sidebar-hidden')) {
+                            burgerMenu.classList.remove('active'); // Hidden, show hamburger
+                        } else {
+                            burgerMenu.classList.add('active'); // Visible, show X
+                        }
+                    }
+                }
+            }
+
+            // Compact mode
+            const isCompactMode = localStorage.getItem('compact-mode') === 'true';
+            compactMode.checked = isCompactMode;
+            if (isCompactMode) {
+                body.classList.add('compact-mode');
+            }
+
+            // Container width - read from body class
+            const containerWidthClasses = ['pa-container-sm', 'pa-container-md', 'pa-container-lg', 'pa-container-xl', 'pa-container-2xl'];
+            let currentContainerWidth = 'fluid';
+            for (const cls of containerWidthClasses) {
+                if (body.classList.contains(cls)) {
+                    currentContainerWidth = cls.replace('pa-container-', '');
+                    break;
+                }
+            }
+            containerWidthSelector.value = currentContainerWidth;
+
+            // Sidebar mode - check if body has sticky class
+            const currentSidebarMode = body.classList.contains('pa-layout--sticky') ? 'sticky' : '';
+            sidebarModeSelector.value = currentSidebarMode;
+        };
+
+        // Toggle panel
+        settingsToggle.addEventListener('click', () => {
+            settingsPanel.classList.toggle('pa-settings-panel--open');
+        });
+
+        // Close panel when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!settingsPanel.contains(e.target) && settingsPanel.classList.contains('pa-settings-panel--open')) {
+                settingsPanel.classList.remove('pa-settings-panel--open');
+            }
+        });
+
+        // Theme change
+        themeSelector.addEventListener('change', (e) => {
+            const theme = e.target.value;
+            switchTheme(theme);
+        });
+
+        // Font size change
+        fontSizeSelector.addEventListener('change', (e) => {
+            const size = e.target.value;
+            document.documentElement.classList.remove('font-size-small', 'font-size-default', 'font-size-large', 'font-size-xlarge');
+            if (size !== 'default') {
+                document.documentElement.classList.add(`font-size-${size}`);
+            }
+            localStorage.setItem('font-size', size);
+        });
+
+        // Font family change
+        fontFamilySelector.addEventListener('change', (e) => {
+            const family = e.target.value;
+            body.classList.remove('font-family-serif', 'font-family-mono');
+            if (family !== 'default') {
+                body.classList.add(`font-family-${family}`);
+            }
+            localStorage.setItem('font-family', family);
+        });
+
+        // Sidebar toggle
+        sidebarCollapsed.addEventListener('change', (e) => {
+            toggleSidebar();
+        });
+
+        // Compact mode toggle
+        compactMode.addEventListener('change', (e) => {
+            if (e.target.checked) {
+                body.classList.add('compact-mode');
+                localStorage.setItem('compact-mode', 'true');
+            } else {
+                body.classList.remove('compact-mode');
+                localStorage.setItem('compact-mode', 'false');
+            }
+        });
+
+        // Container width change - reload page with query param to set cookie
+        containerWidthSelector.addEventListener('change', (e) => {
+            const width = e.target.value;
+            const url = new URL(window.location);
+            url.searchParams.set('containerWidth', width);
+            window.location.href = url.toString();
+        });
+
+        // Sidebar mode change
+        sidebarModeSelector.addEventListener('change', (e) => {
+            const mode = e.target.value;
+            switchSidebarMode(mode);
+        });
+
+        // Sidebar behavior change
+        sidebarBehaviorSelector.addEventListener('change', (e) => {
+            const behavior = e.target.value;
+            const sidebar = document.querySelector('.pa-layout__sidebar');
+            const burgerMenu = document.querySelector('.burger-menu');
+
+            if (sidebar) {
+                sidebar.classList.remove('pa-layout__sidebar--icon-collapse');
+                document.body.classList.remove('sidebar-hidden');
+
+                if (behavior === 'icon-collapse') {
+                    // Show icon-only sidebar in collapsed state
+                    sidebar.classList.add('pa-layout__sidebar--icon-collapse');
+                    // Start in collapsed state (icon bar showing)
+                    if (burgerMenu) burgerMenu.classList.remove('active'); // Not expanded, show hamburger
+                    localStorage.setItem('sidebar-hidden', 'false'); // Not fully hidden, just in icon mode
+                } else if (behavior === 'hide') {
+                    // Hide sidebar completely
+                    document.body.classList.add('sidebar-hidden');
+                    if (burgerMenu) burgerMenu.classList.remove('active'); // Hidden, show hamburger to open
+                    localStorage.setItem('sidebar-hidden', 'true');
+                } else {
+                    // Default behavior - show full sidebar
+                    if (burgerMenu) burgerMenu.classList.add('active'); // Visible, show X to close
+                    localStorage.setItem('sidebar-hidden', 'false');
+                }
+
+                localStorage.setItem('sidebar-behavior', behavior);
+            }
+        });
+
+        // Reset settings
+        resetSettings.addEventListener('click', () => {
+            // Clear localStorage settings
+            localStorage.removeItem('font-size');
+            localStorage.removeItem('font-family');
+            localStorage.removeItem('sidebar-hidden');
+            localStorage.removeItem('sidebar-behavior');
+            localStorage.removeItem('compact-mode');
+
+            // Reset theme, container width, and sidebar mode to defaults
+            const url = new URL(window.location);
+            url.searchParams.set('theme', 'audi');
+            url.searchParams.set('containerWidth', 'fluid');
+            url.searchParams.set('sidebarMode', '');
+            window.location.href = url.toString();
+        });
+
+        // Load settings on init
+        loadSettings();
+    });
+
+    // Helper functions (need to be globally accessible for other scripts)
+    window.switchTheme = function(theme) {
+        // Redirect to current page with theme parameter
+        const url = new URL(window.location);
+        url.searchParams.set('theme', theme);
+        window.location.href = url.toString();
+    };
+
+    window.switchSidebarMode = function(mode) {
+        // Redirect to current page with sidebar mode parameter
+        const url = new URL(window.location);
+        url.searchParams.set('sidebarMode', mode);
+        window.location.href = url.toString();
+    };
+})();