Refactor: Allow other import files (#1099)

* Rename stimulus controller

* feature: rename raw_csv_str to raw_file_str

app/controllers/imports_controller.rb

@@ -40,7 +40,7 @@ class ImportsController < ApplicationController
 
   def upload_csv
     begin
-      @import.raw_csv_str = import_params[:raw_csv_str].read
+      @import.raw_file_str = import_params[:raw_file_str].read
     rescue NoMethodError
       flash.now[:alert] = "Please select a file to upload"
       render :load, status: :unprocessable_entity and return
@@ -113,6 +113,6 @@ class ImportsController < ApplicationController
     end
 
     def import_params(permitted_mappings = nil)
-      params.require(:import).permit(:raw_csv_str, column_mappings: permitted_mappings, csv_update: [ :row_idx, :col_idx, :value ])
+      params.require(:import).permit(:raw_file_str, column_mappings: permitted_mappings, csv_update: [ :row_idx, :col_idx, :value ])
     end
 end

app/javascript/controllers/import_upload_controller.js

@@ -2,6 +2,11 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["input", "preview", "submit", "filename", "filesize"]
+  static values = {
+    acceptedTypes: Array, // ["text/csv", "application/csv", ".csv"]
+    acceptedExtension: String, // "csv"
+    unacceptableTypeLabel: String, // "Only CSV files are allowed."
+  };
 
   connect() {
     this.submitTarget.disabled = true
@@ -30,15 +35,19 @@ export default class extends Controller {
     event.currentTarget.classList.remove("bg-gray-100")
 
     const file = event.dataTransfer.files[0]
-    if (file && this._isCSVFile(file)) {
+    if (file && this._formatAcceptable(file)) {
       this._setFileInput(file);
       this._fileAdded(file)
     } else {
       this.previewTarget.classList.add("text-red-500")
-      this.previewTarget.textContent = "Only CSV files are allowed."
+      this.previewTarget.textContent = this.unacceptableTypeLabelValue
     }
   }
 
+  click() {
+    this.inputTarget.click();
+  }
+
   // Private
 
   _fetchFileSize(size) {
@@ -57,7 +66,7 @@ export default class extends Controller {
     if (file) {
       if (file.size > fileSizeLimit) {
         this.previewTarget.classList.add("text-red-500")
-        this.previewTarget.textContent = "File size exceeds the limit of 5MB"
+        this.previewTarget.textContent = this.unacceptableTypeLabelValue
         return
       }
 
@@ -80,10 +89,9 @@ export default class extends Controller {
     }
   }
 
-  _isCSVFile(file) {
-    const acceptedTypes = ["text/csv", "application/csv", ".csv"]
+  _formatAcceptable(file) {
     const extension = file.name.split('.').pop().toLowerCase()
-    return acceptedTypes.includes(file.type) || extension === "csv"
+    return this.acceptedTypesValue.includes(file.type) || extension === this.acceptedExtensionValue
   }
 
   _setFileInput(file) {

app/models/import.rb

@@ -1,7 +1,7 @@
 class Import < ApplicationRecord
   belongs_to :account
 
-  validate :raw_csv_must_be_parsable
+  validate :raw_file_must_be_parsable
   validates :col_sep, inclusion: { in: Csv::COL_SEP_LIST }
 
   before_save :initialize_csv, if: :should_initialize_csv?
@@ -19,7 +19,7 @@ class Import < ApplicationRecord
   end
 
   def loaded?
-    raw_csv_str.present?
+    raw_file_str.present?
   end
 
   def configured?
@@ -88,16 +88,16 @@ class Import < ApplicationRecord
     end
 
     def get_raw_csv
-      return nil if raw_csv_str.nil?
-      Import::Csv.new(raw_csv_str, col_sep:)
+      return nil if raw_file_str.nil?
+      Import::Csv.new(raw_file_str, col_sep:)
     end
 
     def should_initialize_csv?
-      raw_csv_str_changed? || column_mappings_changed?
+      raw_file_str_changed? || column_mappings_changed?
     end
 
     def initialize_csv
-      generated_csv = generate_normalized_csv(raw_csv_str)
+      generated_csv = generate_normalized_csv(raw_file_str)
       self.normalized_csv_str = generated_csv.table.to_s
     end
 
@@ -175,12 +175,12 @@ class Import < ApplicationRecord
       end
     end
 
-    def raw_csv_must_be_parsable
+    def raw_file_must_be_parsable
       begin
-        CSV.parse(raw_csv_str || "", col_sep:)
+        CSV.parse(raw_file_str || "", col_sep:)
       rescue CSV::MalformedCSVError
-        # i18n-tasks-use t('activerecord.errors.models.import.attributes.raw_csv_str.invalid_csv_format')
-        errors.add(:raw_csv_str, :invalid_csv_format)
+        # i18n-tasks-use t('activerecord.errors.models.import.attributes.raw_file_str.invalid_csv_format')
+        errors.add(:raw_file_str, :invalid_csv_format)
       end
     end
 end

app/models/import/csv.rb

@@ -11,8 +11,8 @@ class Import::Csv
     )
   end
 
-  def self.create_with_field_mappings(raw_csv_str, fields, field_mappings, col_sep = DEFAULT_COL_SEP)
-    raw_csv = self.parse_csv(raw_csv_str, col_sep:)
+  def self.create_with_field_mappings(raw_file_str, fields, field_mappings, col_sep = DEFAULT_COL_SEP)
+    raw_csv = self.parse_csv(raw_file_str, col_sep:)
 
     generated_csv_str = CSV.generate headers: fields.map { |f| f.key }, write_headers: true, col_sep: do |csv|
       raw_csv.each do |row|

app/views/imports/_csv_paste.html.erb

@@ -1,11 +1,11 @@
 <%= styled_form_with model: @import, url: load_import_path(@import), class: "space-y-4" do |form| %>
-    <%= form.text_area :raw_csv_str,
+    <%= form.text_area :raw_file_str,
                        rows: 10,
                        required: true,
                        placeholder: "Paste your CSV file contents here",
                        class: "rounded-md w-full border text-sm border-alpha-black-100 bg-white placeholder:text-gray-400" %>
 
-  <%= form.submit t(".next"), class: "px-4 py-2 mb-4 block w-full rounded-lg bg-gray-900 text-white text-sm font-medium", data: { turbo_confirm: (@import.raw_csv_str? ? { title: t(".confirm_title"), body: t(".confirm_body"), accept: t(".confirm_accept") } : nil) } %>
+  <%= form.submit t(".next"), class: "px-4 py-2 mb-4 block w-full rounded-lg bg-gray-900 text-white text-sm font-medium", data: { turbo_confirm: (@import.raw_file_str? ? { title: t(".confirm_title"), body: t(".confirm_body"), accept: t(".confirm_accept") } : nil) } %>
 <% end %>
 
 <div class="bg-alpha-black-25 rounded-xl p-1 mt-5">

app/views/imports/_csv_upload.html.erb

@@ -1,24 +1,24 @@
-<%= styled_form_with model: @import, url: upload_import_path(@import), class: "dropzone space-y-4", data: { controller: "csv-upload" }, method: :patch, multipart: true do |form| %>
+<%= styled_form_with model: @import, url: upload_import_path(@import), class: "dropzone space-y-4", data: { controller: "import-upload", import_upload_accepted_types_value: ["text/csv", "application/csv", ".csv"], import_upload_extension_value: "csv", import_upload_unacceptable_type_label_value: t(".allowed_filetypes") }, method: :patch, multipart: true do |form| %>
   <div class="flex items-center justify-center w-full">
-    <label for="import_raw_csv_str" class="csv-drop-box flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50" data-action="dragover->csv-upload#dragover dragleave->csv-upload#dragleave drop->csv-upload#drop">
+    <label for="import_raw_file_str" class="raw-file-drop-box flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50" data-action="dragover->import-upload#dragover dragleave->import-upload#dragleave drop->import-upload#drop click->import-upload#click">
       <div class="flex flex-col items-center justify-center pt-5 pb-6">
         <%= lucide_icon "plus", class: "w-5 h-5 text-gray-500" %>
-        <%= form.file_field :raw_csv_str, class: "hidden", direct_upload: false, accept: "text/csv,.csv,application/csv", data: { csv_upload_target: "input", action: "change->csv-upload#addFile" } %>
+        <%= form.file_field :raw_file_str, class: "hidden", direct_upload: false, accept: "text/csv,.csv,application/csv", data: { import_upload_target: "input", action: "change->import-upload#addFile" } %>
         <p class="mb-2 text-sm text-gray-500 mt-3">Drag and drop your csv file here or <span class="text-black">click to browse</span></p>
         <p class="text-xs text-gray-500">CSV (Max. 5MB)</p>
-        <div class="csv-preview" data-csv-upload-target="preview"></div>
+        <div class="csv-preview" data-import-upload-target="preview"></div>
       </div>
     </label>
   </div>
-  <%= form.submit t(".next"), class: "px-4 py-2 mb-4 block w-full rounded-lg bg-alpha-black-25 text-gray text-sm font-medium", data: { csv_upload_target: "submit", turbo_confirm: (@import.raw_csv_str? ? { title: t(".confirm_title"), body: t(".confirm_body"), accept: t(".confirm_accept") } : nil) } %>
+  <%= form.submit t(".next"), class: "px-4 py-2 mb-4 block w-full rounded-lg bg-alpha-black-25 text-gray text-sm font-medium", data: { import_upload_target: "submit", turbo_confirm: (@import.raw_file_str? ? { title: t(".confirm_title"), body: t(".confirm_body"), accept: t(".confirm_accept") } : nil) } %>
 <% end %>
 
 <div id="template-preview" class="hidden">
   <div class="flex flex-col items-center justify-center">
     <%= lucide_icon "file-text", class: "w-10 h-10 pt-2 text-black" %>
     <div class="flex flex-row items-center justify-center gap-0.5">
-      <div><span data-csv-upload-target="filename"></span></div>
-      <div><span data-csv-upload-target="filesize" class="font-semibold"></span></div>
+      <div><span data-import-upload-target="filename"></span></div>
+      <div><span data-import-upload-target="filesize" class="font-semibold"></span></div>
     </div>
   </div>
 </div>