Task status model rework

Replaced categories with colors, icons and positions

app/assets/stylesheets/application.css

@@ -40,10 +40,6 @@ site-sidebar {
     /* For jade, light on dark looks better */
     --success-color: #70FCBA;  /* Pico jade 100 */
     --success-bg: #015234; /* Pico jade 700 */
-    --backlog-color: #424751; /* Pico zinc 700 */
-    --backlog-bg: #E0E3E7; /* Pico zinc 100 */ 
-    --analysis-color: #5B4200; /* Pico amber 700 */
-    --analysis-bg: #FDDEA6; /* Pico amber 100 */
     --info-color: #014C75; /* Pico azure 700 */
     --info-bg: #D1E5FB; /* Pico azure 100 */
 }

app/assets/stylesheets/tasks.css

@@ -6,8 +6,8 @@
 }
 
 .task-status {
-    --color: var(--backlog-color);
-    --background-color: var(--backlog-bg);
+    --color: #424751; /* Pico zinc 700 */
+    --background-color: #E0E3E7; /* Pico zinc 100 */
 
     &.badge {
         border: 2px solid var(--border-color, currentColor);
@@ -15,20 +15,30 @@
         background-color: var(--background-color);
     }
 
-    &.analysis {
-        --color: var(--analysis-color);
-        --background-color: var(--analysis-bg);
+    &.blue {
+        --color: #1D59D0; /* Pico blue 600 */
+        --background-color: #E0E1FA/* Pico blue 100 */
     }
 
-    &.development {
-        --color: var(--info-color);
-        --background-color: var(--info-bg);
+    &.yellow {
+        --background-color: #FDDEA6; /* Pico amber 100 */
+        --border-color: #A77C00; /* Pico amber 450 */
     }
 
-    &.fulfillment {
+    &.green {
         --color: var(--success-color);
         --background-color: var(--success-bg);
     }
+
+    &.purple {
+        --color: #9236A4; /* Pico purple 600 */
+        --background-color: #F2DCF4; /* Pico purple 100 */
+    }
+
+    &.pink {
+        --color: #B21E4F; /* Pico pink 600 */
+        --background-color: #F9DBDF; /* Pico pink 100 */
+    }
 }
 
 .task-show-info {

app/models/task_status.rb

@@ -4,10 +4,11 @@ class TaskStatus < ApplicationRecord
   belongs_to :workflow
   has_one :project, through: :workflow
 
-  enum :category, { backlog: 100, analysis: 1000, development: 20_000, fulfillment: 60_000 }
+  enum :icon, %w[new achived done circle_dash hammer play tool].index_by(&:itself), default: 'new', scopes: false
+  enum :color, %w[blue gray yellow green purple pink].index_by(&:itself), default: 'gray', scopes: false
 
   validates :name, presence: true, uniqueness: { scope: :workflow }
   validates :category, presence: true
 
-  scope :default_order, -> { order(:category, :name) }
+  scope :default_order, -> { order(:position, :name) }
 end

app/view_models/tasks/statuses/selector_view_model.rb

@@ -3,6 +3,16 @@
 module Tasks
   module Statuses
     class SelectorViewModel
+      ICONS = {
+        new: 'add_circle_fill',
+        archived: 'archive_line',
+        done: 'checks_line',
+        circle_dash: 'circle_dash_line',
+        hammer: 'hammer_fill',
+        play: 'play_circle_fill',
+        tool: 'tool_line'
+      }.freeze
+
       def initialize(task, with_form: false)
         @task = task
         @with_form = with_form
@@ -25,15 +35,19 @@ module Tasks
       private
 
       def workflow_task_statuses
-        @task.workflow.task_statuses.sort_by { |e| [e.category, e.name] }
+        @task.workflow.task_statuses.sort_by { |e| [e.position, e.name] }
       end
 
       def task_status_badge(status, view_context)
         view_context.content_tag(
-          :span, status.name,
-          class: ['badge', 'task-status', status.category.dasherize]
+          :span, view_context.mask_icon(icon(status)) + status.name,
+          class: ['badge', 'task-status', status.color]
         )
       end
+
+      def icon(status)
+        ICONS.fetch(status.icon.to_sym)
+      end
     end
   end
 end