(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(
|
||||
adapter: "sqlite3",
|
||||
database: path,
|
||||
pool: 3
|
||||
pool: 16
|
||||
)
|
||||
end
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
module Twenty::GraphQL::Type
|
||||
class TaskStatus < GraphQL::Schema::Enum
|
||||
value :backlog
|
||||
value :ready
|
||||
value :in_progress
|
||||
value :complete
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
class Twenty::Task < Twenty::Model
|
||||
self.table_name = "tasks"
|
||||
|
||||
STATUS = {ready: 0, in_progress: 1, complete: 2}
|
||||
enum :status, STATUS, default: :ready
|
||||
STATUS = {backlog: 0, ready: 1, in_progress: 2, complete: 3}
|
||||
enum :status, STATUS, default: :backlog
|
||||
|
||||
##
|
||||
# Validations
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||
<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 className="group-items h-80">
|
||||
<div>
|
||||
|
@ -95,7 +107,6 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
})}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className="form"
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue