@currentjs/gen 0.2.2 → 0.3.1

package/dist/generators/templates/data/frontendScriptTemplate

@@ -0,0 +1,739 @@
+/**
+ * Common Frontend Functions for Generated Apps
+ * This script provides utilities for UI feedback, navigation, form handling, and SPA-like behavior
+ */
+
+// Global configuration
+window.AppConfig = {
+  toastDuration: 3000,
+  modalDuration: 1200,
+  animationDuration: 300,
+  debounceDelay: 300,
+  translations: {},
+  currentLang: null,
+  isTranslationEnabled: false, // change to true to enable translations
+};
+
+(() => {
+  // ===== AUTHENTICATION HELPERS =====
+
+  /**
+   * Get authentication token from localStorage
+   * @returns {string|null} JWT token or null if not found
+   */
+  function getAuthToken() {
+    return localStorage.getItem('authToken') || null;
+  }
+
+  /**
+   * Set authentication token in localStorage
+   * @param {string} token - JWT token to store
+   */
+  function setAuthToken(token) {
+    if (token) {
+      localStorage.setItem('authToken', token);
+      document.cookie = `authToken=${token}; max-age=31536000; path=/`;
+    }
+  }
+
+  /**
+   * Remove authentication token from localStorage
+   */
+  function clearAuthToken() {
+    localStorage.removeItem('authToken');
+    document.cookie = `authToken=; max-age=0; path=/`;
+  }
+
+  /**
+   * Build headers object with authentication if token exists
+   * @param {object} additionalHeaders - Additional headers to merge
+   * @returns {object} Headers object with auth header if token exists
+   */
+  function buildAuthHeaders(additionalHeaders = {}) {
+    const headers = { ...additionalHeaders };
+    const token = getAuthToken();
+    
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+    
+    return headers;
+  }
+
+  // ===== TRANSLATION FUNCTIONS =====
+
+  /**
+   * Get current language
+   * Priority: localStorage -> navigator.language -> 'en'
+   * @returns {string} Current language code
+   */
+  function getCurrentLanguage() {
+    if (window.AppConfig.currentLang) {
+      return window.AppConfig.currentLang;
+    }
+    
+    // 1. Check localStorage
+    const storedLang = localStorage.getItem('lang');
+    if (storedLang) {
+      window.AppConfig.currentLang = storedLang;
+      return storedLang;
+    }
+    
+    // 2. Check browser language (Accept-Language equivalent)
+    const browserLang = navigator.language || navigator.languages?.[0];
+    if (browserLang) {
+      // Extract language code (e.g., 'en-US' -> 'en')
+      const langCode = browserLang.split('-')[0];
+      window.AppConfig.currentLang = langCode;
+      return langCode;
+    }
+    
+    // 3. Default fallback
+    window.AppConfig.currentLang = 'en';
+    return 'en';
+  }
+
+  /**
+   * Translate string to current language
+   * @param {string} str - String in default language to translate
+   * @returns {string} Translated string or original if translation not found
+   */
+  function t(str) {
+    if (!str || typeof str !== 'string') return str;
+    
+    const currentLang = getCurrentLanguage();
+    
+    // If current language is the default or no translations loaded, return original
+    if (currentLang === 'en' || !window.AppConfig.translations || !window.AppConfig.translations[currentLang]) {
+      return str;
+    }
+    
+    const translation = window.AppConfig.translations[currentLang][str];
+    return translation || str;
+  }
+
+  /**
+   * Set current language and save to localStorage
+   * @param {string} langKey - Language code (e.g., 'en', 'ru', 'pl')
+   */
+  function setLang(langKey) {
+    if (!langKey || typeof langKey !== 'string') return;
+    
+    window.AppConfig.currentLang = langKey;
+    localStorage.setItem('lang', langKey);
+    
+    // Optionally reload page to apply translations
+    // Uncomment the next line if you want automatic page reload on language change
+    // window.location.reload();
+  }
+
+  /**
+   * Load translations from JSON file
+   * @param {string} url - URL to translations JSON file (default: '/translations.json')
+   */
+  function loadTranslations(url = '/translations.json') {
+    if (!window.AppConfig.isTranslationEnabled) return;
+    fetch(url)
+      .then(response => {
+        if (!response.ok) {
+          console.warn('Translations file not found:', url);
+          return {};
+        }
+        return response.json();
+      })
+      .then(translations => {
+        window.AppConfig.translations = translations || {};
+      })
+      .catch(error => {
+        console.warn('Failed to load translations:', error);
+        window.AppConfig.translations = {};
+      });
+  }
+
+  // ===== UI FEEDBACK & NOTIFICATIONS =====
+
+  /**
+   * Show a toast notification
+   * @param {string} message - The message to display
+   * @param {string} type - 'success', 'error', 'info', 'warning'
+   */
+  function showToast(message, type = 'info') {
+    // Translate the message
+    message = t(message);
+    const toast = document.createElement('div');
+    toast.className = 'app-toast app-toast-' + type;
+    toast.textContent = message;
+    toast.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 12px 24px;
+      border-radius: 4px;
+      color: white;
+      font-weight: 500;
+      z-index: 10000;
+      max-width: 300px;
+      word-wrap: break-word;
+      transition: all \${window.AppConfig.animationDuration}ms ease;
+      transform: translateX(100%);
+      opacity: 0;
+    `;
+    
+    // Type-specific styling
+    const colors = {
+      success: '#10b981',
+      error: '#ef4444',
+      warning: '#f59e0b',
+      info: '#3b82f6'
+    };
+    toast.style.backgroundColor = colors[type] || colors.info;
+    
+    document.body.appendChild(toast);
+    
+    // Animate in
+    setTimeout(() => {
+      toast.style.transform = 'translateX(0)';
+      toast.style.opacity = '1';
+    }, 10);
+    
+    // Auto remove
+    setTimeout(() => {
+      toast.style.transform = 'translateX(100%)';
+      toast.style.opacity = '0';
+      setTimeout(() => {
+        if (toast.parentNode) {
+          toast.parentNode.removeChild(toast);
+        }
+      }, window.AppConfig.animationDuration);
+    }, window.AppConfig.toastDuration);
+  }
+
+  /**
+   * Display inline message in specific container
+   * @param {string} elementId - ID of the target element
+   * @param {string} message - The message to display
+   * @param {string} type - 'success', 'error', 'info', 'warning'
+   */
+  function showMessage(elementId, message, type = 'info') {
+    const element = getElementSafely('#' + elementId);
+    if (!element) return;
+    
+    // Translate the message
+    message = t(message);
+    element.textContent = message;
+    element.className = 'app-message app-message-' + type;
+    element.style.cssText = `
+      padding: 8px 12px;
+      border-radius: 4px;
+      margin: 8px 0;
+      font-size: 14px;
+      display: block;
+    `;
+    
+    // Type-specific styling
+    const styles = {
+      success: 'background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0;',
+      error: 'background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;',
+      warning: 'background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;',
+      info: 'background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;'
+    };
+    element.style.cssText += styles[type] || styles.info;
+  }
+
+  /**
+   * Show modal dialog
+   * @param {string} modalId - ID of the modal element
+   * @param {string} message - The message to display
+   * @param {string} type - 'success', 'error', 'info', 'warning'
+   */
+  function showModal(modalId, message, type = 'info') {
+    let modal = getElementSafely('#' + modalId);
+    
+    if (!modal) {
+      // Create modal if it doesn't exist
+      modal = document.createElement('dialog');
+      modal.id = modalId;
+      modal.innerHTML = `
+        <div class="modal-content">
+          <div class="modal-header">
+            <button class="modal-close" onclick="this.closest('dialog').close()">&times;</button>
+          </div>
+          <div class="modal-body"></div>
+        </div>
+      `;
+      modal.style.cssText = `
+        border: none;
+        border-radius: 8px;
+        padding: 0;
+        max-width: 400px;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+      `;
+      document.body.appendChild(modal);
+    }
+    
+    const content = modal.querySelector('.modal-body');
+    if (content) {
+      // Translate the message
+      message = t(message);
+      content.textContent = message;
+      content.className = 'modal-body modal-' + type;
+      content.style.cssText = 'padding: 20px; text-align: center;';
+    }
+    
+    if (modal.showModal) {
+      modal.showModal();
+      setTimeout(() => {
+        try { modal.close(); } catch(e) {}
+      }, window.AppConfig.modalDuration);
+    }
+  }
+
+  // ===== FORM & CONTENT MANAGEMENT =====
+
+  /**
+   * Safe element removal with animation
+   * @param {string} selector - CSS selector for element to remove
+   */
+  function removeElement(selector) {
+    const element = getElementSafely(selector);
+    if (!element) return;
+    
+    element.style.transition = `opacity ${window.AppConfig.animationDuration}ms ease`;
+    element.style.opacity = '0';
+    
+    setTimeout(() => {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }, window.AppConfig.animationDuration);
+  }
+
+  // ===== CUSTOM SPA INTEGRATION =====
+
+  /**
+   * Centralized success handler that executes strategy array
+   * @param {object} response - The response object
+   * @param {string[]} strategy - Array of strategy actions
+   * @param {object} options - Additional options (basePath, entityName, etc.)
+   */
+  function handleFormSuccess(response, strategy = ['back', 'toast'], options = {}) {
+    const { basePath, entityName = 'Item' } = options;
+    
+    strategy.forEach(action => {
+      switch (action) {
+        case 'toast':
+          showToast(`${entityName} saved successfully`, 'success');
+          break;
+        case 'message':
+          if (options.messageId) {
+            showMessage(options.messageId, `${entityName} saved successfully`, 'success');
+          }
+          break;
+        case 'modal':
+          if (options.modalId) {
+            showModal(options.modalId, `${entityName} saved successfully`, 'success');
+          }
+          break;
+        case 'remove':
+          // If targetSelector is specified, remove that element instead of the form
+          if (options.targetSelector) {
+            removeElement(options.targetSelector);
+          } else if (options.formSelector) {
+            removeElement(options.formSelector);
+          }
+          break;
+        case 'redirect':
+          if (basePath) {
+            if (basePath.startsWith('/') || basePath.startsWith('http')) {
+              navigateToPage(basePath);
+            }
+          }
+          break;
+        case 'back':
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.href = '/';
+          }
+          break;
+        case 'reload':
+        case 'refresh':
+          showToast(t('Reloading...'), 'info');
+          setTimeout(() => {
+            window.location.reload();
+          }, 500);
+          break;
+      }
+    });
+  }
+
+  /**
+   * Handle internal link navigation via fetch
+   * @param {string} url - The URL to navigate to
+   * @param {Element} targetElement - Element to update with new content (default: #main)
+   */
+  function navigateToPage(url, targetElement = null) {
+    const target = targetElement || document.querySelector('#main');
+    if (!target) return;
+    
+    showLoading('#main');
+    
+    fetch(url, {
+      headers: buildAuthHeaders({
+        'Accept': 'text/html',
+        'X-Partial-Content': 'true'
+      })
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.text();
+      })
+      .then(html => {
+        target.innerHTML = html;
+        // Update browser history
+        window.history.pushState({}, '', url);
+        // Re-initialize event listeners for new content
+        initializeEventListeners();
+      })
+      .catch(error => {
+        console.error('Navigation failed:', error);
+        showToast('Failed to load page', 'error');
+        // Fallback to normal navigation
+        window.location.href = url;
+      })
+      .finally(() => {
+        hideLoading('#main');
+      });
+  }
+
+  /**
+   * Convert form value to appropriate type based on field type
+   * @param {string} value - Raw form value
+   * @param {string} fieldType - Field type (number, boolean, etc.)
+   * @returns {any} Converted value
+   */
+  function convertFieldValue(value, fieldType) {
+    if (!value || value === '') {
+      return null;
+    }
+    
+    switch (fieldType.toLowerCase()) {
+      case 'number':
+      case 'int':
+      case 'integer':
+        const intVal = parseInt(value, 10);
+        return isNaN(intVal) ? null : intVal;
+      
+      case 'float':
+      case 'decimal':
+        const floatVal = parseFloat(value);
+        return isNaN(floatVal) ? null : floatVal;
+      
+      case 'boolean':
+      case 'bool':
+        if (value === 'true') return true;
+        if (value === 'false') return false;
+        return Boolean(value);
+      
+      case 'enum':
+      case 'string':
+      case 'text':
+      default:
+        return value;
+    }
+  }
+
+  /**
+   * Handle form submission via fetch with JSON data
+   * @param {HTMLFormElement} form - The form element
+   * @param {string[]} strategy - Strategy actions to execute on success
+   * @param {object} options - Additional options
+   */
+  function submitForm(form, strategy = ['back', 'toast'], options = {}) {
+    const formData = new FormData(form);
+    const jsonData = {};
+    
+    // Get field types from form data attribute
+    const fieldTypesAttr = form.getAttribute('data-field-types');
+    const fieldTypes = fieldTypesAttr ? JSON.parse(fieldTypesAttr) : {};
+    
+    // Convert FormData to JSON with proper typing
+    for (const [key, value] of formData.entries()) {
+      const fieldType = fieldTypes[key] || 'string';
+      const convertedValue = convertFieldValue(value, fieldType);
+      
+      if (jsonData[key]) {
+        // Handle multiple values (e.g., checkboxes)
+        if (Array.isArray(jsonData[key])) {
+          jsonData[key].push(convertedValue);
+        } else {
+          jsonData[key] = [jsonData[key], convertedValue];
+        }
+      } else {
+        jsonData[key] = convertedValue;
+      }
+    }
+    
+    const url = form.getAttribute('data-action') || form.action;
+    const method = (form.getAttribute('data-method') || form.method || 'POST').toUpperCase();
+    
+    showLoading(form);
+    
+    fetch(url, {
+      method,
+      headers: buildAuthHeaders({
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      }),
+      body: JSON.stringify(jsonData)
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        handleFormSuccess(data, strategy, options);
+      })
+      .catch(error => {
+        console.error('Form submission failed:', error);
+        handleFormError({ message: error.message || 'Form submission failed' }, options);
+      })
+      .finally(() => {
+        hideLoading(form);
+      });
+  }
+
+  /**
+   * Standardized error handling for forms
+   * @param {object} response - The error response
+   * @param {object} options - Options including target elements
+   */
+  function handleFormError(response, options = {}) {
+    const message = response.message || 'An error occurred';
+    
+    if (options.messageId) {
+      showMessage(options.messageId, message, 'error');
+    } else {
+      showToast(message, 'error');
+    }
+  }
+
+  // ===== UTILITY FUNCTIONS =====
+
+  /**
+   * Safe element selection with error handling
+   * @param {string} selector - CSS selector
+   * @returns {Element|null}
+   */
+  function getElementSafely(selector) {
+    try {
+      return document.querySelector(selector);
+    } catch (e) {
+      console.warn('Invalid selector:', selector);
+      return null;
+    }
+  }
+
+  /**
+   * Debounce utility for search/input handlers
+   * @param {Function} fn - Function to debounce
+   * @param {number} delay - Delay in milliseconds
+   * @returns {Function}
+   */
+  function debounce(fn, delay = window.AppConfig.debounceDelay) {
+    let timeoutId;
+    return function(...args) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn.apply(this, args), delay);
+    };
+  }
+
+  /**
+   * Show loading state for target element
+   * @param {string} target - CSS selector for target element
+   */
+  function showLoading(target) {
+    const element = getElementSafely(target);
+    if (!element) return;
+    
+    element.style.position = 'relative';
+    element.style.pointerEvents = 'none';
+    element.style.opacity = '0.6';
+    
+    const loader = document.createElement('div');
+    loader.className = 'app-loader';
+    loader.style.cssText = `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 20px;
+      height: 20px;
+      border: 2px solid #f3f3f3;
+      border-top: 2px solid #3498db;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      z-index: 1000;
+    `;
+    
+    element.appendChild(loader);
+    
+    // Add CSS animation if not exists
+    if (!document.querySelector('#app-loader-styles')) {
+      const style = document.createElement('style');
+      style.id = 'app-loader-styles';
+      style.textContent = `
+        @keyframes spin {
+          0% { transform: translate(-50%, -50%) rotate(0deg); }
+          100% { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+
+  /**
+   * Hide loading state for target element
+   * @param {string} target - CSS selector for target element
+   */
+  function hideLoading(target) {
+    const element = getElementSafely(target);
+    if (!element) return;
+    
+    element.style.pointerEvents = '';
+    element.style.opacity = '';
+    
+    const loader = element.querySelector('.app-loader');
+    if (loader) {
+      loader.remove();
+    }
+  }
+
+  // ===== INITIALIZATION =====
+
+  /**
+   * Initialize event listeners for links and forms
+   */
+  function initializeEventListeners() {
+    // Handle internal links
+    document.querySelectorAll('a[href]').forEach(link => {
+      const href = link.getAttribute('href');
+      
+      // Skip external links, anchors, and special protocols
+      if (!href || 
+          href.startsWith('http://') || 
+          href.startsWith('https://') || 
+          href.startsWith('mailto:') || 
+          href.startsWith('tel:') || 
+          href.startsWith('#') ||
+          href.startsWith('javascript:')) {
+        return;
+      }
+      
+      // Remove any existing event listeners and add new one
+      link.removeEventListener('click', handleLinkClick);
+      link.addEventListener('click', handleLinkClick);
+    });
+    
+    // Handle forms with strategy
+    document.querySelectorAll('form[data-strategy]').forEach(form => {
+      // Remove any existing event listeners and add new one
+      form.removeEventListener('submit', handleFormSubmit);
+      form.addEventListener('submit', handleFormSubmit);
+    });
+  }
+
+  /**
+   * Handle link click for internal navigation
+   * @param {Event} event - Click event
+   */
+  function handleLinkClick(event) {
+    event.preventDefault();
+    const href = event.currentTarget.getAttribute('href');
+    if (href) {
+      navigateToPage(href);
+    }
+  }
+
+  /**
+   * Handle form submission
+   * @param {Event} event - Submit event
+   */
+  function handleFormSubmit(event) {
+    event.preventDefault();
+    const form = event.target;
+    
+    // Check for confirmation message
+    const confirmMessage = form.getAttribute('data-confirm-message');
+    if (confirmMessage) {
+      const confirmed = confirm(t(confirmMessage));
+      if (!confirmed) {
+        return; // User cancelled
+      }
+    }
+    
+    const strategyAttr = form.getAttribute('data-strategy');
+    const strategy = strategyAttr ? JSON.parse(strategyAttr) : ['back', 'toast'];
+    
+    // Extract options from form data attributes
+    const options = {
+      basePath: form.getAttribute('data-base-path') || '',
+      entityName: form.getAttribute('data-entity-name') || 'Item',
+      messageId: form.getAttribute('data-message-id'),
+      modalId: form.getAttribute('data-modal-id'),
+      formSelector: `form[data-template="${form.getAttribute('data-template')}"]`,
+      targetSelector: form.getAttribute('data-target-selector')
+    };
+    
+    submitForm(form, strategy, options);
+  }
+
+  // Set up event handlers on page load
+  document.addEventListener('DOMContentLoaded', function() {
+    // Initialize event listeners
+    initializeEventListeners();
+    
+    // Handle browser back/forward buttons
+    window.addEventListener('popstate', function(event) {
+      // Reload the page content for the current URL
+      navigateToPage(window.location.pathname);
+    });
+    
+    // Load translations on page load
+    loadTranslations();
+  });
+
+  // Expose functions globally
+  window.App = {
+    auth: {
+      setAuthToken,
+      clearAuthToken,
+      buildAuthHeaders,
+    },
+    lang: {
+      t,
+      set: setLang,
+      get: getCurrentLanguage,
+    },
+    ui: {
+      showToast,
+      showMessage,
+      showModal,
+      showLoading,
+      hideLoading,
+    },
+    nav: {
+      go: navigateToPage,
+      submit: submitForm,
+    },
+    utils: {
+      $: getElementSafely,
+      debounce,
+      initializeEventListeners,
+    },
+  };
+})();