Listview fixes (#5479)

* update frappe-datatable to 0.0.5

* [fix] List view realtime update
This commit is contained in:
Faris Ansari 2018-04-24 17:03:20 +05:30 committed by GitHub
parent 30e1bb5df7
commit 53b1125820
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 102 additions and 86 deletions

View file

@ -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();

View file

@ -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() {

View file

@ -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);
};

View file

@ -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 {

View file

@ -67,16 +67,3 @@
margin-bottom: 2px;
}
}
// datatable
.data-table {
.edit-popup {
.frappe-control {
padding: 0;
.form-group {
margin: 0;
}
}
}
}

View file

@ -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",

View file

@ -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"