@rashidazarang/airtable-mcp 1.5.0 → 2.1.0

package/airtable-clipper/releases/v1.0.1/base-setup.js

@@ -0,0 +1,471 @@
+// 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();
+});