From fb0296f21070f8cc5f8e686eb24033feea4fc22d Mon Sep 17 00:00:00 2001 From: Ejaaz Khan Date: Thu, 18 Dec 2025 12:57:54 +0530 Subject: [PATCH] feat: redesign sidebar assignment --- .../js/frappe/form/sidebar/assign_to.js | 193 +++++++++++------- .../js/frappe/form/sidebar/form_sidebar.js | 1 - 2 files changed, 114 insertions(+), 80 deletions(-) diff --git a/frappe/public/js/frappe/form/sidebar/assign_to.js b/frappe/public/js/frappe/form/sidebar/assign_to.js index 994f8dbfa8..4872d6f124 100644 --- a/frappe/public/js/frappe/form/sidebar/assign_to.js +++ b/frappe/public/js/frappe/form/sidebar/assign_to.js @@ -30,14 +30,17 @@ frappe.ui.form.AssignTo = class AssignTo { return; } - let avatar_group = frappe.avatar_group(assigned_users, 5, { - align: "left", - overlap: true, + let assignment_group = new frappe.ui.form.AssignmentClass({ + assignments: assigned_users, + assignment_details: assignments, + frm: this.frm, }); + assignment_group = assignment_group.make_assignment_section(); + assignments_wrapper.show(); - assignments_wrapper.append(avatar_group); - avatar_group.click(() => { + assignments_wrapper.append(assignment_group); + assignment_group.find(".view-all-assignment").click(() => { new frappe.ui.form.AssignmentDialog({ assignments: assigned_users, assignment_details: assignments, @@ -242,11 +245,115 @@ frappe.ui.form.AssignToDialog = class AssignToDialog { } }; -frappe.ui.form.AssignmentDialog = class { +frappe.ui.form.AssignmentClass = class AssignmentClass { constructor(opts) { this.frm = opts.frm; this.assignments = opts.assignments; this.assignment_details = opts.assignment_details; + } + + make_assignment_section() { + let $assignment_html = $("
"); + let count = 0; + + for (const assignment of this.assignments) { + if (count === 3) { + $assignment_html.append( + $( + 'View All' + ) + ); + break; + } + + $assignment_html.append(this.get_assignment_row(assignment)); + count++; + } + + return $assignment_html; + } + + get_assignment_row(assignment, in_dialogue = false) { + const row = $(` +
+
+ ${frappe.avatar(assignment)} + ${frappe.user.full_name(assignment)} +
+
+
+
+ `); + + const btn_group = row.find(".btn-group"); + + if (assignment === frappe.session.user) { + btn_group.append(` + + `); + btn_group.find(".complete-btn").click(() => { + this.close_assignment(assignment).then((assignments) => { + row.remove(); + this.render(assignments); + }); + }); + + if (in_dialogue) { + const html = this.assignment_details + .filter((x) => x.owner === assignment && strip_html(x.description)) + .map((x) => x.description) + .join("
"); + if (html) { + let description = $( + "
" + ).html(html); + row.find(".assignee").append(description); + } + } + } + + if (assignment === frappe.session.user || this.frm.perm[0].write) { + btn_group.append(` + + `); + btn_group.find(".remove-btn").click(() => { + this.remove_assignment(assignment).then((assignments) => { + row.remove(); + this.render(assignments); + }); + }); + } + return row; + } + + remove_assignment(assignment) { + return frappe.xcall("frappe.desk.form.assign_to.remove", { + doctype: this.frm.doctype, + name: this.frm.docname, + assign_to: assignment, + }); + } + + close_assignment(assignment) { + return frappe.xcall("frappe.desk.form.assign_to.close", { + doctype: this.frm.doctype, + name: this.frm.docname, + assign_to: assignment, + }); + } + + render(assignments) { + this.frm && this.frm.assign_to.render(assignments); + } +}; + +frappe.ui.form.AssignmentDialog = class extends frappe.ui.form.AssignmentClass { + constructor(opts) { + super(opts); this.make(); } @@ -294,9 +401,6 @@ frappe.ui.form.AssignmentDialog = class { }); this.dialog.show(); } - render(assignments) { - this.frm && this.frm.assign_to.render(assignments); - } add_assignment(assignment) { return frappe .xcall("frappe.desk.form.assign_to.add", { @@ -309,79 +413,10 @@ frappe.ui.form.AssignmentDialog = class { this.render(assignments); }); } - remove_assignment(assignment) { - return frappe.xcall("frappe.desk.form.assign_to.remove", { - doctype: this.frm.doctype, - name: this.frm.docname, - assign_to: assignment, - }); - } - close_assignment(assignment) { - return frappe.xcall("frappe.desk.form.assign_to.close", { - doctype: this.frm.doctype, - name: this.frm.docname, - assign_to: assignment, - }); - } update_assignment(assignment) { const in_the_list = this.assignment_list.find(`[data-user="${assignment}"]`).length; if (!in_the_list) { - this.assignment_list.append(this.get_assignment_row(assignment)); + this.assignment_list.append(this.get_assignment_row(assignment, true)); } } - get_assignment_row(assignment) { - const row = $(` -
-
- ${frappe.avatar(assignment)} - ${frappe.user.full_name(assignment)} -
-
-
-
- `); - - const btn_group = row.find(".btn-group"); - - if (assignment === frappe.session.user) { - btn_group.append(` - - `); - btn_group.find(".complete-btn").click(() => { - this.close_assignment(assignment).then((assignments) => { - row.remove(); - this.render(assignments); - }); - }); - - const html = this.assignment_details - .filter((x) => x.owner === assignment && strip_html(x.description)) - .map((x) => x.description) - .join("
"); - if (html) { - $( - "
" - ) - .html(html) - .appendTo(row); - } - } - - if (assignment === frappe.session.user || this.frm.perm[0].write) { - btn_group.append(` - - `); - btn_group.find(".remove-btn").click(() => { - this.remove_assignment(assignment).then((assignments) => { - row.remove(); - this.render(assignments); - }); - }); - } - return row; - } }; diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js index 75d3907421..a7ddedfa6f 100644 --- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js +++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js @@ -109,7 +109,6 @@ frappe.ui.form.Sidebar = class { this.like_wrapper.attr("data-liked-by", this.frm.doc._liked_by); const liked = frappe.ui.is_liked(this.frm.doc); - console.log(liked, "wow", this.frm.doc); this.like_wrapper .toggleClass("not-liked", !liked)