Prima importazione

2026-07-05 10:55:40 +02:00
commit 457c3eacf6
23 changed files with 6384 additions and 0 deletions
@@ -0,0 +1,120 @@
+/**
+ * Filters Component
+ * Manages ticket list filter state and renders filter dropdowns.
+ */
+const Filters = {
+  state: {
+    queue_id: '',
+    state_id: '',
+    priority_id: '',
+    user_id: '',
+  },
+
+  /** Load saved filters from localStorage */
+  load() {
+    try {
+      const saved = localStorage.getItem('otrs_turbo_filters');
+      if (saved) {
+        Object.assign(this.state, JSON.parse(saved));
+      }
+    } catch (e) { /* ignore */ }
+  },
+
+  /** Save filters to localStorage */
+  save() {
+    try {
+      localStorage.setItem('otrs_turbo_filters', JSON.stringify(this.state));
+    } catch (e) { /* ignore */ }
+  },
+
+  /** Reset all filters */
+  reset() {
+    this.state = { queue_id: '', state_id: '', priority_id: '', user_id: '' };
+    this.save();
+  },
+
+  /** Get filters as query string params (non-empty only) */
+  toQueryParams() {
+    const params = new URLSearchParams();
+    for (const [key, val] of Object.entries(this.state)) {
+      if (val) params.set(key, val);
+    }
+    return params;
+  },
+
+  /**
+   * Render filter bar HTML.
+   * @param {Object} lookups - { queues, states, priorities, users }
+   * @returns {string} HTML string
+   */
+  renderBar(lookups) {
+    const makeOptions = (items, valueKey, labelKey, selectedVal) => {
+      return items.map(item => {
+        const val = item[valueKey];
+        const label = typeof labelKey === 'function' ? labelKey(item) : item[labelKey];
+        const sel = String(val) === String(selectedVal) ? 'selected' : '';
+        return `<option value="${val}" ${sel}>${label}</option>`;
+      }).join('');
+    };
+
+    return `
+      <div class="filters-bar" id="filters-bar">
+        <div class="filter-group">
+          <span class="filter-label">Stato</span>
+          <select class="filter-select" data-filter="state_id" id="filter-state">
+            <option value="">Tutti</option>
+            ${makeOptions(lookups.states || [], 'id', 'name', this.state.state_id)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">Coda</span>
+          <select class="filter-select" data-filter="queue_id" id="filter-queue">
+            <option value="">Tutte</option>
+            ${makeOptions(lookups.queues || [], 'id', 'name', this.state.queue_id)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">Priorità</span>
+          <select class="filter-select" data-filter="priority_id" id="filter-priority">
+            <option value="">Tutte</option>
+            ${makeOptions(lookups.priorities || [], 'id', 'name', this.state.priority_id)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">Owner</span>
+          <select class="filter-select" data-filter="user_id" id="filter-owner">
+            <option value="">Tutti</option>
+            ${makeOptions(lookups.users || [], 'id', (u) => `${u.first_name} ${u.last_name}`, this.state.user_id)}
+          </select>
+        </div>
+        <div class="filters-actions">
+          <button class="btn btn-ghost btn-xs" id="filter-reset">Reset</button>
+        </div>
+      </div>
+    `;
+  },
+
+  /** Bind change events to filter selects */
+  bindEvents(onFilterChange) {
+    const selects = document.querySelectorAll('.filter-select[data-filter]');
+    selects.forEach(sel => {
+      sel.addEventListener('change', (e) => {
+        this.state[e.target.dataset.filter] = e.target.value;
+        this.save();
+        if (onFilterChange) onFilterChange();
+      });
+    });
+
+    const resetBtn = document.getElementById('filter-reset');
+    if (resetBtn) {
+      resetBtn.addEventListener('click', () => {
+        this.reset();
+        selects.forEach(s => s.value = '');
+        if (onFilterChange) onFilterChange();
+      });
+    }
+  },
+};
+
+// Load saved filters on script load
+Filters.load();
@@ -0,0 +1,42 @@
+/**
+ * Toast Notification System
+ * Usage: Toast.success('Message'), Toast.error('Message'), Toast.info('Message')
+ */
+const Toast = {
+  container: null,
+
+  init() {
+    this.container = document.getElementById('toast-container');
+  },
+
+  show(message, type = 'info', duration = 3500) {
+    if (!this.container) this.init();
+
+    const icons = {
+      success: '✓',
+      error: '✕',
+      info: 'ℹ',
+      warning: '⚠',
+    };
+
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.innerHTML = `
+      <span style="font-size:1.1rem;line-height:1;">${icons[type] || ''}</span>
+      <span>${message}</span>
+    `;
+
+    this.container.appendChild(toast);
+
+    // Auto-dismiss
+    setTimeout(() => {
+      toast.classList.add('toast-exit');
+      toast.addEventListener('animationend', () => toast.remove());
+    }, duration);
+  },
+
+  success(msg) { this.show(msg, 'success'); },
+  error(msg) { this.show(msg, 'error', 5000); },
+  info(msg) { this.show(msg, 'info'); },
+  warning(msg) { this.show(msg, 'warning', 4000); },
+};