Rework Workflows creation and editing flows
This commit is contained in:
Jason Zimdars
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.5 20.5c.7.7 1.8.7 2.5 0l5.9-5.9 5.9 5.9c.7.7 1.8.7 2.5 0s.7-1.8 0-2.5l-5.9-5.9 5.9-5.9c.7-.7.7-1.8 0-2.5s-1.8-.7-2.5 0l-5.9 5.9-5.8-6.1c-.7-.7-1.8-.7-2.5 0s-.7 1.8 0 2.5l5.9 5.9-5.9 5.9c-.7.7-.7 1.8 0 2.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 286 B |
@@ -7,7 +7,14 @@
|
||||
<span class="for-screen-reader">Go back</span>
|
||||
<% end %>
|
||||
|
||||
<%= button_to session_path, method: :delete, class: "btn", form_class: "flex-item-justify-end" do %>
|
||||
<h1 class="txt-large"><%= @page_title %></h1>
|
||||
|
||||
<%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
|
||||
<%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Workflows</span>
|
||||
<% end %>
|
||||
|
||||
<%= button_to session_path, method: :delete, class: "btn" do %>
|
||||
<%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Sign out</span>
|
||||
<% end %>
|
||||
@@ -21,8 +28,3 @@
|
||||
<div class="panel borderless center pad fill-none flex flex-column gap">
|
||||
<%= render partial: "accounts/users/user", collection: @users %>
|
||||
</div>
|
||||
|
||||
<div class="panel borderless center pad fill-none flex flex-column gap">
|
||||
<h2>Workflows</h2>
|
||||
<%= turbo_frame_tag :workflows, src: workflows_path %>
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,20 @@
|
||||
<%= turbo_frame_tag workflow do %>
|
||||
<article>
|
||||
<div class="flex pad gap align-center justify-space-between">
|
||||
<article class="panel" style="--panel-size: 40ch;">
|
||||
<div class="flex gap-half align-center justify-starts">
|
||||
<%= turbo_frame_tag dom_id(workflow, :header) do %>
|
||||
<%= link_to edit_workflow_path(workflow), class: "btn btn--small" do %>
|
||||
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Edit <%= workflow.name %></span>
|
||||
<% end %>
|
||||
|
||||
<h3 class="txt-nowrap margin-none"><%= workflow.name %></h3>
|
||||
|
||||
<%= button_to workflow_path(workflow), method: :delete, class: "btn btn--negative btn--small", data: { turbo_frame: :workflows, turbo_confirm: "Are you sure you want to delete this workflow?" } do %>
|
||||
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Delete <%= workflow.name %></span>
|
||||
<%= link_to edit_workflow_path(workflow) do %>
|
||||
<h3 class="txt-large txt-nowrap margin-none overflow-ellipsis"><%= workflow.name %></h3>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<hr class="separator--horizontal flex-item-grow" aria-hidden="true" style="--border-color: var(--color-bg)">
|
||||
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
|
||||
|
||||
<div class="flex flex-column pad gap">
|
||||
<div class="flex flex-column gap margin-block-start">
|
||||
<%= turbo_frame_tag dom_id(workflow, :stages) do %>
|
||||
<%= render partial: "workflows/stages/stage", collection: workflow.stages %>
|
||||
<%= link_to new_workflow_stage_path(workflow), class: "btn btn--positive btn--small" do %>
|
||||
|
||||
<%= link_to new_workflow_stage_path(workflow), class: "btn btn--small" do %>
|
||||
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">New stage</span>
|
||||
<% end %>
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
<%= turbo_frame_tag dom_id(@workflow, :header) do %>
|
||||
<%= form_with model: @workflow, url: workflow_path(@workflow) do |form| %>
|
||||
<div class="flex pad gap justify-space-between">
|
||||
<%= form.text_field :name, required: true, autofocus: true %>
|
||||
<div class="flex align-center gap-half">
|
||||
<%= form_with model: @workflow, url: workflow_path(@workflow), id: dom_id(@workflow, :form), class: "full-width" do |form| %>
|
||||
<h3 class="txt-large margin-none">
|
||||
<%= form.text_field :name, required: true, autofocus: true, class: "input full-width", style: "--input-padding: 0.2em 0.5em;" %>
|
||||
</h3>
|
||||
<% end %>
|
||||
|
||||
<div class="flex gap">
|
||||
<%= form.button type: :submit, class: "btn btn--small" do %>
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<% end %>
|
||||
<%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@workflow, :form) do %>
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Save</span>
|
||||
<% end %>
|
||||
|
||||
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
|
||||
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
|
||||
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Cancel</span>
|
||||
<% end %>
|
||||
|
||||
<%= button_to workflow_path(@workflow), method: :delete, class: "btn btn--small btn--negative", data: { turbo_frame: :workflows, turbo_confirm: "Are you sure you want to delete this workflow?" } do %>
|
||||
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Delete <%= @workflow.name %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,7 +1,29 @@
|
||||
<% @page_title = "Workflows" %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<nav>
|
||||
<%= link_to account_users_path, class: "btn flex-item-justify-start" do %>
|
||||
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Go back</span>
|
||||
<% end %>
|
||||
<span class="btn btn--placeholder"></span>
|
||||
|
||||
<h1 class="txt-large"><%= @page_title %></h1>
|
||||
|
||||
<%= link_to new_workflow_path, class: "btn flex-item-justify-end" do %>
|
||||
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Create a new workflow</span>
|
||||
<% end %>
|
||||
|
||||
<%= button_to session_path, method: :delete, class: "btn" do %>
|
||||
<%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Sign out</span>
|
||||
<% end %>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<%= turbo_frame_tag :workflows do %>
|
||||
<section class="flex flex-column gap fill-shade border-radius">
|
||||
<section class="center justify-center flex flex-wrap gap">
|
||||
<%= render partial: "workflows/workflow", collection: @workflows %>
|
||||
</section>
|
||||
|
||||
<%= link_to "New workflow", new_workflow_path, class: "btn" %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,6 +1,24 @@
|
||||
<%= turbo_frame_tag :workflows do %>
|
||||
<%= form_with model: @workflow, url: workflows_path do |form| %>
|
||||
<%= form.text_field :name, required: true, autofocus: true %>
|
||||
<%= form.submit %>
|
||||
<% end %>
|
||||
<% @page_title = "Create a new Workflow" %>
|
||||
|
||||
<% content_for :header do %>
|
||||
<nav>
|
||||
<%= link_to workflows_path, class: "btn flex-item-justify-start" do %>
|
||||
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Go back</span>
|
||||
<% end %>
|
||||
<h1 class="txt-large center"><%= @page_title %></h1>
|
||||
<span class="btn btn--placeholder flex-item-justify-end"></span>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<%= turbo_frame_tag :workflows do %>
|
||||
<article class="panel center margin-block-start flex flex-column gap" style="view-transition-name: <%= dom_id(@workflow) %>">
|
||||
<%= form_with model: @workflow, url: workflows_path do |form| %>
|
||||
<%= form.text_field :name, required: true, autofocus: true, class: "input txt-large", placeholder: "Name your Workflow…" %>
|
||||
<%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-large" do %>
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Create Workflow</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</article>
|
||||
<% end %>
|
||||
|
||||
@@ -1,19 +1,7 @@
|
||||
<div class="flex gap align-center justify-space-between">
|
||||
<div class="flex gap-half align-center justify-space-between">
|
||||
<%= turbo_frame_tag stage do %>
|
||||
<h4 class="txt-nowrap"><%= stage.name %></h4>
|
||||
|
||||
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
|
||||
|
||||
<%= link_to edit_workflow_stage_path(stage.workflow, stage), class: "btn btn--small" do %>
|
||||
<%= image_tag "pencil.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Edit <%= stage.name %></span>
|
||||
<% end %>
|
||||
|
||||
<% if stage_counter >= 1 %>
|
||||
<%= button_to workflow_stage_path(stage.workflow, stage), method: :delete, class: "btn btn--negative btn--small", data: { turbo_frame: dom_id(stage.workflow), turbo_confirm: "Are you sure you want to delete this stage?" } do %>
|
||||
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Delete <%= stage.name %></span>
|
||||
<% end %>
|
||||
<%= link_to edit_workflow_stage_path(stage.workflow, stage) do %>
|
||||
<strong class="txt-nowrap overflow-ellipsis"><%= stage.name %></strong>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,25 @@
|
||||
<%= turbo_frame_tag @stage do %>
|
||||
<%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage) do |form| %>
|
||||
<div class="flex pad gap justify-space-between">
|
||||
<%= form.text_field :name, required: true, autofocus: true %>
|
||||
|
||||
<div class="flex gap">
|
||||
<%= form.button type: :submit, class: "btn btn--small" do %>
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<% end %>
|
||||
|
||||
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
|
||||
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage), id: dom_id(@stage, :form), class: "full-width" do |form| %>
|
||||
<%= form.text_field :name, required: true, autofocus: true, class: "input full-width" %>
|
||||
<% end %>
|
||||
|
||||
<div class="flex align-center gap-half">
|
||||
<%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@stage, :form) do %>
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Save</span>
|
||||
<% end %>
|
||||
|
||||
<%= link_to workflow_path(@workflow), class: "btn btn--small", data: { turbo_frame: dom_id(@workflow) } do %>
|
||||
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Cancel</span>
|
||||
<% end %>
|
||||
|
||||
<% if @stage.workflow.stages.many? %>
|
||||
<%= button_to workflow_stage_path(@stage.workflow, @stage), method: :delete, class: "btn btn--negative btn--small",
|
||||
data: { turbo_frame: dom_id(@workflow), turbo_confirm: "Are you sure you want to delete this stage?" } do %>
|
||||
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Delete <%= @stage.name %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
<%= turbo_frame_tag dom_id(@stage.workflow, :stages) do %>
|
||||
<%= form_with model: @stage, url: workflow_stages_path(@stage.workflow) do |form| %>
|
||||
<%= form.text_field :name, required: true, autofocus: true %>
|
||||
<%= form.submit %>
|
||||
<%= form_with model: @stage, url: workflow_stages_path(@stage.workflow), class: "flex align-center gap-half" do |form| %>
|
||||
<%= form.text_field :name, required: true, autofocus: true, class: "input" %>
|
||||
<%= form.button type: :submit, class: "btn btn--positive txt-small" do %>
|
||||
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Add stage</span>
|
||||
<% end %>
|
||||
<%= link_to workflow_path(@workflow), class: "btn btn--small" do %>
|
||||
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">Cancel</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user