adjust dashboard templates style

app/controllers/dashboard_controller.rb

@@ -6,6 +6,8 @@ class DashboardController < ApplicationController
   def index
     return render 'pages/landing' unless signed_in?
 
-    @pagy, @templates = pagy(current_account.templates.active, items: 12)
+    templates = current_account.templates.active.preload(:author).order(id: :desc)
+
+    @pagy, @templates = pagy(templates, items: 12)
   end
 end

app/controllers/submissions_controller.rb

@@ -1,11 +1,7 @@
 # frozen_string_literal: true
 
 class SubmissionsController < ApplicationController
-  before_action :load_template, only: %i[index new create]
-
-  def index
-    @pagy, @submissions = pagy(@template.submissions.active)
-  end
+  before_action :load_template, only: %i[new create]
 
   def show
     @submission =
@@ -32,7 +28,7 @@ class SubmissionsController < ApplicationController
       end
     end
 
-    redirect_to template_submissions_path(@template),
+    redirect_to template_path(@template),
                 notice: "#{submissions.size} #{'recipient'.pluralize(submissions.size)} added"
   end
 
@@ -42,7 +38,7 @@ class SubmissionsController < ApplicationController
 
     submission.update!(deleted_at: Time.current)
 
-    redirect_to template_submissions_path(submission.template), notice: 'Submission has been archived'
+    redirect_back(fallback_location: template_path(submission.template), notice: 'Submission has been archived')
   end
 
   private

app/controllers/templates_controller.rb

@@ -1,13 +1,12 @@
 # frozen_string_literal: true
 
 class TemplatesController < ApplicationController
-  layout 'plain'
-
   before_action :load_base_template, only: %i[new create]
 
   def show
-    @template = current_account.templates.preload(documents_attachments: { preview_images_attachments: :blob })
-                               .find(params[:id])
+    @template = current_account.templates.find(params[:id])
+
+    @pagy, @submissions = pagy(@template.submissions.active)
   end
 
   def new
@@ -15,20 +14,22 @@ class TemplatesController < ApplicationController
     @template.name = "#{@base_template.name} (Clone)" if @base_template
   end
 
-  def create
-    @template =
-      if @base_template
-        current_account.templates.new(**@base_template.slice(:fields, :schema, :submitters), **template_params)
-      else
-        current_account.templates.new(template_params)
-      end
+  def edit
+    @template = current_account.templates.preload(documents_attachments: { preview_images_attachments: :blob })
+                               .find(params[:id])
 
+    render :edit, layout: 'plain'
+  end
+
+  def create
+    @template = current_account.templates.new(template_params)
     @template.author = current_user
+    @template.assign_attributes(@base_template.slice(:fields, :schema, :submitters)) if @base_template
 
     if @template.save
       Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
 
-      redirect_to template_path(@template)
+      redirect_to edit_template_path(@template)
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_entity
     end
@@ -38,7 +39,7 @@ class TemplatesController < ApplicationController
     @template = current_account.templates.find(params[:id])
     @template.update!(deleted_at: Time.current)
 
-    redirect_to settings_users_path, notice: 'template has been archived.'
+    redirect_back(fallback_location: root_path, notice: 'Template has been archived.')
   end
 
   private

app/javascript/template_builder/builder.vue

@@ -405,7 +405,7 @@ export default {
       this.isSaving = true
 
       this.save().then(() => {
-        window.Turbo.visit(`/templates/${this.template.id}/submissions`)
+        window.Turbo.visit(`/templates/${this.template.id}`)
       }).finally(() => {
         this.isSaving = false
       })

app/views/dashboard/index.html.erb

@@ -1,4 +1,4 @@
-<%- if @templates.any? %>
+<% if @templates.any? %>
   <div class="flex justify-between mb-4">
     <h1 class="text-4xl font-bold">Templates</h1>
     <%= link_to new_template_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: :modal } do %>
@@ -8,24 +8,38 @@
   </div>
   <div class="grid gap-4 md:grid-cols-3">
     <% @templates.each do |template| %>
-      <div class="card bg-base-300">
-        <div class="card-body">
-          <h2 class="card-title flex justify-between">
-            <%= link_to template.name, template_submissions_path(template) %>
-            <%= link_to 'Edit', template_path(template), class: 'btn btn-outline btn-xs' %>
-          </h2>
-          <div >
-            <p class="text-sm opacity-70 mb-1">Created by <%= template.author.full_name %></p>
-            <p class="flex items-center gap-1 text-xs opacity-50">
+      <div class="h-36 relative group">
+        <a href="<%= template_path(template) %>" class="flex h-full flex-col justify-between rounded-2xl pt-6 px-7 w-full bg-base-200 peer">
+          <div class="pb-4 text-xl font-semibold" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+            <%= template.name %>
+          </div>
+          <div class="pb-6 pt-1" >
+            <p class="flex items-center space-x-1 text-xs text-base-content/60">
+              <%= svg_icon('user', class: 'w-4 h-4') %>
+              <span><%= template.author.full_name %></span>
+            </p>
+            <p class="flex items-center space-x-1 text-xs text-base-content/60">
               <%= svg_icon('calendar', class: 'w-4 h-4') %>
               <span><%= l(template.created_at, format: :long) %></span>
             </p>
           </div>
