@rashidazarang/airtable-mcp 2.1.0 → 2.2.0

package/airtable-clipper/extension/base-setup.js

@@ -1,471 +0,0 @@
-// Airtable Clipper Base Setup Wizard
-import { BaseTemplate } from './lib/base-template.js';
-import { AirtableClient } from './lib/airtable-client.js';
-
-class BaseSetupWizard {
-  constructor() {
-    this.currentStep = 1;
-    this.maxStep = 4;
-    this.setupMethod = 'template';
-    this.template = null;
-    this.baseTemplate = new BaseTemplate();
-    this.init();
-  }
-
-  init() {
-    this.bindEvents();
-    this.updateStepIndicator();
-  }
-
-  bindEvents() {
-    // Setup method radio buttons
-    document.querySelectorAll('input[name="setupMethod"]').forEach(radio => {
-      radio.addEventListener('change', (e) => {
-        this.setupMethod = e.target.value;
-        this.updateStep2Content();
-      });
-    });
-
-    // Table checkboxes
-    document.querySelectorAll('#step2 input[type="checkbox"]').forEach(checkbox => {
-      checkbox.addEventListener('change', () => {
-        this.updatePreview();
-      });
-    });
-
-    // Base name input
-    document.getElementById('baseName').addEventListener('input', () => {
-      this.updatePreview();
-    });
-  }
-
-  updateStep2Content() {
-    const step2 = document.getElementById('step2');
-    const step3NextBtn = document.getElementById('step3NextBtn');
-    
-    if (this.setupMethod === 'existing') {
-      step2.querySelector('h2').textContent = '🔍 Validate Existing Base';
-      step2.querySelector('p').textContent = 'We\'ll check your current Airtable base structure and suggest improvements.';
-      step3NextBtn.textContent = 'Validate Base';
-    } else {
-      step2.querySelector('h2').textContent = '📋 Configure Your Database';
-      step2.querySelector('p').textContent = 'Customize which tables to include based on your use case:';
-      step3NextBtn.textContent = 'Create Database';
-    }
-  }
-
-  async nextStep() {
-    if (this.currentStep < this.maxStep) {
-      this.currentStep++;
-      this.updateStepDisplay();
-      
-      if (this.currentStep === 3) {
-        await this.generatePreview();
-      } else if (this.currentStep === 4) {
-        await this.prepareValidation();
-      }
-    }
-  }
-
-  prevStep() {
-    if (this.currentStep > 1) {
-      this.currentStep--;
-      this.updateStepDisplay();
-    }
-  }
-
-  updateStepDisplay() {
-    // Hide all steps
-    document.querySelectorAll('.wizard-step').forEach(step => {
-      step.classList.remove('active');
-    });
-    
-    // Show current step
-    document.getElementById(`step${this.currentStep}`).classList.add('active');
-    
-    // Update step indicator
-    this.updateStepIndicator();
-  }
-
-  updateStepIndicator() {
-    document.querySelectorAll('.step-dot').forEach((dot, index) => {
-      dot.classList.remove('active', 'completed');
-      
-      if (index + 1 < this.currentStep) {
-        dot.classList.add('completed');
-      } else if (index + 1 === this.currentStep) {
-        dot.classList.add('active');
-      }
-    });
-  }
-
-  async generatePreview() {
-    this.showLoading('Generating template...');
-
-    try {
-      const config = this.getConfiguration();
-      this.template = await this.baseTemplate.createOptimalBase(config);
-      
-      if (this.template.success) {
-        this.displayTemplatePreview();
-        
-        if (this.setupMethod === 'template') {
-          this.showTemplateLink();
-        } else {
-          this.showManualInstructions();
-        }
-      } else {
-        throw new Error(this.template.error || 'Failed to generate template');
-      }
-    } catch (error) {
-      console.error('Template generation failed:', error);
-      this.showError('Failed to generate template: ' + error.message);
-    } finally {
-      this.hideLoading();
-    }
-  }
-
-  getConfiguration() {
-    return {
-      baseName: document.getElementById('baseName').value || 'Airtable Clipper Database',
-      includeContacts: document.getElementById('includeContacts').checked,
-      includeClips: document.getElementById('includeClips').checked,
-      includeCompanies: document.getElementById('includeCompanies').checked,
-      includeTasks: document.getElementById('includeTasks').checked
-    };
-  }
-
-  displayTemplatePreview() {
-    const preview = document.getElementById('templatePreview');
-    
-    let html = `<h3>📊 ${this.template.template.baseName}</h3>`;
-    html += `<p style="margin-bottom: 16px; color: #6b7280;">${this.template.template.description}</p>`;
-
-    this.template.template.tables.forEach(table => {
-      html += `
-        <div class="table-preview">
-          <h4>${table.name}</h4>
-          <p>${table.description}</p>
-          <div class="field-list">
-            ${table.fields.slice(0, 8).map(field => 
-              `<span class="field-tag">${field.name}</span>`
-            ).join('')}
-            ${table.fields.length > 8 ? 
-              `<span class="field-tag">+${table.fields.length - 8} more</span>` : 
-              ''
-            }
-          </div>
-        </div>
-      `;
-    });
-
-    // Add automation recommendations
-    if (this.template.template.automations.length > 0) {
-      html += `
-        <div style="margin-top: 16px; padding: 12px; background-color: #f0f9ff; border-radius: 6px;">
-          <h4 style="margin: 0 0 8px 0; color: #0369a1;">🤖 Recommended Automations</h4>
-          <ul style="margin: 0; padding-left: 16px; font-size: 12px;">
-            ${this.template.template.automations.map(auto => 
-              `<li>${auto.name}: ${auto.description}</li>`
-            ).join('')}
-          </ul>
-        </div>
-      `;
-    }
-
-    preview.innerHTML = html;
-  }
-
-  showTemplateLink() {
-    const templateSection = document.getElementById('templateLinkSection');
-    const manualSection = document.getElementById('manualSetupSection');
-    
-    templateSection.style.display = 'block';
-    manualSection.style.display = 'none';
-    
-    // In a real implementation, this would be a working Airtable template URL
-    const templateLink = document.getElementById('templateLink');
-    templateLink.href = this.template.templateUrl || 'https://airtable.com/universe';
-    
-    // For now, show manual instructions as fallback
-    setTimeout(() => {
-      templateSection.style.display = 'none';
-      manualSection.style.display = 'block';
-      this.showManualInstructions();
-    }, 100);
-  }
-
-  showManualInstructions() {
-    const manualSection = document.getElementById('manualSetupSection');
-    const baseNameDisplay = document.getElementById('baseNameDisplay');
-    const creationScript = document.getElementById('creationScript');
-    
-    manualSection.style.display = 'block';
-    baseNameDisplay.textContent = this.template.template.baseName;
-    
-    // Generate creation script
-    const script = this.baseTemplate.generateCreationScript(this.template.template);
-    creationScript.value = script;
-  }
-
-  async prepareValidation() {
-    // Pre-populate credentials if available
-    const existingSettings = await this.getExistingSettings();
-    
-    if (existingSettings.airtableToken) {
-      document.getElementById('validationToken').value = existingSettings.airtableToken;
-    }
-    
-    if (existingSettings.baseId) {
-      document.getElementById('validationBaseId').value = existingSettings.baseId;
-    }
-    
-    // If both are available, auto-validate
-    if (existingSettings.airtableToken && existingSettings.baseId) {
-      setTimeout(() => this.validateBase(), 500);
-    }
-  }
-
-  async getExistingSettings() {
-    try {
-      const response = await chrome.runtime.sendMessage({
-        action: 'getSettings'
-      });
-      
-      return response.success ? response.settings : {};
-    } catch (error) {
-      console.error('Failed to get existing settings:', error);
-      return {};
-    }
-  }
-
-  async validateBase() {
-    const token = document.getElementById('validationToken').value.trim();
-    const baseId = document.getElementById('validationBaseId').value.trim();
-
-    if (!token || !baseId) {
-      this.showError('Please enter both Personal Access Token and Base ID');
-      return;
-    }
-
-    this.showLoading('Validating base structure...');
-
-    try {
-      const client = new AirtableClient(token, baseId);
-      const baseTemplate = new BaseTemplate(client);
-      const validation = await baseTemplate.validateBaseStructure(baseId);
-
-      this.displayValidationResults(validation);
-      
-      // Save settings if validation is successful
-      if (validation.score >= 40) {
-        await this.saveSettings(token, baseId);
-        document.getElementById('completeBtn').style.display = 'block';
-      }
-
-    } catch (error) {
-      console.error('Validation failed:', error);
-      this.showError('Validation failed: ' + error.message);
-    } finally {
-      this.hideLoading();
-    }
-  }
-
-  displayValidationResults(validation) {
-    const resultsDiv = document.getElementById('validationResults');
-    
-    let html = `
-      <div class="validation-result ${validation.status}">
-        <h3>
-          ${this.getStatusIcon(validation.status)} 
-          Base Score: ${validation.score}/${validation.maxScore || 100}
-        </h3>
-        <p><strong>Status:</strong> ${this.getStatusText(validation.status)}</p>
-    `;
-
-    if (validation.issues && validation.issues.length > 0) {
-      html += `
-        <div style="margin-top: 12px;">
-          <strong>Issues Found:</strong>
-          <ul style="margin: 4px 0 0 20px; font-size: 13px;">
-            ${validation.issues.map(issue => `<li>${issue}</li>`).join('')}
-          </ul>
-        </div>
-      `;
-    }
-
-    if (validation.recommendations && validation.recommendations.length > 0) {
-      html += `
-        <div style="margin-top: 12px;">
-          <strong>Recommendations:</strong>
-          <ul style="margin: 4px 0 0 20px; font-size: 13px;">
-            ${validation.recommendations.map(rec => `<li>${rec}</li>`).join('')}
-          </ul>
-        </div>
-      `;
-    }
-
-    html += '</div>';
-
-    if (validation.status === 'excellent' || validation.status === 'good') {
-      html += `
-        <div style="margin-top: 16px; padding: 12px; background-color: #d1fae5; border-radius: 6px;">
-          <strong>🎉 Great news!</strong> Your base is ready for Airtable Clipper. 
-          You can start saving LinkedIn profiles and web content right away.
-        </div>
-      `;
-    } else if (validation.status === 'fair') {
-      html += `
-        <div style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px;">
-          <strong>⚠️ Base needs some work.</strong> The extension will work, but you'll get 
-          better results by adding the recommended fields and tables.
-        </div>
-      `;
-    } else {
-      html += `
-        <div style="margin-top: 16px; padding: 12px; background-color: #fee2e2; border-radius: 6px;">
-          <strong>❌ Base needs significant improvements.</strong> Please create the missing 
-          tables and fields for the best experience.
-        </div>
-      `;
-    }
-
-    resultsDiv.innerHTML = html;
-    resultsDiv.style.display = 'block';
-  }
-
-  getStatusIcon(status) {
-    const icons = {
-      'excellent': '🌟',
-      'good': '✅', 
-      'fair': '⚠️',
-      'needs-work': '❌',
-      'error': '🚫'
-    };
-    return icons[status] || '❓';
-  }
-
-  getStatusText(status) {
-    const texts = {
-      'excellent': 'Perfect! Your base is optimally configured.',
-      'good': 'Great! Your base is well set up for clipping.',
-      'fair': 'Good start, but could use some improvements.',
-      'needs-work': 'Significant setup needed for best results.',
-      'error': 'Unable to validate. Check your credentials.'
-    };
-    return texts[status] || 'Unknown status';
-  }
-
-  async saveSettings(token, baseId) {
-    try {
-      await chrome.runtime.sendMessage({
-        action: 'saveSettings',
-        settings: {
-          airtableToken: token,
-          baseId: baseId
-        }
-      });
-    } catch (error) {
-      console.error('Failed to save settings:', error);
-    }
-  }
-
-  async completeSetup() {
-    this.showLoading('Completing setup...');
-    
-    try {
-      // Close setup wizard and return to main popup
-      window.close();
-      
-      // Open main popup to show completed setup
-      chrome.action.openPopup();
-      
-    } catch (error) {
-      console.error('Failed to complete setup:', error);
-      this.showError('Setup completion failed: ' + error.message);
-    } finally {
-      this.hideLoading();
-    }
-  }
-
-  showLoading(message = 'Loading...') {
-    const overlay = document.getElementById('loadingOverlay');
-    const text = document.getElementById('loadingText');
-    
-    text.textContent = message;
-    overlay.style.display = 'flex';
-  }
-
-  hideLoading() {
-    const overlay = document.getElementById('loadingOverlay');
-    overlay.style.display = 'none';
-  }
-
-  showError(message) {
-    // Create a simple error display
-    const errorDiv = document.createElement('div');
-    errorDiv.style.cssText = `
-      position: fixed;
-      top: 20px;
-      left: 20px;
-      right: 20px;
-      background-color: #fee2e2;
-      color: #991b1b;
-      padding: 12px;
-      border-radius: 6px;
-      border: 1px solid #fca5a5;
-      z-index: 10000;
-      font-size: 14px;
-    `;
-    errorDiv.innerHTML = `❌ ${message}`;
-    
-    document.body.appendChild(errorDiv);
-    
-    // Auto-remove after 5 seconds
-    setTimeout(() => {
-      if (errorDiv.parentNode) {
-        errorDiv.parentNode.removeChild(errorDiv);
-      }
-    }, 5000);
-  }
-}
-
-// Global functions for HTML onclick handlers
-window.nextStep = function() {
-  wizard.nextStep();
-};
-
-window.prevStep = function() {
-  wizard.prevStep();
-};
-
-window.validateBase = function() {
-  wizard.validateBase();
-};
-
-window.completeSetup = function() {
-  wizard.completeSetup();
-};
-
-window.copyScript = function() {
-  const script = document.getElementById('creationScript');
-  script.select();
-  document.execCommand('copy');
-  
-  // Show feedback
-  const button = event.target;
-  const originalText = button.textContent;
-  button.textContent = 'Copied!';
-  button.style.backgroundColor = '#10b981';
-  
-  setTimeout(() => {
-    button.textContent = originalText;
-    button.style.backgroundColor = '';
-  }, 2000);
-};
-
-// Initialize wizard when page loads
-let wizard;
-document.addEventListener('DOMContentLoaded', () => {
-  wizard = new BaseSetupWizard();
-});