espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard layout settings refactor

Browse Source
This commit is contained in:
Yuri Kuznetsov
2022-07-26 12:24:49 +03:00
parent fdab5c42a6
commit 05af5fa0f6
2 changed files with 92 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/views/preferences/fields/dashboard-tab-list.js
+55 -24
View File
@@ -26,7 +26,7 @@
* these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
************************************************************************/
define('views/preferences/fields/dashboard-tab-list', 'views/fields/array', function (Dep) {
define('views/preferences/fields/dashboard-tab-list', ['views/fields/array'], function (Dep) {
return Dep.extend({
@@ -34,40 +34,71 @@ define('views/preferences/fields/dashboard-tab-list', 'views/fields/array', func
Dep.prototype.setup.call(this);
this.translatedOptions = {};
var list = this.model.get(this.name) || [];
list.forEach(function (value) {
let list = this.model.get(this.name) || [];
list.forEach(value => {
this.translatedOptions[value] = value;
}, this);
});
},
getItemHtml: function (value) {
value = value.toString();
var valueSanitized = this.escapeValue(value);
var translatedValue = this.escapeValue(this.translatedOptions[value] || value);
var html = '' +
'<div class="list-group-item link-with-role form-inline" data-value="' + valueSanitized + '">' +
'<div class="pull-left" style="width: 92%; display: inline-block;">' +
'<input data-name="translatedValue" data-value="' + valueSanitized + '" class="role form-control input-sm" value="'+translatedValue+'">' +
'</div>' +
'<div style="width: 8%; display: inline-block; vertical-align: top;">' +
'<a href="javascript:" class="pull-right" data-value="' + valueSanitized + '" data-action="removeValue"><span class="fas fa-times"></a>' +
'</div><br style="clear: both;" />' +
'</div>';
let translatedValue = this.translatedOptions[value] || value;
return html;
return $('<div>')
.addClass('list-group-item link-with-role form-inline')
.attr('data-value', value)
.append(
$('<div>')
.addClass('pull-left')
.css('width', '92%')
.css('display', 'inline-block')
.append(
$('<input>')
.attr('data-name', 'translatedValue')
.attr('data-value', value)
.addClass('role form-control input-sm')
.attr('value', translatedValue)
)
)
.append(
$('<div>')
.css('width', '8%')
.css('display', 'inline-block')
.css('vertical-align', 'top')
.append(
$('<a>')
.attr('href', 'javascript:')
.addClass('pull-right')
.attr('data-value', value)
.attr('data-action', 'removeValue')
.append(
$('<span>').addClass('fas fa-times')
)
)
)
.append(
$('<br>').css('clear', 'both')
)
.get(0).outerHTML;
},
fetch: function () {
var data = Dep.prototype.fetch.call(this);
let data = Dep.prototype.fetch.call(this);
data.translatedOptions = {};
(data[this.name] || []).forEach(function (value) {
var valueInternal = value.replace(/"/g, '\\"');
data.translatedOptions[value] = this.$el.find('input[data-name="translatedValue"][data-value="'+valueInternal+'"]').val() || value;
}, this);
(data[this.name] || []).forEach(value => {
let valueInternal = value.replace(/"/g, '\\"');
data.translatedOptions[value] = this.$el
.find('input[data-name="translatedValue"][data-value="'+valueInternal+'"]')
.val() || value;
});
return data;
}
},
});
});
client/src/views/settings/fields/dashboard-layout.js
+37 -25
View File
@@ -182,8 +182,6 @@ define('views/settings/fields/dashboard-layout', ['views/fields/base', 'lib!grid
layout.forEach((o, i) => {
if (o.id === id) {
layout.splice(i, 1);
return;
}
});
@@ -204,7 +202,6 @@ define('views/settings/fields/dashboard-layout', ['views/fields/base', 'lib!grid
var dashboardLayout = [];
(data.dashboardTabList).forEach((name) => {
var layout = [];
var id = this.generateId();
@@ -371,37 +368,52 @@ define('views/settings/fields/dashboard-layout', ['views/fields/base', 'lib!grid
var actionsHtml = '';
var actions2Html = '';
if (this.mode === 'edit') {
actionsHtml +=
'<a href="javascript:" class="pull-right" data-action="removeDashlet" data-id="'+id+'">'+
'<span class="fas fa-times"></span>'+
'</a>';
if (this.isEditMode()) {
actionsHtml += $('<a>')
.attr('href', 'javascript:')
.addClass('pull-right')
.attr('data-action', 'removeDashlet')
.attr('data-id', id)
.append(
$('<span>').addClass('fas fa-times')
)
.get(0)
.outerHTML;
actions2Html +=
'<a href="javascript:" class="pull-right" data-action="editDashlet" data-id="'+id+'" data-name="'+name+'">'+
this.translate('Edit') +
'</a>';
actions2Html += $('<a>')
.attr('href', 'javascript:')
.addClass('pull-right')
.attr('data-action', 'editDashlet')
.attr('data-id', id)
.attr('data-name', name)
.text(this.translate('Edit'))
.get(0)
.outerHTML;
}
var title = this.getOption(id, 'title');
if (title) {
title = this.getHelper().escapeString(title);
}
let title = this.getOption(id, 'title');
if (!title) {
title = this.translate(name, 'dashlets');
}
var headerHtml =
'<div class="panel-heading">' +
actionsHtml + '<h4 class="panel-title">' + title + '</h4>' +
'</div>';
let headerHtml = $('<div>')
.addClass('panel-heading')
.append(actionsHtml)
.append(
$('<h4>').addClass('panel-title').text(title)
)
.get(0).outerHTML;
var $container = $(
'<div class="grid-stack-item-content panel panel-default">' + headerHtml +
'<div class="panel-body">'+actions2Html+'</div></div>'
);
let $container =
$('<div>')
.addClass('grid-stack-item-content panel panel-default')
.append(headerHtml)
.append(
$('<div>')
.addClass('panel-body')
.append(actions2Html)
);
$container.attr('data-id', id);
$container.attr('data-name', name);