+        </a>
+        <div class="absolute top-0 bottom-0 w-0 pt-7 space-y-1.5 hidden group-hover:block" style="right: 40px">
+          <a href="<%= edit_template_path(template) %>" class="btn btn-xs btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('pencil', class: 'w-4 h-4') %>
+          </a>
+          <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('copy', class: 'w-4 h-4') %>
+          </a>
+          <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-outline bg-base-200 btn-circle" do %>
+            <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
+            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+          <% end %>
         </div>
       </div>
     <% end %>
   </div>
-  <%= render 'shared/pagination', pagy: @pagy %>
+  <%= render 'shared/pagination', pagy: @pagy, items_name: 'Templates' %>
 <% else %>
   <div class="card bg-base-200 h-96 mb-2">
     <div class="card-body text-center">

app/views/layouts/application.html.erb

@@ -15,7 +15,7 @@
     <turbo-frame id="modal"></turbo-frame>
     <%= render 'shared/navbar' %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>
-    <div class="max-w-6xl mx-auto px-4 md:px-2">
+    <div class="max-w-6xl mx-auto px-4 md:px-2 mb-8">
       <%= yield %>
     </div>
   </body>

app/views/shared/_navbar.html.erb

@@ -5,7 +5,7 @@
   </a>
   <% if signed_in? %>
     <div class="space-x-6">
-      <%= link_to 'Settings', settings_storage_index_path, class: 'font-medium text-lg' %>
+      <%= link_to 'Settings', settings_profile_index_path, class: 'font-medium text-lg' %>
       <div class="dropdown dropdown-end z-50">
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full w-8 p-2">
           <span class="text-sm align-text-top"><%= current_user.initials %></span>

app/views/shared/_pagination.html.erb

@@ -1,19 +1,22 @@
 <% link = pagy_link_proc(@pagy) %>
 <% if @pagy.pages > 1 %>
-  <div class="flex my-6 items-center justify-center md:justify-end">
+  <div class="flex my-6 justify-center md:justify-between">
+    <div class="hidden md:block text-sm">
+      <%= @pagy.from %>-<%= @pagy.to %> of <%= @pagy.count %> of <%= local_assigns[:items_name] || 'items' %>
+    </div>
     <div class="join">
       <% if @pagy.prev %>
-        <%== link.call(@pagy.prev, "«", 'class="join-item btn btn-sm"') %>
+        <%== link.call(@pagy.prev, "«", 'class="join-item btn min-h-full h-10"') %>
       <% else %>
-        <span class="join-item btn btn-sm btn-disabled !bg-base-200">«</span>
+        <span class="join-item btn btn-disabled !bg-base-200 min-h-full h-10">«</span>
       <% end %>
-      <span class="join-item btn btn-sm uppercase">
+      <span class="join-item btn uppercase min-h-full h-10">
         Page <%= @pagy.page %>
       </span>
       <% if @pagy.next %>
-        <%== link.call(@pagy.next, "»", 'class="join-item btn btn-sm"') %>
+        <%== link.call(@pagy.next, "»", 'class="join-item btn min-h-full h-10"') %>
       <% else %>
-        <span class="join-item btn btn-sm btn-disabled !bg-base-200">»</span>
+        <span class="join-item btn btn-disabled !bg-base-200 min-h-full h-10">»</span>
       <% end %>
     </div>
   </div>

app/views/submissions/index.html.erb

