(back|front)end: add Project#color
This commit is contained in:
parent
026e11af11
commit
a4521130c1
7 changed files with 64 additions and 5 deletions
|
@ -0,0 +1,10 @@
|
|||
class AddColorToProjects < ActiveRecord::Migration[7.1]
|
||||
def up
|
||||
default = Twenty::ColorableMixin.random_color
|
||||
add_column :projects, :color, :string, null: false, default:
|
||||
end
|
||||
|
||||
def down
|
||||
drop_column :projects, :color
|
||||
end
|
||||
end
|
|
@ -1,6 +1,7 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class Twenty::Model < ActiveRecord::Base
|
||||
require_relative "model/mixin/colorable_mixin"
|
||||
require_relative "model/project"
|
||||
require_relative "model/task"
|
||||
end
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
module Twenty::ColorableMixin
|
||||
extend self
|
||||
|
||||
COLORS = [
|
||||
'#222222', '#333333', '#444444', '#555555', '#666666',
|
||||
'#777777', '#888888', '#999999', '#AAAAAA', '#BBBBBB',
|
||||
'#CCCCCC', '#DDDDDD', '#990000', '#009900', '#000099',
|
||||
'#990099', '#009999', '#999900', '#990099', '#999999'
|
||||
]
|
||||
|
||||
def self.included(klass)
|
||||
klass.before_validation :set_random_color, on: :create
|
||||
end
|
||||
|
||||
def random_color
|
||||
COLORS.sample
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def set_random_color
|
||||
self.color = random_color
|
||||
end
|
||||
end
|
|
@ -1,6 +1,7 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
class Twenty::Project < Twenty::Model
|
||||
include Twenty::ColorableMixin
|
||||
self.table_name = "projects"
|
||||
|
||||
##
|
||||
|
@ -13,7 +14,7 @@ class Twenty::Project < Twenty::Model
|
|||
has_many :tasks, class_name: "Twenty::Task"
|
||||
|
||||
def to_json(options = {})
|
||||
{id:, name:, path:}.to_json(options)
|
||||
{id:, name:, path:, color:}.to_json(options)
|
||||
end
|
||||
|
||||
##
|
||||
|
|
|
@ -21,7 +21,8 @@ ul.collection {
|
|||
ul.collection li.item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 5px;
|
||||
height: 85px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -33,9 +34,24 @@ ul.collection li.item {
|
|||
padding-bottom: 5px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: small;
|
||||
color: $secondary-color;
|
||||
.tag {
|
||||
padding: 2.5px;
|
||||
color: $primary-color;
|
||||
border: 1px solid $secondary-color;
|
||||
border-radius: 5px;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.break {
|
||||
display: flex;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
ul.actions {
|
||||
|
|
|
@ -71,8 +71,14 @@ export function Tasks() {
|
|||
<a className="w-85" href={editHref}>
|
||||
<span className="title">{task.title}</span>
|
||||
<span className="subtitle">
|
||||
{datetime.toFormat("dd LLL, yyyy")} at{" "}
|
||||
{datetime.toFormat("HH:mm")}
|
||||
<span className="datetime">
|
||||
{datetime.toFormat("dd LLL, yyyy")} at{" "}
|
||||
{datetime.toFormat("HH:mm")}
|
||||
</span>
|
||||
<span className="break"></span>
|
||||
<span style={{backgroundColor: task.project.color}} className="tag">
|
||||
{task.project.name}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<ul className="actions">
|
||||
|
|
|
@ -7,6 +7,7 @@ export type Project = {
|
|||
id: number;
|
||||
name: string;
|
||||
path: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
export type Task = {
|
||||
|
@ -14,7 +15,7 @@ export type Task = {
|
|||
title: string;
|
||||
content: string;
|
||||
status: TASK_STATUS;
|
||||
project: Project;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
project_id: number;
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue