Commit 69330a5d by kevalbhatt Committed by Madhan Neethiraj

ATLAS-2295: UI updates for classifications

parent ca04aead
......@@ -112,6 +112,9 @@ td {
td {
white-space: normal;
}
.select-all-header-cell{
width : 42px;
}
}
.backgrid-paginator ul {
......
......@@ -23,65 +23,112 @@
height: 150px;
overflow-y: auto;
}
.child>li,
>li {
list-style: none;
cursor: pointer;
&.parent-node {
position: relative;
margin-top: 5px;
/* margin-bottom: 5px; */
border-radius: 4px;
&:hover {
background-color: $color_star_dust_approx;
}
&.active {
background-color: $color_jungle_green_approx;
border: none;
.tools {
display: block
&>div {
background-color: $color_jungle_green_approx;
border: none;
.tools {
display: block
}
&:hover {
background-color: $color_jungle_green_approx;
}
}
ul.child {
&:after {
height: 4px;
top: -5px;
}
}
}
>ul>li {
line-height: 30px;
margin-left: -20px;
text-indent: 20px;
&>div {
position: relative;
margin-top: 5px;
/* margin-bottom: 5px; */
border-radius: 4px;
&:hover {
background-color: $color_keppel_approx;
background-color: $color_star_dust_approx;
}
&.selected {
background-color: $color_keppel_approx;
>.fa.toggleArrow {
position: absolute;
left: 0;
padding: 8px;
cursor: pointer;
} // >ul>li {
// line-height: 30px;
// margin-left: -20px;
// text-indent: 20px;
// &:hover {
// background-color: $color_keppel_approx;
// }
// &.selected {
// background-color: $color_keppel_approx;
// }
// }
.tools {
display: none;
position: absolute;
right: 0;
color: $white;
padding: 5px 10px;
}
>a,
>div>a {
display: block;
color: $white !important;
white-space: nowrap;
padding: 5px 10px;
max-width: 91%;
@include ellipsis();
font-size: 14px;
&:hover {
color: $white !important;
text-decoration: none !important;
}
}
>i+a {
padding: 5px 25px;
}
}
.tools {
display: none;
position: absolute;
right: 0;
color: $white;
padding: 5px 10px;
}
}
>a,
>div>a {
display: block;
color: $white !important;
white-space: nowrap;
padding: 5px 10px;
max-width: 91%;
@include ellipsis();
font-size: 14px;
&:hover {
color: $white !important;
text-decoration: none !important;
>ul.child {
margin-left: 11px;
padding-left: 10px;
border-left: 1px dotted gray;
position: relative;
&:after {
position: absolute;
content: "";
height: 13px;
width: 11px;
top: -14px;
left: -1px;
border-left: 1px dotted gray;
}
li {
&.parent-node {
&:after {
position: absolute;
content: "";
height: 2px;
width: 14px;
top: 16px;
left: -9px;
border-top: 1px dotted gray;
}
&.active:after {
width: 9px;
}
}
}
}
}
}
>ul {
padding-left: 20px;
li {}
}
.tagAsset {
display: none;
}
}
.input-group.attributes .form-control {
......
......@@ -145,6 +145,11 @@ a {
}
}
.cursor-default,
.cursor-default a {
cursor: default;
}
.blue-link {
color: $color_havelock_blue_approx;
&:focus {
......
......@@ -160,7 +160,7 @@ require.config({
'daterangepicker': 'libs/bootstrap-daterangepicker/js/daterangepicker',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'table-dragger' : 'libs/table-dragger/table-dragger'
'table-dragger': 'libs/table-dragger/table-dragger'
},
/**
......@@ -237,6 +237,10 @@ require(['App',
this.entityDefCollection.fetch({
skipDefaultError: true,
complete: function() {
that.entityDefCollection.fullCollection.comparator = function(model) {
return model.get('name').toLowerCase();
};
that.entityDefCollection.fullCollection.sort({ silent: true });
--that.asyncFetchCounter;
startApp();
}
......@@ -244,6 +248,10 @@ require(['App',
this.typeHeaders.fetch({
skipDefaultError: true,
complete: function() {
that.typeHeaders.fullCollection.comparator = function(model) {
return model.get('name').toLowerCase();
}
that.typeHeaders.fullCollection.sort({ silent: true });
--that.asyncFetchCounter;
startApp();
}
......@@ -251,6 +259,10 @@ require(['App',
this.enumDefCollection.fetch({
skipDefaultError: true,
complete: function() {
that.enumDefCollection.fullCollection.comparator = function(model) {
return model.get('name').toLowerCase();
};
that.enumDefCollection.fullCollection.sort({ silent: true });
--that.asyncFetchCounter;
startApp();
}
......@@ -258,6 +270,10 @@ require(['App',
this.classificationDefCollection.fetch({
skipDefaultError: true,
complete: function() {
that.classificationDefCollection.fullCollection.comparator = function(model) {
return model.get('name').toLowerCase();
};
that.classificationDefCollection.fullCollection.sort({ silent: true });
--that.asyncFetchCounter;
startApp();
}
......
......@@ -139,7 +139,8 @@ define([
}
App.rSideNav.show(new SideNavLayoutView(
_.extend({
'tag': tagName
'tag': tagName,
'value': paramObj
}, that.preFetchedCollectionLists, that.sharedObj)
));
} else {
......@@ -150,7 +151,7 @@ define([
updateTabState: true
});
}
App.rSideNav.currentView.RTagLayoutView.currentView.manualRender(tagName);
App.rSideNav.currentView.RTagLayoutView.currentView.manualRender(_.extend({}, paramObj, { 'tagName': tagName }));
App.rSideNav.currentView.selectTab();
}
if (tagName) {
......
......@@ -15,8 +15,8 @@
* limitations under the License.
-->
<div class="row">
<div class="col-md-4">
<div class="col-md-8 subContent">
<div class="col-sm-4">
<div class="col-sm-8 subContent">
<p data-id="atlasVersion"></p>
<br>
<p class="text-info">Get involved!</p>
......
......@@ -37,7 +37,7 @@
</div>
{{#if includePagination}}
<div class="row clearfix banded pagination-box">
<div class="col-md-offset-4 col-md-8">
<div class="col-sm-offset-4 col-sm-8">
<div class="inline-content-fr">
<div data-id="r_pagination" class="inline"></div>
{{#if includePageSize}}
......
......@@ -18,7 +18,7 @@
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="entityDetail form-horizontal col-md-12">
<div class="entityDetail form-horizontal col-sm-12">
<div class="row">
<a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a>
</div>
......@@ -72,7 +72,7 @@
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-sm-12">
<ul class="nav nav-tabs ">
<li role="properties" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
<li role="tags"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Tags</a></li>
......
......@@ -19,15 +19,15 @@
<div class="col-sm-12 form-group">
<div class="row">
{{#if guid}}
<div class="col-md-8">
<label class="col-md-6 row-margin-bottom" data-id="assetName"></label>
<div class="col-sm-8">
<label class="col-sm-6 row-margin-bottom" data-id="assetName"></label>
</div>
{{else}}
<div class="col-md-8">
<select class="form-control col-md-6 row-margin-bottom" data-id="entityList"></select>
<div class="col-sm-8">
<select class="form-control col-sm-6 row-margin-bottom" data-id="entityList"></select>
</div>
{{/if}}
<div class="col-md-4">
<div class="col-sm-4">
<span class="pull-left">Required</span>
<label class="switch pull-left">
<input type="checkbox" class="switch-input" name="toggleRequired" value="text">
......@@ -37,7 +37,7 @@
</div>
</div>
</div>
<div class="col-md-12 entityInputData" data-id="entityInputData"></div>
<div class="col-sm-12 entityInputData" data-id="entityInputData"></div>
</div>
</form>
<div class="fontLoader-relative entityLoader" style="display:none">
......
......@@ -16,15 +16,15 @@
-->
<div class="row">
<div class="">
<div class="col-md-3 rowValue">
<div class="col-sm-3 rowValue">
<div><span class="graphkey">Rows</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
<div class="col-md-3 table_created">
<div class="col-sm-3 table_created">
<div><span class="graphkey">Date Created</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
<div class="col-md-6 table_name">
<div class="col-sm-6 table_name">
<div><span class="graphkey">Table</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
......@@ -32,7 +32,7 @@
</div>
<hr/>
<div class="row">
<h4 class="col-md-12">{{typeObject.label}}</h4>
<h4 class="col-sm-12">{{typeObject.label}}</h4>
</div>
<div class="row">
<a href="javascript:void(0);" data-id="backToYear" style="display: none"><i class="fa fa-chevron-left"></i> Back To Year</a>
......@@ -40,10 +40,10 @@
</br>
<div class="row">
<div class="">
<div class="col-md-10">
<div class="col-sm-10">
<svg class="graph" width="100%" height="250px"></svg>
</div>
<div class="col-md-2 profileGraphDetail">
<div class="col-sm-2 profileGraphDetail">
{{#if profileData}}
<div class="">
<div><span class="graphkey">Cardinality</span></div>
......
......@@ -16,19 +16,19 @@
-->
<div class="row">
<div class="">
<div class="col-md-3 rowValue">
<div class="col-sm-3 rowValue">
<div><span class="graphkey">Rows</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
<div class="col-md-3 table_created">
<div class="col-sm-3 table_created">
<div><span class="graphkey">Date Created</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
<div class="col-md-3 table_name">
<div class="col-sm-3 table_name">
<div><span class="graphkey">Table</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
<div class="col-md-3 db_name">
<div class="col-sm-3 db_name">
<div><span class="graphkey">DB</span></div>
<div><span class="graphval"><div class="value-loader"></div></span></div>
</div>
......
......@@ -25,10 +25,10 @@
<div class="searchTable">
<div class="row well">
<div class="row form-group pagination-box" style="display: none;">
<div class="col-md-4">
<div class="col-sm-4">
<span class="labelShowRecord pull-left" data-id="pageRecordText"> </span>
</div>
<div class="col-md-8 inline-content-fr">
<div class="col-sm-8 inline-content-fr">
<div class="inline" data-id="colManager"></div>
<div class="inline" data-id="containerCheckBox" style="display: none;">
<label class="checkbox-inline btn" for="inputLabel">
......@@ -51,7 +51,7 @@
{{/if}}
</div>
<div class="row pagination-box" style="display: none">
<div class="col-md-offset-4 col-md-8">
<div class="col-sm-offset-4 col-sm-8">
<div class="inline-content-fr">
<div class="backgrid-paginator inline">
<ul class="" data-id="paginationDiv" style="display:none">
......@@ -70,7 +70,7 @@
</li>
</ul>
</div>
<div class="inline col-md-4" data-id="paginationDiv">
<div class="inline col-sm-4" data-id="paginationDiv">
<div class="input-group" data-id="goToPageDiv">
<input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" />
<span class="input-group-btn">
......
......@@ -14,12 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<!-- <div class="row">
<div class="col-md-10"><span>{{name}}</span></div>
<div class="col-md-2">
<button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
</div>
</div> -->
<div data-id="{{guid}}" class="item">
<div class="tools">
<i class="fa fa-ellipsis-h saveSearchPopover" data-original-title="" title="" data-id=""></i>
......
......@@ -35,7 +35,7 @@
</div>
{{#if create}}
<div class="form-group">
<div class="col-md-12">
<div class="col-sm-12">
<label>Select tags to inherit attributes(optional)</label>
<p class="text-gray">Attributes define additional properties for the tag</p>
<select class="form-control" data-id="parentTagList" multiple="multiple"></select>
......
......@@ -18,13 +18,23 @@
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="tagDetail clearfix form-horizontal col-md-12">
<div class="tagDetail clearfix form-horizontal col-sm-12">
<h1 class="form-group"><span data-id="title"></span></h1>
<button type="button" data-id="editButton" class="btn btn-sm btn-action pull-right"><i class="fa fa-pencil"></i></button>
<p class="form-group" data-id="description"></p>
<div class="superType form-group" style="display:none">
<label class="control-label-sm-pr pull-left">Derived From:</label>
<div data-id="showSuperType" class="btn-inline">
<label class="control-label-sm-pr pull-left">Direct super-tags:</label>
<div data-id="superType" class="btn-inline">
</div>
</div>
<div class="subType form-group" style="display:none">
<label class="control-label-sm-pr pull-left">Direct sub-tags:</label>
<div data-id="subType" class="btn-inline">
</div>
</div>
<div class="entityType form-group cursor-default" style="display:none">
<label class="control-label-sm-pr pull-left">Entity-types:</label>
<div data-id="entityType" class="btn-inline">
</div>
</div>
<div class="attributes form-group">
......
......@@ -15,11 +15,11 @@
* limitations under the License.
-->
<div class="form-group clearfix">
<div class="col-md-7">
<div class="col-sm-7">
<input class="form-control attributeInput" data-id="attributeInput" placeholder="Attribute name">
</input>
</div>
<div class="col-md-3">
<div class="col-sm-3">
<select class="form-control dataTypeSelector" data-id="dataTypeSelector">
<option selected="selected">string</option>
<option>boolean</option>
......@@ -31,7 +31,7 @@
<option>date</option>
</select>
</div>
<div class="col-md-2 attributePlusData" align="right">
<div class="col-sm-2 attributePlusData" align="right">
<button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
</div>
</div>
\ No newline at end of file
......@@ -14,10 +14,36 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="clearfix add-seperator">
<button type="button" class="btn btn-action btn-md pull-left" data-id="createTag" type="button"><i class="fa fa-plus"></i> Create Tag</button>
<button type="button" class="btn btn-action btn-md pull-right" title="Refresh" data-id="refreshTag" onclick="this.blur();" type="button"><i class="fa fa-refresh"></i></button>
<div class="col-sm-12 add-seperator">
<div class="row">
<div class="col-sm-6 no-padding" style="margin-top: 5px;">
<span class="pull-left">Flat</span>
<label class="switch pull-left">
<input type="checkbox" class="switch-input" name="tagView" value="text" />
<span class="switch-slider"></span>
</label>
<span class="pull-left">Tree</span>
</div>
<div class="col-sm-6 no-padding-right">
<button type="button" class="btn btn-action btn-md pull-right" title="Refresh" data-id="refreshTag" onclick="this.blur();" type="button"><i class="fa fa-refresh"></i></button>
<button type="button" class="btn btn-action btn-md pull-right" data-id="createTag" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Tags">
<ul class="tag-tree" data-id="tagsParent">
</ul>
\ No newline at end of file
<!-- <div class="clearfix add-seperator">
<button type="button" class="btn btn-action btn-md pull-left" data-id="createTag" type="button"><i class="fa fa-plus"></i> Create Tag</button>
</div> -->
<div class="row">
<div class="list-view col-sm-12">
<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Tags">
<ul class="tag-tree" data-id="tagsList">
</ul>
</div>
<div class="tree-view col-sm-12" style="display: none;">
<div class="treeLov">
<select class="form-control" data-id="treeLov"></select>
</div>
<ul class="tag-tree" data-id="tagsParent">
</ul>
</div>
</div>
\ No newline at end of file
......@@ -304,16 +304,17 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}
},
isInitial: function() {
return this.getQueryUrl().firstValue == undefined ? true : false;
return this.getQueryUrl().firstValue == undefined;
},
isTagTab: function(url) {
return this.getQueryUrl(url).firstValue == "tag" ? true : false;
var quey = this.getQueryUrl(url);
return quey.firstValue == "tag" || quey.queyParams[0] == "#!/tag";
},
isSearchTab: function(url) {
return this.getQueryUrl(url).firstValue == "search" ? true : false;
return this.getQueryUrl(url).firstValue == "search";
},
isDetailPage: function(url) {
return this.getQueryUrl(url).firstValue == "detailPage" ? true : false;
return this.getQueryUrl(url).firstValue == "detailPage";
},
getLastValue: function() {
return this.getQueryUrl().lastValue;
......
......@@ -328,6 +328,7 @@ define(['require',
},
showLoader: that.showLoader.bind(that),
hideLoader: that.hideLoader.bind(that),
collection: that.classificationDefCollection,
enumDefCollection: that.enumDefCollection
});
view.modal.on('ok', function() {
......
......@@ -234,10 +234,7 @@ define(['require',
}
} else {
var str = '<option disabled="disabled" selected>--Select entity-type--</option>';
this.entityDefCollection.fullCollection.comparator = function(model) {
return model.get('name');
}
this.entityDefCollection.fullCollection.sort().each(function(val) {
this.entityDefCollection.fullCollection.each(function(val) {
var name = Utils.getName(val.toJSON());
if (Globals.entityTypeConfList) {
if (_.isEmptyArray(Globals.entityTypeConfList)) {
......@@ -400,9 +397,9 @@ define(['require',
},
getContainer: function(value) {
var entityLabel = this.capitalize(value.name);
return '<div class="row form-group ' + value.isOptional + '"><span class="col-md-3">' +
return '<div class="row form-group ' + value.isOptional + '"><span class="col-sm-3">' +
'<label><span class="' + (value.isOptional ? 'true' : 'false required') + '">' + entityLabel + '</span><span class="center-block ellipsis text-gray" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span></label></span>' +
'<span class="col-md-9">' + (this.getElement(value)) +
'<span class="col-sm-9">' + (this.getElement(value)) +
'</input></span></div>';
},
getFieldSet: function(name, alloptional, attributeInput) {
......
......@@ -73,7 +73,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'attribute', 'fetchCollection', 'enumDefCollection'));
_.extend(this, _.pick(options, 'guid', 'classificationDefCollection', 'entityDefCollection', 'attribute', 'fetchCollection', 'enumDefCollection'));
this.schemaCollection = new VSchemaList([], {});
this.commonTableOptions = {
collection: this.schemaCollection,
......@@ -274,6 +274,7 @@ define(['require',
},
hideLoader: that.hideLoader.bind(that),
showLoader: that.showLoader.bind(that),
collection: that.classificationDefCollection,
enumDefCollection: that.enumDefCollection
});
});
......
......@@ -43,7 +43,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'searchTableColumns'));
_.extend(this, _.pick(options, 'value', 'initialView', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'searchTableColumns'));
},
bindEvents: function() {},
onRender: function() {
......
......@@ -184,19 +184,15 @@ define(['require',
},
bindEvents: function(param) {
this.listenTo(this.typeHeaders, "reset", function(value) {
this.renderTypeTagList();
this.setValues();
this.ui.typeLov.select2({
placeholder: "Select",
allowClear: true
});
this.ui.tagLov.select2({
placeholder: "Select",
allowClear: true
});
this.checkForButtonVisiblity();
this.initializeValues();
}, this);
},
initializeValues: function() {
this.renderTypeTagList();
this.setValues();
this.checkForButtonVisiblity();
this.renderSaveSearch();
},
makeFilterButtonActive: function(filtertypeParam) {
var filtertype = ['entityFilters', 'tagFilters'],
that = this;
......@@ -306,17 +302,7 @@ define(['require',
},
onRender: function() {
// array of tags which is coming from url
this.renderTypeTagList();
this.setValues();
this.ui.typeLov.select2({
placeholder: "Select",
allowClear: true
});
this.ui.tagLov.select2({
placeholder: "Select",
allowClear: true
});
this.renderSaveSearch();
this.initializeValues();
},
updateQueryObject: function(param) {
if (param && param.searchType) {
......@@ -345,7 +331,7 @@ define(['require',
},
onRefreshButton: function() {
this.fetchCollection();
//to check url query param contain type or not
//to check url query param contain type or not
var checkURLValue = Utils.getUrlState.getQueryParams(this.url);
if (this.searchVent && (_.has(checkURLValue, "tag") || _.has(checkURLValue, "type") || _.has(checkURLValue, "query"))) {
this.searchVent.trigger('search:refresh');
......@@ -420,10 +406,7 @@ define(['require',
this.ui.typeLov.empty();
var typeStr = '<option></option>',
tagStr = typeStr;
this.typeHeaders.fullCollection.comparator = function(model) {
return Utils.getName(model.toJSON(), 'name').toLowerCase();
}
this.typeHeaders.fullCollection.sort().each(function(model) {
this.typeHeaders.fullCollection.each(function(model) {
var name = Utils.getName(model.toJSON(), 'name');
if (model.get('category') == 'ENTITY') {
typeStr += '<option>' + (name) + '</option>';
......@@ -434,6 +417,14 @@ define(['require',
});
that.ui.typeLov.html(typeStr);
that.ui.tagLov.html(tagStr);
this.ui.typeLov.select2({
placeholder: "Select",
allowClear: true
});
this.ui.tagLov.select2({
placeholder: "Select",
allowClear: true
});
},
setValues: function(paramObj) {
var arr = [],
......
......@@ -120,14 +120,13 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'initialView', 'isTypeTagNotExists', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 'searchTableColumns'));
_.extend(this, _.pick(options, 'value', 'initialView', 'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 'searchTableColumns'));
this.entityModel = new VEntity();
this.searchCollection = new VSearchList();
this.limit = 25;
this.asyncFetchCounter = 0;
this.offset = 0;
this.bindEvents();
this.bradCrumbList = [];
this.arr = [];
this.searchType = 'Basic Search';
this.columnOrder = null;
......@@ -501,7 +500,6 @@ define(['require',
return this;
}
});
that.bradCrumbList = [];
var columns = new columnCollection((that.searchCollection.dynamicTable ? that.getDaynamicColumns(that.searchCollection.toJSON()) : that.getFixedDslColumn()));
columns.setPositions().sort();
that.REntityTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
......@@ -791,6 +789,7 @@ define(['require',
tagList: that.getTagList(guid, multiple),
showLoader: that.showLoader.bind(that),
hideLoader: that.hideLoader.bind(that),
collection: that.classificationDefCollection,
enumDefCollection: that.enumDefCollection
});
});
......
......@@ -28,9 +28,8 @@ define(['require',
template: tmpl,
regions: {
RBusinessCatalogLayoutView: "#r_businessCatalogLayoutView",
RTagLayoutView: "#r_tagLayoutView",
RSearchLayoutView: "#r_searchLayoutView",
RSearchLayoutView: "#r_searchLayoutView"
},
ui: {
tabs: '.tabs li a',
......@@ -92,6 +91,7 @@ define(['require',
collection: that.classificationDefCollection,
tag: that.tag,
value: that.value,
enumDefCollection: that.enumDefCollection,
typeHeaders: that.typeHeaders
}));
});
......
......@@ -61,27 +61,17 @@ define(['require',
return events;
},
initialize: function(options) {
// this.parentView = options.parentView;
_.extend(this, _.pick(options, 'enumDefCollection'));
this.collection = new Backbone.Collection();
this.typeEnum = new VTagList();
this.typeEnum.url = UrlLinks.typedefsUrl().defs;
this.typeEnum.modelAttrName = "enumDefs";
this.collectionAttribute();
},
onRender: function() {
var that = this;
this.$('.fontLoader').show();
this.ui.addAttributeDiv.find('.closeInput').hide();
if (!('placeholder' in HTMLInputElement.prototype)) {
this.ui.addAttributeDiv.find('input,textarea').placeholder();
}
that.typeEnum.fetch({
reset: true,
complete: function(model, response) {
that.collectionAttribute();
that.$('.fontLoader').hide();
that.$('.hide').removeClass('hide');
}
});
that.$('.hide').removeClass('hide');
},
bindEvents: function() {},
collectionAttribute: function() {
......@@ -107,4 +97,4 @@ define(['require',
}
}
});
});
});
\ No newline at end of file
......@@ -53,8 +53,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'modalCollection', 'guid', 'callback', 'multiple', 'showLoader', 'hideLoader', 'tagList', 'tagModel', 'enumDefCollection'));
this.collection = new VTagList();
_.extend(this, _.pick(options, 'collection', 'modalCollection', 'guid', 'callback', 'multiple', 'showLoader', 'hideLoader', 'tagList', 'tagModel', 'enumDefCollection'));
this.commonCollection = new VTagList();
var that = this,
modalObj = {
......@@ -184,17 +183,12 @@ define(['require',
onRender: function() {
var that = this;
$.extend(this.collection.queryParams, { type: 'classification' });
this.hideAttributeBox();
this.collection.fetch({
reset: true,
complete: function() {
if (that.tagModel) {
that.fetchTagSubData(that.tagModel.typeName);
}
that.showAttributeBox();
},
});
this.tagsCollection();
if (this.tagModel) {
this.fetchTagSubData(that.tagModel.typeName);
}
that.showAttributeBox();
},
bindEvents: function() {
var that = this;
......@@ -207,13 +201,9 @@ define(['require',
}, this);
},
tagsCollection: function() {
var that = this;
this.collection.fullCollection.comparator = function(model) {
return Utils.getName(model.toJSON(), 'name').toLowerCase();
}
var str = '<option selected="selected" disabled="disabled">-- Select a tag from the dropdown list --</option>';
this.collection.fullCollection.sort().each(function(obj, key) {
var that = this,
str = '<option selected="selected" disabled="disabled">-- Select a tag from the dropdown list --</option>';
this.collection.fullCollection.each(function(obj, key) {
var name = Utils.getName(obj.toJSON(), 'name');
// using obj.get('name') insted of name variable because if html is presen in name then escaped name will not found in tagList.
if (_.indexOf(that.tagList, obj.get('name')) === -1) {
......
......@@ -74,16 +74,13 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'tagCollection', 'model', 'tag', 'descriptionData'));
_.extend(this, _.pick(options, 'tagCollection', 'enumDefCollection', 'model', 'tag', 'descriptionData', 'selectedTag'));
if (this.model) {
this.description = this.model.get('description');
} else {
this.create = true;
}
this.collection = new Backbone.Collection();
this.typeEnum = new VTagList();
this.typeEnum.url = UrlLinks.typedefsUrl().defs;
this.typeEnum.modelAttrName = "enumDefs";
},
bindEvents: function() {},
onRender: function() {
......@@ -97,12 +94,7 @@ define(['require',
if (!('placeholder' in HTMLInputElement.prototype)) {
this.ui.createTagForm.find('input,textarea').placeholder();
}
that.typeEnum.fetch({
reset: true,
complete: function(model, response) {
that.hideLoader();
}
});
that.hideLoader();
},
tagCollectionList: function() {
var that = this,
......@@ -110,7 +102,7 @@ define(['require',
this.ui.parentTag.empty();
this.tagCollection.fullCollection.each(function(val) {
var name = Utils.getName(val.toJSON());
str += '<option>' + (name) + '</option>';
str += '<option ' + (name == that.selectedTag ? 'selected' : '') + '>' + (name) + '</option>';
});
that.ui.parentTag.html(str);
// IE9 support
......
......@@ -44,7 +44,9 @@ define(['require',
addAttribute: '[data-id="addAttribute"]',
description: '[data-id="description"]',
publishButton: '[data-id="publishButton"]',
showSuperType: "[data-id='showSuperType']"
superType: "[data-id='superType']",
subType: "[data-id='subType']",
entityType: "[data-id='entityType']"
},
/** ui events hash */
events: function() {
......@@ -58,7 +60,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'tag', 'collection'));
_.extend(this, _.pick(options, 'tag', 'collection', 'enumDefCollection'));
},
bindEvents: function() {
this.listenTo(this.collection, 'reset', function() {
......@@ -98,10 +100,21 @@ define(['require',
this.ui.publishButton.prop('disabled', true);
},
renderTagDetail: function() {
var attributeData = "",
supertypeData = "",
var that = this,
attributeData = "",
attributeDefs = this.model.get("attributeDefs"),
superTypeArr = this.model.get('superTypes');
genrateType = function(options) {
var data = options.data;
_.each(data, function(value, key) {
var str = "",
el = that.ui[key];
_.each(value, function(name) {
el.parents("." + key).show();
str += ' <a class="btn btn-action btn-sm" href="' + (key === "entityType" ? "javascript:void(0)" : "#!/tag/tagAttribute/" + name) + '">' + name + '</a>';
});
el.html(str);
});
}
this.ui.title.html('<span>' + (Utils.getName(this.model.toJSON())) + '</span>');
if (this.model.get("description")) {
this.ui.description.text(this.model.get("description"));
......@@ -115,13 +128,14 @@ define(['require',
});
this.ui.showAttribute.html(attributeData);
}
if (superTypeArr.length > 0) {
this.$(".superType").show();
_.each(superTypeArr, function(value, key) {
supertypeData += ' <a class="btn btn-action btn-sm" href="#!/tag/tagAttribute/' + value + '">' + value + '</a>';
});
this.ui.showSuperType.html(supertypeData);
}
genrateType({
data: {
superType: this.model.get('superTypes'),
subType: this.model.get('subTypes'),
entityType: this.model.get('entityTypes'),
}
});
Utils.hideTitleLoader(this.$('.fontLoader'), this.$('.tagDetail'));
},
onSaveButton: function(saveObject, message) {
......@@ -174,7 +188,9 @@ define(['require',
'modules/Modal'
],
function(AddTagAttributeView, Modal) {
var view = new AddTagAttributeView();
var view = new AddTagAttributeView({
"enumDefCollection": that.enumDefCollection
});
that.modal = new Modal({
title: 'Add Attribute',
content: view,
......@@ -274,7 +290,7 @@ define(['require',
'views/tag/CreateTagLayoutView',
'modules/Modal'
], function(CreateTagLayoutView, Modal) {
var view = new CreateTagLayoutView({ 'tagCollection': that.collection, 'model': that.model, 'tag': that.tag });
var view = new CreateTagLayoutView({ 'tagCollection': that.collection, 'model': that.model, 'tag': that.tag, 'enumDefCollection': enumDefCollection });
that.modal = new Modal({
title: 'Edit Tag',
content: view,
......@@ -296,4 +312,4 @@ define(['require',
}
});
return TagAttributeDetailLayoutView;
});
});
\ No newline at end of file
......@@ -60,8 +60,8 @@ define(['require',
},
onRender: function() {
var that = this;
_.each(this.parentView.typeEnum.models, function(objValue) {
that.ui.dataTypeSelector.append("<option>" + objValue.attributes.name + "</option>");
this.parentView.enumDefCollection.fullCollection.each(function(model) {
that.ui.dataTypeSelector.append("<option>" + model.get('name') + "</option>");
});
},
onCloseButton: function() {
......@@ -70,4 +70,4 @@ define(['require',
}
}
});
});
});
\ No newline at end of file
......@@ -76,7 +76,8 @@ define(['require',
if (that.RTagAttributeDetailLayoutView) {
that.RTagAttributeDetailLayoutView.show(new TagAttributeDetailLayoutView({
tag: that.tag,
collection: that.collection
collection: that.collection,
enumDefCollection: that.enumDefCollection
}));
}
});
......
......@@ -172,6 +172,7 @@ define(['require',
var view = new AddTagModalView({
guid: that.guid,
modalCollection: that.collection,
collection: that.classificationDefCollection,
enumDefCollection: that.enumDefCollection
});
});
......@@ -224,10 +225,11 @@ define(['require',
], function(AddTagModalView) {
var view = new AddTagModalView({
'tagModel': tagModel,
callback: function() {
'callback': function() {
that.fetchCollection();
},
guid: that.guid,
'guid': that.guid,
'collection': that.classificationDefCollection,
'enumDefCollection': that.enumDefCollection
});
});
......
......@@ -40,10 +40,14 @@ define(['require',
/** ui selector cache */
ui: {
tagsParent: "[data-id='tagsParent']",
tagsList: "[data-id='tagsList']",
createTag: "[data-id='createTag']",
tags: "[data-id='tags']",
offLineSearchTag: "[data-id='offlineSearchTag']",
refreshTag: '[data-id="refreshTag"]'
treeLov: "[data-id='treeLov']",
refreshTag: '[data-id="refreshTag"]',
tagView: 'input[name="tagView"]',
expandArrow: '[data-id="expandArrow"]'
},
/** ui events hash */
events: function() {
......@@ -51,7 +55,10 @@ define(['require',
events["click " + this.ui.createTag] = 'onClickCreateTag';
events["click " + this.ui.tags] = 'onTagList';
events["keyup " + this.ui.offLineSearchTag] = 'offlineSearchTag';
events["change " + this.ui.treeLov] = 'onTreeSelect';
events['click ' + this.ui.refreshTag] = 'fetchCollections';
events["change " + this.ui.tagView] = 'tagViewToggle';
events["click " + this.ui.expandArrow] = 'toggleChild';
return events;
},
/**
......@@ -59,14 +66,27 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'tag', 'collection', 'typeHeaders', 'value'));
_.extend(this, _.pick(options, 'tag', 'collection', 'typeHeaders', 'value', 'enumDefCollection'));
this.viewType = "flat";
this.query = {
flat: {
tagName: null
},
tree: {
tagName: null
}
};
if (this.value && this.value.viewType) {
this.viewType = this.value.viewType;
}
this.query[this.viewType].tagName = this.tag;
},
bindEvents: function() {
var that = this;
this.listenTo(this.collection, "reset add remove", function() {
this.tagsGenerator();
}, this);
this.ui.tagsParent.on('click', 'li.parent-node a', function() {
this.ui.tagsList.on('click', 'li.parent-node a', function() {
that.setUrl(this.getAttribute("href"));
});
$('body').on('click', '.tagPopoverOptions li', function(e) {
......@@ -83,18 +103,60 @@ define(['require',
this.collection.fetch({ reset: true });
this.ui.offLineSearchTag.val("");
},
manualRender: function(tagName) {
this.tag = tagName;
manualRender: function(options) {
this.tag = options && options.tagName;
_.extend(this.value, options);
this.query[this.viewType].tagName = this.tag;
if (options && options.viewType) {
this.viewType = options.viewType;
}
if (!this.createTag) {
this.setValues(true);
}
},
renderTreeList: function() {
var that = this;
this.ui.treeLov.empty();
var treeStr = '<option></option>';
this.collection.fullCollection.each(function(model) {
var name = Utils.getName(model.toJSON(), 'name');
treeStr += '<option>' + (name) + '</option>';
});
that.ui.treeLov.html(treeStr);
that.ui.treeLov.select2({
placeholder: "Search tag",
allowClear: true
});
},
onTreeSelect: function() {
var name = this.ui.treeLov.val();
Utils.setUrl({
url: (name ? '#!/tag/tagAttribute/' + name : '#!/tag'),
urlParams: {
viewType: 'tree',
},
mergeBrowserUrl: false,
trigger: true,
updateTabState: true
});
},
setValues: function(manual) {
var $firstEl = this.ui.tagsParent.find('li a') ? this.ui.tagsParent.find('li a').first() : null;
var el = this.ui.tagsList;
if (this.viewType == "tree") {
el = this.ui.tagsParent;
if (!this.ui.tagView.prop("checked")) {
this.ui.tagView.prop("checked", true).trigger("change");
}
} else {
if (this.ui.tagView.prop("checked")) {
this.ui.tagView.prop("checked", false).trigger("change");
}
}
var $firstEl = el.find('li a') ? el.find('li a').first() : null;
if (Utils.getUrlState.isTagTab()) {
if (!this.tag) {
this.selectFirst = false;
this.ui.tagsParent.find('li').first().addClass('active');
el.find('li').first().addClass('active');
if ($firstEl && $firstEl.length) {
url: $firstEl.attr("href"),
Utils.setUrl({
......@@ -105,13 +167,15 @@ define(['require',
}
} else {
var presentTag = this.collection.fullCollection.findWhere({ name: this.tag }),
url = Utils.getUrlState.getQueryUrl().hash,
url = Utils.getUrlState.getQueryUrl().queyParams[0],
tag = this.tag,
query = null;
query = Utils.getUrlState.getQueryParams() || null;
if (!presentTag) {
tag = $firstEl.data('name');
url = $firstEl && $firstEl.length ? $firstEl.attr("href") : '#!/tag';
query = $firstEl && $firstEl.length ? { dlttag: true } : null
if ($firstEl && $firstEl.length) {
_.extend(query, { dlttag: true })
}
}
Utils.setUrl({
url: url,
......@@ -121,63 +185,177 @@ define(['require',
if (!presentTag) {
return false;
}
this.ui.tagsParent.find('li').removeClass('active');
var target = this.ui.tagsParent.find('li').filter(function() {
return $(this).text() === tag;
}).addClass('active');
if (this.createTag || !manual) {
if (target && target.offset()) {
$('#sidebar-wrapper').animate({
scrollTop: target.offset().top - 100
}, 500);
el.find('li').removeClass('active'); // remove selected
el.find('li.parent-node').each(function() {
// based on browser url select tag.
var target = $(this);
if (target.children('div').find('a').text() === tag) {
target.addClass('active');
target.parents('ul').addClass('show').removeClass('hide'); // Don't use toggle
if (this.createTag || !manual) {
if (target.offset()) {
$('#sidebar-wrapper').animate({
scrollTop: target.offset().top - 100
}, 500);
}
}
return false;
}
}
});
}
}
},
tagsGenerator: function(searchString) {
var str = '';
var tagParents = '',
tagLists = '';
if (this.collection && this.collection.fullCollection.length) {
this.collection.fullCollection.comparator = function(model) {
return Utils.getName(model.toJSON(), 'name').toLowerCase();
var sortedCollection = this.collection.fullCollection;
this.tagTreeList = this.getTagTreeList({ collection: sortedCollection });
if (searchString) {
if (this.viewType == "flat") {
this.ui.tagsList.empty().html(this.generateTree({ 'data': sortedCollection, 'searchString': searchString }));
} else {
this.ui.tagsParent.empty().html(this.generateTree({ 'data': this.tagTreeList, 'isTree': true, 'searchString': searchString }));
}
} else {
this.ui.tagsParent.empty().html(this.generateTree({ 'data': this.tagTreeList, 'isTree': true, 'searchString': searchString }));
this.ui.tagsList.empty().html(this.generateTree({ 'data': sortedCollection, 'searchString': searchString }));
}
this.createTagAction();
this.setValues();
this.renderTreeList();
if (this.createTag) {
this.createTag = false;
}
}
},
getTagTreeList: function(options) {
var that = this,
collection = options.collection,
listOfParents = {},
getChildren = function(options) {
var children = options.children,
data = [];
if (children && children.length) {
_.each(children, function(name) {
var child = collection.find({ 'name': name });
if (child) {
var modelJSON = child.toJSON();
data.push({
name: name,
children: getChildren({ children: modelJSON.subTypes })
});
}
});
}
return data;
}
collection.each(function(model) {
var modelJSON = model.toJSON();
if (modelJSON.superTypes.length == 0) {
var name = modelJSON.name;
listOfParents[name] = {
name: name,
children: getChildren({ children: modelJSON.subTypes })
}
}
});
return listOfParents;
},
generateTree: function(options) {
var data = options.data,
isTree = options.isTree,
searchString = options.searchString,
that = this,
element = '',
getElString = function(options) {
var name = options.name,
hasChild = isTree && options.children && options.children.length;
return '<li class="parent-node" data-id="tags">' +
'<div><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div>' +
(hasChild ? '<i class="fa toggleArrow fa-angle-right" data-id="expandArrow" data-name="' + name + '"></i>' : '') +
'<a href="#!/tag/tagAttribute/' + name + '?viewType=' + (isTree ? 'tree' : 'flat') + '" data-name="' + name + '">' + name + '</a></div>' +
(isTree && hasChild ? '<ul class="child hide">' + that.generateTree({ 'data': options.children, 'isTree': isTree }) + '</ul>' : '') + '</li>';
};
this.collection.fullCollection.sort().each(function(model) {
var name = Utils.getName(model.toJSON(), 'name');
if (isTree) {
_.each(data, function(obj) {
element += getElString({
name: obj.name,
children: obj.children
});
});
} else {
data.each(function(obj) {
var name = obj.get('name');
if (searchString) {
if (name.search(new RegExp(searchString, "i")) != -1) {
str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="' + name + '" >' + name + '</a></li>';
element += getElString({
name: obj.get('name'),
children: null
});
} else {
return;
}
} else {
str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="' + name + '">' + name + '</a></li>';
element += getElString({
name: obj.get('name'),
children: null
});
}
});
}
return element;
},
toggleChild: function(e) {
var el = $(e.currentTarget);
if (el) {
el.parent().siblings('ul.child').toggleClass('hide show');
}
},
tagViewToggle: function(e) {
if (e.currentTarget.checked) {
this.$('.tree-view').show();
this.$('.list-view').hide();
this.viewType = "tree";
} else {
this.viewType = "flat";
this.$('.tree-view').hide();
this.$('.list-view').show();
}
if (Utils.getUrlState.isTagTab()) {
var name = this.query[this.viewType].tagName;
Utils.setUrl({
url: (name ? '#!/tag/tagAttribute/' + name : '#!/tag'),
urlParams: {
viewType: this.viewType,
},
mergeBrowserUrl: false,
trigger: true,
updateTabState: true
});
this.ui.tagsParent.empty().html(str);
this.setValues();
this.createTagAction();
if (this.createTag) {
this.createTag = false;
}
}
},
onClickCreateTag: function(e) {
var that = this;
var that = this,
nodeName = e.currentTarget.nodeName;
$(e.currentTarget).attr("disabled", "true");
require([
'views/tag/CreateTagLayoutView',
'modules/Modal'
], function(CreateTagLayoutView, Modal) {
var view = new CreateTagLayoutView({ 'tagCollection': that.collection });
var modal = new Modal({
title: 'Create a new tag',
content: view,
cancelText: "Cancel",
okCloses: false,
okText: 'Create',
allowCancel: true,
}).open();
var name = (!(nodeName == "BUTTON") ? that.query[that.viewType].tagName : null);
var view = new CreateTagLayoutView({ 'tagCollection': that.collection, 'selectedTag': name, 'enumDefCollection': enumDefCollection }),
modal = new Modal({
title: 'Create a new tag',
content: view,
cancelText: "Cancel",
okCloses: false,
okText: 'Create',
allowCancel: true,
}).open();
modal.$el.find('button.ok').attr("disabled", "true");
view.ui.tagName.on('keyup', function(e) {
modal.$el.find('button.ok').removeAttr("disabled");
......@@ -269,7 +447,6 @@ define(['require',
]
}
}
if (duplicateAttributeList.length) {
if (duplicateAttributeList.length < 2) {
var text = "Attribute <b>" + duplicateAttributeList.join(",") + "</b> is duplicate !"
......@@ -299,9 +476,21 @@ define(['require',
};
new this.collection.model().set(this.json).save(null, {
success: function(model, response) {
var classificationDefs = model.get('classificationDefs');
that.ui.createTag.removeAttr("disabled");
that.createTag = true;
that.collection.add(model.get('classificationDefs'));
if (classificationDefs[0]) {
_.each(classificationDefs[0].superTypes, function(superType) {
var superTypeModel = that.collection.fullCollection.find({ name: superType }),
subTypes = [];
if (superTypeModel) {
subTypes = superTypeModel.get('subTypes');
subTypes.push(classificationDefs[0].name);
superTypeModel.set({ 'subTypes': _.uniq(subTypes) });
}
});
}
that.collection.fullCollection.add(classificationDefs);
that.setUrl('#!/tag/tagAttribute/' + ref.ui.tagName.val(), true);
Utils.notifySuccess({
content: "Tag " + that.name + Messages.addSuccessMessage
......@@ -320,8 +509,10 @@ define(['require',
});
},
onTagList: function(e, toggle) {
this.ui.tagsParent.find('li').removeClass("active");
$(e.currentTarget).addClass("active");
if (e.target.nodeName === "A") {
$(e.currentTarget).parents('ul.tag-tree').find('li.active').removeClass("active");
$(e.currentTarget).addClass("active");
}
},
offlineSearchTag: function(e) {
var type = $(e.currentTarget).data('type');
......@@ -336,6 +527,7 @@ define(['require',
content: function() {
return "<ul>" +
"<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTag'>Search Tag</a></li>" +
"<li class='listTerm' ><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onClickCreateTag'>Create Sub-tag</a></li>" +
"<li class='listTerm' ><i class='fa fa-trash-o'></i> <a href='javascript:void(0)' data-fn='onDeleteTag'>Delete Tag</a></li>" +
"</ul>";
}
......@@ -343,10 +535,14 @@ define(['require',
});
},
onSearchTag: function() {
var el = this.ui.tagsList;
if (this.viewType == "tree") {
el = this.ui.tagsParent;
}
Utils.setUrl({
url: '#!/search/searchResult',
urlParams: {
tag: this.ui.tagsParent.find('li.active').find('>a[data-name]').data('name'),
tag: el.find('li.active').find('a[data-name]').data('name'),
searchType: "basic",
dslChecked: 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