- {% if(image_url) { %}
-
-
-
- {% } %}
-
-
+
+ {% if(image_url) { %}
+
+
+
+ {% } %}
+
-
-
\ No newline at end of file
+
+
diff --git a/frappe/public/js/frappe/views/kanban/kanban_settings.js b/frappe/public/js/frappe/views/kanban/kanban_settings.js
new file mode 100644
index 0000000000..b41922e544
--- /dev/null
+++ b/frappe/public/js/frappe/views/kanban/kanban_settings.js
@@ -0,0 +1,264 @@
+export default class KanbanSettings {
+ constructor({ kanbanview, doctype, meta, settings }) {
+ if (!doctype) {
+ frappe.throw(__("DocType required"));
+ }
+
+ this.kanbanview = kanbanview;
+ this.doctype = doctype;
+ this.meta = meta;
+ this.settings = settings;
+ this.dialog = null;
+ this.fields = this.settings && this.settings.fields;
+
+ frappe.model.with_doctype("List View Settings", () => {
+ this.make();
+ this.get_fields();
+ this.setup_fields();
+ this.setup_remove_fields();
+ this.add_new_fields();
+ this.show_dialog();
+ });
+ }
+
+ make() {
+ this.dialog = new frappe.ui.Dialog({
+ title: __("{0} Settings", [__(this.doctype)]),
+ fields: [
+ {
+ fieldname: "show_labels",
+ label: __("Show Labels"),
+ fieldtype: "Check",
+ },
+ {
+ fieldname: "fields_html",
+ fieldtype: "HTML"
+ },
+ {
+ fieldname: "fields",
+ fieldtype: "Code",
+ hidden: 1
+ }
+ ]
+ });
+ this.dialog.set_values(this.settings);
+ this.dialog.set_primary_action(__("Save"), () => {
+ frappe.show_alert({
+ message: __("Saving"),
+ indicator: "green"
+ });
+
+ frappe.call({
+ method:
+ "frappe.desk.doctype.kanban_board.kanban_board.save_settings",
+ args: {
+ board_name: this.settings.name,
+ settings: this.dialog.get_values()
+ },
+ callback: r => {
+ this.kanbanview.board = r.message;
+ this.kanbanview.render();
+ this.dialog.hide();
+ }
+ });
+ });
+ }
+
+ refresh() {
+ this.setup_fields();
+ this.add_new_fields();
+ this.setup_remove_fields();
+ }
+
+ show_dialog() {
+ if (!this.settings.fields) {
+ this.update_fields();
+ }
+
+ this.dialog.show();
+ }
+
+ setup_fields() {
+ const fields_html = this.dialog.get_field("fields_html");
+ const wrapper = fields_html.$wrapper[0];
+ let fields = "";
+
+ for (let fieldname of this.fields) {
+ let field = this.get_docfield(fieldname);
+
+ fields += `
+
`;
+ }
+
+ fields_html.html(`
+
+ `);
+
+ new Sortable(
+ wrapper.getElementsByClassName("control-input-wrapper")[0],
+ {
+ handle: ".sortable-handle",
+ draggable: ".sortable",
+ onUpdate: params => {
+ this.fields.splice(
+ params.newIndex,
+ 0,
+ this.fields.splice(params.oldIndex, 1)[0]
+ );
+ this.dialog.set_value(
+ "fields",
+ JSON.stringify(this.fields)
+ );
+ this.refresh();
+ }
+ }
+ );
+ }
+
+ add_new_fields() {
+ let add_new_fields = this.get_dialog_fields_wrapper().getElementsByClassName(
+ "add-new-fields"
+ )[0];
+ add_new_fields.onclick = () => this.show_column_selector();
+ }
+
+ setup_remove_fields() {
+ let remove_fields = this.get_dialog_fields_wrapper().getElementsByClassName(
+ "remove-field"
+ );
+
+ for (let idx = 0; idx < remove_fields.length; idx++) {
+ remove_fields.item(idx).onclick = () =>
+ this.remove_fields(
+ remove_fields.item(idx).getAttribute("data-fieldname")
+ );
+ }
+ }
+
+ get_dialog_fields_wrapper() {
+ return this.dialog.get_field("fields_html").$wrapper[0];
+ }
+
+ remove_fields(fieldname) {
+ this.fields = this.fields.filter(field => field !== fieldname);
+ this.dialog.set_value("fields", JSON.stringify(this.fields));
+ this.refresh();
+ }
+
+ update_fields() {
+ const wrapper = this.dialog.get_field("fields_html").$wrapper[0];
+ let fields_order = wrapper.getElementsByClassName("fields_order");
+ this.fields = [];
+
+ for (let idx = 0; idx < fields_order.length; idx++) {
+ this.fields.push(
+ fields_order.item(idx).getAttribute("data-fieldname")
+ );
+ }
+
+ this.dialog.set_value("fields", JSON.stringify(this.fields));
+ }
+
+ show_column_selector() {
+ let dialog = new frappe.ui.Dialog({
+ title: __("{0} Fields", [__(this.doctype)]),
+ fields: [
+ {
+ label: __("Select Fields"),
+ fieldtype: "MultiCheck",
+ fieldname: "fields",
+ options: this.get_multiselect_fields(),
+ columns: 2
+ }
+ ]
+ });
+ dialog.set_primary_action(__("Save"), () => {
+ this.fields = dialog.get_values().fields || [];
+ this.dialog.set_value("fields", JSON.stringify(this.fields));
+ this.refresh();
+ dialog.hide();
+ });
+ dialog.show();
+ }
+
+ get_fields() {
+ this.fields = this.settings.fields;
+ this.fields.uniqBy(f => f.fieldname);
+ }
+
+ get_docfield(field_name) {
+ return (
+ frappe.meta.get_docfield(this.doctype, field_name) ||
+ frappe.model.get_std_field(field_name)
+ );
+ }
+
+ get_multiselect_fields() {
+ const ignore_fields = [
+ "idx",
+ "lft",
+ "rgt",
+ "old_parent",
+ "_user_tags",
+ "_liked_by",
+ "_comments",
+ "_assign",
+ this.meta.title_field || "name"
+ ];
+
+ const ignore_fieldtypes = [
+ "Attach Image",
+ "Text Editor",
+ "HTML Editor",
+ "Code",
+ "Color",
+ ...frappe.model.no_value_type
+ ];
+
+ return frappe.model.std_fields
+ .concat(this.kanbanview.get_fields_in_list_view())
+ .filter(
+ field =>
+ !ignore_fields.includes(field.fieldname) &&
+ !ignore_fieldtypes.includes(field.fieldtype)
+ )
+ .map(field => {
+ return {
+ label: __(field.label),
+ value: field.fieldname,
+ checked: this.fields.includes(field.fieldname)
+ };
+ });
+ }
+}
diff --git a/frappe/public/js/frappe/views/kanban/kanban_view.js b/frappe/public/js/frappe/views/kanban/kanban_view.js
index 3bf3a16189..b546365fd9 100644
--- a/frappe/public/js/frappe/views/kanban/kanban_view.js
+++ b/frappe/public/js/frappe/views/kanban/kanban_view.js
@@ -1,3 +1,5 @@
+import KanbanSettings from "./kanban_settings";
+
frappe.provide('frappe.views');
frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
@@ -57,6 +59,7 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
.then(board => {
this.board = board;
this.board.filters_array = JSON.parse(this.board.filters || '[]');
+ this.board.fields = JSON.parse(this.board.fields || '[]');
this.filters = this.board.filters_array;
});
}
@@ -187,6 +190,25 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
};
}
+ get_view_settings() {
+ return {
+ label: __("Kanban Settings", null, "Button in kanban view menu"),
+ action: () => this.show_kanban_settings(),
+ standard: true,
+ };
+ }
+
+ show_kanban_settings() {
+ frappe.model.with_doctype(this.doctype, () => {
+ new KanbanSettings({
+ kanbanview: this,
+ doctype: this.doctype,
+ settings: this.board,
+ meta: frappe.get_meta(this.doctype)
+ });
+ });
+ }
+
get required_libs() {
return [
'assets/frappe/js/lib/fluxify.min.js',
diff --git a/frappe/public/scss/desk/kanban.scss b/frappe/public/scss/desk/kanban.scss
index 41bd0b2859..8f286b7b35 100644
--- a/frappe/public/scss/desk/kanban.scss
+++ b/frappe/public/scss/desk/kanban.scss
@@ -139,6 +139,7 @@
}
.kanban-cards {
+ height: 100%;
max-height: calc(100vh - 250px);
margin: -5px;
padding: 5px;
@@ -149,39 +150,120 @@
&::-webkit-scrollbar {
display: none;
}
- }
- .kanban-card {
- @include flex(flex, space-between, null, column);
- margin-top: var(--margin-sm);
- min-height: 100px;
- @include card(
- $padding: 0,
- $background-color: var(--kanban-card-bg)
- );
- .kanban-card-body {
- padding: var(--padding-sm);
+ .kanban-card-wrapper {
+ position: relative;
+ display: block;
+
+ &:last-child .kanban-card {
+ margin-bottom: var(--margin-xl);
+ }
+ .kanban-card {
+ @include flex(flex, space-between, null, column);
+ margin-top: var(--margin-sm);
+ min-height: 100px;
+ @include card(
+ $padding: 0,
+ $background-color: var(--kanban-card-bg)
+ );
+
+ .kanban-image {
+ height: 125px;
+
+ img {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ object-position: top;
+ object-fit: cover;
+ margin: 0 auto;
+ height: 100%;
+ width: 100%;
+ min-width: 100%;
+ color: transparent;
+ position: relative;
+ }
+
+ @include broken-img(
+ $height: 125px,
+ $top: -4px,
+ )
+ }
+
+ .kanban-card-body {
+ cursor: grab;
+ padding: var(--padding-sm);
+
+ .kanban-title-area {
+ margin-bottom: 12px;
+ max-width: 90%;
+ font-size: var(--text-md);
+ font-weight: 500;
+
+ .kanban-card-doc {
+ .text-muted div {
+ display: inline;
+ }
+ }
+
+ .kanban-card-creation {
+ font-size: var(--text-md);
+ color: var(--text-muted);
+ margin-top: var(--margin-xs);
+ }
+ }
+
+ .kanban-card-meta {
+
+ .list-comment-count {
+ width: 30px;
+ }
+
+ .like-action:not(.liked) {
+ .icon use {
+ stroke: var(--text-muted);
+ }
+ }
+
+ .kanban-tags {
+ font-size: var(--text-sm);
+ margin-bottom: 8px;
+
+ .tag-pill {
+ border-radius: 100px;
+ height: 22px;
+ width: auto;
+ padding: 2px 8px;
+ margin-bottom: var(--margin-xs);
+ margin-right: var(--margin-xs);
+ }
+ }
+
+ .kanban-assignments {
+ display: flex;
+ float: right;
+
+ .avatar {
+ cursor: default;
+ width: 22px;
+ height: 22px;
+ }
+
+ .avatar-action {
+ width: 22px;
+ height: 22px;
+
+ .icon {
+ width: 12px;
+ height: 12px;
+ }
+ }
+ }
+ }
+ }
+ }
}
}
}
- .kanban-card-wrapper {
- position: relative;
-
- .kanban-card-redirect {
- display: block;
-
- &:hover,
- &:focus {
- text-decoration: none;
- }
- }
-
- &:last-child .kanban-card {
- margin-bottom: var(--margin-xl);
- }
- }
-
.kanban-card:hover,
.new-card-area,
.edit-card-area {
@@ -189,7 +271,6 @@
}
.kanban-card-wrapper:hover {
- cursor: pointer;
text-decoration: none;
.kanban-card-edit {
@@ -197,43 +278,6 @@
}
}
- .kanban-title-area {
- margin-bottom: 12px;
-
- .kanban-card-title {
- max-width: 90%;
- font-size: var(--text-md);
- font-weight: 500;
- }
-
- .kanban-card-creation {
- font-size: var(--text-md);
- color: var(--text-muted);
- margin-top: var(--margin-xs);
- }
- }
-
- .kanban-image {
- height: 125px;
-
- img {
- border-radius: var(--border-radius) var(--border-radius) 0 0;
- object-position: top;
- object-fit: cover;
- margin: 0 auto;
- height: 100%;
- width: 100%;
- min-width: 100%;
- color: transparent;
- position: relative;
- }
-
- @include broken-img(
- $height: 125px,
- $top: -4px,
- )
- }
-
.kanban-card-edit {
position: absolute;
right: 10px;
@@ -291,54 +335,6 @@
}
}
- .kanban-card-meta {
-
- .list-comment-count {
- width: 30px;
- }
-
- .like-action:not(.liked) {
- .icon use {
- stroke: var(--text-muted);
- }
- }
-
- .kanban-tags {
- font-size: var(--text-sm);
- margin-bottom: 8px;
-
- .tag-pill {
- border-radius: 100px;
- height: 22px;
- width: auto;
- padding: 2px 8px;
- margin-bottom: var(--margin-xs);
- margin-right: var(--margin-xs);
- }
- }
-
- .kanban-assignments {
- display: flex;
- float: right;
-
- .avatar {
- cursor: default;
- width: 22px;
- height: 22px;
- }
-
- .avatar-action {
- width: 22px;
- height: 22px;
-
- .icon {
- width: 12px;
- height: 12px;
- }
- }
- }
- }
-
.kanban-empty-state {
width: 100%;
line-height: 400px;