@@ -1,103 +0,0 @@
-<div class="card card-compact bg-primary mb-12 md:card-normal">
-  <div class="card-body">
-    <div class="grid md:grid-cols-2 gap-4 md:flex md:justify-between">
-      <h2 class="card-title text-4xl ">
-        <%= @template.name %>
-      </h2>
-      <div class="flex md:justify-between space-x-2">
-        <%= link_to new_template_path(base_template_id: @template.id), class: 'btn btn-outline btn-sm', data: { turbo_frame: :modal } do %>
-          <%= svg_icon('copy', class: 'w-6 h-6') %>
-          <span>Clone</span>
-        <% end %>
-        <%= link_to template_path(@template), class: 'btn btn-outline btn-sm' do %>
-          <span class="flex items-center justify-center space-x-2">
-            <%= svg_icon('pencil', class: 'w-6 h-6') %>
-            <span>Edit</span>
-          </span>
-        <% end %>
-      </div>
-    </div>
-    <% if @template.submitters.size == 1 %>
-      <div class="join w-full">
-        <buttun class="btn bg-neutral btn-disabled text-white join-item">
-          Share link
-        </buttun>
-        <input id="share-link-input" autocomplete="off" type="text" class="input input-bordered w-full join-item" value="<%= start_form_url(slug: @template.slug) %>" disabled>
-        <clipboard-copy class="btn btn-neutral btn-square join-item text-white font-bold swap swap-active" for="share-link-input">
-          <%= svg_icon('clipboard', class: 'w-6 h-6 swap-on text-white') %>
-          <%= svg_icon('clipboard_copy', class: 'w-6 h-6 swap-off text-white') %>
-        </clipboard-copy>
-      </div>
-    <% end %>
-  </div>
-</div>
-<div class="flex justify-between mb-4">
-  <h1 class="text-3xl font-bold">Recipients</h1>
-  <%= link_to new_template_submission_path(@template), class: 'btn btn-primary btn-sm gap-2', data: { turbo_frame: 'modal' } do %>
-    <%= svg_icon('plus', class: 'w-6 h-6') %>
-    <span class="hidden md:block">Add Recipients</span>
-  <% end %>
-</div>
-<div class="overflow-x-auto">
-  <%- if @submissions.any? %>
-    <table class="table w-full table-lg rounded-t-2xl overflow-hidden">
-      <thead class="bg-base-200">
-        <tr class="text-neutral uppercase">
-          <th>
-            Email
-          </th>
-          <th>
-            Status
-          </th>
-          <th>
-            Share Link
-          </th>
-          <th class="text-right" width="1px">
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <% @submissions.each do |submission| %>
-          <tr>
-            <td>
-              <% submission.submitters.each do |submitter| %>
-                <%= submitter.email %>
-                <br>
-              <% end %>
-            </td>
-            <td>
-              <% submission.submitters.each do |submitter| %>
-                <div>
-                  <span class="badge badge-info badge-outline">
-                    <%= submitter.status %>
-                  </span>
-                </div>
-              <% end %>
-            </td>
-            <td>
-              <% submission.submitters.each do |submitter| %>
-                <% share_link_input_id = "share-link-input_#{submitter.id}" %>
-                <div class="join ">
-                  <input id="<%= share_link_input_id %>" autocomplete="off" type="text" class="input input-xs input-bordered join-item" value="<%= submit_form_url(slug: submitter.slug) %>" disabled>
-                  <clipboard-copy class="btn btn-xs btn-neutral btn-square join-item text-white font-bold swap swap-active" for="<%= share_link_input_id %>">
-                    <%= svg_icon('clipboard', class: 'w-3 h-3 swap-on text-white') %>
-                    <%= svg_icon('clipboard_copy', class: 'w-3 h-3 swap-off text-white') %>
-                  </clipboard-copy>
-                </div>
-                <br>
-              <% end %>
-            </td>
-            <td  class="flex items-center space-x-2 justify-end">
-              <%= link_to 'View', submission_path(submission), title: 'View', class: 'btn btn-outline btn-xs' %>
-              <%= button_to 'Remove', submission_path(submission), class: 'btn btn-outline btn-error btn-xs', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
-            </td>
-          </tr>
-        <% end %>
-      </tbody>
-    </table>
-  </div>
-  <%= render 'shared/pagination', pagy: @pagy %>
-<% else %>
-  <%= render 'shared/no_data_banner' %>
-<% end %>
-</div>

app/views/templates/edit.html.erb

@@ -0,0 +1 @@
+<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>

app/views/templates/new.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/turbo_modal', title: 'New Template' do %>
+<%= render 'shared/turbo_modal', title: @base_template ? 'Clone Template' : 'New Template' do %>
   <%= form_for @template, data: { turbo_frame: :_top } do |f| %>
     <% if @base_template %>
       <%= hidden_field_tag :base_template_id, @base_template.id %>
@@ -7,7 +7,7 @@
       <%= f.text_field :name, required: true, placeholder: 'Template Name', class: 'base-input' %>
     </div>
     <div class="form-control mt-4">
-      <%= f.button button_title(title: 'Create', disabled_with: 'Creating'), class: 'base-button' %>
+      <%= f.button button_title(title: @base_template ? 'Submit' : 'Create', disabled_with: 'Creating'), class: 'base-button' %>
     </div>
   <% end %>
 <% end %>

app/views/templates/show.html.erb

