add submissions dashboard view
This commit is contained in:
Pete Matsyburka
@@ -0,0 +1,30 @@
|
||||
<%= form_for '', url: templates_upload_path, id: form_id = SecureRandom.uuid, method: :post, class: 'mt-8 block', html: { enctype: 'multipart/form-data' } do %>
|
||||
<input type="hidden" name="form_id" value="<%= form_id %>">
|
||||
<button type="submit" class="hidden"></button>
|
||||
<file-dropzone data-submit-on-upload="true" class="w-full">
|
||||
<label for="file_dropzone_input" class="w-full block h-52 relative hover:bg-base-200/30 rounded-xl border border-2 border-base-300 border-dashed">
|
||||
<div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<span data-target="file-dropzone.icon" class="flex flex-col items-center">
|
||||
<span>
|
||||
<%= svg_icon('cloud_upload', class: 'w-10 h-10') %>
|
||||
</span>
|
||||
<div class="font-medium mb-1">
|
||||
Upload New Document
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
<span class="font-medium">Click to upload</span> or drag and drop
|
||||
</div>
|
||||
</span>
|
||||
<span data-target="file-dropzone.loading" class="flex flex-col items-center hidden">
|
||||
<%= svg_icon('loader', class: 'w-10 h-10 animate-spin') %>
|
||||
<div class="font-medium mb-1">
|
||||
Uploading...
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<input id="file_dropzone_input" name="files[]" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="image/*, application/pdf<%= ', .docx, .doc, .xlsx, .xls' if Docuseal.multitenant? %>" multiple>
|
||||
</div>
|
||||
</label>
|
||||
</file-dropzone>
|
||||
<% end %>
|
||||
@@ -1,131 +1,55 @@
|
||||
<% status_badges = { 'awaiting' => 'badge-info', 'sent' => 'badge-info', 'completed' => 'badge-success', 'opened' => 'badge-warning' } %>
|
||||
<a href="<%= submission_path(submission) %>" class="bg-base-200 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:justify-between rounded-2xl px-5 md:px-6 py-5 md:items-center">
|
||||
<% submitters = (submission.template_submitters || submission.template.submitters).filter_map { |item| submission.submitters.find { |e| e.uuid == item['uuid'] } } %>
|
||||
<% is_submission_completed = submitters.all?(&:completed_at?) && submitters.size.positive? %>
|
||||
<% if submitters.size == 1 %>
|
||||
<div>
|
||||
<% submitter = submitters.first %>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex flex-col md:flex-row md:items-center gap-3">
|
||||
<div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
|
||||
<span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm font-semibold">
|
||||
<%= submitter.status %>
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-lg break-all flex items-center">
|
||||
<%= submitter.name || submitter.email || submitter.phone %>
|
||||
<div class="bg-base-200 rounded-2xl flex flex-col sm:flex-row items-strech">
|
||||
<% if local_assigns[:with_template] %>
|
||||
<% template = submission.template %>
|
||||
<a href="<%= template_path(template) %>" class="px-5 sm:pr-3 py-3 group sm:rounded-l-2xl sm:rounded-tr-none rounded-t-2xl flex sm:flex-col justify-between sm:w-52 w-full flex-shrink-0 bg-base-300/60 space-x-2 sm:space-x-0">
|
||||
<div>
|
||||
<div class="font-medium items-start w-full group-hover:link text-sm flex space-x-1">
|
||||
<%= svg_icon('file_text', class: 'w-4 h-4 mt-0.5 flex-shrink-0') %>
|
||||
<span style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
|
||||
<%= template.name %>
|
||||
<%= svg_icon('arrow_right', class: 'w-4 h-4 sm:inline group-hover:visible invisible hidden') %>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<% if submitter.completed_at? %>
|
||||
<form onsubmit="event.preventDefault()" class="flex-1 md:flex-none">
|
||||
<button onclick="event.stopPropagation()" class="w-full md:w-fit">
|
||||
<download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white w-full md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
|
||||
<%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
|
||||
<span class="inline">Download</span>
|
||||
</span>
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
|
||||
<%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
|
||||
<span class="inline">Downloa...</span>
|
||||
</span>
|
||||
</download-button>
|
||||
</button>
|
||||
</form>
|
||||
<% else %>
|
||||
<% if current_user.email == submitter.email %>
|
||||
<form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>" class="flex-1 md:flex-none">
|
||||
<button onclick="event.stopPropagation()" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2">
|
||||
<%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
|
||||
<span class="inline shrink-0">Sign now</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<% else %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<span class="btn btn-outline btn-sm w-full md:w-24">View</span>
|
||||
</div>
|
||||
<% if !submission.archived_at? && can?(:destroy, submission) %>
|
||||
<%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="space-y-1 w-full md:mr-2">
|
||||
<div class="flex flex-col md:flex-row md:items-center gap-3">
|
||||
<% if is_submission_completed %>
|
||||
<% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
|
||||
<div class="tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
|
||||
<span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
|
||||
<%= latest_submitter.status %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="w-full <%= is_submission_completed ? 'space-y-1' : 'space-y-4' %> md:space-y-0">
|
||||
<% submitters.each_with_index do |submitter, index| %>
|
||||
<div class="relative flex justify-between items-start md:items-center space-x-3">
|
||||
<span class="flex flex-col md:flex-row md:items-center gap-2">
|
||||
<% unless is_submission_completed %>
|
||||
<div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
|
||||
<span class="badge md:w-24 <%= status_badges[submitter.status] %> bg-opacity-50 uppercase text-xs font-semibold">
|
||||
<%= submitter.status %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<span class="text-lg break-all">
|
||||
<%= submitter.name || submitter.email || submitter.phone %>
|
||||
</span>
|
||||
</span>
|
||||
<% if submitter.completed_at? && !is_submission_completed %>
|
||||
<form onsubmit="event.preventDefault()">
|
||||
<button onclick="event.stopPropagation()">
|
||||
<download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="absolute md:relative top-0 right-0 btn btn-xs btn-neutral text-white md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
|
||||
<%= svg_icon('download', class: 'w-4 h-4 stroke-2') %>
|
||||
<span class="inline">Download</span>
|
||||
</span>
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
|
||||
<%= svg_icon('loader', class: 'w-4 h-4 animate-spin') %>
|
||||
<span class="inline">Downloa...</span>
|
||||
</span>
|
||||
</download-button>
|
||||
</button>
|
||||
</form>
|
||||
<% elsif !is_submission_completed %>
|
||||
<div class="relative flex items-center space-x-3">
|
||||
<% if current_user.email == submitter.email %>
|
||||
<form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
|
||||
<button onclick="event.stopPropagation()" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2">
|
||||
<%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
|
||||
<span class="inline shrink-0">Sign now</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<% else %>
|
||||
<%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'absolute md:relative top-0 right-0 btn btn-xs text-xs btn-neutral text-white w-28 md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy Link', copied_title_md: 'Copied' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-1 md:space-x-2 items-center">
|
||||
<% if is_submission_completed %>
|
||||
<% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<form onsubmit="event.preventDefault()" class="w-full md:w-fit">
|
||||
<button onclick="event.stopPropagation()">
|
||||
<download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
|
||||
<div class="flex-shrink-0 sm:mt-2">
|
||||
<div class="flex text-xs flex-col text-base-content/60 space-y-0.5">
|
||||
<span class="flex items-center space-x-1">
|
||||
<%= svg_icon('user', class: 'w-4 h-4 flex-shrink-0') %>
|
||||
<span><%= (submission.created_by_user || template.author).full_name.presence || (submission.created_by_user || template.author).email.to_s.sub(/\+\w+@/, '@') %></span>
|
||||
</span>
|
||||
<span class="flex items-center space-x-1">
|
||||
<%= svg_icon('calendar', class: 'w-4 h-4 flex-shrink-0') %>
|
||||
<span><%= l(submission.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<a href="<%= submission_path(submission) %>" class="w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:justify-between px-5 md:px-6 pb-5 md:items-center pt-5">
|
||||
<% submitters = (submission.template_submitters || submission.template.submitters).filter_map { |item| submission.submitters.find { |e| e.uuid == item['uuid'] } } %>
|
||||
<% is_submission_completed = submitters.all?(&:completed_at?) && submitters.size.positive? %>
|
||||
<% if submitters.size == 1 %>
|
||||
<div>
|
||||
<% submitter = submitters.first %>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex flex-col md:flex-row md:items-center gap-3">
|
||||
<div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
|
||||
<span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm font-semibold">
|
||||
<%= submitter.status %>
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-lg break-all flex items-center">
|
||||
<%= submitter.name || submitter.email || submitter.phone %>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<% if submitter.completed_at? %>
|
||||
<form onsubmit="event.preventDefault()" class="flex-1 md:flex-none">
|
||||
<button onclick="event.stopPropagation()" class="w-full md:w-fit">
|
||||
<download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white w-full md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
|
||||
<%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
|
||||
<span class="inline">Download</span>
|
||||
@@ -137,14 +61,122 @@
|
||||
</download-button>
|
||||
</button>
|
||||
</form>
|
||||
<% else %>
|
||||
<% if current_user.email == submitter.email %>
|
||||
<form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>" class="flex-1 md:flex-none">
|
||||
<button onclick="event.stopPropagation()" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2">
|
||||
<%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
|
||||
<span class="inline shrink-0">Sign now</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<% else %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<span class="btn btn-outline btn-sm w-full md:w-24">View</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<span class="btn btn-outline btn-sm w-full md:w-24">View</span>
|
||||
<% if !submission.archived_at? && can?(:destroy, submission) %>
|
||||
<span data-tip="Archive" class="sm:tooltip tooltip-top">
|
||||
<%= button_to button_title(title: nil, disabled_with: 'Arch', icon: svg_icon('archive', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Archive', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% unless submission.archived_at? %>
|
||||
<%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</a>
|
||||
<% else %>
|
||||
<div class="space-y-1 w-full md:mr-2">
|
||||
<div class="flex flex-col md:flex-row md:items-center gap-3">
|
||||
<% if is_submission_completed %>
|
||||
<% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
|
||||
<div class="tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
|
||||
<span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
|
||||
<%= latest_submitter.status %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="w-full <%= is_submission_completed ? 'space-y-1' : 'space-y-4' %> md:space-y-0">
|
||||
<% submitters.each_with_index do |submitter, index| %>
|
||||
<div class="relative flex justify-between items-start md:items-center space-x-3">
|
||||
<span class="flex flex-col md:flex-row md:items-center gap-2">
|
||||
<% unless is_submission_completed %>
|
||||
<div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
|
||||
<span class="badge md:w-24 <%= status_badges[submitter.status] %> bg-opacity-50 uppercase text-xs font-semibold">
|
||||
<%= submitter.status %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<span class="text-lg break-all">
|
||||
<%= submitter.name || submitter.email || submitter.phone %>
|
||||
</span>
|
||||
</span>
|
||||
<% if submitter.completed_at? && !is_submission_completed %>
|
||||
<form onsubmit="event.preventDefault()">
|
||||
<button onclick="event.stopPropagation()">
|
||||
<download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="absolute md:relative top-0 right-0 btn btn-xs btn-neutral text-white md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
|
||||
<%= svg_icon('download', class: 'w-4 h-4 stroke-2') %>
|
||||
<span class="inline">Download</span>
|
||||
</span>
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
|
||||
<%= svg_icon('loader', class: 'w-4 h-4 animate-spin') %>
|
||||
<span class="inline">Downloa...</span>
|
||||
</span>
|
||||
</download-button>
|
||||
</button>
|
||||
</form>
|
||||
<% elsif !is_submission_completed %>
|
||||
<div class="relative flex items-center space-x-3">
|
||||
<% if current_user.email == submitter.email %>
|
||||
<form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
|
||||
<button onclick="event.stopPropagation()" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2">
|
||||
<%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
|
||||
<span class="inline shrink-0">Sign now</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<% else %>
|
||||
<%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'absolute md:relative top-0 right-0 btn btn-xs text-xs btn-neutral text-white w-28 md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy Link', copied_title_md: 'Copied' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-1 md:space-x-2 items-center">
|
||||
<% if is_submission_completed %>
|
||||
<% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<form onsubmit="event.preventDefault()" class="w-full md:w-fit">
|
||||
<button onclick="event.stopPropagation()">
|
||||
<download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
|
||||
<%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
|
||||
<span class="inline">Download</span>
|
||||
</span>
|
||||
<span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
|
||||
<%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
|
||||
<span class="inline">Downloa...</span>
|
||||
</span>
|
||||
</download-button>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex-1 md:flex-none">
|
||||
<span class="btn btn-outline btn-sm w-full md:w-24">View</span>
|
||||
</div>
|
||||
<% unless submission.archived_at? %>
|
||||
<span data-tip="Archive" class="sm:tooltip tooltip-top">
|
||||
<%= button_to button_title(title: nil, disabled_with: 'Arch', icon: svg_icon('archive', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Archive', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user