Skip to content

A
atlas
Commit f85ff28e by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-2669 : Glossary UI : Attribute UI improved while associating term to the related term.

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 479b9ab1
Showing with 449 additions and 31 deletions
dashboardv2/gruntfile.js
......@@ -106,7 +106,8 @@ module.exports = function(grunt) {
'nv.d3.min.js': { 'nvd3/build': 'nvd3' },
'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' },
'table-dragger.js': { 'table-dragger/dist': 'table-dragger' },
'jstree.min.js': { 'jstree/dist': 'jstree' }
'jstree.min.js': { 'jstree/dist': 'jstree' },
'jquery.steps.min.js': { 'jquery-steps/build': 'jquery-steps' }
}
},
......@@ -143,7 +144,7 @@ module.exports = function(grunt) {
}],
'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' },
'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' },
'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' },
'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' }
}
},
......
dashboardv2/package.json
......@@ -37,7 +37,8 @@
"jquery-asBreadcrumbs": "0.2.2",
"jquery-placeholder": "2.3.1",
"jquery-sparkline": "2.4.0",
"jstree": "^3.3.5",
"jquery-steps": "1.1.0",
"jstree": "3.3.5",
"moment": "2.21.0",
"moment-timezone": "0.5.14",
"npm": "^5.8.0",
......
dashboardv2/public/css/scss/style.scss
......@@ -32,4 +32,5 @@
@import "search.scss";
@import "profile-table.scss";
@import "glossary.scss";
@import "wizard.scss";
@import "override.scss";
\ No newline at end of file
dashboardv2/public/css/scss/wizard.scss 0 → 100644
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$color_scarlet_approx: #ff3111;
$color_pippin_approx: #fbe3e4;
$color_your_pink_approx: #fbc2c4;
$color_falu_red_approx: #8a1f11;
%wizard_tabcontrol {
display: block;
width: 100%;
}
%extend_2 {
list-style: none!important;
padding: 0;
margin: 0;
}
%extend_3 {
display: block;
width: auto;
margin: 0 .5em .5em;
padding: 1em;
text-decoration: none;
position: relative;
border-radius: 5px;
}
%extend_4 {
background: #f5f5f5;
color: #bbb;
cursor: default;
}
%extend_5 {
background: $color_keppel_approx;
color: $white;
cursor: default;
}
%extend_befor_after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
}
.wizard {
@extend %wizard_tabcontrol;
a {
outline: 0;
}
ul {
@extend %extend_2;
>li {
display: block;
padding: 0;
}
}
> {
.steps {
position: relative;
display: block;
width: 100%;
.current-info {
position: absolute;
left: -999em;
}
.number {
font-size: 1.429em;
}
&>ul {
position: relative;
border: 0;
padding: 0px;
background: #f5f5f5;
border-radius: 0;
list-style: none;
overflow: hidden;
margin-bottom: 10px;
>li {
width: 25%;
float: left;
&:first-child>a {
padding-left: 15px;
}
a {
@extend %extend_3;
&:hover {
cursor: pointer;
}
margin: 0;
border: none;
border-radius: 0;
padding: 10px 0 10px 45px;
&:before {
@extend %extend_befor_after;
border-left: 30px solid #ddd;
margin-left: 1px;
z-index: 1;
}
&:after {
@extend %extend_befor_after;
border-left: 30px solid #f5f5f5;
z-index: 2;
}
}
&.disabled a {
@extend %extend_4;
}
&.current a {
@extend %extend_5;
&:after {
border-left: 30px solid $color_keppel_approx;
}
}
&.done a {
background: #b4e5d9;
color: $white;
&:after {
border-left: 30px solid #b4e5d9;
}
}
&.error a {
background: $color_scarlet_approx;
color: $white;
&:after {
border-left: 30px solid $color_scarlet_approx;
}
}
}
}
}
.content {
background: #f5f5f5;
display: block;
margin: .5em;
position: relative;
width: 100%; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 5px;
> {
.title {
display: none;
}
.body {
float: left;
width: 100%;
height: 95%;
padding: 2.5%;
>ul {
list-style: disc!important;
>li {
display: list-item;
}
}
}
}
}
.actions {
position: relative;
display: block;
text-align: right;
width: 100%;
ul[role="menu"] {
li+li {
margin-left: 5px;
}
li.disabled {
a {
opacity: .65;
}
}
a {
padding: 10px 20px;
background-color: $color_keppel_approx;
color: #fff;
margin-bottom: 10px;
border: 1px $color_keppel_approx solid;
border-radius: 4px;
transition: all .3s ease;
margin: 2px;
}
a[href="#cancel"] {
padding: 10px 20px;
background-color: transparent;
color: $color_keppel_approx;
margin-bottom: 10px;
border: 1px $color_keppel_approx solid;
border-radius: 4px;
transition: all .3s ease;
margin: 2px;
}
}
>ul {
display: inline-block;
text-align: right;
>li {
float: left;
margin: 0 .5em;
}
}
}
.loading .spinner {}
}
&.vertical> {
.steps {
display: inline;
float: left;
width: 30%;
>ul>li {
float: none;
width: 100%;
}
}
.content {
display: inline;
float: left;
margin: 0 2.5% .5em 2.5%;
width: 65%;
}
.actions {
display: inline;
float: right;
margin: 0 2.5%;
width: 95%;
>ul>li {
margin: 0 0 0 1em;
}
}
}
}
.tabcontrol {
@extend %wizard_tabcontrol;
a {
outline: 0;
}
ul {
@extend %extend_2;
>li {
display: block;
padding: 0;
}
}
> {
.steps .current-info {
position: absolute;
left: -999em;
}
.content>.title {
display: none;
}
}
}
@media(max-width: 600px) {
.wizard {
>.steps {
a {
margin-top: .5em;
&:hover {
margin-top: .5em;
}
&:active {
margin-top: .5em;
}
}
>ul>li {
width: 50%;
}
}
&.vertical> {
.steps {
display: block;
float: none;
width: 100%;
}
.actions {
display: block;
float: none;
width: 100%;
}
.content {
display: block;
float: none;
margin: 0 .5em .5em;
width: auto;
}
}
}
}
@media(max-width: 480px) {
.wizard>.steps>ul>li {
width: 100%;
}
}
.wizard-modal {
.modal-body {
overflow: hidden;
max-height: none;
}
.wizard {
position: relative;
width: 100%;
height: 100%;
.content {
max-height: 400px;
overflow: auto;
margin: 0px 0px 15px 0px;
}
.actions {
>ul>li {
margin: 0px;
}
}
}
}
\ No newline at end of file
dashboardv2/public/js/main.js
......@@ -129,6 +129,9 @@ require.config({
},
'jstree': {
'deps': ['jquery']
},
'jquery-steps': {
'deps': ['jquery']
}
},
......@@ -171,7 +174,8 @@ require.config({
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'table-dragger': 'libs/table-dragger/table-dragger',
'jstree': 'libs/jstree/jstree.min'
'jstree': 'libs/jstree/jstree.min',
'jquery-steps': 'libs/jquery-steps/jquery.steps.min',
},
/**
......
dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html
......@@ -14,17 +14,26 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div id="r_glossaryTree"></div>
<br/>
{{#if isAttributeRelationView}}
<form name="termAttributeForm" class="form-horizontal" data-id="termAttributeForm">
<div data-id="wizard">
<h3>Select Term</h3>
<section>
<div id="r_glossaryTree"></div>
</section>
<h3>Attributes</h3>
<section>
<form name="termAttributeForm" class="form-horizontal" data-id="termAttributeForm">
{{#each selectedTermAttributeList}}
<div class="form-group">
<label class="control-label col-sm-2" for="name">{{@key}}</label>
<div class="col-sm-10">
<input class="form-control" name="{{@key}}" value="" data-id="displayName" placeholder="{{@key}}"/>
<input class="form-control" name="{{@key}}" value="" data-id="displayName" placeholder="{{@key}}" />
</div>
</div>
{{/each}}
</form>
</form>
</section>
</div>
{{else}}
<div id="r_glossaryTree"></div>
{{/if}}
\ No newline at end of file
dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html
......@@ -15,18 +15,5 @@
* limitations under the License.
-->
<div>
<div class="row form-group">
<!-- <div class="col-md-6">
<select data-id="termAttributeSelect">
{{#each attributeList}}
<option value="{{@key}}">{{@key}}</option>{{/each}}
</select>
</div> -->
<!-- <div class="col-md-6">
<button type="button" class="btn btn-action btn-md" data-id="addTermRelation">
<i class="fa fa-plus"></i> <span>Assign Term</span>
</button>
</div> -->
</div>
<div data-id="termAttributeTable"></div>
</div>
\ No newline at end of file
dashboardv2/public/js/views/glossary/AssignTermLayoutView.js
......@@ -22,7 +22,8 @@ define(['require',
'utils/Utils',
'utils/Enums',
'utils/UrlLinks',
'modules/Modal'
'modules/Modal',
'jquery-steps'
], function(require, Backbone, AssignTermLayoutViewTmpl, Utils, Enums, UrlLinks, Modal) {
var AssignTermLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -46,7 +47,8 @@ define(['require',
/** ui selector cache */
ui: {
termAttributeForm: '[data-id="termAttributeForm"]'
termAttributeForm: '[data-id="termAttributeForm"]',
wizard: '[data-id="wizard"]'
},
/** ui events hash */
events: function() {
......@@ -81,7 +83,9 @@ define(['require',
"cancelText": "Cancel",
"okCloses": false,
"okText": "Assign",
"allowCancel": true
"allowCancel": true,
"showFooter": this.isAttributeRelationView ? false : true,
"mainClass": "wizard-modal"
});
this.modal.open();
this.modal.on('closeModal', function() {
......@@ -100,6 +104,40 @@ define(['require',
bindEvents: function() {},
onRender: function() {
this.renderGlossaryTree();
var that = this;
if (this.isAttributeRelationView) {
this.ui.wizard.steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
enableCancelButton: true,
transitionEffect: $.fn.steps.transitionEffect.none,
transitionEffectSpeed: 200,
labels: {
cancel: "Cancel",
finish: "Assign",
next: "Next",
previous: "Previous",
loading: "Loading ..."
},
onStepChanging: function(event, currentIndex, newIndex) {
var isMatch = that.glossary.selectedItem.type == "GlossaryTerm";
if (!isMatch) {
Utils.notifyWarn({
content: "Please select Term for association"
});
}
return isMatch
},
onFinished: function(event, currentIndex) {
that.assignTerm();
},
onCanceled: function(event) {
that.modal.trigger('cancel');
},
});
}
},
assignTerm: function() {
this.assignTermError = false;
......
dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js
......@@ -22,8 +22,9 @@ define(['require',
'utils/Utils',
'utils/Messages',
'utils/Globals',
'utils/CommonViewFunction'
], function(require, Backbone, GlossaryDetailLayoutViewTmpl, Utils, Messages, Globals, CommonViewFunction) {
'utils/CommonViewFunction',
'collection/VGlossaryList'
], function(require, Backbone, GlossaryDetailLayoutViewTmpl, Utils, Messages, Globals, CommonViewFunction, VGlossaryList) {
'use strict';
var GlossaryDetailLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -306,13 +307,24 @@ define(['require',
onClickAddTermBtn: function(e) {
var that = this;
require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) {
var glossary = that.glossaryCollection;
if (that.value && that.value.gId) {
var foundModel = that.glossaryCollection.find({ guid: that.value.gId });
if (foundModel) {
glossary = new VGlossaryList([foundModel.toJSON()], {
comparator: function(item) {
return item.get("displayName");
}
});
}
}
var view = new AssignTermLayoutView({
categoryData: that.data,
isCategoryView: that.isCategoryView,
callback: function() {
that.getData();
},
glossaryCollection: that.glossaryCollection
glossaryCollection: glossary
});
view.modal.on('ok', function() {
that.hideLoader();
......@@ -322,13 +334,24 @@ define(['require',
onClickAddCategoryBtn: function(e) {
var that = this;
require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) {
var glossary = that.glossaryCollection;
if (that.value && that.value.gId) {
var foundModel = that.glossaryCollection.find({ guid: that.value.gId });
if (foundModel) {
glossary = new VGlossaryList([foundModel.toJSON()], {
comparator: function(item) {
return item.get("displayName");
}
});
}
}
var view = new AssignTermLayoutView({
termData: that.data,
isTermView: that.isTermView,
callback: function() {
that.getData();
},
glossaryCollection: that.glossaryCollection
glossaryCollection: glossary
});
view.modal.on('ok', function() {
that.hideLoader();
......
dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
......@@ -365,7 +365,6 @@ define(['require',
if (this.value && this.value.viewType) {
this.viewType = this.value.viewType;
}
this.setValues();
if (this.guid && this.value && ((this.value.fromView && this.value.fromView) || (this.value.updateView))) {
var $tree = this.ui[this.viewType == "term" ? "termTree" : "categoryTree"],
node = $tree.jstree(true).get_node(this.guid);
......@@ -383,6 +382,8 @@ define(['require',
});
this.glossaryCollection.trigger("update:details", { isGlossaryUpdate: this.value.gType == "glossary" });
}
} else {
this.setValues();
}
if (options.isTrigger) {
this.triggerUrl();
......@@ -406,6 +407,9 @@ define(['require',
return obj != "NoAction" ? true : false;
}
},
"search": {
"show_only_matches": true
},
"core": {
"data": function(node, cb) {
if (node.id === "#") {
......@@ -470,6 +474,10 @@ define(['require',
} else if (type == that.viewType) {
that.triggerUrl();
}
}).on("search.jstree", function(e, data) {
createAction(_.extend({}, options, data));
}).on("clear_search.jstree", function(e, data) {
createAction(_.extend({}, options, data));
}).bind('loaded.jstree', function(e, data) {
if (that.query[type].isNodeNotFoundAtLoad == true) {
treeLoaded({ "$el": $el, "type": type });
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -372,6 +372,9 @@ define(['require',
skipDefaultError: true,
sort: false,
success: function(dataOrCollection, response) {
if (that.isDestroyed) {
return;
}
Globals.searchApiCallRef = undefined;
var isFirstPage = that.offset === 0,
dataLength = 0,
......
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