data_porter 0.1.0

data/app/javascript/data_porter/progress_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+import { createConsumer } from "@rails/actioncable"
+
+export default class extends Controller {
+  static targets = ["bar", "text"]
+  static values = { id: Number }
+
+  connect() {
+    this.subscription = createConsumer().subscriptions.create(
+      { channel: "DataPorter::ImportChannel", id: this.idValue },
+      {
+        received: (data) => {
+          if (data.status === "processing") {
+            this.updateProgress(data.percentage)
+          } else {
+            window.location.reload()
+          }
+        }
+      }
+    )
+  }
+
+  updateProgress(percentage) {
+    if (this.hasBarTarget) {
+      this.barTarget.style.width = `${percentage}%`
+      this.textTarget.textContent = `${percentage}%`
+    }
+  }
+
+  disconnect() {
+    this.subscription?.unsubscribe()
+  }
+}

data/app/jobs/data_porter/dry_run_job.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class DryRunJob < ActiveJob::Base
+    queue_as { DataPorter.configuration.queue_name }
+
+    def perform(import_id)
+      data_import = DataImport.find(import_id)
+      Orchestrator.new(data_import).dry_run!
+    end
+  end
+end

data/app/jobs/data_porter/import_job.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class ImportJob < ActiveJob::Base
+    queue_as { DataPorter.configuration.queue_name }
+
+    def perform(import_id)
+      data_import = DataImport.find(import_id)
+      Orchestrator.new(data_import).import!
+    end
+  end
+end

data/app/jobs/data_porter/parse_job.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class ParseJob < ActiveJob::Base
+    queue_as { DataPorter.configuration.queue_name }
+
+    def perform(import_id)
+      data_import = DataImport.find(import_id)
+      Orchestrator.new(data_import).parse!
+    end
+  end
+end

data/app/models/data_porter/data_import.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class DataImport < ActiveRecord::Base
+    self.table_name = "data_porter_imports"
+
+    has_one_attached :file
+
+    belongs_to :user, polymorphic: true, optional: true
+
+    enum :status, {
+      pending: 0,
+      parsing: 1,
+      previewing: 2,
+      importing: 3,
+      completed: 4,
+      failed: 5,
+      dry_running: 6
+    }
+
+    attribute :records, StoreModels::ImportRecord.to_array_type, default: -> { [] }
+    attribute :report, StoreModels::Report.to_type, default: -> { StoreModels::Report.new }
+
+    attribute :config, :json, default: -> { {} }
+
+    validates :target_key, presence: true
+    validates :source_type, presence: true, inclusion: { in: %w[csv json api] }
+
+    def target_class
+      Registry.find(target_key)
+    end
+
+    def source_class
+      Sources.resolve(source_type)
+    end
+
+    def previewable?
+      previewing? && records.any?
+    end
+
+    def importable_records
+      records.select(&:importable?)
+    end
+
+    def records_summary
+      records.group_by(&:status).transform_values(&:count)
+    end
+  end
+end

data/app/views/data_porter/imports/index.html.erb

@@ -0,0 +1,142 @@
+<%= stylesheet_link_tag "data_porter/application" %>
+
+<div class="data-porter">
+  <div class="dp-header">
+    <h1 class="dp-title">Imports</h1>
+    <button type="button" class="dp-btn dp-btn--primary" onclick="document.getElementById('dp-modal').classList.add('dp-modal--open')">
+      New Import
+    </button>
+  </div>
+
+  <% if @imports.any? %>
+    <table class="dp-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Target</th>
+          <th>Source</th>
+          <th>Status</th>
+          <th>Created</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @imports.each do |import| %>
+          <tr>
+            <td><%= import.id %></td>
+            <td><%= import.target_key %></td>
+            <td><%= import.source_type %></td>
+            <td><%= raw DataPorter::Components::StatusBadge.new(status: import.status).call %></td>
+            <td><%= import.created_at&.strftime("%Y-%m-%d %H:%M") %></td>
+            <td><%= link_to "View", import_path(import), class: "dp-link" %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <div class="dp-empty-state">
+      <div class="dp-empty-state__icon">&#128230;</div>
+      <p class="dp-empty-state__text">No imports yet</p>
+      <button type="button" class="dp-btn dp-btn--primary" onclick="document.getElementById('dp-modal').classList.add('dp-modal--open')">
+        Create your first import
+      </button>
+    </div>
+  <% end %>
+</div>
+
+<div id="dp-modal" class="dp-modal">
+  <div class="dp-modal__backdrop" onclick="document.getElementById('dp-modal').classList.remove('dp-modal--open')"></div>
+  <div class="dp-modal__content">
+    <div class="dp-modal__header">
+      <h2 class="dp-modal__title">New Import</h2>
+      <button type="button" class="dp-modal__close" onclick="document.getElementById('dp-modal').classList.remove('dp-modal--open')">&times;</button>
+    </div>
+
+    <%= form_with model: DataPorter::DataImport.new, url: imports_path, class: "dp-modal__body", multipart: true do |f| %>
+      <div class="dp-field">
+        <%= f.label :target_key, "Target", class: "dp-label" %>
+        <%= f.select :target_key,
+              @targets.map { |t| [t[:label], t[:key]] },
+              { prompt: "Select a target..." },
+              class: "dp-select" %>
+      </div>
+
+      <div class="dp-field">
+        <%= f.label :source_type, "Source Type", class: "dp-label" %>
+        <%= f.select :source_type,
+              DataPorter.configuration.enabled_sources.map { |s| [s.to_s.upcase, s] },
+              { prompt: "Select source type..." },
+              id: "dp-source-select",
+              class: "dp-select" %>
+      </div>
+
+      <div id="dp-file-field" class="dp-field">
+        <%= f.label :file, "File", class: "dp-label" %>
+        <label class="dp-dropzone" id="dp-dropzone">
+          <input type="file" name="data_import[file]" id="dp-file-input" class="dp-dropzone__input" />
+          <div class="dp-dropzone__content">
+            <div class="dp-dropzone__icon">&#128196;</div>
+            <span class="dp-dropzone__text">Drop your file here or <strong>browse</strong></span>
+            <span class="dp-dropzone__hint">CSV or JSON files accepted</span>
+          </div>
+          <div class="dp-dropzone__selected" id="dp-file-name" style="display: none;"></div>
+        </label>
+      </div>
+
+      <div class="dp-modal__footer">
+        <%= f.submit "Start Import", class: "dp-btn dp-btn--primary" %>
+        <button type="button" class="dp-btn dp-btn--secondary" onclick="document.getElementById('dp-modal').classList.remove('dp-modal--open')">Cancel</button>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<script>
+  (function() {
+    var sourceSelect = document.getElementById("dp-source-select");
+    var fileField = document.getElementById("dp-file-field");
+    var fileInput = document.getElementById("dp-file-input");
+    var dropzone = document.getElementById("dp-dropzone");
+    var fileName = document.getElementById("dp-file-name");
+
+    if (sourceSelect) {
+      sourceSelect.addEventListener("change", function() {
+        fileField.style.display = this.value === "api" ? "none" : "";
+      });
+    }
+
+    if (fileInput) {
+      fileInput.addEventListener("change", function() {
+        if (this.files.length > 0) {
+          fileName.textContent = this.files[0].name;
+          fileName.style.display = "";
+          dropzone.classList.add("dp-dropzone--has-file");
+        }
+      });
+    }
+
+    if (dropzone) {
+      dropzone.addEventListener("dragover", function(e) {
+        e.preventDefault();
+        this.classList.add("dp-dropzone--dragover");
+      });
+      dropzone.addEventListener("dragleave", function() {
+        this.classList.remove("dp-dropzone--dragover");
+      });
+      dropzone.addEventListener("drop", function(e) {
+        e.preventDefault();
+        this.classList.remove("dp-dropzone--dragover");
+        if (e.dataTransfer.files.length > 0) {
+          fileInput.files = e.dataTransfer.files;
+          fileInput.dispatchEvent(new Event("change"));
+        }
+      });
+    }
+
+    document.addEventListener("keydown", function(e) {
+      if (e.key === "Escape") {
+        document.getElementById("dp-modal").classList.remove("dp-modal--open");
+      }
+    });
+  })();
+</script>

data/app/views/data_porter/imports/new.html.erb

@@ -0,0 +1,88 @@
+<%= stylesheet_link_tag "data_porter/application" %>
+
+<div class="data-porter">
+  <div class="dp-header">
+    <h1 class="dp-title">New Import</h1>
+  </div>
+
+  <%= form_with model: @import, url: imports_path, class: "dp-form", multipart: true do |f| %>
+    <div class="dp-field">
+      <%= f.label :target_key, "Target", class: "dp-label" %>
+      <%= f.select :target_key,
+            @targets.map { |t| [t[:label], t[:key]] },
+            { prompt: "Select a target..." },
+            class: "dp-select" %>
+    </div>
+
+    <div class="dp-field">
+      <%= f.label :source_type, "Source Type", class: "dp-label" %>
+      <%= f.select :source_type,
+            DataPorter.configuration.enabled_sources.map { |s| [s.to_s.upcase, s] },
+            { prompt: "Select source type..." },
+            id: "dp-source-select-new",
+            class: "dp-select" %>
+    </div>
+
+    <div id="dp-file-field-new" class="dp-field">
+      <%= f.label :file, "File", class: "dp-label" %>
+      <label class="dp-dropzone" id="dp-dropzone-new">
+        <input type="file" name="data_import[file]" id="dp-file-input-new" class="dp-dropzone__input" />
+        <div class="dp-dropzone__content">
+          <div class="dp-dropzone__icon">&#128196;</div>
+          <span class="dp-dropzone__text">Drop your file here or <strong>browse</strong></span>
+          <span class="dp-dropzone__hint">CSV or JSON files accepted</span>
+        </div>
+        <div class="dp-dropzone__selected" id="dp-file-name-new" style="display: none;"></div>
+      </label>
+    </div>
+
+    <div class="dp-actions">
+      <%= f.submit "Start Import", class: "dp-btn dp-btn--primary" %>
+      <%= link_to "Cancel", imports_path, class: "dp-btn dp-btn--secondary" %>
+    </div>
+  <% end %>
+</div>
+
+<script>
+  (function() {
+    var sourceSelect = document.getElementById("dp-source-select-new");
+    var fileField = document.getElementById("dp-file-field-new");
+    var fileInput = document.getElementById("dp-file-input-new");
+    var dropzone = document.getElementById("dp-dropzone-new");
+    var fileName = document.getElementById("dp-file-name-new");
+
+    if (sourceSelect) {
+      sourceSelect.addEventListener("change", function() {
+        fileField.style.display = this.value === "api" ? "none" : "";
+      });
+    }
+
+    if (fileInput) {
+      fileInput.addEventListener("change", function() {
+        if (this.files.length > 0) {
+          fileName.textContent = this.files[0].name;
+          fileName.style.display = "";
+          dropzone.classList.add("dp-dropzone--has-file");
+        }
+      });
+    }
+
+    if (dropzone) {
+      dropzone.addEventListener("dragover", function(e) {
+        e.preventDefault();
+        this.classList.add("dp-dropzone--dragover");
+      });
+      dropzone.addEventListener("dragleave", function() {
+        this.classList.remove("dp-dropzone--dragover");
+      });
+      dropzone.addEventListener("drop", function(e) {
+        e.preventDefault();
+        this.classList.remove("dp-dropzone--dragover");
+        if (e.dataTransfer.files.length > 0) {
+          fileInput.files = e.dataTransfer.files;
+          fileInput.dispatchEvent(new Event("change"));
+        }
+      });
+    }
+  })();
+</script>

data/app/views/data_porter/imports/show.html.erb

@@ -0,0 +1,49 @@
+<%= stylesheet_link_tag "data_porter/application" %>
+
+<div class="data-porter">
+  <div class="dp-header">
+    <h1 class="dp-title">
+      <%= @target._label %> Import #<%= @import.id %>
+    </h1>
+    <%= raw DataPorter::Components::StatusBadge.new(status: @import.status).call %>
+  </div>
+
+  <% if @import.parsing? || @import.importing? || @import.dry_running? %>
+    <%= raw DataPorter::Components::ProgressBar.new(import_id: @import.id).call %>
+  <% end %>
+
+  <% if @import.previewing? %>
+    <%= raw DataPorter::Components::SummaryCards.new(report: @import.report).call %>
+    <%= raw DataPorter::Components::PreviewTable.new(
+          columns: @target._columns,
+          records: @records
+        ).call %>
+
+    <div class="dp-actions">
+      <%= button_to "Confirm", confirm_import_path(@import),
+            method: :post, class: "dp-btn dp-btn--primary" %>
+      <% if @target._dry_run_enabled %>
+        <%= button_to "Dry Run", dry_run_import_path(@import),
+              method: :post, class: "dp-btn dp-btn--secondary" %>
+      <% end %>
+      <%= button_to "Cancel", cancel_import_path(@import),
+            method: :post, class: "dp-btn dp-btn--danger" %>
+    </div>
+  <% end %>
+
+  <% if @import.completed? %>
+    <%= raw DataPorter::Components::ResultsSummary.new(report: @import.report).call %>
+  <% end %>
+
+  <% if @import.failed? %>
+    <%= raw DataPorter::Components::FailureAlert.new(report: @import.report).call %>
+    <div class="dp-actions">
+      <%= button_to "Retry", parse_import_path(@import),
+            method: :post, class: "dp-btn dp-btn--primary" %>
+    </div>
+  <% end %>
+
+  <div class="dp-nav">
+    <%= link_to "Back to imports", imports_path, class: "dp-link" %>
+  </div>
+</div>

data/config/database.yml

@@ -0,0 +1,3 @@
+test:
+  adapter: sqlite3
+  database: ":memory:"

data/config/routes.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+DataPorter::Engine.routes.draw do
+  resources :imports, only: %i[index new create show] do
+    member do
+      post :parse
+      post :confirm
+      post :cancel
+      post :dry_run
+    end
+  end
+end