WIP
This commit is contained in:
@@ -11,11 +11,15 @@
|
||||
<p class="text-secondary text-sm"><%= t(".description") %></p>
|
||||
</div>
|
||||
|
||||
<div data-controller="tabs" data-tabs-active-class="bg-container" data-tabs-default-tab-value="csv-paste-tab">
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="tab-item-active rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
|
||||
<button type="button" data-id="csv-paste-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
|
||||
<button type="button" data-id="csv-upload-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
|
||||
<div
|
||||
data-controller="tabs"
|
||||
data-tabs-active-class="bg-surface shadow-sm text-primary"
|
||||
data-tabs-inactive-class="text-secondary"
|
||||
data-tabs-default-tab-value="csv-upload-tab">
|
||||
<div class="flex justify-center mb-4 w-full">
|
||||
<div class="bg-surface-inset rounded-lg p-1 flex w-full">
|
||||
<button type="button" data-id="csv-upload-tab" class="w-1/2 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
|
||||
<button type="button" data-id="csv-paste-tab" class="w-1/2 px-2 py-1 rounded-md text-sm text-secondary font-medium" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,37 +1,46 @@
|
||||
<%# locals: (headers: [], rows: [], caption: nil) %>
|
||||
<div class="overflow-x-auto">
|
||||
<div class="border border-secondary rounded-md shadow-border-xs text-sm bg-container w-full">
|
||||
<div class="grid border-b border-b-alpha-black-200" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
|
||||
<% headers.each_with_index do |header, index| %>
|
||||
<div class="
|
||||
bg-container-inset px-3 py-2.5 font-medium whitespace-nowrap overflow-x-auto
|
||||
first:rounded-tl-md last:rounded-tr-md
|
||||
<%= "border-r border-r-alpha-black-200" unless index == headers.length - 1 %>
|
||||
">
|
||||
<%= header %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% rows.each_with_index do |row, row_index| %>
|
||||
<div class="grid <%= "border-b border-b-alpha-black-200" if row_index < rows.length - 1 || caption %>" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
|
||||
<% row.each_with_index do |(header, value), col_index| %>
|
||||
<div class="
|
||||
px-3 py-2.5 whitespace-nowrap overflow-x-auto flex items-start
|
||||
<%= "border-r border-r-alpha-black-200" unless col_index == row.length - 1 %>
|
||||
<%= "rounded-bl-md" if !caption && row_index == rows.length - 1 && col_index == 0 %>
|
||||
<%= "rounded-br-md" if !caption && row_index == rows.length - 1 && col_index == row.length - 1 %>
|
||||
">
|
||||
<%= value %>
|
||||
</div>
|
||||
<div class="overflow-x-auto -mx-4 sm:mx-0">
|
||||
<div class="inline-block min-w-full sm:w-full border border-secondary rounded-md shadow-border-xs text-sm bg-container">
|
||||
<table class="min-w-full divide-y divide-alpha-black-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<% headers.each_with_index do |header, index| %>
|
||||
<th class="
|
||||
bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
|
||||
<%= index == 0 ? 'rounded-tl-md' : '' %>
|
||||
<%= index == headers.length - 1 ? 'rounded-tr-md' : '' %>
|
||||
<%= index < headers.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
|
||||
">
|
||||
<%= header %>
|
||||
</th>
|
||||
<% end %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-alpha-black-200">
|
||||
<% rows.each_with_index do |row, row_index| %>
|
||||
<tr>
|
||||
<% row.each_with_index do |(header, value), col_index| %>
|
||||
<td class="
|
||||
px-3 py-2.5 whitespace-nowrap text-left
|
||||
<%= col_index < row.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
|
||||
<%= !caption && row_index == rows.length - 1 && col_index == 0 ? 'rounded-bl-md' : '' %>
|
||||
<%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? 'rounded-br-md' : '' %>
|
||||
">
|
||||
<%= value %>
|
||||
</td>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if caption %>
|
||||
<div class="px-3 py-2.5 text-center text-xs text-primary rounded-b-md italic bg-container-inset overflow-x-auto">
|
||||
<%= caption %>
|
||||
</div>
|
||||
<% end %>
|
||||
</tbody>
|
||||
<% if caption %>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="<%= headers.length %>" class="px-3 py-2.5 text-center text-xs text-primary rounded-b-md italic bg-container-inset">
|
||||
<%= caption %>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<% end %>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user