(back|front)end: Add new states, iterate on the UI

twenty-backend/lib/twenty-backend.rb

@@ -34,7 +34,7 @@ module Twenty
     ActiveRecord::Base.establish_connection(
       adapter: "sqlite3",
       database: path,
-      pool: 3
+      pool: 16
     )
   end
 

twenty-backend/lib/twenty-backend/graphql/type/task.rb

@@ -8,5 +8,8 @@ module Twenty::GraphQL::Type
     field :project, Project, null: false
     field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
     field :is_ready, Boolean, null: false, method: :ready?
+    field :is_backlogged, Boolean, null: false, method: :backlog?
+    field :is_complete, Boolean, null: false, method: :complete?
+    field :in_progress, Boolean, null: false, method: :in_progress?
   end
 end

twenty-backend/lib/twenty-backend/graphql/type/task_status.rb

@@ -1,5 +1,6 @@
 module Twenty::GraphQL::Type
   class TaskStatus < GraphQL::Schema::Enum
+    value :backlog
     value :ready
     value :in_progress
     value :complete

twenty-backend/lib/twenty-backend/model/task.rb

@@ -3,8 +3,8 @@
 class Twenty::Task < Twenty::Model
   self.table_name = "tasks"
 
-  STATUS = {ready: 0, in_progress: 1, complete: 2}
+  STATUS = {backlog: 0, ready: 1, in_progress: 2, complete: 3}
-  enum :status, STATUS, default: :ready
+  enum :status, STATUS, default: :backlog
 
   ##
   # Validations

twenty-backend/share/twenty-backend/schema.graphql

@@ -50,6 +50,9 @@ type Query {
 type Task {
   content: String!
   id: Int!
+  inProgress: Boolean!
+  isBacklogged: Boolean!
+  isComplete: Boolean!
   isReady: Boolean!
   project: Project!
   status: TaskStatus!
@@ -65,6 +68,7 @@ input TaskInput {
 }
 
 enum TaskStatus {
+  backlog
   complete
   in_progress
   ready

twenty-frontend/src/css/_groups.scss

@@ -2,6 +2,7 @@ body .wrapper .group {
   @import "colors";
   width: 100%;
   margin-bottom: 10px;
+
   .group-name {
     margin: 10px 0 10px 0;
     padding: 10px;
@@ -9,6 +10,30 @@ body .wrapper .group {
     color: $primary-color;
     font-size: small;
     border-radius: 5px;
+
+    ul.tabs {
+      list-style-type: none;
+      display: flex;
+      grid-gap: 15px;
+
+      li.tab {
+        a {
+          display: block;
+          background: $primary-color;
+          color: $accent-color;
+          padding: 5px;
+          border-radius: 5px;
+          &:focus {
+            text-decoration: none;
+          }
+        }
+      }
+      li.tab.active {
+        a {
+          text-decoration: underline;
+        }
+      }
+    }
   }
 
   .group-items {
@@ -40,8 +65,10 @@ body .wrapper .group {
 
           a {
             color: $primary-color;
+            text-decoration: none;
             .subtitle {
               color: $primary-color;
+              text-decoration: none;
             }
           }
         }

twenty-frontend/src/css/main.scss

@@ -33,15 +33,4 @@ body {
   .react-mount {
     padding-top: 25px;
   }
-
-  .destroy-task.icon, .complete-task.icon, .start-task.icon {
-    height: 20px;
-    width: 20px;
-    cursor: pointer;
-  }
-  .destroy-task.icon {
-    g {
-      fill: #d9534f;
-    }
-  }
 }

twenty-frontend/src/js/components/Group.tsx

@@ -22,7 +22,7 @@ export function Group({ groupName, getItems }: Props) {
     <div className="group">
       <h1 className="group-name">{groupName}</h1>
       <div className="group-items">
-        {items.length ? (
+        {items?.length ? (
           <ul className="items">
             {items.map((task: Task, key: number) => {
               const { updatedAt } = task;

twenty-frontend/src/js/components/Task.tsx

@@ -71,9 +71,21 @@ export function Task({ taskId }: { taskId?: number }) {
         <NavBar />
       </div>
       <div className="column-2 h-100">
+        <h1>{task ? "Edit task" : "New task"}</h1>
         <form className="group h-100" onSubmit={handleSubmit(onSave)}>
-          <div className="group-name' h-100">
+          <div className="group-name">
-            <h1>{task ? "Edit task" : "New task"}</h1>
+            <ul className="tabs">
+              <li className={classnames("tab", { active: isEditable })}>
+                <a href="#" onClick={() => setIsEditable(true)}>
+                  Editor
+                </a>
+              </li>
+              <li className={classnames("tab", { active: !isEditable })}>
+                <a href="#" onClick={() => setIsEditable(false)}>
+                  Preview
+                </a>
+              </li>
+            </ul>
           </div>
           <div className="group-items h-80">
             <div>
@@ -95,7 +107,6 @@ export function Task({ taskId }: { taskId?: number }) {
                 })}
               </select>
             </div>
-
             <div>
               <input
                 className="form"

twenty-frontend/src/js/components/TaskStatusSelect.tsx

@@ -20,8 +20,9 @@ export function TaskStatusSelect({ task }: Props) {
 
   return (
     <select value={task.status} onChange={onChange}>
-      <option value={TaskStatus.InProgress}>Active</option>
+      <option value={TaskStatus.Backlog}>Backlog</option>
       <option value={TaskStatus.Ready}>Ready</option>
+      <option value={TaskStatus.InProgress}>Working on it</option>
       <option value={TaskStatus.Complete}>Complete</option>
     </select>
   );

twenty-frontend/src/js/components/Tasks.tsx

@@ -21,8 +21,12 @@ export function Tasks() {
       </div>
       <div className="column-2">
         <h1>Tasks</h1>
-        <Group groupName="Active" getItems={getTasks(TaskStatus.InProgress)} />
+        <Group
+          groupName="Working on it"
+          getItems={getTasks(TaskStatus.InProgress)}
+        />
         <Group groupName="Ready" getItems={getTasks(TaskStatus.Ready)} />
+        <Group groupName="Backlog" getItems={getTasks(TaskStatus.Backlog)} />
       </div>
     </div>
   );

twenty-frontend/src/js/types/schema.ts

@@ -102,6 +102,9 @@ export type Task = {
   __typename?: "Task";
   content: Scalars["String"]["output"];
   id: Scalars["Int"]["output"];
+  inProgress: Scalars["Boolean"]["output"];
+  isBacklogged: Scalars["Boolean"]["output"];
+  isComplete: Scalars["Boolean"]["output"];
   isReady: Scalars["Boolean"]["output"];
   project: Project;
   status: TaskStatus;
@@ -117,6 +120,7 @@ export type TaskInput = {
 };
 
 export enum TaskStatus {
+  Backlog = "backlog",
   Complete = "complete",
   InProgress = "in_progress",
   Ready = "ready",