(back|front)end: Add new states, iterate on the UI
This commit is contained in:
parent
9c390fe3ce
commit
6ad0391f79
12 changed files with 64 additions and 20 deletions
|
@ -34,7 +34,7 @@ module Twenty
|
||||||
ActiveRecord::Base.establish_connection(
|
ActiveRecord::Base.establish_connection(
|
||||||
adapter: "sqlite3",
|
adapter: "sqlite3",
|
||||||
database: path,
|
database: path,
|
||||||
pool: 3
|
pool: 16
|
||||||
)
|
)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -8,5 +8,8 @@ module Twenty::GraphQL::Type
|
||||||
field :project, Project, null: false
|
field :project, Project, null: false
|
||||||
field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
|
field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
|
||||||
field :is_ready, Boolean, null: false, method: :ready?
|
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
|
||||||
end
|
end
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
module Twenty::GraphQL::Type
|
module Twenty::GraphQL::Type
|
||||||
class TaskStatus < GraphQL::Schema::Enum
|
class TaskStatus < GraphQL::Schema::Enum
|
||||||
|
value :backlog
|
||||||
value :ready
|
value :ready
|
||||||
value :in_progress
|
value :in_progress
|
||||||
value :complete
|
value :complete
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
class Twenty::Task < Twenty::Model
|
class Twenty::Task < Twenty::Model
|
||||||
self.table_name = "tasks"
|
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
|
# Validations
|
||||||
|
|
|
@ -50,6 +50,9 @@ type Query {
|
||||||
type Task {
|
type Task {
|
||||||
content: String!
|
content: String!
|
||||||
id: Int!
|
id: Int!
|
||||||
|
inProgress: Boolean!
|
||||||
|
isBacklogged: Boolean!
|
||||||
|
isComplete: Boolean!
|
||||||
isReady: Boolean!
|
isReady: Boolean!
|
||||||
project: Project!
|
project: Project!
|
||||||
status: TaskStatus!
|
status: TaskStatus!
|
||||||
|
@ -65,6 +68,7 @@ input TaskInput {
|
||||||
}
|
}
|
||||||
|
|
||||||
enum TaskStatus {
|
enum TaskStatus {
|
||||||
|
backlog
|
||||||
complete
|
complete
|
||||||
in_progress
|
in_progress
|
||||||
ready
|
ready
|
||||||
|
|
|
@ -2,6 +2,7 @@ body .wrapper .group {
|
||||||
@import "colors";
|
@import "colors";
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
.group-name {
|
.group-name {
|
||||||
margin: 10px 0 10px 0;
|
margin: 10px 0 10px 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@ -9,6 +10,30 @@ body .wrapper .group {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
border-radius: 5px;
|
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 {
|
.group-items {
|
||||||
|
@ -40,8 +65,10 @@ body .wrapper .group {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
text-decoration: none;
|
||||||
.subtitle {
|
.subtitle {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,15 +33,4 @@ body {
|
||||||
.react-mount {
|
.react-mount {
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.destroy-task.icon, .complete-task.icon, .start-task.icon {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.destroy-task.icon {
|
|
||||||
g {
|
|
||||||
fill: #d9534f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@ export function Group({ groupName, getItems }: Props) {
|
||||||
<div className="group">
|
<div className="group">
|
||||||
<h1 className="group-name">{groupName}</h1>
|
<h1 className="group-name">{groupName}</h1>
|
||||||
<div className="group-items">
|
<div className="group-items">
|
||||||
{items.length ? (
|
{items?.length ? (
|
||||||
<ul className="items">
|
<ul className="items">
|
||||||
{items.map((task: Task, key: number) => {
|
{items.map((task: Task, key: number) => {
|
||||||
const { updatedAt } = task;
|
const { updatedAt } = task;
|
||||||
|
|
|
@ -71,9 +71,21 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
<NavBar />
|
<NavBar />
|
||||||
</div>
|
</div>
|
||||||
<div className="column-2 h-100">
|
<div className="column-2 h-100">
|
||||||
<form className="group h-100" onSubmit={handleSubmit(onSave)}>
|
|
||||||
<div className="group-name' h-100">
|
|
||||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||||
|
<form className="group h-100" onSubmit={handleSubmit(onSave)}>
|
||||||
|
<div className="group-name">
|
||||||
|
<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>
|
||||||
<div className="group-items h-80">
|
<div className="group-items h-80">
|
||||||
<div>
|
<div>
|
||||||
|
@ -95,7 +107,6 @@ export function Task({ taskId }: { taskId?: number }) {
|
||||||
})}
|
})}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className="form"
|
className="form"
|
||||||
|
|
|
@ -20,8 +20,9 @@ export function TaskStatusSelect({ task }: Props) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<select value={task.status} onChange={onChange}>
|
<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.Ready}>Ready</option>
|
||||||
|
<option value={TaskStatus.InProgress}>Working on it</option>
|
||||||
<option value={TaskStatus.Complete}>Complete</option>
|
<option value={TaskStatus.Complete}>Complete</option>
|
||||||
</select>
|
</select>
|
||||||
);
|
);
|
||||||
|
|
|
@ -21,8 +21,12 @@ export function Tasks() {
|
||||||
</div>
|
</div>
|
||||||
<div className="column-2">
|
<div className="column-2">
|
||||||
<h1>Tasks</h1>
|
<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="Ready" getItems={getTasks(TaskStatus.Ready)} />
|
||||||
|
<Group groupName="Backlog" getItems={getTasks(TaskStatus.Backlog)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -102,6 +102,9 @@ export type Task = {
|
||||||
__typename?: "Task";
|
__typename?: "Task";
|
||||||
content: Scalars["String"]["output"];
|
content: Scalars["String"]["output"];
|
||||||
id: Scalars["Int"]["output"];
|
id: Scalars["Int"]["output"];
|
||||||
|
inProgress: Scalars["Boolean"]["output"];
|
||||||
|
isBacklogged: Scalars["Boolean"]["output"];
|
||||||
|
isComplete: Scalars["Boolean"]["output"];
|
||||||
isReady: Scalars["Boolean"]["output"];
|
isReady: Scalars["Boolean"]["output"];
|
||||||
project: Project;
|
project: Project;
|
||||||
status: TaskStatus;
|
status: TaskStatus;
|
||||||
|
@ -117,6 +120,7 @@ export type TaskInput = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export enum TaskStatus {
|
export enum TaskStatus {
|
||||||
|
Backlog = "backlog",
|
||||||
Complete = "complete",
|
Complete = "complete",
|
||||||
InProgress = "in_progress",
|
InProgress = "in_progress",
|
||||||
Ready = "ready",
|
Ready = "ready",
|
||||||
|
|
Loading…
Reference in a new issue