e-pick 2.0.0 → 3.0.0

package/public/js/ui-manager.js

@@ -0,0 +1,668 @@
+/**
+ * UI Manager
+ *
+ * Handles all UI updates and interactions
+ */
+
+class UIManager {
+  constructor(apiFacade = null) {
+    this.api = apiFacade || new APIFacade();
+    this.elements = {};
+    this.currentStep = 1;
+    this.completedSteps = new Set();
+  }
+
+  /**
+   * Initialize UI elements
+   */
+  init() {
+    this.elements = {
+      fileInput: document.getElementById('file-input'),
+      sheetSelector: document.getElementById('sheet-selector'),
+      sheetSearch: document.getElementById('sheet-search'),
+      sheetCheckboxes: document.getElementById('sheet-checkboxes'),
+      loadSheetsBtn: document.getElementById('load-sheets-btn'),
+      dataPreview: document.getElementById('data-preview'),
+      columnSelectors: document.getElementById('column-selectors'),
+      commitColumnSelect: document.getElementById('commit-column'),
+      repoColumnSelect: document.getElementById('repo-column'),
+      validateBtn: document.getElementById('validate-btn'),
+      validationResults: document.getElementById('validation-results'),
+      validationDetails: document.getElementById('validation-details'),
+      validCommitsFilterStats: document.getElementById('valid-commits-filter-stats'),
+      validCommitsList: document.getElementById('valid-commits-list'),
+      invalidCommitsList: document.getElementById('invalid-commits-list'),
+      commandOutput: document.getElementById('command-output'),
+      commandText: document.getElementById('command-text'),
+      copyBtn: document.getElementById('copy-btn'),
+      viewFilesBtn: document.getElementById('view-files-btn'),
+      generateBtn: document.getElementById('generate-btn'),
+      filesChanged: document.getElementById('files-changed'),
+      filesList: document.getElementById('files-list'),
+      compareBranch: document.getElementById('compare-branch'),
+      loadingSpinner: document.getElementById('loading'),
+      repoInfo: document.getElementById('repo-info'),
+      stepper: document.getElementById('stepper')
+    };
+
+    this.changedFilesData = null;
+
+    this.setupStepperNavigation();
+    this.setupSheetSearch();
+    this.showStep(1);
+  }
+
+  /**
+   * Setup sheet search functionality
+   */
+  setupSheetSearch() {
+    if (this.elements.sheetSearch) {
+      this.elements.sheetSearch.addEventListener('input', (e) => {
+        this.filterSheets(e.target.value);
+      });
+    }
+  }
+
+  /**
+   * Filter sheet checkboxes based on search term
+   * @param {string} searchTerm - Search term
+   */
+  filterSheets(searchTerm) {
+    const labels = this.elements.sheetCheckboxes.querySelectorAll('.sheet-checkbox-label');
+    const term = searchTerm.toLowerCase().trim();
+
+    labels.forEach(label => {
+      const sheetName = label.querySelector('span').textContent.toLowerCase();
+      if (sheetName.includes(term)) {
+        label.style.display = 'flex';
+      } else {
+        label.style.display = 'none';
+      }
+    });
+  }
+
+  /**
+   * Setup stepper click handlers
+   */
+  setupStepperNavigation() {
+    const stepCircles = this.elements.stepper.querySelectorAll('.step-circle');
+    stepCircles.forEach(circle => {
+      circle.addEventListener('click', (e) => {
+        const step = parseInt(e.target.getAttribute('data-step'));
+        // Only allow navigation to completed steps
+        if (this.completedSteps.has(step) || step < this.currentStep) {
+          this.goToStep(step);
+        }
+      });
+    });
+  }
+
+  /**
+   * Navigate to a specific step
+   * @param {number} step - Step number to navigate to
+   */
+  goToStep(step) {
+    if (step < 1 || step > 6) return;
+    this.currentStep = step;
+    this.showStep(step);
+    this.updateStepperUI();
+  }
+
+  /**
+   * Show only content for the current step
+   * @param {number} step - Step number to show
+   */
+  showStep(step) {
+    // Hide all step contents
+    const allStepContents = document.querySelectorAll('[data-step-content]');
+    allStepContents.forEach(section => {
+      section.style.display = 'none';
+    });
+
+    // Show only current step content
+    const currentStepContents = document.querySelectorAll(`[data-step-content="${step}"]`);
+    currentStepContents.forEach(section => {
+      // Only show if it's not the sheet selector or it has content
+      if (section.id !== 'sheet-selector' || section.querySelector('select')?.options.length > 0) {
+        section.style.display = 'block';
+      }
+    });
+  }
+
+  /**
+   * Advance to the next step
+   * @param {number} nextStep - Next step number
+   */
+  advanceToStep(nextStep) {
+    // Mark current step as completed
+    this.completedSteps.add(this.currentStep);
+
+    // Move to next step
+    this.currentStep = nextStep;
+    this.showStep(nextStep);
+    this.updateStepperUI();
+
+    // Scroll stepper into view
+    this.elements.stepper.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+
+  /**
+   * Update stepper UI to reflect current state
+   */
+  updateStepperUI() {
+    const stepperItems = this.elements.stepper.querySelectorAll('.stepper-item');
+
+    stepperItems.forEach((item, index) => {
+      const circle = item.querySelector('.step-circle');
+      const step = parseInt(circle.getAttribute('data-step'));
+
+      // Remove all classes
+      circle.classList.remove('active', 'completed');
+      item.classList.remove('active', 'completed');
+
+      // Add appropriate class to both item and circle
+      if (step === this.currentStep) {
+        circle.classList.add('active');
+        item.classList.add('active');
+      } else if (this.completedSteps.has(step) || step < this.currentStep) {
+        circle.classList.add('completed');
+        item.classList.add('completed');
+      }
+    });
+  }
+
+  /**
+   * Show loading state
+   * @param {string} message - Loading message
+   */
+  showLoading(message = 'Processing...') {
+    this.elements.loadingSpinner.textContent = message;
+    this.elements.loadingSpinner.style.display = 'block';
+  }
+
+  /**
+   * Hide loading state
+   */
+  hideLoading() {
+    this.elements.loadingSpinner.style.display = 'none';
+  }
+
+  /**
+   * Show toast notification
+   * @param {string} message - Message to display
+   * @param {string} type - Type of toast (success, error, info)
+   */
+  showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+
+    document.body.appendChild(toast);
+
+    setTimeout(() => toast.classList.add('show'), 100);
+    setTimeout(() => {
+      toast.classList.remove('show');
+      setTimeout(() => toast.remove(), 300);
+    }, 3000);
+  }
+
+  /**
+   * Show sheet selector for Excel files
+   * @param {array} sheets - Array of sheet names
+   */
+  showSheetSelector(sheets) {
+    const checkboxes = sheets.map((sheet, index) => `
+      <label class="sheet-checkbox-label">
+        <input type="checkbox" name="sheet" value="${sheet}" ${index === 0 ? 'checked' : ''} onchange="window.app.ui.updateLoadSheetsButton()">
+        <span>${sheet}</span>
+      </label>
+    `).join('');
+
+    this.elements.sheetCheckboxes.innerHTML = checkboxes;
+    this.elements.sheetSelector.style.display = 'block';
+    this.elements.loadSheetsBtn.disabled = false;
+
+    // Clear search input
+    if (this.elements.sheetSearch) {
+      this.elements.sheetSearch.value = '';
+    }
+
+    // Auto-scroll to sheet selector
+    setTimeout(() => {
+      this.elements.sheetSelector.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, 100);
+  }
+
+  /**
+   * Update load sheets button state
+   */
+  updateLoadSheetsButton() {
+    const checkedBoxes = this.elements.sheetCheckboxes.querySelectorAll('input[type="checkbox"]:checked');
+    this.elements.loadSheetsBtn.disabled = checkedBoxes.length === 0;
+  }
+
+  /**
+   * Get selected sheet names
+   * @returns {array} Array of selected sheet names
+   */
+  getSelectedSheets() {
+    const checkedBoxes = this.elements.sheetCheckboxes.querySelectorAll('input[type="checkbox"]:checked');
+    return Array.from(checkedBoxes).map(cb => cb.value);
+  }
+
+  /**
+   * Hide sheet selector
+   */
+  hideSheetSelector() {
+    this.elements.sheetSelector.style.display = 'none';
+  }
+
+  /**
+   * Render data preview table
+   * @param {object} parsedData - Parsed file data
+   */
+  renderDataPreview(parsedData) {
+    const { columns, rows, currentSheet } = parsedData;
+
+    // Show only first 10 rows
+    const previewRows = rows.slice(0, 10);
+
+    let html = `
+      <div class="preview-header">
+        <h3>Data Preview${currentSheet ? ` - Sheet: ${currentSheet}` : ''}</h3>
+        <p class="info-text">${rows.length} rows total, showing first 10</p>
+      </div>
+      <div class="table-container" tabindex="0" role="region" aria-label="Data preview table">
+        <table>
+          <thead>
+            <tr>
+              ${columns.map(col => `<th>${col.name}</th>`).join('')}
+            </tr>
+          </thead>
+          <tbody>
+            ${previewRows.map(row => `
+              <tr>
+                ${row.map(cell => `<td>${cell || ''}</td>`).join('')}
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </div>
+    `;
+
+    this.elements.dataPreview.innerHTML = html;
+
+    // Populate column selectors
+    this.populateColumnSelectors(columns);
+
+    // Advance to step 2
+    this.advanceToStep(2);
+  }
+
+  /**
+   * Populate column selector dropdowns
+   * @param {array} columns - Column definitions
+   */
+  populateColumnSelectors(columns) {
+    const commitOptions = columns.map(col =>
+      `<option value="${col.index}">${col.name}</option>`
+    ).join('');
+
+    const repoOptions = columns.map(col =>
+      `<option value="${col.index}">${col.name}</option>`
+    ).join('');
+
+    this.elements.commitColumnSelect.innerHTML = commitOptions;
+    this.elements.repoColumnSelect.innerHTML = repoOptions;
+
+    // Try to auto-select commit column (look for "commit" in name)
+    const commitCol = columns.find(col =>
+      col && col.name && typeof col.name === 'string' &&
+      col.name.toLowerCase().includes('commit')
+    );
+    if (commitCol) {
+      this.elements.commitColumnSelect.value = commitCol.index;
+    }
+
+    // Try to auto-select repo column
+    const repoCol = columns.find(col =>
+      col && col.name && typeof col.name === 'string' &&
+      col.name.toLowerCase().includes('repo')
+    );
+    if (repoCol) {
+      this.elements.repoColumnSelect.value = repoCol.index;
+    }
+
+    this.elements.validateBtn.disabled = false;
+  }
+
+  /**
+   * Render validation results
+   * @param {object} results - Validation results
+   * @param {function} onToggleIgnore - Callback for ignore toggle
+   */
+  renderValidationResults(results, onToggleIgnore) {
+    const { results: commits, summary, filterStats } = results;
+
+    const validCommits = commits.filter(c => c.isValid);
+    const invalidCommits = commits.filter(c => !c.isValid);
+
+    // Add filter statistics if available
+    let filterStatsHtml = '';
+    if (filterStats) {
+      const matchMethod = filterStats.matchedByCommit
+        ? `<p style="margin-bottom: 0.25rem;"><strong>Match Method:</strong> <span class="success-text">Validated by commit existence</span></p>`
+        : '';
+
+      const repoInfo = filterStats.matchedRepo
+        ? `<p style="margin-bottom: 0.25rem;"><strong>Matched Repository:</strong> ${filterStats.matchedRepo}</p>`
+        : '';
+
+      filterStatsHtml = `
+        <div class="filter-stats ${filterStats.filtered > 0 ? 'warning-box' : 'success-box'}" style="margin-bottom: 1rem;">
+          <h3 style="margin-bottom: 0.5rem;">📊 Repository Filter Results</h3>
+          ${repoInfo}
+          ${matchMethod}
+          <p style="margin-bottom: 0.25rem;"><strong>Total Commits in File:</strong> ${filterStats.total}</p>
+          <p style="margin-bottom: 0.25rem;"><strong>Commits for This Repo:</strong> <span class="success-text">${filterStats.matched}</span></p>
+          ${filterStats.filtered > 0 ? `
+            <p style="margin-bottom: 0;" class="warning-text"><strong>Filtered Out (Other Repos):</strong> ${filterStats.filtered}</p>
+            <p class="muted-text" style="margin-top: 0.5rem;">
+              💡 ${filterStats.filtered} commit(s) from other repositories were automatically excluded
+            </p>
+          ` : ''}
+          ${filterStats.availableRepos && filterStats.availableRepos.length > 1 ? `
+            <p class="muted-text" style="margin-top: 0.5rem;">
+              Repositories in file: ${filterStats.availableRepos.join(', ')}
+            </p>
+          ` : ''}
+          ${filterStats.warning ? `
+            <p class="warning-text muted-text" style="margin-top: 0.5rem;">
+              ⚠️ ${filterStats.warning}
+            </p>
+          ` : ''}
+        </div>
+      `;
+    }
+
+    // Render invalid commits with note (SHOW FIRST)
+    const invalidNote = filterStats && filterStats.filtered > 0
+      ? `<p class="muted-text" style="margin-bottom: 1rem;">
+           <strong>Note:</strong> Showing only invalid commits from the matched repository.
+           Commits from other repositories (${filterStats.filtered}) were filtered out automatically.
+         </p>`
+      : '';
+
+    this.elements.invalidCommitsList.innerHTML = invalidNote + (invalidCommits.length > 0
+      ? invalidCommits.map(c => this._renderInvalidCommit(c, onToggleIgnore)).join('')
+      : '<p class="empty">No invalid commits in this repository</p>');
+
+    // Render filter stats (outside scroll)
+    this.elements.validCommitsFilterStats.innerHTML = filterStatsHtml;
+
+    // Render valid commits (inside scroll)
+    this.elements.validCommitsList.innerHTML = (validCommits.length > 0
+      ? validCommits.map(c => this._renderValidCommit(c)).join('')
+      : '<p class="empty">No valid commits found</p>');
+
+    // Show validation details section
+    this.elements.validationDetails.style.display = 'block';
+
+    // Enable generate button if there are valid commits (but keep it hidden)
+    this.elements.generateBtn.disabled = validCommits.length === 0;
+
+    // Advance to step 4
+    this.advanceToStep(4);
+  }
+
+  /**
+   * Render a valid commit
+   * @param {object} commit - Commit data
+   * @returns {string} HTML string
+   * @private
+   */
+  _renderValidCommit(commit) {
+    const { commitInfo } = commit;
+    return `
+      <div class="commit-item commit-valid">
+        <div class="commit-hash">
+          <span class="badge badge-success">✓</span>
+          <code>${commitInfo.shortHash}</code>
+        </div>
+        <div class="commit-details">
+          <div class="commit-message">${commitInfo.message}</div>
+          <div class="commit-meta">
+            ${commitInfo.author} • ${new Date(commitInfo.date).toLocaleString()}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Render an invalid commit
+   * @param {object} commit - Commit data
+   * @param {function} onToggleIgnore - Callback for ignore toggle
+   * @returns {string} HTML string
+   * @private
+   */
+  _renderInvalidCommit(commit, onToggleIgnore) {
+    const badgeClass = commit.canIgnore ? 'badge-warning' : 'badge-error';
+    const badgeIcon = commit.canIgnore ? '⚠' : '✗';
+
+    return `
+      <div class="commit-item commit-invalid" style="padding: 0.75rem;">
+        <details>
+          <summary style="cursor: pointer; display: flex; align-items: center; gap: 1rem; list-style: none;">
+            <span class="badge ${badgeClass}">${badgeIcon}</span>
+            <code class="strong-text">${commit.commit.substring(0, 7)}</code>
+            <span class="error-text" style="flex: 1;">${commit.error.message}</span>
+            <span class="muted-text">▼ View Details</span>
+          </summary>
+          <div class="error-box" style="margin-top: 1rem;">
+            <div class="commit-details">
+              <div style="margin-bottom: 0.5rem;">
+                <strong class="strong-text">Full Hash:</strong>
+                <code class="inline-code" style="display: block; margin-top: 0.25rem;">${commit.commit}</code>
+              </div>
+              <div style="margin-bottom: 0.5rem;">
+                <strong class="strong-text">Error Type:</strong>
+                <code class="commit-error-type" style="margin-left: 0.5rem;">${commit.error.type}</code>
+              </div>
+              <div style="margin-bottom: 0.5rem;">
+                <strong class="strong-text">Error Message:</strong>
+                <p class="error-text" style="margin-top: 0.25rem;">${commit.error.message}</p>
+              </div>
+              ${commit.canIgnore ? `
+                <div class="warning-box" style="margin-top: 1rem;">
+                  <label class="ignore-checkbox">
+                    <input type="checkbox" data-commit="${commit.commit}" onchange="window.app.handleIgnoreToggle('${commit.commit}')">
+                    <span class="warning-text">Ignore this commit (can be safely skipped)</span>
+                  </label>
+                </div>
+              ` : ''}
+            </div>
+          </div>
+        </details>
+      </div>
+    `;
+  }
+
+  /**
+   * Display generated command
+   * @param {object} commandData - Command data
+   */
+  displayCommand(commandData) {
+    const { command, commits, warning, changedFiles } = commandData;
+
+    const fileCount = changedFiles ? changedFiles.length : 0;
+
+    let html = `
+      <div class="command-box">
+        <pre><code>${command}</code></pre>
+      </div>
+      <div class="command-info" style="margin-bottom: 1.5rem; display: flex; gap: 2rem; align-items: center;">
+        <p><strong>Commits to cherry-pick:</strong> ${commits.length}</p>
+        <p class="success-box" style="padding: 0.5rem 1rem; margin: 0;">
+          <strong>Files changed:</strong> <span class="success-text" style="font-size: 1.1rem;">${fileCount}</span>
+        </p>
+      </div>
+      ${warning ? `<p class="warning" style="margin-bottom: 1rem;">⚠ ${warning}</p>` : ''}
+
+      <details open style="margin-top: 1rem;">
+        <summary class="details-summary">
+          📋 Commit Order Details (${commits.length} commits)
+        </summary>
+        <div class="details-content" tabindex="0" role="region" aria-label="Commit order details">
+          ${commits.map((c, i) => `
+            <div class="commit-order-item">
+              <span class="order-num">${i + 1}</span>
+              <code>${c.shortHash}</code>
+              <span class="commit-msg">${c.message}</span>
+            </div>
+          `).join('')}
+        </div>
+      </details>
+    `;
+
+    this.elements.commandText.innerHTML = html;
+    this.elements.copyBtn.disabled = false;
+
+    // Store command and changed files for later use
+    this.currentCommand = command;
+    this.changedFilesData = changedFiles || [];
+
+    // Always enable view files button - displayChangedFiles() will handle empty state
+    this.elements.viewFilesBtn.disabled = false;
+
+    // Show command output section (stay in step 4)
+    this.elements.commandOutput.style.display = 'block';
+
+    // Scroll to command output smoothly
+    setTimeout(() => {
+      this.elements.commandOutput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }, 100);
+  }
+
+  /**
+   * Display changed files with diff commands
+   */
+  displayChangedFiles() {
+    if (!this.changedFilesData || this.changedFilesData.length === 0) {
+      this.elements.filesList.innerHTML = '<p class="empty">No files changed</p>';
+      return;
+    }
+
+    const branch = this.elements.compareBranch.value || 'origin/develop';
+
+    // Create single command to check only the changed files from commits
+    const diffCommand = `git diff ${branch} -- ${this.changedFilesData.join(' ')}`;
+
+    // Create files list
+    const filesHtml = this.changedFilesData.map((file, index) => {
+      return `
+        <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0;">
+          <span class="badge-number">${index + 1}</span>
+          <code class="file-code">${file}</code>
+        </div>
+      `;
+    }).join('');
+
+    this.elements.filesList.innerHTML = `
+      <!-- Command to check all files -->
+      <div class="success-box" style="margin-bottom: 1.5rem;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+          <h3 class="success-text" style="margin: 0; font-size: 1.1rem;">📝 Git Diff Command</h3>
+          <button
+            class="btn btn-primary"
+            style="padding: 0.5rem 1rem; font-size: 0.9rem; margin: 0;"
+            onclick="navigator.clipboard.writeText('${diffCommand}'); window.app.ui.showToast('Copied!', 'success');"
+          >
+            📋 Copy Command
+          </button>
+        </div>
+        <p class="muted-text" style="margin-bottom: 1rem;">
+          Use this command to see all changes compared to <strong>${branch}</strong> branch:
+        </p>
+        <div class="code-box">
+          <pre style="margin: 0; overflow-x: auto;"><code class="code-text">${diffCommand}</code></pre>
+        </div>
+      </div>
+
+      <!-- Files list -->
+      <div class="info-box">
+        <h3 class="strong-text" style="margin: 0 0 1rem 0; font-size: 1rem;">
+          📂 Changed Files (<strong>${this.changedFilesData.length}</strong> files)
+        </h3>
+        <div class="details-content" style="padding-right: 0.5rem;" tabindex="0" role="region" aria-label="Changed files list">
+          ${filesHtml}
+        </div>
+      </div>
+    `;
+
+    // Add event listener for branch input change (only once)
+    const branchInput = this.elements.compareBranch;
+    const newBranchInput = branchInput.cloneNode(true);
+    branchInput.parentNode.replaceChild(newBranchInput, branchInput);
+    this.elements.compareBranch = newBranchInput;
+
+    newBranchInput.addEventListener('input', () => {
+      this.displayChangedFiles();
+    });
+
+    // Advance to step 5 (View Changed Files)
+    this.advanceToStep(5);
+  }
+
+  /**
+   * Copy command to clipboard
+   */
+  async copyToClipboard() {
+    if (!this.currentCommand) return;
+
+    try {
+      await navigator.clipboard.writeText(this.currentCommand);
+      this.showToast('Command copied to clipboard!', 'success');
+    } catch (error) {
+      this.showToast('Failed to copy command', 'error');
+    }
+  }
+
+  /**
+   * Load and display repository info
+   */
+  async loadRepoInfo() {
+    try {
+      const data = await this.api.getRepoInfo();
+
+      if (data.success) {
+        const { repo } = data;
+        this.elements.repoInfo.innerHTML = `
+          <strong>${repo.repoName}</strong> •
+          Branch: ${repo.branch} •
+          Last commit: ${repo.lastCommit.hash}
+        `;
+      }
+    } catch (error) {
+      console.error('Failed to load repo info:', error);
+    }
+  }
+
+  /**
+   * Load and display version from API
+   */
+  async loadVersion() {
+    try {
+      const data = await this.api.getVersion();
+      const versionEl = document.getElementById('version-info');
+      if (versionEl && data.version) {
+        versionEl.textContent = `E-Pick Tool v${data.version}`;
+      }
+    } catch (error) {
+      console.error('Failed to load version:', error);
+    }
+  }
+}
+
+// Export for use in other scripts
+window.UIManager = UIManager;