From b9532e75494299f9dcfdaa1da695d163b39339db Mon Sep 17 00:00:00 2001 From: "Abderraouf Ghrissi (abgh)" Date: Wed, 23 Aug 2023 15:08:03 +0200 Subject: [PATCH] [IMP] project: Improve ux Before this commit: - project.task > list view: Currently, the progress is displayed in purple if less than 100% and in red if above. The two colors don't contrast a lot, making it hard to read. In addition, it is not coherent with the color we usually apply for the remaining hours in the rest of the app. - onbording tour: the manual saving step is no longer necessary as records are now automatically saved. In addition, showing it doesn't provide a wow effect and is an extra opportunity to lose people in the process After this commit: - the following color code was applied for the progress bar: *if progress < 80 -> green *if progress is between 80 and 100 included -> orange *if progress > 100 -> red - step removed. task-3475170 closes odoo/odoo#132854 Related: odoo/enterprise#46162 Signed-off-by: Xavier Bol (xbo) --- .../project_task_progress_bar_field.js | 21 +++++++++++++++++++ .../static/tests/hr_timesheet_common_tests.js | 7 ++++--- .../static/tests/task_with_hours_tests.js | 18 ++++++++++++++++ .../views/project_task_sharing_views.xml | 2 +- .../hr_timesheet/views/project_task_views.xml | 6 +++--- addons/project/static/src/js/tours/project.js | 5 ----- .../fields/progress_bar/progress_bar_field.js | 4 ++++ .../progress_bar/progress_bar_field.xml | 2 +- 8 files changed, 52 insertions(+), 13 deletions(-) create mode 100644 addons/hr_timesheet/static/src/components/progress_bar/project_task_progress_bar_field.js diff --git a/addons/hr_timesheet/static/src/components/progress_bar/project_task_progress_bar_field.js b/addons/hr_timesheet/static/src/components/progress_bar/project_task_progress_bar_field.js new file mode 100644 index 00000000000..c4159637ed9 --- /dev/null +++ b/addons/hr_timesheet/static/src/components/progress_bar/project_task_progress_bar_field.js @@ -0,0 +1,21 @@ +/** @odoo-module **/ + +import { registry } from "@web/core/registry"; +import { progressBarField, ProgressBarField } from "@web/views/fields/progress_bar/progress_bar_field"; + +export class ProjectTaskProgressBarField extends ProgressBarField { + get progressBarColorClass() { + if (this.currentValue > this.maxValue) { + return super.progressBarColorClass; + } + + return this.currentValue < 80 ? "bg-success" : "bg-warning"; + } +} + +export const projectTaskProgressBarField = { + ...progressBarField, + component: ProjectTaskProgressBarField, +}; + +registry.category("fields").add("project_task_progressbar", projectTaskProgressBarField); diff --git a/addons/hr_timesheet/static/tests/hr_timesheet_common_tests.js b/addons/hr_timesheet/static/tests/hr_timesheet_common_tests.js index e04f1dc8c88..a3c72c26bf3 100644 --- a/addons/hr_timesheet/static/tests/hr_timesheet_common_tests.js +++ b/addons/hr_timesheet/static/tests/hr_timesheet_common_tests.js @@ -35,11 +35,12 @@ export const getServerData = () => JSON.parse(JSON.stringify({ fields: { name: { string: "Name", type: "string" }, project_id: { string: "Project", type: "many2one", relation: "project.project" }, + progress: { string: "progress", type: "float" }, }, records: [ - { id: 1, name: "Task 1\u00A0AdditionalInfo", project_id: 1 }, - { id: 2, name: "Task 2\u00A0AdditionalInfo", project_id: 1 }, - { id: 3, name: "Task 3\u00A0AdditionalInfo", project_id: 1 }, + { id: 1, name: "Task 1\u00A0AdditionalInfo", project_id: 1, progress: 50 }, + { id: 2, name: "Task 2\u00A0AdditionalInfo", project_id: 1, progress: 80 }, + { id: 3, name: "Task 3\u00A0AdditionalInfo", project_id: 1, progress: 104 }, ], }, }, diff --git a/addons/hr_timesheet/static/tests/task_with_hours_tests.js b/addons/hr_timesheet/static/tests/task_with_hours_tests.js index 2767d143681..0f283cc3db4 100644 --- a/addons/hr_timesheet/static/tests/task_with_hours_tests.js +++ b/addons/hr_timesheet/static/tests/task_with_hours_tests.js @@ -64,4 +64,22 @@ QUnit.module("hr_timesheet", (hooks) => { assert.containsN(firstRow, '.o_list_many2one[name=task_id] .dropdown ul li:contains("AdditionalInfo")', 3); }); + QUnit.test("project task progress bar color", async function (assert) { + await makeView({ + serverData, + type: "list", + resModel: "project.task", + arch: ` + + + + + + `, + }); + + assert.containsOnce(target, "div.o_progressbar .bg-success", "Task 1 having progress = 50 < 80 => green color") + assert.containsOnce(target, "div.o_progressbar .bg-warning", "Task 2 having progress = 80 >= 80 => orange color") + assert.containsOnce(target, "div.o_progressbar .bg-success", "Task 3 having progress = 101 > 100 => red color") + }); }); diff --git a/addons/hr_timesheet/views/project_task_sharing_views.xml b/addons/hr_timesheet/views/project_task_sharing_views.xml index 6d3591744b8..cff722fdac0 100644 --- a/addons/hr_timesheet/views/project_task_sharing_views.xml +++ b/addons/hr_timesheet/views/project_task_sharing_views.xml @@ -12,7 +12,7 @@ - + diff --git a/addons/hr_timesheet/views/project_task_views.xml b/addons/hr_timesheet/views/project_task_views.xml index 73ce73662b6..a0d01bec6e1 100644 --- a/addons/hr_timesheet/views/project_task_views.xml +++ b/addons/hr_timesheet/views/project_task_views.xml @@ -12,7 +12,7 @@ - + @@ -148,7 +148,7 @@ - + @@ -166,7 +166,7 @@ - + diff --git a/addons/project/static/src/js/tours/project.js b/addons/project/static/src/js/tours/project.js index 823bb54c301..0d2e221c575 100644 --- a/addons/project/static/src/js/tours/project.js +++ b/addons/project/static/src/js/tours/project.js @@ -121,11 +121,6 @@ registry.category("web_tour.tours").add('project_tour', { }, { trigger: ".ui-autocomplete > li > a:not(:has(i.fa))", auto: true, -}, { - trigger: ".o_form_button_save", - extra_trigger: '.o_form_project_tasks .o_form_dirty', - content: markup(_t("You have unsaved changes - no worries! Odoo will automatically save it as you navigate.
You can discard these changes from here or manually save your task.
Let's save it manually.")), - position: "bottom", }, { trigger: ".breadcrumb-item:not(.active):last", extra_trigger: '.o_form_project_tasks', diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js index 65cfe2e0378..36dfb1102e6 100644 --- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js +++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js @@ -54,6 +54,10 @@ export class ProgressBarField extends Component { return this.props.record.data[this.maxValueField] || 100; } + get progressBarColorClass() { + return this.currentValue > this.maxValue ? this.props.overflowClass : "bg-primary"; + } + formatCurrentValue(humanReadable = !this.state.isEditing) { const formatter = formatters.get(Number.isInteger(this.currentValue) ? "integer" : "float"); return formatter(this.currentValue, { humanReadable }); diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml index 89ea503af32..835289a980a 100644 --- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml +++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml @@ -5,7 +5,7 @@
-
+