adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/scripts/datatable/index.js

@@ -1,379 +0,0 @@
-// DataTable implementation
-
-export default (function () {
-  
-  // Vanilla JS DataTable implementation
-  class VanillaDataTable {
-    constructor(element, options = {}) {
-      this.element = element;
-      this.options = {
-        sortable: true,
-        searchable: true,
-        pagination: true,
-        pageSize: 10,
-        ...options,
-      };
-      
-      this.originalData = [];
-      this.filteredData = [];
-      this.currentPage = 1;
-      this.sortColumn = null;
-      this.sortDirection = 'asc';
-      
-      this.init();
-    }
-    
-    init() {
-      this.extractData();
-      this.createControls();
-      this.applyStyles();
-      this.bindEvents();
-      this.render();
-    }
-    
-    extractData() {
-      const rows = this.element.querySelectorAll('tbody tr');
-      this.originalData = Array.from(rows).map(row => {
-        const cells = row.querySelectorAll('td');
-        return Array.from(cells).map(cell => cell.textContent.trim());
-      });
-      this.filteredData = [...this.originalData];
-    }
-    
-    createControls() {
-      const wrapper = document.createElement('div');
-      wrapper.className = 'datatable-wrapper';
-      
-      // Create search input
-      if (this.options.searchable) {
-        const searchWrapper = document.createElement('div');
-        searchWrapper.className = 'datatable-search';
-        searchWrapper.innerHTML = `
-          <label>
-            Search: 
-            <input type="text" class="form-control" placeholder="Search...">
-          </label>
-        `;
-        wrapper.appendChild(searchWrapper);
-      }
-      
-      // Create pagination info
-      if (this.options.pagination) {
-        const infoWrapper = document.createElement('div');
-        infoWrapper.className = 'datatable-info';
-        wrapper.appendChild(infoWrapper);
-      }
-      
-      // Wrap the table
-      this.element.parentNode.insertBefore(wrapper, this.element);
-      wrapper.appendChild(this.element);
-      
-      // Create pagination controls
-      if (this.options.pagination) {
-        const paginationWrapper = document.createElement('div');
-        paginationWrapper.className = 'datatable-pagination';
-        wrapper.appendChild(paginationWrapper);
-      }
-      
-      this.wrapper = wrapper;
-    }
-    
-    applyStyles() {
-      // Apply Bootstrap-like styles
-      this.element.classList.add('table', 'table-striped', 'table-bordered');
-      
-      // Add custom styles
-      const style = document.createElement('style');
-      style.textContent = `
-        .datatable-wrapper {
-          margin: 20px 0;
-        }
-        
-        .datatable-search {
-          margin-bottom: 15px;
-        }
-        
-        .datatable-search input {
-          width: 250px;
-          display: inline-block;
-          margin-left: 5px;
-        }
-        
-        .datatable-info {
-          margin-top: 15px;
-          color: var(--c-text-muted, #6c757d);
-          font-size: 14px;
-        }
-        
-        .datatable-pagination {
-          margin-top: 15px;
-          display: flex;
-          justify-content: center;
-        }
-        
-        .datatable-pagination button {
-          background: var(--c-bkg-card, #fff);
-          border: 1px solid var(--c-border, #dee2e6);
-          color: var(--c-text-base, #333);
-          padding: 6px 12px;
-          margin: 0 2px;
-          cursor: pointer;
-          border-radius: 4px;
-        }
-        
-        .datatable-pagination button:hover {
-          background: var(--c-primary, #007bff);
-          color: white;
-        }
-        
-        .datatable-pagination button.active {
-          background: var(--c-primary, #007bff);
-          color: white;
-        }
-        
-        .datatable-pagination button:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-        
-        .datatable-sort {
-          cursor: pointer;
-          user-select: none;
-          position: relative;
-        }
-        
-        .datatable-sort:hover {
-          background: var(--c-bkg-card, #f8f9fa);
-        }
-        
-        .datatable-sort::after {
-          content: '↕';
-          position: absolute;
-          right: 8px;
-          opacity: 0.5;
-        }
-        
-        .datatable-sort.asc::after {
-          content: '↑';
-          opacity: 1;
-        }
-        
-        .datatable-sort.desc::after {
-          content: '↓';
-          opacity: 1;
-        }
-      `;
-      document.head.appendChild(style);
-    }
-    
-    bindEvents() {
-      // Search functionality
-      if (this.options.searchable) {
-        const searchInput = this.wrapper.querySelector('.datatable-search input');
-        searchInput.addEventListener('input', (e) => {
-          this.search(e.target.value);
-        });
-      }
-      
-      // Sorting functionality
-      if (this.options.sortable) {
-        const headers = this.element.querySelectorAll('thead th');
-        headers.forEach((header, index) => {
-          header.classList.add('datatable-sort');
-          header.addEventListener('click', () => {
-            this.sort(index);
-          });
-        });
-      }
-    }
-    
-    search(query) {
-      if (!query) {
-        this.filteredData = [...this.originalData];
-      } else {
-        this.filteredData = this.originalData.filter(row => 
-          row.some(cell => 
-            cell.toLowerCase().includes(query.toLowerCase())
-          )
-        );
-      }
-      this.currentPage = 1;
-      this.render();
-    }
-    
-    sort(columnIndex) {
-      if (this.sortColumn === columnIndex) {
-        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-      } else {
-        this.sortColumn = columnIndex;
-        this.sortDirection = 'asc';
-      }
-      
-      this.filteredData.sort((a, b) => {
-        const aVal = a[columnIndex];
-        const bVal = b[columnIndex];
-        
-        // Try to parse as numbers
-        const aNum = parseFloat(aVal);
-        const bNum = parseFloat(bVal);
-        
-        let comparison = 0;
-        if (!isNaN(aNum) && !isNaN(bNum)) {
-          comparison = aNum - bNum;
-        } else {
-          comparison = aVal.localeCompare(bVal);
-        }
-        
-        return this.sortDirection === 'asc' ? comparison : -comparison;
-      });
-      
-      this.updateSortHeaders();
-      this.render();
-    }
-    
-    updateSortHeaders() {
-      const headers = this.element.querySelectorAll('thead th');
-      headers.forEach((header, index) => {
-        header.classList.remove('asc', 'desc');
-        if (index === this.sortColumn) {
-          header.classList.add(this.sortDirection);
-        }
-      });
-    }
-    
-    render() {
-      const tbody = this.element.querySelector('tbody');
-      const startIndex = (this.currentPage - 1) * this.options.pageSize;
-      const endIndex = startIndex + this.options.pageSize;
-      const pageData = this.filteredData.slice(startIndex, endIndex);
-      
-      // Clear tbody
-      tbody.innerHTML = '';
-      
-      // Add rows
-      pageData.forEach(rowData => {
-        const row = document.createElement('tr');
-        rowData.forEach(cellData => {
-          const cell = document.createElement('td');
-          cell.textContent = cellData;
-          row.appendChild(cell);
-        });
-        tbody.appendChild(row);
-      });
-      
-      // Update pagination
-      if (this.options.pagination) {
-        this.updatePagination();
-      }
-      
-      // Update info
-      this.updateInfo();
-    }
-    
-    updatePagination() {
-      const totalPages = Math.ceil(this.filteredData.length / this.options.pageSize);
-      const paginationWrapper = this.wrapper.querySelector('.datatable-pagination');
-      
-      paginationWrapper.innerHTML = '';
-      
-      if (totalPages <= 1) return;
-      
-      // Previous button
-      const prevBtn = document.createElement('button');
-      prevBtn.textContent = 'Previous';
-      prevBtn.disabled = this.currentPage === 1;
-      prevBtn.addEventListener('click', () => {
-        if (this.currentPage > 1) {
-          this.currentPage--;
-          this.render();
-        }
-      });
-      paginationWrapper.appendChild(prevBtn);
-      
-      // Page numbers
-      for (let i = 1; i <= totalPages; i++) {
-        const pageBtn = document.createElement('button');
-        pageBtn.textContent = i;
-        pageBtn.classList.toggle('active', i === this.currentPage);
-        pageBtn.addEventListener('click', () => {
-          this.currentPage = i;
-          this.render();
-        });
-        paginationWrapper.appendChild(pageBtn);
-      }
-      
-      // Next button
-      const nextBtn = document.createElement('button');
-      nextBtn.textContent = 'Next';
-      nextBtn.disabled = this.currentPage === totalPages;
-      nextBtn.addEventListener('click', () => {
-        if (this.currentPage < totalPages) {
-          this.currentPage++;
-          this.render();
-        }
-      });
-      paginationWrapper.appendChild(nextBtn);
-    }
-    
-    updateInfo() {
-      const infoWrapper = this.wrapper.querySelector('.datatable-info');
-      if (!infoWrapper) return;
-      
-      const startIndex = (this.currentPage - 1) * this.options.pageSize + 1;
-      const endIndex = Math.min(startIndex + this.options.pageSize - 1, this.filteredData.length);
-      const total = this.filteredData.length;
-      
-      infoWrapper.textContent = `Showing ${startIndex} to ${endIndex} of ${total} entries`;
-    }
-    
-    destroy() {
-      if (this.wrapper && this.wrapper.parentNode) {
-        this.wrapper.parentNode.replaceChild(this.element, this.wrapper);
-      }
-    }
-  }
-  
-  // Initialize DataTable
-  const initializeDataTable = () => {
-    const tableElement = document.getElementById('dataTable');
-    if (tableElement) {
-      // Clean up existing instance
-      if (tableElement.dataTableInstance) {
-        tableElement.dataTableInstance.destroy();
-      }
-      
-      // Create new instance
-      const dataTable = new VanillaDataTable(tableElement, {
-        sortable: true,
-        searchable: true,
-        pagination: true,
-        pageSize: 10,
-      });
-      
-      // Store instance for cleanup
-      tableElement.dataTableInstance = dataTable;
-    }
-  };
-  
-  // Initialize on load
-  initializeDataTable();
-  
-  // Reinitialize on theme change
-  window.addEventListener('adminator:themeChanged', () => {
-    setTimeout(initializeDataTable, 100);
-  });
-  
-  // Cleanup on page unload
-  window.addEventListener('beforeunload', () => {
-    const tableElement = document.getElementById('dataTable');
-    if (tableElement && tableElement.dataTableInstance) {
-      tableElement.dataTableInstance.destroy();
-    }
-  });
-  
-  // Return public API
-  return {
-    init: initializeDataTable,
-    VanillaDataTable,
-  };
-}());

package/src/assets/scripts/datepicker/index.js

@@ -1,302 +0,0 @@
-import DateUtils from '../utils/date.js';
-
-export default (function () {
-  
-  // Enhanced HTML5 date picker with vanilla JS
-  class VanillaDatePicker {
-    constructor(element, options = {}) {
-      this.element = element;
-      this.options = {
-        format: 'yyyy-mm-dd',
-        autoclose: true,
-        todayHighlight: true,
-        ...options,
-      };
-      
-      this.init();
-    }
-    
-    init() {
-      this.convertToHTML5();
-      this.enhanceInput();
-      this.applyStyles();
-      this.bindEvents();
-    }
-    
-    convertToHTML5() {
-      // Convert input to HTML5 date type
-      this.element.type = 'date';
-      this.element.classList.add('form-control', 'vanilla-datepicker');
-      
-      // Remove placeholder since HTML5 date inputs don't need it
-      this.element.removeAttribute('placeholder');
-      
-      // Set default value to today if no value is set
-      if (!this.element.value) {
-        this.element.value = DateUtils.form.toInputValue(DateUtils.now());
-      }
-      
-      // Ensure proper styling
-      this.element.style.minHeight = '38px';
-      this.element.style.lineHeight = '1.5';
-      this.element.style.cursor = 'pointer';
-    }
-    
-    enhanceInput() {
-      // Create wrapper for enhanced functionality
-      const wrapper = document.createElement('div');
-      wrapper.className = 'vanilla-datepicker-wrapper';
-      wrapper.style.position = 'relative';
-      
-      // Wrap the input
-      this.element.parentNode.insertBefore(wrapper, this.element);
-      wrapper.appendChild(this.element);
-      
-      // Add calendar icon if input is in an input group
-      const inputGroup = this.element.closest('.input-group');
-      if (inputGroup) {
-        const calendarIcon = inputGroup.querySelector('.input-group-text i.ti-calendar');
-        if (calendarIcon) {
-          calendarIcon.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.openPicker();
-          });
-        }
-      }
-      
-      this.wrapper = wrapper;
-    }
-    
-    applyStyles() {
-      // Add custom styles for enhanced appearance
-      const style = document.createElement('style');
-      style.textContent = `
-        .vanilla-datepicker-wrapper {
-          position: relative;
-        }
-        
-        .vanilla-datepicker {
-          width: 100%;
-          padding: 6px 12px;
-          border: 1px solid var(--c-border, #ced4da);
-          border-radius: 4px;
-          background-color: var(--c-bkg-card, #fff);
-          color: var(--c-text-base, #495057);
-          font-size: 14px;
-          transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-        }
-        
-        .vanilla-datepicker:focus {
-          outline: none;
-          border-color: var(--c-primary, #007bff);
-          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-        }
-        
-        .vanilla-datepicker::-webkit-calendar-picker-indicator {
-          cursor: pointer;
-          border-radius: 4px;
-          margin-right: 2px;
-          opacity: 0.6;
-          transition: opacity 0.15s ease-in-out;
-        }
-        
-        .vanilla-datepicker::-webkit-calendar-picker-indicator:hover {
-          opacity: 1;
-        }
-        
-        .vanilla-datepicker::-webkit-datetime-edit-fields-wrapper {
-          padding: 0;
-        }
-        
-        .vanilla-datepicker::-webkit-datetime-edit-month-field,
-        .vanilla-datepicker::-webkit-datetime-edit-day-field,
-        .vanilla-datepicker::-webkit-datetime-edit-year-field {
-          color: var(--c-text-base, #495057);
-        }
-        
-        .vanilla-datepicker::-webkit-datetime-edit-text {
-          color: var(--c-text-muted, #6c757d);
-        }
-        
-        /* Dark mode support */
-        [data-theme="dark"] .vanilla-datepicker {
-          background-color: var(--c-bkg-card, #1f2937);
-          color: var(--c-text-base, #f9fafb);
-          border-color: var(--c-border, #374151);
-        }
-        
-        [data-theme="dark"] .vanilla-datepicker::-webkit-calendar-picker-indicator {
-          filter: invert(1);
-        }
-        
-        .datepicker-today-indicator {
-          position: absolute;
-          top: 2px;
-          right: 8px;
-          width: 6px;
-          height: 6px;
-          background-color: var(--c-primary, #007bff);
-          border-radius: 50%;
-          opacity: 0.8;
-          pointer-events: none;
-        }
-        
-        .datepicker-animation {
-          animation: datepicker-highlight 0.3s ease-in-out;
-        }
-        
-        @keyframes datepicker-highlight {
-          0% { transform: scale(1); }
-          50% { transform: scale(1.02); }
-          100% { transform: scale(1); }
-        }
-      `;
-      
-      // Only add the style if it doesn't exist
-      if (!document.querySelector('style[data-vanilla-datepicker-styles]')) {
-        style.setAttribute('data-vanilla-datepicker-styles', 'true');
-        document.head.appendChild(style);
-      }
-    }
-    
-    bindEvents() {
-      // Handle click events
-      this.element.addEventListener('click', () => {
-        this.openPicker();
-      });
-      
-      // Handle keyboard events
-      this.element.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          this.openPicker();
-        }
-      });
-      
-      // Handle change events
-      this.element.addEventListener('change', (e) => {
-        this.handleDateChange(e);
-      });
-      
-      // Handle focus events
-      this.element.addEventListener('focus', () => {
-        this.element.classList.add('datepicker-animation');
-        setTimeout(() => {
-          this.element.classList.remove('datepicker-animation');
-        }, 300);
-      });
-    }
-    
-    openPicker() {
-      this.element.focus();
-      
-      // Try to open the native date picker
-      if (this.element.showPicker && typeof this.element.showPicker === 'function') {
-        try {
-          this.element.showPicker();
-        } catch {
-          // Fallback for browsers that don't support showPicker
-        }
-      }
-    }
-    
-    handleDateChange(e) {
-      const selectedDate = e.target.value;
-      
-      if (selectedDate) {
-        // Add visual feedback
-        this.element.classList.add('datepicker-animation');
-        setTimeout(() => {
-          this.element.classList.remove('datepicker-animation');
-        }, 300);
-        
-        // Trigger custom event
-        const changeEvent = new CustomEvent('datepicker:change', {
-          detail: {
-            date: selectedDate,
-            formattedDate: this.formatDate(selectedDate),
-          },
-        });
-        this.element.dispatchEvent(changeEvent);
-      }
-    }
-    
-    formatDate(dateString) {
-      const date = new Date(dateString);
-      return DateUtils.format(date, this.options.format);
-    }
-    
-    setDate(dateString) {
-      this.element.value = dateString;
-      this.handleDateChange({ target: this.element });
-    }
-    
-    getDate() {
-      return this.element.value;
-    }
-    
-    destroy() {
-      if (this.wrapper && this.wrapper.parentNode) {
-        this.wrapper.parentNode.replaceChild(this.element, this.wrapper);
-      }
-    }
-  }
-  
-  // Initialize date pickers
-  const initializeDatePickers = () => {
-    // Start date pickers
-    const startDateElements = document.querySelectorAll('.start-date');
-    startDateElements.forEach(element => {
-      if (element.vanillaDatePicker) {
-        element.vanillaDatePicker.destroy();
-      }
-      
-      const datePicker = new VanillaDatePicker(element, {
-        format: 'yyyy-mm-dd',
-        autoclose: true,
-        todayHighlight: true,
-      });
-      
-      element.vanillaDatePicker = datePicker;
-    });
-    
-    // End date pickers
-    const endDateElements = document.querySelectorAll('.end-date');
-    endDateElements.forEach(element => {
-      if (element.vanillaDatePicker) {
-        element.vanillaDatePicker.destroy();
-      }
-      
-      const datePicker = new VanillaDatePicker(element, {
-        format: 'yyyy-mm-dd',
-        autoclose: true,
-        todayHighlight: true,
-      });
-      
-      element.vanillaDatePicker = datePicker;
-    });
-  };
-  
-  // Initialize on load
-  initializeDatePickers();
-  
-  // Reinitialize on theme change
-  window.addEventListener('adminator:themeChanged', () => {
-    setTimeout(initializeDatePickers, 100);
-  });
-  
-  // Cleanup on page unload
-  window.addEventListener('beforeunload', () => {
-    document.querySelectorAll('.start-date, .end-date').forEach(element => {
-      if (element.vanillaDatePicker) {
-        element.vanillaDatePicker.destroy();
-      }
-    });
-  });
-  
-  // Return public API
-  return {
-    init: initializeDatePickers,
-    VanillaDatePicker,
-  };
-}());

package/src/assets/scripts/email/index.js

@@ -1,25 +0,0 @@
-export default (function () {
-  // Email side toggle functionality
-  const emailSideToggle = document.querySelector('.email-side-toggle');
-  const emailApp = document.querySelector('.email-app');
-  
-  if (emailSideToggle && emailApp) {
-    emailSideToggle.addEventListener('click', e => {
-      emailApp.classList.toggle('side-active');
-      e.preventDefault();
-    });
-  }
-
-  // Email list item and back to mailbox functionality
-  const emailListItems = document.querySelectorAll('.email-list-item, .back-to-mailbox');
-  const emailContent = document.querySelector('.email-content');
-  
-  if (emailListItems.length > 0 && emailContent) {
-    emailListItems.forEach(item => {
-      item.addEventListener('click', e => {
-        emailContent.classList.toggle('open');
-        e.preventDefault();
-      });
-    });
-  }
-}())