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 176 additions and 81 deletions
dashboardv2/public/css/scss/override.scss
...@@ -132,73 +132,6 @@ td { ...@@ -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 { .select2-container {
width: 100% !important; width: 100% !important;
......
dashboardv2/public/css/scss/search.scss
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
//colors //colors
$color_celeste_approx: #1D1F2B; $color_celeste_approx: #1D1F2B;
.switch { .switch {
position: relative; position: relative;
width: 50px; width: 50px;
...@@ -46,6 +47,7 @@ $color_celeste_approx: #1D1F2B; ...@@ -46,6 +47,7 @@ $color_celeste_approx: #1D1F2B;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px 5px rgba(black, .2); box-shadow: 1px 1px 5px rgba(black, .2);
@include transition(left #{$switchTransition}); @include transition(left #{$switchTransition});
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -59,6 +61,7 @@ $color_celeste_approx: #1D1F2B; ...@@ -59,6 +61,7 @@ $color_celeste_approx: #1D1F2B;
box-shadow: inset 0 1px rgba(black, .02); box-shadow: inset 0 1px rgba(black, .02);
@include transition(inherit) @include transition(inherit)
} }
.switch-input:checked~& { .switch-input:checked~& {
left: 30px; left: 30px;
box-shadow: -1px 1px 5px rgba(black, .2); box-shadow: -1px 1px 5px rgba(black, .2);
...@@ -71,6 +74,7 @@ $color_celeste_approx: #1D1F2B; ...@@ -71,6 +74,7 @@ $color_celeste_approx: #1D1F2B;
.srchType { .srchType {
margin: 5px 0px; margin: 5px 0px;
.srchTitle { .srchTitle {
font-size: 14px; font-size: 14px;
color: $gray color: $gray
...@@ -79,16 +83,20 @@ $color_celeste_approx: #1D1F2B; ...@@ -79,16 +83,20 @@ $color_celeste_approx: #1D1F2B;
.filterQuery { .filterQuery {
word-break: break-all; word-break: break-all;
span { span {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
.key { .key {
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
} }
.operator { .operator {
color: $action_gray; color: $action_gray;
} }
.value { .value {
color: $tag_color; color: $tag_color;
} }
...@@ -107,6 +115,7 @@ $color_celeste_approx: #1D1F2B; ...@@ -107,6 +115,7 @@ $color_celeste_approx: #1D1F2B;
.gu-mirror { .gu-mirror {
.table-quickMenu { .table-quickMenu {
border: none; border: none;
td { td {
height: 54px; height: 54px;
} }
...@@ -119,17 +128,20 @@ $color_celeste_approx: #1D1F2B; ...@@ -119,17 +128,20 @@ $color_celeste_approx: #1D1F2B;
.sindu_dragger { .sindu_dragger {
@extend .gu-mirror; @extend .gu-mirror;
&.sindu_column { &.sindu_column {
li { li {
float: none !important; float: none !important;
display: table-cell !important; display: table-cell !important;
} }
} }
.gu-transit { .gu-transit {
box-shadow: 0px 1px 15px inset; //box-shadow: 0px 1px 15px inset;
} }
table { table {
background: rgba(0, 0, 0, 0.18) !important; background: rgb(242, 242, 242) !important;
} }
} }
...@@ -152,12 +164,14 @@ $color_celeste_approx: #1D1F2B; ...@@ -152,12 +164,14 @@ $color_celeste_approx: #1D1F2B;
cursor: pointer; cursor: pointer;
} }
} }
button.dropdown-toggle { button.dropdown-toggle {
width: 99.5%; width: 99.5%;
text-align: left; text-align: left;
background-color: white; background-color: white;
color: $color_star_dust_approx; color: $color_star_dust_approx;
border: $color_star_dust_approx; border: $color_star_dust_approx;
&:hover { &:hover {
color: $color_star_dust_approx !important; color: $color_star_dust_approx !important;
border: $color_star_dust_approx !important; border: $color_star_dust_approx !important;
...@@ -173,25 +187,30 @@ ul.type-filter-ul { ...@@ -173,25 +187,30 @@ ul.type-filter-ul {
width: 100%; width: 100%;
padding-top: 0px; padding-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
li { li {
padding: 2px; padding: 2px;
} }
.typeLi li { .typeLi li {
padding: 3px; padding: 3px;
background-color: #f7fbff; background-color: #f7fbff;
margin: 3px; margin: 3px;
border: 1px solid #dbd6d6; border: 1px solid #dbd6d6;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_star_dust_approx; background-color: $color_star_dust_approx;
cursor: pointer; cursor: pointer;
} }
&.active { &.active {
background-color: #37bb9b; background-color: #37bb9b;
color: white; color: white;
} }
} }
.filterLi li { .filterLi li {
padding: 2px; padding: 2px;
margin: 4px; margin: 4px;
...@@ -215,10 +234,12 @@ ul.type-filter-ul { ...@@ -215,10 +234,12 @@ ul.type-filter-ul {
top: 0px; top: 0px;
background-color: white; background-color: white;
padding-top: 8px; padding-top: 8px;
& .row { & .row {
margin-right: -10px; margin-right: -10px;
margin-left: -10px; margin-left: -10px;
} }
& input.form-control { & input.form-control {
border: 1px #c9c9c9 solid; border: 1px #c9c9c9 solid;
} }
......
dashboardv2/public/css/scss/table.scss
...@@ -67,4 +67,94 @@ tr.empty { ...@@ -67,4 +67,94 @@ tr.empty {
width: 20%; width: 20%;
} }
} }
}
.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', ...@@ -30,7 +30,8 @@ define(['require',
model: VSearch, model: VSearch,
initialize: function() { initialize: function(options) {
_.extend(this, options);
this.modelName = 'VSearchList'; this.modelName = 'VSearchList';
this.modelAttrName = ''; this.modelAttrName = '';
}, },
......
dashboardv2/public/js/utils/TableLayout.js
...@@ -147,6 +147,8 @@ define(['require', ...@@ -147,6 +147,8 @@ define(['require',
includeTableLoader: true, includeTableLoader: true,
includeAtlasTableSorting: false,
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -184,6 +186,52 @@ define(['require', ...@@ -184,6 +186,52 @@ define(['require',
_.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts')); _.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts'));
_.extend(this, options.atlasPaginationOpts); _.extend(this, options.atlasPaginationOpts);
_.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns }); _.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(); this.bindEvents();
}, },
...@@ -220,9 +268,9 @@ define(['require', ...@@ -220,9 +268,9 @@ define(['require',
on collection (backgrid.js - line no: 2081). on collection (backgrid.js - line no: 2081).
removeCellDirection function - removes "ascending" and "descending" removeCellDirection function - removes "ascending" and "descending"
which in turn removes chevrons from every 'sortable' header-cells*/ which in turn removes chevrons from every 'sortable' header-cells*/
this.listenTo(this.collection, "backgrid:sort", function() { this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) {
this.collection.trigger("sort"); this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
}); }, this);
this.listenTo(this, "grid:refresh", function() { this.listenTo(this, "grid:refresh", function() {
if (this.grid) { if (this.grid) {
this.grid.trigger("backgrid:refresh"); this.grid.trigger("backgrid:refresh");
......
dashboardv2/public/js/utils/Utils.js
...@@ -556,7 +556,10 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -556,7 +556,10 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
var mergeObject = function(obj) { var mergeObject = function(obj) {
if (obj) { if (obj) {
if (obj.attributes) { if (obj.attributes) {
Utils.findAndMergeRefEntity(obj.attributes, referredEntities); Utils.findAndMergeRefEntity({
"attributeObject": obj.attributes,
"referredEntities": referredEntities
});
} else if (referredEntities[obj.guid]) { } else if (referredEntities[obj.guid]) {
_.extend(obj, referredEntities[obj.guid]); _.extend(obj, referredEntities[obj.guid]);
} }
......
dashboardv2/public/js/views/audit/AuditTableLayoutView.js
...@@ -70,6 +70,7 @@ define(['require', ...@@ -70,6 +70,7 @@ define(['require',
includeFilter: false, includeFilter: false,
includePagination: false, includePagination: false,
includePageSize: false, includePageSize: false,
includeAtlasTableSorting: true,
includeFooterRecords: false, includeFooterRecords: false,
gridOpts: { gridOpts: {
className: "table table-hover backgrid table-quickMenu", className: "table table-hover backgrid table-quickMenu",
...@@ -182,13 +183,11 @@ define(['require', ...@@ -182,13 +183,11 @@ define(['require',
label: "Users", label: "Users",
cell: "html", cell: "html",
editable: false, editable: false,
sortable: false,
}, },
timestamp: { timestamp: {
label: "Timestamp", label: "Timestamp",
cell: "html", cell: "html",
editable: false, editable: false,
sortable: false,
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
return new Date(rawValue); return new Date(rawValue);
...@@ -199,7 +198,6 @@ define(['require', ...@@ -199,7 +198,6 @@ define(['require',
label: "Actions", label: "Actions",
cell: "html", cell: "html",
editable: false, editable: false,
sortable: false,
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
if (Enums.auditAction[rawValue]) { if (Enums.auditAction[rawValue]) {
......
dashboardv2/public/js/views/profile/ProfileLayoutView.js
...@@ -88,7 +88,7 @@ define(['require', ...@@ -88,7 +88,7 @@ define(['require',
'typeHeaders': that.typeHeaders, 'typeHeaders': that.typeHeaders,
'entityDefCollection': that.entityDefCollection, 'entityDefCollection': that.entityDefCollection,
'enumDefCollection': that.enumDefCollection, 'enumDefCollection': that.enumDefCollection,
'isDisable': true, 'isTableDropDisable': true,
'glossaryCollection': that.glossaryCollection, 'glossaryCollection': that.glossaryCollection,
'classificationDefCollection': that.classificationDefCollection 'classificationDefCollection': that.classificationDefCollection
})); }));
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
...@@ -83,6 +83,7 @@ define(['require', ...@@ -83,6 +83,7 @@ define(['require',
includeGotoPage: true, includeGotoPage: true,
includeFooterRecords: true, includeFooterRecords: true,
includeOrderAbleColumns: false, includeOrderAbleColumns: false,
includeAtlasTableSorting: true,
gridOpts: { gridOpts: {
className: "table table-hover backgrid table-quickMenu", className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!' emptyText: 'No records found!'
...@@ -200,10 +201,9 @@ define(['require', ...@@ -200,10 +201,9 @@ define(['require',
_.each(_.keys(this.schemaTableAttribute), function(key) { _.each(_.keys(this.schemaTableAttribute), function(key) {
if (key !== "position") { if (key !== "position") {
col[key] = { col[key] = {
label: key, label: key.capitalize(),
cell: "html", cell: "html",
editable: false, editable: false,
sortable: false,
className: "searchTableName", className: "searchTableName",
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
...@@ -225,7 +225,7 @@ define(['require', ...@@ -225,7 +225,7 @@ define(['require',
} }
}); });
col['tag'] = { col['tag'] = {
label: "Tags", label: "Classifications",
cell: "Html", cell: "Html",
editable: false, editable: false,
sortable: false, sortable: false,
......
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