Skip to content

A
atlas
Commit 0c9bb699 by gutkaBinit Committed by kevalbhatt
Options

ATLAS-3008 UI: Add local sorting for the Search table

Signed-off-by: 's avatarkevalbhatt <kbhatt@apache.org>
parent ff7415d8
Showing with 216 additions and 107 deletions
dashboardv2/public/css/scss/override.scss
......@@ -132,73 +132,6 @@ td {
}
}
.backgrid {
td {
white-space: normal;
}
.select-all-header-cell {
width: 42px;
}
}
.backgrid-paginator ul {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border: 1px $color_keppel_approx solid;
margin: 0px;
float: right;
border-radius: 4px;
overflow: hidden;
>.active>span,
>.active>a,
>.active>a:hover {
background: none;
color: $color_keppel_approx;
background: none;
color: #37bb9b;
font-weight: 600;
font-family: sans-serif;
}
>li>a,
>li>span,
>li>button {
width: 30px;
height: 30px;
padding: 0;
line-height: 30px;
text-decoration: none;
border: none;
float: left;
background: $transparent;
color: $color_keppel_approx;
@include ellipsis();
i {
font-weight: bold;
}
&:hover {
color: $white;
background: $color_keppel_approx
}
}
>.disabled>span,
>.disabled>a,
>li>button[disabled] {
color: $color_mountain_mist_approx;
&:hover {
cursor: not-allowed;
color: $white;
background: $color_jungle_green_light !important;
}
}
}
.select2-container {
width: 100% !important;
......
dashboardv2/public/css/scss/search.scss
......@@ -18,6 +18,7 @@
//colors
$color_celeste_approx: #1D1F2B;
.switch {
position: relative;
width: 50px;
......@@ -46,6 +47,7 @@ $color_celeste_approx: #1D1F2B;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(black, .2);
@include transition(left #{$switchTransition});
&:before {
content: '';
position: absolute;
......@@ -59,6 +61,7 @@ $color_celeste_approx: #1D1F2B;
box-shadow: inset 0 1px rgba(black, .02);
@include transition(inherit)
}
.switch-input:checked~& {
left: 30px;
box-shadow: -1px 1px 5px rgba(black, .2);
......@@ -71,6 +74,7 @@ $color_celeste_approx: #1D1F2B;
.srchType {
margin: 5px 0px;
.srchTitle {
font-size: 14px;
color: $gray
......@@ -79,16 +83,20 @@ $color_celeste_approx: #1D1F2B;
.filterQuery {
word-break: break-all;
span {
font-size: 15px;
font-weight: bold;
}
.key {
color: $color_jungle_green_approx;
}
.operator {
color: $action_gray;
}
.value {
color: $tag_color;
}
......@@ -107,6 +115,7 @@ $color_celeste_approx: #1D1F2B;
.gu-mirror {
.table-quickMenu {
border: none;
td {
height: 54px;
}
......@@ -119,17 +128,20 @@ $color_celeste_approx: #1D1F2B;
.sindu_dragger {
@extend .gu-mirror;
&.sindu_column {
li {
float: none !important;
display: table-cell !important;
}
}
.gu-transit {
box-shadow: 0px 1px 15px inset;
//box-shadow: 0px 1px 15px inset;
}
table {
background: rgba(0, 0, 0, 0.18) !important;
background: rgb(242, 242, 242) !important;
}
}
......@@ -152,12 +164,14 @@ $color_celeste_approx: #1D1F2B;
cursor: pointer;
}
}
button.dropdown-toggle {
width: 99.5%;
text-align: left;
background-color: white;
color: $color_star_dust_approx;
border: $color_star_dust_approx;
&:hover {
color: $color_star_dust_approx !important;
border: $color_star_dust_approx !important;
......@@ -173,25 +187,30 @@ ul.type-filter-ul {
width: 100%;
padding-top: 0px;
margin-bottom: 0px;
li {
padding: 2px;
}
.typeLi li {
padding: 3px;
background-color: #f7fbff;
margin: 3px;
border: 1px solid #dbd6d6;
border-radius: 4px;
&:hover {
color: $white;
background-color: $color_star_dust_approx;
cursor: pointer;
}
&.active {
background-color: #37bb9b;
color: white;
}
}
.filterLi li {
padding: 2px;
margin: 4px;
......@@ -215,10 +234,12 @@ ul.type-filter-ul {
top: 0px;
background-color: white;
padding-top: 8px;
& .row {
margin-right: -10px;
margin-left: -10px;
}
& input.form-control {
border: 1px #c9c9c9 solid;
}
......
dashboardv2/public/css/scss/table.scss
......@@ -68,3 +68,93 @@ tr.empty {
}
}
}
.backgrid {
td {
white-space: normal;
}
.select-all-header-cell {
width: 42px;
}
thead {
th {
button {
padding-right: 11px;
}
}
}
.sortable:not(.descending):not(.ascending) {
.sort-caret {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 11px;
&:before {
content: "\f0dc";
}
}
}
}
.backgrid-paginator ul {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border: 1px $color_keppel_approx solid;
margin: 0px;
float: right;
border-radius: 4px;
overflow: hidden;
>.active>span,
>.active>a,
>.active>a:hover {
background: none;
color: $color_keppel_approx;
background: none;
color: #37bb9b;
font-weight: 600;
font-family: sans-serif;
}
>li>a,
>li>span,
>li>button {
width: 30px;
height: 30px;
padding: 0;
line-height: 30px;
text-decoration: none;
border: none;
float: left;
background: $transparent;
color: $color_keppel_approx;
@include ellipsis();
i {
font-weight: bold;
}
&:hover {
color: $white;
background: $color_keppel_approx
}
}
>.disabled>span,
>.disabled>a,
>li>button[disabled] {
color: $color_mountain_mist_approx;
&:hover {
cursor: not-allowed;
color: $white;
background: $color_jungle_green_light !important;
}
}
}
\ No newline at end of file
dashboardv2/public/js/collection/VSearchList.js
......@@ -30,7 +30,8 @@ define(['require',
model: VSearch,
initialize: function() {
initialize: function(options) {
_.extend(this, options);
this.modelName = 'VSearchList';
this.modelAttrName = '';
},
......
dashboardv2/public/js/utils/TableLayout.js
......@@ -147,6 +147,8 @@ define(['require',
includeTableLoader: true,
includeAtlasTableSorting: false,
/** ui events hash */
events: function() {
......@@ -184,6 +186,52 @@ define(['require',
_.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts'));
_.extend(this, options.atlasPaginationOpts);
_.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
if (this.includeAtlasTableSorting) {
var oldSortingRef = this.collection.setSorting;
this.collection.setSorting = function() {
var val = oldSortingRef.apply(this, arguments);
// console.log(val)
val.fullCollection.models.sort();
this.comparator = function(next, previous, data) {
// return a.get('year');
var getValue = function(options) {
var next = options.next,
previous = options.previous,
order = options.order;
if (order === -1) {
return next < previous ? -1 : 1;
} else {
return next < previous ? 1 : -1;
}
}
if (val.state && (!_.isNull(val.state.sortKey))) {
var nextValue,
previousValue;
if ((next && next.get("attributes") && next.get("attributes")[val.state.sortKey]) || (previous && previous.get("attributes") && previous.get("attributes")[val.state.sortKey])) {
nextValue = next.get("attributes")[val.state.sortKey];
previousValue = previous.get("attributes")[val.state.sortKey];
} else {
nextValue = next.attributes[val.state.sortKey];
previousValue = previous.attributes[val.state.sortKey];
}
nextValue = (typeof nextValue === 'string') ? nextValue.toLowerCase() : nextValue;
previousValue = (typeof previousValue === 'string') ? previousValue.toLowerCase() : previousValue;
return getValue({
"next": nextValue || '',
"previous": previousValue || '',
"order": val.state.order
});
}
}
return val;
};
}
this.bindEvents();
},
......@@ -220,9 +268,9 @@ define(['require',
on collection (backgrid.js - line no: 2081).
removeCellDirection function - removes "ascending" and "descending"
which in turn removes chevrons from every 'sortable' header-cells*/
this.listenTo(this.collection, "backgrid:sort", function() {
this.collection.trigger("sort");
});
this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) {
this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
}, this);
this.listenTo(this, "grid:refresh", function() {
if (this.grid) {
this.grid.trigger("backgrid:refresh");
......
dashboardv2/public/js/utils/Utils.js
......@@ -556,7 +556,10 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
var mergeObject = function(obj) {
if (obj) {
if (obj.attributes) {
Utils.findAndMergeRefEntity(obj.attributes, referredEntities);
Utils.findAndMergeRefEntity({
"attributeObject": obj.attributes,
"referredEntities": referredEntities
});
} else if (referredEntities[obj.guid]) {
_.extend(obj, referredEntities[obj.guid]);
}
......
dashboardv2/public/js/views/audit/AuditTableLayoutView.js
......@@ -70,6 +70,7 @@ define(['require',
includeFilter: false,
includePagination: false,
includePageSize: false,
includeAtlasTableSorting: true,
includeFooterRecords: false,
gridOpts: {
className: "table table-hover backgrid table-quickMenu",
......@@ -182,13 +183,11 @@ define(['require',
label: "Users",
cell: "html",
editable: false,
sortable: false,
},
timestamp: {
label: "Timestamp",
cell: "html",
editable: false,
sortable: false,
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
return new Date(rawValue);
......@@ -199,7 +198,6 @@ define(['require',
label: "Actions",
cell: "html",
editable: false,
sortable: false,
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
if (Enums.auditAction[rawValue]) {
......
dashboardv2/public/js/views/profile/ProfileLayoutView.js
......@@ -88,7 +88,7 @@ define(['require',
'typeHeaders': that.typeHeaders,
'entityDefCollection': that.entityDefCollection,
'enumDefCollection': that.enumDefCollection,
'isDisable': true,
'isTableDropDisable': true,
'glossaryCollection': that.glossaryCollection,
'classificationDefCollection': that.classificationDefCollection
}));
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
......@@ -83,6 +83,7 @@ define(['require',
includeGotoPage: true,
includeFooterRecords: true,
includeOrderAbleColumns: false,
includeAtlasTableSorting: true,
gridOpts: {
className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!'
......@@ -200,10 +201,9 @@ define(['require',
_.each(_.keys(this.schemaTableAttribute), function(key) {
if (key !== "position") {
col[key] = {
label: key,
label: key.capitalize(),
cell: "html",
editable: false,
sortable: false,
className: "searchTableName",
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
......@@ -225,7 +225,7 @@ define(['require',
}
});
col['tag'] = {
label: "Tags",
label: "Classifications",
cell: "Html",
editable: false,
sortable: false,
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -29,8 +29,9 @@ define(['require',
'utils/CommonViewFunction',
'utils/Messages',
'utils/Enums',
'utils/UrlLinks'
], function(require, Backbone, tableDragger, SearchResultLayoutViewTmpl, Modal, VEntity, Utils, Globals, VSearchList, VCommon, CommonViewFunction, Messages, Enums, UrlLinks) {
'utils/UrlLinks',
'platform'
], function(require, Backbone, tableDragger, SearchResultLayoutViewTmpl, Modal, VEntity, Utils, Globals, VSearchList, VCommon, CommonViewFunction, Messages, Enums, UrlLinks, platform) {
'use strict';
var SearchResultLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -144,7 +145,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'guid', 'initialView', 'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 'searchTableColumns', 'isDisable', 'fromView', 'glossaryCollection', 'termName'));
_.extend(this, _.pick(options, 'value', 'guid', 'initialView', 'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 'searchTableColumns', 'isTableDropDisable', 'fromView', 'glossaryCollection', 'termName'));
this.entityModel = new VEntity();
this.searchCollection = new VSearchList();
this.limit = 25;
......@@ -176,6 +177,9 @@ define(['require',
this.offset = pageOffset;
}
}
};
if (platform.name === "IE") {
this.isTableDropDisable = true;
}
},
bindEvents: function() {
......@@ -237,6 +241,9 @@ define(['require',
this.listenTo(this.searchVent, "search:refresh", function(model, response) {
this.fetchCollection();
}, this);
this.listenTo(this.searchCollection, "backgrid:sorted", function(model, response) {
this.checkTableFetch();
}, this)
},
onRender: function() {
var that = this;
......@@ -248,6 +255,7 @@ define(['require',
includeOrderAbleColumns: false,
includeSizeAbleColumns: false,
includeTableLoader: false,
includeAtlasTableSorting: true,
columnOpts: {
opts: {
initialColumnsVisible: null,
......@@ -422,7 +430,7 @@ define(['require',
attributeObject: dataOrCollection.entities,
referredEntities: dataOrCollection.referredEntities
});
that.searchCollection.reset(dataOrCollection.entities, { silent: true });
that.searchCollection.fullCollection.reset(dataOrCollection.entities, { silent: false });
}
......@@ -530,17 +538,13 @@ define(['require',
}));
});
},
renderTableLayoutView: function(col) {
var that = this;
require(['utils/TableLayout'], function(TableLayout) {
// displayOrder added for column manager
if (that.value.uiParameters) {
var savedColumnOrder = _.object(that.value.uiParameters.split(',').map(function(a) {
return a.split('::');
})); // get Column position from string to object
}
var columnCollection = Backgrid.Columns.extend({
tableRender: function(options) {
var that = this,
savedColumnOrder = options.order,
TableLayout = options.table,
columnCollection = Backgrid.Columns.extend({
sortKey: "displayOrder",
className: "my-awesome-css-animated-grid",
comparator: function(item) {
return item.get(this.sortKey) || 999;
},
......@@ -567,13 +571,30 @@ define(['require',
}
that.$(".ellipsis .inputAssignTag").hide();
table.trigger("grid:refresh"); /*Event fire when table rendered*/
if (that.isDisable !== true) {
tableDragger(document.querySelector(".colSort")).on('drop', function(from, to, el) {
// that.REntityTableLayoutView.$el.find('.colSort thead tr th:not(:first)').addClass('dragHandler');
if (that.isTableDropDisable !== true) {
var tableDropFunction = function(from, to, el) {
tableDragger(document.querySelector(".colSort")).destroy();
that.columnOrder = that.getColumnOrder(el.querySelectorAll('th.renderable'));
table.trigger("grid:refresh:update");
that.triggerUrl();
});
that.tableRender({ "order": that.columnOrder, "table": TableLayout });
that.checkTableFetch();
}
that.REntityTableLayoutView.$el.find('.colSort thead tr th:not(:first)').addClass('dragHandler');
tableDragger(document.querySelector(".colSort"), { dragHandler: ".dragHandler" }).on('drop', tableDropFunction);
}
},
renderTableLayoutView: function(col) {
var that = this;
require(['utils/TableLayout'], function(TableLayout) {
// displayOrder added for column manager
if (that.value.uiParameters) {
var savedColumnOrder = _.object(that.value.uiParameters.split(',').map(function(a) {
return a.split('::');
})); // get Column position from string to object
}
that.tableRender({ "order": savedColumnOrder, "table": TableLayout });
that.checkTableFetch();
});
},
......@@ -625,9 +646,8 @@ define(['require',
label: this.value && this.value.profileDBView ? "Table Name" : "Name",
cell: "html",
editable: false,
sortable: false,
resizeable: true,
orderable: true,
orderable: false,
renderable: true,
className: "searchTableName",
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
......@@ -657,7 +677,6 @@ define(['require',
label: "Owner",
cell: "String",
editable: false,
sortable: false,
resizeable: true,
orderable: true,
renderable: true,
......@@ -677,7 +696,6 @@ define(['require',
label: "Date Created",
cell: "Html",
editable: false,
sortable: false,
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
var obj = model.toJSON();
......@@ -696,7 +714,6 @@ define(['require',
label: "Description",
cell: "String",
editable: false,
sortable: false,
resizeable: true,
orderable: true,
renderable: true,
......@@ -715,7 +732,6 @@ define(['require',
label: "Type",
cell: "Html",
editable: false,
sortable: false,
resizeable: true,
orderable: true,
renderable: (columnToShow ? _.contains(columnToShow, 'typeName') : true),
......@@ -750,7 +766,6 @@ define(['require',
label: obj.name.capitalize(),
cell: "Html",
editable: false,
sortable: false,
resizeable: true,
orderable: true,
renderable: isRenderable,
......@@ -786,7 +801,6 @@ define(['require',
label: key.capitalize(),
cell: "Html",
editable: false,
sortable: false,
resizeable: true,
orderable: true,
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment