docuseal/app/views/templates/_submission.html.erb

<% 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 %>
          </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">
                <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? %>
        <%= 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>