mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 06:25:19 +02:00
40 lines
2.3 KiB
Text
40 lines
2.3 KiB
Text
|
<%= form_with model: @import, url: upload_import_path(@import), class: "dropzone", data: { controller: "csv-upload" }, 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">
|
||
|
|
<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" } %>
|
||
|
|
<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>
|
||
|
|
</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) } %>
|
||
|
|
<% 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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bg-alpha-black-25 rounded-xl p-1 mt-5">
|
||
|
|
<div class="text-gray-500 p-2 mb-2">
|
||
|
|
<div class="flex gap-2 mb-2">
|
||
|
|
<%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
|
||
|
|
<p class="text-sm">
|
||
|
|
<%= t(".instructions") %>
|
||
|
|
<span class="text-black underline">
|
||
|
|
<%= link_to "download this template", "/transactions.csv", download: "" %>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<%= render partial: "imports/sample_table" %>
|
||
|
|
</div>
|