@@ -1 +1,103 @@
-<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>
+<div class="card card-compact bg-primary mb-12 md:card-normal">
+  <div class="card-body">
+    <div class="grid md:grid-cols-2 gap-4 md:flex md:justify-between">
+      <h2 class="card-title text-4xl ">
+        <%= @template.name %>
+      </h2>
+      <div class="flex md:justify-between space-x-2">
+        <%= link_to new_template_path(base_template_id: @template.id), class: 'btn btn-outline btn-sm', data: { turbo_frame: :modal } do %>
+          <%= svg_icon('copy', class: 'w-6 h-6') %>
+          <span>Clone</span>
+        <% end %>
+        <%= link_to edit_template_path(@template), class: 'btn btn-outline btn-sm' do %>
+          <span class="flex items-center justify-center space-x-2">
+            <%= svg_icon('pencil', class: 'w-6 h-6') %>
+            <span>Edit</span>
+          </span>
+        <% end %>
+      </div>
+    </div>
+    <% if @template.submitters.size == 1 %>
+      <div class="join w-full">
+        <buttun class="btn bg-neutral btn-disabled text-white join-item">
+          Share link
+        </buttun>
+        <input id="share-link-input" autocomplete="off" type="text" class="input input-bordered w-full join-item" value="<%= start_form_url(slug: @template.slug) %>" disabled>
+        <clipboard-copy class="btn btn-neutral btn-square join-item text-white font-bold swap swap-active" for="share-link-input">
+          <%= svg_icon('clipboard', class: 'w-6 h-6 swap-on text-white') %>
+          <%= svg_icon('clipboard_copy', class: 'w-6 h-6 swap-off text-white') %>
+        </clipboard-copy>
+      </div>
+    <% end %>
+  </div>
+</div>
+<div class="flex justify-between mb-4">
+  <h1 class="text-3xl font-bold">Recipients</h1>
+  <%= link_to new_template_submission_path(@template), class: 'btn btn-primary btn-sm gap-2', data: { turbo_frame: 'modal' } do %>
+    <%= svg_icon('plus', class: 'w-6 h-6') %>
+    <span class="hidden md:block">Add Recipients</span>
+  <% end %>
+</div>
+<div class="overflow-x-auto">
+  <%- if @submissions.any? %>
+    <table class="table w-full table-lg rounded-t-2xl overflow-hidden">
+      <thead class="bg-base-200">
+        <tr class="text-neutral uppercase">
+          <th>
+            Email
+          </th>
+          <th>
+            Status
+          </th>
+          <th>
+            Share Link
+          </th>
+          <th class="text-right" width="1px">
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @submissions.each do |submission| %>
+          <tr>
+            <td>
+              <% submission.submitters.each do |submitter| %>
+                <%= submitter.email %>
+                <br>
+              <% end %>
+            </td>
+            <td>
+              <% submission.submitters.each do |submitter| %>
+                <div>
+                  <span class="badge badge-info badge-outline">
+                    <%= submitter.status %>
+                  </span>
+                </div>
+              <% end %>
+            </td>
+            <td>
+              <% submission.submitters.each do |submitter| %>
+                <% share_link_input_id = "share-link-input_#{submitter.id}" %>
+                <div class="join ">
+                  <input id="<%= share_link_input_id %>" autocomplete="off" type="text" class="input input-xs input-bordered join-item" value="<%= submit_form_url(slug: submitter.slug) %>" disabled>
+                  <clipboard-copy class="btn btn-xs btn-neutral btn-square join-item text-white font-bold swap swap-active" for="<%= share_link_input_id %>">
+                    <%= svg_icon('clipboard', class: 'w-3 h-3 swap-on text-white') %>
+                    <%= svg_icon('clipboard_copy', class: 'w-3 h-3 swap-off text-white') %>
+                  </clipboard-copy>
+                </div>
+                <br>
+              <% end %>
+            </td>
+            <td  class="flex items-center space-x-2 justify-end">
+              <%= link_to 'View', submission_path(submission), title: 'View', class: 'btn btn-outline btn-xs' %>
+              <%= button_to 'Remove', submission_path(submission), class: 'btn btn-outline btn-error btn-xs', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <%= render 'shared/pagination', pagy: @pagy, items_name: 'Submissions' %>
+<% else %>
+  <%= render 'shared/no_data_banner' %>
+<% end %>
+</div>

app/views/users/index.html.erb

@@ -58,6 +58,6 @@
         </tbody>
       </table>
     </div>
-    <%= render 'shared/pagination', pagy: @pagy %>
+    <%= render 'shared/pagination', pagy: @pagy, items_name: 'Users' %>
   </div>
 </div>

config/routes.rb

@@ -30,8 +30,8 @@ Rails.application.routes.draw do
   resources :setup, only: %i[index create]
   resources :users, only: %i[new create edit update destroy]
   resources :submissions, only: %i[show destroy]
-  resources :templates, only: %i[new create show destroy] do
-    resources :submissions, only: %i[index new create]
+  resources :templates, only: %i[new create edit show destroy] do
+    resources :submissions, only: %i[new create]
   end
 
   resources :start_form, only: %i[show update], path: 'd', param: 'slug' do