Workflows index

app/assets/stylesheets/application.css

@@ -82,3 +82,34 @@ table {
         margin: 0;
     }
 }
+
+a[target=_blank]::after {
+    content: url("mingcute/external_link_line.svg");
+    display: inline-block;
+    scale: 0.7;
+    transform-origin: 0 50%;
+}
+
+.row {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: baseline;
+    gap: 1em;
+
+    > * {
+        margin: 0;
+    }
+
+    > .right {
+        margin-left: auto;
+    }
+}
+
+.mask-icon {
+    display: inline-block;
+    height: 1lh;
+    width: 1lh;
+    background-color: var(--icon-color, black);
+    mask-image: var(--icon, url("mingcute/task_line.svg"));
+    mask-size: 100%;
+}

app/assets/stylesheets/tabs.css

@@ -0,0 +1,28 @@
+.tabs {
+    padding-inline: 0;
+
+    li {
+        list-style: none;
+        margin: 0;
+    }
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    gap: 0.25em;
+    
+    a {
+        text-decoration: none;
+        display: inline-block;
+        padding: 0.25em 0.5em;
+        border: 1px solid gray;
+        border-radius: 0.5em;
+
+        transition: background-color 0.2s, color 0.2s;
+
+        &.active, &:hover, &:focus {
+            background-color: var(--pico-primary);
+            color: white;
+        }
+    }
+}

app/assets/stylesheets/workflows.css

@@ -1,26 +1,25 @@
 .workflow {
-    --bg-color: #D1D5DB; /* Pico zinc 150 */
-    --text-color: oklch(from var(--bg-color) calc(0.55 * l) calc(0.55 * c) h);
+    --color: #424751; /* Pico zinc 700 */
 
     border-radius: 1em;
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    outline: 2px solid var(--color);
 
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
+    display: inline-flex;
+    gap: 0.25em;
     min-width: 2em;
     padding: 0.1em 0.5em;
-    gap: 0.5em;
-    text-align: center;
+
+    > .mask-icon {
+        --icon-color: var(--color);
+    }
 
     > img {
         max-width: unset;
         width: 1lh;
-        opacity: 0.6;
+        opacity: 0.75;
     }
 
     &.red {
-        --bg-color: #F06048; /* Pico red 400 */
+        --color: #BD3C13; /* Pico orange 550 */
     }
 }

app/controllers/project_admin/application_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module ProjectAdmin
+  class ApplicationController < ::ApplicationController
+    before_action :fetch_project
+
+    private
+
+    def fetch_project
+      @project = Project.find_by!(code: params[:project_id])
+    end
+  end
+end

app/controllers/project_admin/workflows_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ProjectAdmin
+  class WorkflowsController < ApplicationController
+    def index
+      @workflows = @project.workflows
+    end
+  end
+end

app/helpers/application_helper.rb

@@ -6,4 +6,14 @@ module ApplicationHelper
 
     url_for(controller: controller_name, action: :index, project:)
   end
+
+  def mask_icon(icon, **options)
+    # Renders a span as a masked icon
+    case options[:class]
+    when String then options[:class] += ' mask-icon'
+    when nil then options[:class] = 'mask-icon'
+    else options[:class] = Array(options[:class]) + ['mask-icon']
+    end
+    content_tag(:span, '', style: "--icon: url(#{image_path(icon)})", **options)
+  end
 end

app/helpers/project_admin/workflows_helper.rb

@@ -0,0 +1,2 @@
+module ProjectAdmin::WorkflowsHelper
+end

app/helpers/project_admin_helper.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ProjectAdminHelper
+  def project_admin_frame(project, &)
+    tabs_id = 'project_admin_tabs'
+    tabs = ProjectAdmin::TabsViewModel.new(project, frame: :project_admin, id: tabs_id)
+    content = capture(&) if block_given?
+
+    render partial: 'project_admin/frame', locals: { id: :project_admin, tabs:, tabs_id:, content: }
+  end
+end

app/view_models/project_admin/tabs_view_model.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module ProjectAdmin
+  class TabsViewModel
+    include Rails.application.routes.url_helpers
+
+    def initialize(project, id:, frame:)
+      @project = project
+      @id = id
+      @frame = frame
+    end
+
+    def render_in(view_context)
+      view_context.render(
+        partial: 'project_admin/tabs',
+        locals: { project: @project, links:, id: @id, frame: @frame }
+      )
+    end
+
+    private
+
+    def links
+      {
+        'Data' => edit_project_path(@project),
+        'Workflows' => project_workflows_path(@project)
+      }
+    end
+  end
+end

app/views/project_admin/_frame.html.slim

@@ -0,0 +1,11 @@
+h1
+  span> Project
+  span= @project.name
+
+= link_to '← Back', project_path(@project)
+
+= render tabs
+
+= turbo_frame_tag(id) do
+  = content
+  = turbo_stream.replace(tabs_id, tabs)

app/views/project_admin/_tabs.html.slim

@@ -0,0 +1,3 @@
+nav.tabs id=id
+  - links.each do |text, path|
+    li= link_to text, path, class: {'active': request.path == path}, data: {'turbo-frame': frame, 'turbo-action': 'advance'}

app/views/project_admin/workflows/index.html.slim

@@ -0,0 +1,9 @@
+= project_admin_frame(@project) do
+  h2
+    span Workflows
+
+  - @workflows.each do |workflow|
+    article.row
+      = workflow_display(workflow, full: true)
+      ul.links.right
+        li= link_to 'Edit', edit_project_workflow_path(@project, workflow), target: '_blank'

app/views/projects/edit.html.slim

@@ -1,5 +1,5 @@
-h1
+= project_admin_frame(@project) do
+  h2
     span Editing project
-  span= @project.name
 
   = render 'form'

app/views/workflows/_display.html.slim

@@ -1,4 +1,4 @@
 div.workflow class=color title=name
-  = image_tag(icon)
+  = mask_icon(icon)
   - if full
-    span= name
+    span<= name

config/routes.rb

@@ -16,7 +16,12 @@ Rails.application.routes.draw do
   # Defines the root path route ("/")
   # root "posts#index"
 
-  resources :projects
+  resources :projects do
+    scope module: :project_admin do
+      resources :workflows, only: %i[index new create edit update destroy]
+    end
+  end
+
   resources :tasks do
     patch :change_status, on: :member
   end

vendor/assets/images/mingcute/external_link_line.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none'><path d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z'/><path fill='#09244BFF' d='M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z'/></g></svg>