From 3f783dab734d27218daf2969e1731e448a09551d Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 14:55:37 +0530 Subject: [PATCH 1/9] refactor: add tags column to list view --- frappe/public/js/frappe/list/list_view.js | 96 +++++++++++++++-------- 1 file changed, 64 insertions(+), 32 deletions(-) diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js index c86e85f332..7aafbe6ae1 100644 --- a/frappe/public/js/frappe/list/list_view.js +++ b/frappe/public/js/frappe/list/list_view.js @@ -370,6 +370,10 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { }, }); } + + this.columns.push({ + type: "Tag" + }); } reorder_listview_fields() { @@ -563,38 +567,42 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { } } + // render_tags() { + // const $list_rows = this.$result.find(".list-row-container"); + + // this.data.forEach((d, i) => { + // let tag_html = $(`
+ // + //
`).appendTo($list_rows.get(i)); + + // // add tags + // let tag_editor = new frappe.ui.TagEditor({ + // parent: tag_html.find(".list-tag"), + // frm: { + // doctype: this.doctype, + // docname: d.name, + // }, + // list_sidebar: this.list_sidebar, + // user_tags: d._user_tags, + // on_change: (user_tags) => { + // d._user_tags = user_tags; + // }, + // }); + + // tag_editor.wrapper.on("click", ".tagit-label", (e) => { + // const $this = $(e.currentTarget); + // this.filter_area.add( + // this.doctype, + // "_user_tags", + // "=", + // $this.text() + // ); + // }); + // }); + // } + render_tags() { - const $list_rows = this.$result.find(".list-row-container"); - this.data.forEach((d, i) => { - let tag_html = $(`
- -
`).appendTo($list_rows.get(i)); - - // add tags - let tag_editor = new frappe.ui.TagEditor({ - parent: tag_html.find(".list-tag"), - frm: { - doctype: this.doctype, - docname: d.name, - }, - list_sidebar: this.list_sidebar, - user_tags: d._user_tags, - on_change: (user_tags) => { - d._user_tags = user_tags; - }, - }); - - tag_editor.wrapper.on("click", ".tagit-label", (e) => { - const $this = $(e.currentTarget); - this.filter_area.add( - this.doctype, - "_user_tags", - "=", - $this.text() - ); - }); - }); } get_header_html() { @@ -613,10 +621,11 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { ${__(subject_field.label)} `; const $columns = this.columns - .map((col) => { + .map(col => { let classes = [ "list-row-col ellipsis", col.type == "Subject" ? "list-subject level" : "hidden-xs", + col.type == "Tag" ? "tag-col hide": "", frappe.model.is_numeric_field(col.df) ? "text-right" : "", ].join(" "); @@ -701,6 +710,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { `; } + if (col.type === "Tag") { + const tags_display_class = !this.tags_shown ? 'hide' : ''; + let tags_html = doc._user_tags ? this.get_tags_html(doc._user_tags) : '' + return ` + + `; + } + const df = col.df || {}; const label = df.label; const fieldname = df.fieldname; @@ -809,6 +828,15 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { `; } + get_tags_html(user_tags) { + let get_tag_html = tag => { + if (tag) { + return `
${tag}
`; + } + } + return user_tags.split(',').map(get_tag_html).join(''); + } + get_meta_html(doc) { let html = ""; @@ -1218,7 +1246,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { } setup_tag_event() { + this.tags_shown = false; this.list_sidebar.parent.on("click", ".list-tag-preview", () => { + this.tags_shown = !this.tags_shown; this.toggle_tags(); }); } @@ -1331,7 +1361,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { } toggle_tags() { - this.$result.toggleClass("tags-shown"); + this.$result.find('.tag-col').toggleClass("hide"); + const preview_label = this.tags_shown ? __("Hide Tags") : __("Show Tags"); + this.list_sidebar.parent.find(".list-tag-preview").text(preview_label); } get_checked_items(only_docnames) { From b3b25594ade2f22acd5317baaf39d14ce2af339c Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 14:55:57 +0530 Subject: [PATCH 2/9] feat: tag pill style --- frappe/public/scss/main.scss | 1 + frappe/public/scss/tags.scss | 8 ++++++++ 2 files changed, 9 insertions(+) create mode 100644 frappe/public/scss/tags.scss diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss index 1cd5f4db27..1c569199b6 100644 --- a/frappe/public/scss/main.scss +++ b/frappe/public/scss/main.scss @@ -9,6 +9,7 @@ @import "toast"; @import "breadcrumb"; @import "indicator"; +@import "tags"; @import "page"; @import "avatar"; @import "icons"; diff --git a/frappe/public/scss/tags.scss b/frappe/public/scss/tags.scss new file mode 100644 index 0000000000..f161a95cd3 --- /dev/null +++ b/frappe/public/scss/tags.scss @@ -0,0 +1,8 @@ +.tag-pill { + background: var(--grey-200); + border-radius: var(--border-radius); + display: inline-block; + padding: 3px 10px; + color: var(--grey-700); + vertical-align: middle; +} \ No newline at end of file From dff4172cdb5a6baa972d8540acece6bce8efe1ae Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 14:57:02 +0530 Subject: [PATCH 3/9] fix: remove unused tags code in list_view.js --- frappe/public/js/frappe/list/list_view.js | 39 ----------------------- 1 file changed, 39 deletions(-) diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js index 7aafbe6ae1..57c17caa02 100644 --- a/frappe/public/js/frappe/list/list_view.js +++ b/frappe/public/js/frappe/list/list_view.js @@ -540,7 +540,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { this.render_list(); this.on_row_checked(); this.render_count(); - this.render_tags(); } render_list() { @@ -567,44 +566,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { } } - // render_tags() { - // const $list_rows = this.$result.find(".list-row-container"); - - // this.data.forEach((d, i) => { - // let tag_html = $(`
- // - //
`).appendTo($list_rows.get(i)); - - // // add tags - // let tag_editor = new frappe.ui.TagEditor({ - // parent: tag_html.find(".list-tag"), - // frm: { - // doctype: this.doctype, - // docname: d.name, - // }, - // list_sidebar: this.list_sidebar, - // user_tags: d._user_tags, - // on_change: (user_tags) => { - // d._user_tags = user_tags; - // }, - // }); - - // tag_editor.wrapper.on("click", ".tagit-label", (e) => { - // const $this = $(e.currentTarget); - // this.filter_area.add( - // this.doctype, - // "_user_tags", - // "=", - // $this.text() - // ); - // }); - // }); - // } - - render_tags() { - - } - get_header_html() { if (!this.columns) { return; From e283f60506708604d8a3c712daccd9e01b3f88c3 Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 14:58:23 +0530 Subject: [PATCH 4/9] refactor: refactor tags code in list sidebar --- frappe/public/js/frappe/list/list_sidebar.js | 88 ++++++------------- .../js/frappe/list/list_sidebar_stat.html | 10 +-- 2 files changed, 32 insertions(+), 66 deletions(-) diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index 7b3cb44acb..e5fa6366e5 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/frappe/public/js/frappe/list/list_sidebar.js @@ -63,74 +63,40 @@ frappe.views.ListSidebar = class ListSidebar { filters: (me.list_view.filter_area ? me.list_view.get_filters_for_args() : me.default_filters) || [] }, callback: function(r) { - me.render_stat("_user_tags", (r.message.stats || {})["_user_tags"]); + me.render_stat((r.message.stats || {})["_user_tags"]); let stats_dropdown = me.sidebar.find('.list-stats-dropdown'); frappe.utils.setup_search(stats_dropdown, '.stat-link', '.stat-label'); } }); } - render_stat(field, stat, tags) { - var me = this; - var sum = 0; - var stats = []; - var label = frappe.meta.docfield_map[this.doctype][field] ? - frappe.meta.docfield_map[this.doctype][field].label : field; - - stat = (stat || []).sort(function(a, b) { - return b[1] - a[1]; - }); - $.each(stat, function(i, v) { - sum = sum + v[1]; - }); - - if (tags) { - for (var t in tags) { - var nfound = -1; - for (var i in stat) { - if (tags[t] === stat[i][0]) { - stats.push(stat[i]); - nfound = i; - break; - } - } - if (nfound < 0) { - stats.push([tags[t], 0]); - } else { - me.tempstats["_user_tags"].splice(nfound, 1); - } - } - field = "_user_tags"; - } else { - stats = stat; - } - var context = { - field: field, - stat: stats, - sum: sum, - label: field === '_user_tags' ? (tags ? __(label) : __("Tags")) : __(label), + render_stat(stats) { + let args = { + stats: stats, + label: __("Tags") }; - $(frappe.render_template("list_sidebar_stat", context)) - .on("click", ".stat-link", function() { - var fieldname = $(this).attr('data-field'); - var label = $(this).attr('data-label'); - var condition = "like"; - var existing = me.list_view.filter_area.filter_list.get_filter(fieldname); - if(existing) { - existing.remove(); - } - if (label == "No Tags") { - label = "%,%"; - condition = "not like"; - } - me.list_view.filter_area.add( - me.doctype, - fieldname, - condition, - label - ); - }) - .appendTo(this.sidebar.find(".list-stats-dropdown")); + + let tag_list = $(frappe.render_template("list_sidebar_stat", args)).on("click", ".stat-link", (e) => { + let fieldname = $(e.currentTarget).attr('data-field'); + let label = $(e.currentTarget).attr('data-label'); + let condition = "like"; + let existing = this.list_view.filter_area.filter_list.get_filter(fieldname); + if (existing) { + existing.remove(); + } + if (label == "No Tags") { + label = "%,%"; + condition = "not like"; + } + this.list_view.filter_area.add( + this.doctype, + fieldname, + condition, + label + ); + }); + + this.sidebar.find(".list-stats-dropdown .stat-result").html(tag_list); } set_fieldtype(df) { diff --git a/frappe/public/js/frappe/list/list_sidebar_stat.html b/frappe/public/js/frappe/list/list_sidebar_stat.html index dd5b728af6..140202b5f3 100644 --- a/frappe/public/js/frappe/list/list_sidebar_stat.html +++ b/frappe/public/js/frappe/list/list_sidebar_stat.html @@ -1,13 +1,13 @@ -{% if(!stat.length) { %} +{% if (!stats.length) { %}
  • {{ __("No records tagged.") }}
    • {% } else { - for (var i=0, l=stat.length; i < l; i++) { - var stat_label = stat[i][0]; - var stat_count = stat[i][1]; + for (var i=0, l=stats.length; i < l; i++) { + var stat_label = stats[i][0]; + var stat_count = stats[i][1]; %}
  • - + {{ __(stat_label) }} {{ stat_count }} From 3c4610290833f3da403e9169a317d58ee6643bfb Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 14:59:09 +0530 Subject: [PATCH 5/9] fix: wrap tag list result with a class --- frappe/public/js/frappe/list/list_sidebar.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frappe/public/js/frappe/list/list_sidebar.html b/frappe/public/js/frappe/list/list_sidebar.html index a197d4a342..48a114ba1d 100644 --- a/frappe/public/js/frappe/list/list_sidebar.html +++ b/frappe/public/js/frappe/list/list_sidebar.html @@ -58,6 +58,8 @@
    +
    +
  • From 0a447adf532bae6641381e2d5885e24f2633f7e2 Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 15:00:09 +0530 Subject: [PATCH 6/9] fix: margin for tag pills in list --- frappe/public/scss/list.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss index cf45dd89ad..9d992078f1 100644 --- a/frappe/public/scss/list.scss +++ b/frappe/public/scss/list.scss @@ -66,12 +66,12 @@ .list-row-container { border-bottom: 1px solid $border-color; display: flex; - flex-direction: column; - outline: none; + flex-direction: column; + outline: none; - // &:focus { - // background-color: $light-yellow; - // } + // &:focus { + // background-color: $light-yellow; + // } } .list-row { @@ -80,6 +80,7 @@ cursor: pointer; transition: color 0.2s; -webkit-transition: color 0.2s; + font-size: var(--text-md); &:hover { background-color: $gray-50; @@ -96,8 +97,6 @@ flex: 1; } - font-size: var(--text-md); - .list-row-activity { justify-content: flex-end; // min-width: 120px; @@ -119,7 +118,12 @@ white-space: nowrap; min-width: 80px; } + } + .tag-pill { + &:not(:first-child) { + margin-left: 5px; + } } } From 6ec70fc2f53bcab7c96fa4d2497fb14d66e9d98a Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 15:00:57 +0530 Subject: [PATCH 7/9] fix: remove unused code in list_sidebar.js --- frappe/public/js/frappe/list/list_sidebar.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index e5fa6366e5..d3c3ae0149 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/frappe/public/js/frappe/list/list_sidebar.js @@ -47,10 +47,6 @@ frappe.views.ListSidebar = class ListSidebar { }); } - get_cat_tags() { - return this.cat_tags; - } - get_stats() { var me = this; frappe.call({ @@ -130,8 +126,4 @@ frappe.views.ListSidebar = class ListSidebar { this.sidebar.find(".stat-no-records").remove(); this.get_stats(); } - - get_divider() { - return $('
    • '); - } }; From f9a44f1c94b6992814567c057e2c7a8064a027b4 Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 15:07:25 +0530 Subject: [PATCH 8/9] feat: don't render filter template on popover if no filter button is provided --- .../js/frappe/ui/filters/filter_list.js | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/frappe/public/js/frappe/ui/filters/filter_list.js b/frappe/public/js/frappe/ui/filters/filter_list.js index c924411798..60253b2697 100644 --- a/frappe/public/js/frappe/ui/filters/filter_list.js +++ b/frappe/public/js/frappe/ui/filters/filter_list.js @@ -2,11 +2,17 @@ frappe.ui.FilterGroup = class { constructor(opts) { $.extend(this, opts); this.filters = []; - this.make(); window.fltr = this; + if (!this.filter_button) { + this.wrapper = this.parent; + this.wrapper.append(this.get_filter_area_template()); + this.set_filter_events(); + } else { + this.make_popover(); + } } - make() { + make_popover() { this.init_filter_popover(); this.set_popover_events(); } @@ -246,19 +252,20 @@ frappe.ui.FilterGroup = class { get_filter_area_template() { return $(` -
    - No filters selected -
    -
    -
    -
    - ${__("+ Add a Filter")} +
    +
    + No filters selected
    - -
    - ` +
    +
    +
    + ${__("+ Add a Filter")} +
    + +
    +
    ` ); } From ea8d2653aef3161f1e4e8e1f6536bffbb9e7da9f Mon Sep 17 00:00:00 2001 From: prssanna Date: Fri, 17 Jul 2020 15:07:49 +0530 Subject: [PATCH 9/9] fix: move filter styles outside popover --- frappe/public/scss/filters.scss | 53 ++++++++++++++++----------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/frappe/public/scss/filters.scss b/frappe/public/scss/filters.scss index 324888780c..fe884bfc62 100644 --- a/frappe/public/scss/filters.scss +++ b/frappe/public/scss/filters.scss @@ -8,44 +8,43 @@ min-width: 500px; min-height: 50px; font-size: var(--text-md); +} - .filter-box { - padding: $padding-xs $padding-md $padding-xs 0; +.filter-box { + padding: $padding-xs $padding-md $padding-xs 0; - .form-group { - @include media-breakpoint-up(xs) { - margin-bottom: 0; - } - } - - .remove-filter { - cursor: pointer; - line-height: 2; - } - - .filter-field { - .frappe-control { - position: relative; - margin-bottom: 0; - } + .form-group { + @include media-breakpoint-up(xs) { + margin-bottom: 0; } } - .filter-action-buttons { - display: flex; - justify-content: space-between; + .remove-filter { + cursor: pointer; + line-height: 2; + } - .add-filter { - line-height: 2; - cursor: pointer; + .filter-field { + .frappe-control { + position: relative; + margin-bottom: 0; } } +} - .divider { - margin-right: -10px; - margin-left: -10px; +.filter-action-buttons { + display: flex; + justify-content: space-between; + + .add-filter { + line-height: 2; + cursor: pointer; } +} +.divider { + margin-right: -10px; + margin-left: -10px; } // for sm and above