Listview fixes (#5479)
* update frappe-datatable to 0.0.5 * [fix] List view realtime update
This commit is contained in:
parent
30e1bb5df7
commit
53b1125820
7 changed files with 102 additions and 86 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
|
|||
|
||||
setup_result_area() {
|
||||
super.setup_result_area();
|
||||
this.$datatable_wrapper = $('<div class="data-table-wrapper">');
|
||||
this.$datatable_wrapper = $('<div class="datatable-wrapper">');
|
||||
this.$charts_wrapper = $('<div class="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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -67,16 +67,3 @@
|
|||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// datatable
|
||||
.data-table {
|
||||
.edit-popup {
|
||||
.frappe-control {
|
||||
padding: 0;
|
||||
|
||||
.form-group {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue