Merge pull request #5155 from dannon/tag_limit_size

Dataset hashtag display improvements
This commit is contained in:
Björn Grüning
2017-12-19 20:23:16 +01:00
committed by GitHub
8 changed files with 88 additions and 66 deletions
@@ -1,15 +1,14 @@
function _labelIfName(tag) {
if (tag.indexOf("name:") == 0) {
return `<span class="label label-info">${_.escape(tag.slice(5))}</span>`;
} else {
return "";
}
function _templateNametag(tag) {
return `<span class="label label-info">${_.escape(tag.slice(5))}</span>`;
}
function nametagTemplate(historyItem) {
return `<span class="nametags">${_.sortBy(_.uniq(historyItem.tags))
.map(_labelIfName)
.join("")}</span>`;
let uniqueNametags = _.filter(_.uniq(historyItem.tags), t => t.indexOf("name:") === 0);
let nametagsDisplay = _.sortBy(uniqueNametags).map(_templateNametag);
return `
<div class="nametags" title="${uniqueNametags.length} nametags">
${nametagsDisplay.join("")}
</div>`;
}
export default {
@@ -5,7 +5,6 @@ import Utils from "utils/utils";
import Buttons from "mvc/ui/ui-buttons";
var View = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.data = [];
this.data2 = [];
this.model =
@@ -28,7 +27,9 @@ var View = Backbone.View.extend({
pagesize: 20
}).set(options);
this.on("change", () => {
self.model.get("onchange") && self.model.get("onchange")(self.value());
if (this.model.get("onchange")) {
this.model.get("onchange")(this.value());
}
});
this.listenTo(this.model, "change:data", this._changeData, this);
this.listenTo(this.model, "change:disabled", this._changeDisabled, this);
@@ -40,8 +41,11 @@ var View = Backbone.View.extend({
},
render: function() {
var self = this;
this.model.get("searchable") ? this._renderSearchable() : this._renderClassic();
if (this.model.get("searchable")) {
this._renderSearchable();
} else {
this._renderClassic();
}
this.$el.addClass(this.model.get("cls")).attr("id", this.model.get("id"));
this.$select
.empty()
@@ -49,8 +53,8 @@ var View = Backbone.View.extend({
.attr("id", `${this.model.get("id")}_select`)
.prop("multiple", this.model.get("multiple"))
.on("change", () => {
self.value(self._getValue());
self.trigger("change");
this.value(this._getValue());
this.trigger("change");
});
this._changeData();
this._changeWait();
@@ -60,7 +64,6 @@ var View = Backbone.View.extend({
/** Renders the classic selection field */
_renderClassic: function() {
var self = this;
this.$el
.addClass(this.model.get("multiple") ? "ui-select-multiple" : "ui-select")
.append((this.$select = $("<select/>")))
@@ -76,12 +79,12 @@ var View = Backbone.View.extend({
.off("mousedown")
.on("mousedown", event => {
var currentY = event.pageY;
var currentHeight = self.$select.height();
self.minHeight = self.minHeight || currentHeight;
var currentHeight = this.$select.height();
this.minHeight = this.minHeight || currentHeight;
$("#dd-helper")
.show()
.on("mousemove", event => {
self.$select.height(Math.max(currentHeight + (event.pageY - currentY), self.minHeight));
this.$select.height(Math.max(currentHeight + (event.pageY - currentY), this.minHeight));
})
.on("mouseup mouseleave", () => {
$("#dd-helper")
@@ -98,25 +101,27 @@ var View = Backbone.View.extend({
/** Renders the default select2 field */
_renderSearchable: function() {
var self = this;
this.$el.append((this.$select = $("<div/>"))).append((this.$dropdown = $("<div/>")));
this.$dropdown.hide();
if (!this.model.get("multiple")) {
this.$dropdown.show().on("click", () => {
self.$select.select2 && self.$select.select2("open");
if (this.$select.select2) {
this.$select.select2("open");
}
});
}
this.all_button = null;
if (this.model.get("multiple") && !this.model.get("individual") && !this.model.get("readonly")) {
this.all_button = new Buttons.ButtonCheck({
onclick: function() {
onclick: () => {
var new_value = [];
self.all_button.value() !== 0 &&
_.each(self.model.get("data"), option => {
if (this.all_button.value() !== 0) {
_.each(this.model.get("data"), option => {
new_value.push(option.value);
});
self.value(new_value);
self.trigger("change");
}
this.value(new_value);
this.trigger("change");
}
});
this.$el.prepend(this.all_button.$el);
@@ -127,7 +132,7 @@ var View = Backbone.View.extend({
_match: function(term, text) {
return (
!term ||
term == "" ||
term === "" ||
String(text)
.toUpperCase()
.indexOf(term.toUpperCase()) >= 0
@@ -136,18 +141,17 @@ var View = Backbone.View.extend({
/** Updates the selection options */
_changeData: function() {
var self = this;
this.data = [];
if (!this.model.get("multiple") && this.model.get("optional")) {
this.data.push({
value: "__null__",
label: self.model.get("empty_text")
label: this.model.get("empty_text")
});
}
_.each(this.model.get("data"), option => {
self.data.push(option);
this.data.push(option);
});
if (this.length() == 0) {
if (this.length() === 0) {
this.data.push({
value: "__null__",
label: this.model.get("error_text")
@@ -156,61 +160,71 @@ var View = Backbone.View.extend({
if (this.model.get("searchable")) {
this.data2 = [];
_.each(this.data, (option, index) => {
self.data2.push({
this.data2.push({
order: index,
id: option.value,
text: option.label,
tags: option.tags
});
});
this.$select.data("select2") && this.$select.select2("destroy");
if (this.$select.data("select2")) {
this.$select.select2("destroy");
}
this.matched_tags = {};
this.$select.select2({
data: self.data2,
data: this.data2,
closeOnSelect: !this.model.get("multiple"),
multiple: this.model.get("multiple"),
query: function(q) {
self.matched_tags = {};
var pagesize = self.model.get("pagesize");
var results = _.filter(self.data2, e => {
query: q => {
this.matched_tags = {};
var pagesize = this.model.get("pagesize");
var results = _.filter(this.data2, e => {
var found = false;
_.each(e.tags, tag => {
if (self._match(q.term, tag)) {
found = self.matched_tags[tag] = true;
if (this._match(q.term, tag)) {
found = this.matched_tags[tag] = true;
}
});
return found || self._match(q.term, e.text);
return found || this._match(q.term, e.text);
});
q.callback({
results: results.slice((q.page - 1) * pagesize, q.page * pagesize),
more: results.length >= q.page * pagesize
});
},
formatResult: function(result) {
return `${_.escape(result.text)}<div class="ui-tags">${_.reduce(
result.tags,
(memo, tag) => {
if (self.matched_tags[tag]) {
formatResult: result => {
let extraTagWarning = "";
let filteredTags = _.filter(result.tags, t => this.matched_tags.hasOwnProperty(t));
if (filteredTags.length > 5) {
extraTagWarning = `&nbsp;<div class="label label-warning">${filteredTags.length -
5} more tags</div>`;
}
return `
${_.escape(result.text)}
<div class="ui-tags">
${_.reduce(
filteredTags.slice(0, 5),
(memo, tag) => {
return `${memo}&nbsp;<div class="label label-info">${_.escape(tag)}</div>`;
}
return memo;
},
""
)}</div>`;
},
""
)}
${extraTagWarning}
</div>`;
}
});
this.$(".select2-container .select2-search input").off("blur");
} else {
this.$select.find("option").remove();
_.each(this.data, option => {
self.$select.append(
this.$select.append(
$("<option/>")
.attr("value", option.value)
.html(_.escape(option.label))
);
});
}
this.model.set("disabled", this.model.get("readonly") || this.length() == 0);
this.model.set("disabled", this.model.get("readonly") || this.length() === 0);
this._changeValue();
},
@@ -252,7 +266,9 @@ var View = Backbone.View.extend({
/** Return/Set current selection */
value: function(new_value) {
new_value !== undefined && this.model.set("value", new_value);
if (new_value !== undefined) {
this.model.set("value", new_value);
}
return this._getValue();
},
@@ -311,9 +327,13 @@ var View = Backbone.View.extend({
/** Update all available options at once */
add: function(options, sorter) {
_.each(this.model.get("data"), v => {
v.keep && !_.findWhere(options, { value: v.value }) && options.push(v);
if (v.keep && !_.findWhere(options, { value: v.value })) {
options.push(v);
}
});
sorter && options && options.sort(sorter);
if (sorter && options) {
options.sort(sorter);
}
this.model.set("data", options);
},
@@ -334,7 +354,6 @@ var View = Backbone.View.extend({
/** Set value to dom */
_setValue: function(new_value) {
var self = this;
if (new_value === null || new_value === undefined) {
new_value = "__null__";
}
@@ -351,8 +370,10 @@ var View = Backbone.View.extend({
if ($.isArray(new_value)) {
var val = [];
_.each(new_value, v => {
var d = _.findWhere(self.data2, { id: v });
d && val.push(d);
var d = _.findWhere(this.data2, { id: v });
if (d) {
val.push(d);
}
});
new_value = val;
} else {
+4 -2
View File
@@ -221,7 +221,9 @@
}
}
}
span.nametags {
div.nametags {
max-height:26px;
overflow-y: auto;
span.label {
display: inline-block;
margin-right: 2px;
@@ -698,4 +700,4 @@
margin-right: 8px;
}
}
}
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
define("mvc/history/history-item-li",["exports"],function(e){"use strict";function n(e){return 0==e.indexOf("name:")?'<span class="label label-info">'+_.escape(e.slice(5))+"</span>":""}Object.defineProperty(e,"__esModule",{value:!0}),e.default={nametagTemplate:function(e){return'<span class="nametags">'+_.sortBy(_.uniq(e.tags)).map(n).join("")+"</span>"}}});
define("mvc/history/history-item-li",["exports"],function(e){"use strict";function n(e){return'<span class="label label-info">'+_.escape(e.slice(5))+"</span>"}Object.defineProperty(e,"__esModule",{value:!0}),e.default={nametagTemplate:function(e){var t=_.filter(_.uniq(e.tags),function(e){return 0===e.indexOf("name:")}),a=_.sortBy(t).map(n);return'\n <div class="nametags" title="'+t.length+' nametags">\n '+a.join("")+"\n </div>"}}});
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long