diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js index 9f74bc9629..2c86f067ed 100644 --- a/frappe/public/js/frappe/list/base_list.js +++ b/frappe/public/js/frappe/list/base_list.js @@ -326,17 +326,21 @@ frappe.views.BaseList = class BaseList { }; } - refresh() { - this.freeze(true); - // fetch data from server + get_call_args() { const args = this.get_args(); - return frappe.call({ + return { method: this.method, type: 'GET', args: args, freeze: this.freeze_on_refresh || false, freeze_message: this.freeze_message || (__('Loading') + '...') - }).then(r => { + }; + } + + refresh() { + this.freeze(true); + // fetch data from server + return frappe.call(this.get_call_args()).then(r => { // render this.prepare_data(r); this.toggle_result_area(); diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js index 0d2e382cc9..9bcbe1d247 100644 --- a/frappe/public/js/frappe/list/list_view.js +++ b/frappe/public/js/frappe/list/list_view.js @@ -635,6 +635,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { } setup_events() { + this.setup_filterable(); + this.setup_list_click(); + this.setup_tag_event(); + this.setup_new_doc_event(); + this.setup_check_events(); + this.setup_like(); + this.setup_realtime_updates(); + } + + setup_filterable() { // filterable events this.$result.on('click', '.filterable', e => { if (e.metaKey || e.ctrlKey) return; @@ -653,10 +663,11 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { }); this.filter_area.add(filters_to_apply); }); + } + setup_list_click() { this.$result.on('click', '.list-row', (e) => { const $target = $(e.target); - // tick checkbox if Ctrl/Meta key is pressed if (e.ctrlKey || e.metaKey && !$target.is('a')) { const $list_row = $(e.currentTarget); @@ -666,16 +677,13 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { this.on_row_checked(); return; } - // don't open form when checkbox, like, filterable are clicked if ($target.hasClass('filterable') || $target.hasClass('octicon-heart') || $target.is(':checkbox') || - $target.is('a') - ) { + $target.is('a')) { return; } - // open form const $row = $(e.currentTarget); const link = $row.find('.list-subject a').get(0); @@ -684,16 +692,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { return false; } }); - - // toggle tags - this.list_sidebar.parent.on('click', '.list-tag-preview', () => { - this.toggle_tags(); - }); - - this.$no_result.find('.btn-new-doc').click(() => this.make_new_doc()); - - this.setup_check_events(); - this.setup_like(); } setup_check_events() { @@ -755,6 +753,48 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { frappe.ui.setup_like_popover(this.$result, '.liked-by'); } + setup_new_doc_event() { + this.$no_result.find('.btn-new-doc').click(() => this.make_new_doc()); + } + + setup_tag_event() { + this.list_sidebar.parent.on('click', '.list-tag-preview', () => { + this.toggle_tags(); + }); + } + + setup_realtime_updates() { + frappe.realtime.on('list_update', data => { + const { doctype, name } = data; + if (doctype !== this.doctype) return; + + // filters to get only the doc with this name + const call_args = this.get_call_args(); + call_args.args.filters.push([this.doctype, 'name', '=', name]); + call_args.args.start = 0; + + frappe.call(call_args) + .then(({ message }) => { + if (!message) return; + const data = frappe.utils.dict(message.keys, message.values); + if (!(data && data.length)) return; + + const datum = data[0]; + const index = this.data.findIndex(d => d.name === datum.name); + + if (index === -1) { + // append new data + this.data.push(datum); + } else { + // update this data in place + this.data[index] = datum; + } + + this.render(); + }); + }); + } + on_row_checked() { this.$list_head_subject = this.$list_head_subject || this.$result.find('header .list-header-subject'); this.$checkbox_actions = this.$checkbox_actions || this.$result.find('header .checkbox-actions'); @@ -793,10 +833,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { return frappe.model.user_settings.save(this.doctype, this.view_name, obj); } - on_update(data) { - if (data.doctype === this.doctype) { - this.refresh(); - } + on_update() { + } get_menu_items() { diff --git a/frappe/public/js/frappe/views/reports/report_view.js b/frappe/public/js/frappe/views/reports/report_view.js index e808b91596..e86f26f923 100644 --- a/frappe/public/js/frappe/views/reports/report_view.js +++ b/frappe/public/js/frappe/views/reports/report_view.js @@ -40,7 +40,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView { setup_result_area() { super.setup_result_area(); - this.$datatable_wrapper = $('
'); + this.$datatable_wrapper = $('
'); this.$charts_wrapper = $('
'); this.$result.append(this.$charts_wrapper); this.$result.append(this.$datatable_wrapper); @@ -131,7 +131,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView { // indicate row update const _flash_row = (rowIndex) => { if (!flash_row) return; - const $row = this.$result.find(`.data-table-row[data-row-index="${rowIndex}"]`); + const $row = this.$result.find(`.dt-row[data-row-index="${rowIndex}"]`); $row.addClass('row-update'); setTimeout(() => $row.removeClass('row-update'), 500); }; diff --git a/frappe/public/less/frappe-datatable.less b/frappe/public/less/frappe-datatable.less index 6ff3966560..fa1ebf4556 100644 --- a/frappe/public/less/frappe-datatable.less +++ b/frappe/public/less/frappe-datatable.less @@ -1,36 +1,24 @@ @import "variables.less"; -.data-table { +.datatable { margin-left: -1px; margin-top: -1px; font-size: @text-medium; - .data-table-col .edit-cell { - padding: 0; - - input { - font-size: inherit; - height: 27px; - } - } - - .data-table-col .content { - padding: 0.5rem; - } - .frappe-control { margin: 0; - } - .form-group { - margin: 0; - } - .form-control { border-radius: 0px; border: none; } + + .form-group { + margin: 0; + } + .link-btn { top: 6px; } + select { height: 27px; } @@ -38,37 +26,36 @@ .checkbox { margin: 7px 0 7px 8px; } + [data-fieldtype="Color"] .control-input { overflow: hidden; } +} - .body-scrollable { - &::-webkit-scrollbar { - display: none; - } +.dt-scrollable { + max-height: calc(100vh - 250px); +} + +table td.dt-cell { + position: relative; +} + +.dt-cell__edit { + padding: 0; + + input { + font-size: inherit; + height: 27px; } +} - .data-table-header { - background-color: @panel-bg; - color: @text-muted; - } +.dt-header { + background-color: @panel-bg; + color: @text-muted; +} - .data-table-row.row-update { - animation: 500ms breathe forwards; - } - - .data-table-row.row-highlight { - background-color: @extra-light-yellow; - } - - .report-tree-node { - display: inline-block; - - .toggle { - cursor: pointer; - font-size: @text-regular; - } - } +.dt-row.row-update { + animation: 500ms breathe forwards; } @keyframes breathe { diff --git a/frappe/public/less/report.less b/frappe/public/less/report.less index 32613d61ad..82c894a159 100644 --- a/frappe/public/less/report.less +++ b/frappe/public/less/report.less @@ -67,16 +67,3 @@ margin-bottom: 2px; } } - -// datatable -.data-table { - .edit-popup { - .frappe-control { - padding: 0; - - .form-group { - margin: 0; - } - } - } -} diff --git a/package.json b/package.json index c10f33af79..1475525e19 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "dependencies": { "cookie": "^0.3.1", "express": "^4.16.2", - "frappe-datatable": "frappe/datatable", + "frappe-datatable": "^0.0.5", "frappe-gantt": "^0.1.0", "fuse": "^0.4.0", "fuse.js": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index 48379243a8..bf85ca5eb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -862,9 +862,9 @@ forwarded@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" -frappe-datatable@frappe/datatable: - version "0.0.4" - resolved "https://codeload.github.com/frappe/datatable/tar.gz/4bb400230087fbf97e8587a34916e14f77fa01cd" +frappe-datatable@^0.0.5: + version "0.0.5" + resolved "https://registry.yarnpkg.com/frappe-datatable/-/frappe-datatable-0.0.5.tgz#347c58c2ffae574a2d32560b1e11251c2d8f07f2" dependencies: clusterize.js "^0.18.0" lodash "^4.17.5"