webskel/dolphins7.skeleton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
0x1eef 2024-01-12 03:45:51 -03:00
parent 9c390fe3ce
commit 6ad0391f79
12 changed files with 64 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
twenty-backend/lib/twenty-backend.rb
View file

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

3
twenty-backend/lib/twenty-backend/graphql/type/task.rb
View file

@ -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
twenty-backend/lib/twenty-backend/graphql/type/task_status.rb
View file

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

4
twenty-backend/lib/twenty-backend/model/task.rb
View file

@ -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

4
twenty-backend/share/twenty-backend/schema.graphql
View file

@ -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

27
twenty-frontend/src/css/_groups.scss
View file

@ -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;
}
}
}

11
twenty-frontend/src/css/main.scss
View file

@ -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;
}
}
}

2
twenty-frontend/src/js/components/Group.tsx
View file

@ -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;

17
twenty-frontend/src/js/components/Task.tsx
View file

@ -71,9 +71,21 @@ export function Task({ taskId }: { taskId?: number }) {
<NavBar />
</div>
<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>
<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 className="group-items h-80">
<div>
@ -95,7 +107,6 @@ export function Task({ taskId }: { taskId?: number }) {
})}
</select>
</div>
<div>
<input
className="form"

3
twenty-frontend/src/js/components/TaskStatusSelect.tsx
View file

@ -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>
);

6
twenty-frontend/src/js/components/Tasks.tsx
View file

@ -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>
);

4
twenty-frontend/src/js/types/schema.ts
View file

@ -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",