Replace collapsible groups boilerplate html with angular directive
Change-Id: Id47d0ea3dfc466187a14b7da423004f24795826d
This commit is contained in:
Timur Sufiev
parent
eb55cfaf87
commit
add6df5ef7
@ -0,0 +1,15 @@
|
|||||||
|
<div class="section">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10 col-sm-10 col-lg-10">
|
||||||
|
<h5><a data-toggle="collapse" data-target="#{$ groupId $}" href="#">{$ groupTitle $}</a></h5>
|
||||||
|
</div>
|
||||||
|
<div ng-show="additive" class="add-btn col-md-2 col-sm-2 col-lg-2">
|
||||||
|
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
||||||
|
</div>
|
||||||
|
<div ng-show="removable" class="add-btn col-md-2 col-sm-2 col-lg-2">
|
||||||
|
<i class="fa fa-times-circle pull-right"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="{$ groupId $}" class="collapse in" ng-transclude>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -3,6 +3,14 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
function disableClickDefaultBehaviour(element) {
|
||||||
|
angular.element(element).find('a[data-toggle="collapse"]')
|
||||||
|
.on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
angular.module('hz')
|
angular.module('hz')
|
||||||
|
|
||||||
.directive('editable', function() {
|
.directive('editable', function() {
|
||||||
@ -59,17 +67,46 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
.directive('collapsiblePanel', function($parse, idGenerator) {
|
.directive('collapsiblePanel', function($parse, idGenerator, defaultSetter) {
|
||||||
return {
|
return {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
templateUrl: '/static/mistral/js/angular-templates/collapsible-panel.html',
|
templateUrl: '/static/mistral/js/angular-templates/collapsible-panel.html',
|
||||||
transclude: true,
|
transclude: true,
|
||||||
scope: {
|
scope: {
|
||||||
panelTitle: '@',
|
panelTitle: '@',
|
||||||
removable: '='
|
removable: '@'
|
||||||
},
|
},
|
||||||
link: function(scope) {
|
compile: function(element, attrs) {
|
||||||
|
defaultSetter(attrs, 'removable', false);
|
||||||
|
return {
|
||||||
|
post: function(scope, element) {
|
||||||
scope.panelId = idGenerator();
|
scope.panelId = idGenerator();
|
||||||
|
disableClickDefaultBehaviour(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
.directive('collapsibleGroup', function($parse, idGenerator, defaultSetter) {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
templateUrl: '/static/mistral/js/angular-templates/collapsible-group.html',
|
||||||
|
transclude: true,
|
||||||
|
scope: {
|
||||||
|
groupTitle: '@',
|
||||||
|
additive: '@',
|
||||||
|
removable: '@'
|
||||||
|
},
|
||||||
|
compile: function(element, attrs) {
|
||||||
|
defaultSetter(attrs, 'removable', false);
|
||||||
|
defaultSetter(attrs, 'additive', false);
|
||||||
|
return {
|
||||||
|
post: function(scope) {
|
||||||
|
scope.groupId = idGenerator();
|
||||||
|
disableClickDefaultBehaviour(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -11,4 +11,15 @@
|
|||||||
return 'elem-id-'+id;
|
return 'elem-id-'+id;
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
|
|
||||||
|
.factory('defaultSetter', function($parse) {
|
||||||
|
return function(attrs, attrName, defaultValue) {
|
||||||
|
if ( attrs[attrName] === undefined ) {
|
||||||
|
attrs[attrName] = defaultValue;
|
||||||
|
} else {
|
||||||
|
attrs[attrName] = $parse(attrs[attrName])();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
})();
|
})();
|
||||||
@ -103,10 +103,7 @@
|
|||||||
<!-- collapsible dictionary section with fixed keys -->
|
<!-- collapsible dictionary section with fixed keys -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
<div class="section">
|
<collapsible-group group-title="Base Input" additive="false">
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseTwo" id="collapseTwoLink" href="#collapseTwo">
|
|
||||||
Base Input</a></h5>
|
|
||||||
<div id="collapseTwo" class="collapse in">
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="action1BaseInputFlavorId">Flavor Id</label>
|
<label for="action1BaseInputFlavorId">Flavor Id</label>
|
||||||
<input type="text" class="form-control" id="action1BaseInputFlavorId">
|
<input type="text" class="form-control" id="action1BaseInputFlavorId">
|
||||||
@ -115,22 +112,11 @@
|
|||||||
<label for="action1BaseInputImageId">Image Id</label>
|
<label for="action1BaseInputImageId">Image Id</label>
|
||||||
<input type="text" class="form-control" id="action1BaseInputImageId">
|
<input type="text" class="form-control" id="action1BaseInputImageId">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- collapsible keys list section -->
|
<!-- collapsible keys list section -->
|
||||||
<div class="section">
|
<collapsible-group group-title="Input" additive="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseThree" id="collapseThreeLink" href="#collapseThree">
|
|
||||||
Input</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseThree" class="collapse in">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -141,20 +127,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
|
||||||
<!-- collapsible section with variable type = string|list|dictionary -->
|
<!-- collapsible section with variable type = string|list|dictionary -->
|
||||||
<div class="section">
|
<collapsible-group group-title="Output" additive="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseFour" id="collapseFourLink" href="#collapseFour">
|
|
||||||
Output</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseFour" class="collapse in">
|
|
||||||
<!-- string input type -->
|
<!-- string input type -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
@ -252,8 +227,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
|
||||||
</collapsible-panel>
|
</collapsible-panel>
|
||||||
</div>
|
</div>
|
||||||
<!-- panel with workflow -->
|
<!-- panel with workflow -->
|
||||||
@ -278,17 +252,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- collapsible keys list section -->
|
<!-- collapsible keys list section -->
|
||||||
<div class="section">
|
<collapsible-group group-title="Input" additive="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseSix" id="collapseSixLink" href="#">
|
|
||||||
Input</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseSix" class="collapse in">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -299,20 +263,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
|
||||||
<!-- collapsible section with variable type = string|list|dictionary -->
|
<!-- collapsible section with variable type = string|list|dictionary -->
|
||||||
<div class="section">
|
<collapsible-group group-title="Output" additive="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseSeven" id="collapseSevenLink" href="#">
|
|
||||||
Output</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseSeven" class="collapse in">
|
|
||||||
<!-- string input type -->
|
<!-- string input type -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
@ -332,83 +285,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="Task Defaults" additive="false">
|
||||||
<div class="section">
|
<collapsible-group group-title="On error" additive="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseEight" id="collapseEightLink" href="#">
|
|
||||||
Task defaults</a></h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseEight" class="collapse in">
|
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse21" id="collapse21Link" href="#">
|
|
||||||
On error</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse21" class="collapse in">
|
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="On success" additive="true">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse22" id="collapse22Link" href="#">
|
|
||||||
On success</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse22" class="collapse in">
|
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="On complete" additive="true">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse23" id="collapse23Link" href="#">
|
|
||||||
On complete</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse23" class="collapse in">
|
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="Tasks" additive="true">
|
||||||
<div class="section">
|
<collapsible-group group-title="TaskAutoName1" removable="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseNine" id="collapseNineLink" href="#">
|
|
||||||
Tasks</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseNine" class="collapse in">
|
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse51" id="collapse51Link" href="#">
|
|
||||||
TaskAutoName1</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<i class="fa fa-times-circle pull-right"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse51" class="collapse in">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -436,17 +328,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<collapsible-group group-title="Input" additive="true">
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseTen" id="collapseTenLink" href="#">
|
|
||||||
Input</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseTen" class="collapse in">
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||||
@ -462,19 +344,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="Publish" additive="true">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseEleven" id="collapseElevenLink" href="#">
|
|
||||||
Publish</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="add-btn col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseEleven" class="collapse in">
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||||
@ -490,58 +361,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="On error" additive="true">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse24" id="collapse24Link" href="#">
|
|
||||||
On error</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse24" class="collapse in">
|
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="On success" additive="true">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse25" id="collapse25Link" href="#">
|
|
||||||
On success</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse25" class="collapse in">
|
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="On complete" additive="true">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapse26" id="collapse26Link" href="#">
|
|
||||||
On complete</a></h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-2 col-lg-2">
|
|
||||||
<button class="btn btn-default btn-sm pull-right"><i class="fa fa-plus"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapse26" class="collapse in">
|
|
||||||
<yaql-field-combined></yaql-field-combined>
|
<yaql-field-combined></yaql-field-combined>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
<collapsible-group group-title="Policies">
|
||||||
<div class="section">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-10 col-sm-10 col-lg-10">
|
|
||||||
<h5><a data-toggle="collapse" data-target="#collapseTwelve" id="collapseTwelveLink" href="#">
|
|
||||||
Policies</a></h5>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="collapseTwelve" class="collapse in">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -586,12 +416,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
</collapsible-group>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</collapsible-panel>
|
</collapsible-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user