Skip to content

Commit

Permalink
Fixed: #680 - Sidebar Navigation Creation
Browse files Browse the repository at this point in the history
  • Loading branch information
@delchev
delchev committed Dec 22, 2020
1 parent 0cada0e commit 7ac9f8a
Show file tree
Hide file tree
Showing 4 changed files with 267 additions and 1 deletion.
85 changes: 85 additions & 0 deletions ide/ui/ide-entity/src/main/resources/ide-entity/js/angular-dialogs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -609,6 +609,91 @@ angular.module('ui.entity-data.modeler').controller('ModelerCtrl', function ($ui
$scope.$parent.graph.model.setValue($scope.$parent.cell, connector);
};

// Save SidebarNavigation's properties
ctrl.okSidebarNavigationProperties = function() {
// var clone = $scope.$parent.sidebar;
// $scope.$parent.graph.model.sidebar = clone;

// var sidebarNavigation = new SidebarNavigation();
// connector.name = $scope.$parent.cell.source.value.relationshipName;
// $scope.$parent.graph.model.setValue($scope.$parent.cell, connector);
};









$scope.openSidebarNewDialog = function() {
$scope.actionType = 'sidebarNew';
$scope.sidebarEntity = {};
toggleSidebarEntityModal();
};

$scope.openSidebarEditDialog = function(entity) {
$scope.actionType = 'sidebarUpdate';
$scope.sidebarEntity = entity;
toggleSidebarEntityModal();
};

$scope.openSidebarDeleteDialog = function(entity) {
$scope.actionType = 'sidebarDelete';
$scope.sidebarEntity = entity;
toggleSidebarEntityModal();
};

$scope.closeSidebar = function() {
//load();
toggleSidebarEntityModal();
};

$scope.sidebarCreate = function() {
if (!$scope.$parent.graph.model.sidebar) {
$scope.$parent.graph.model.sidebar = [];
}
var exists = $scope.$parent.graph.model.sidebar.filter(function(e) {
return e.path === $scope.sidebarEntity.path;
});
if (exists.length === 0) {
$scope.$parent.graph.model.sidebar.push($scope.sidebarEntity);
toggleSidebarEntityModal();
} else {
$scope.error = "Navigation with the path [" + $scope.sidebarEntity.path + "] already exists!";
}

};

$scope.sidebarUpdate = function() {
// auto-wired
toggleSidebarEntityModal();
};

$scope.sidebarDelete = function() {
if (!$scope.$parent.graph.model.sidebar) {
$scope.$parent.graph.model.sidebar = [];
}
$scope.$parent.graph.model.sidebar = $scope.$parent.graph.model.sidebar.filter(function(e) {
return e !== $scope.sidebarEntity;
});
toggleSidebarEntityModal();
};


function toggleSidebarEntityModal() {
$('#sidebarEntityModal').modal('toggle');
$scope.error = null;
}








main(document.getElementById('graphContainer'),
document.getElementById('outlineContainer'),
document.getElementById('toolbarContainer'),
Expand Down
57 changes: 56 additions & 1 deletion ide/ui/ide-entity/src/main/resources/ide-entity/js/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,10 @@ function main(container, outline, toolbar, sidebar, status) {
editor.addAction('properties', function(editor, cell) {
if (!cell) {
cell = graph.getSelectionCell();
if (!cell) {
showAlert('Error', 'Select an Entity, a Property or a Connector', $scope);
return;
}
}
if (cell.style && cell.style.startsWith('projection')) {
return;
Expand All @@ -449,7 +453,7 @@ function main(container, outline, toolbar, sidebar, status) {
//showProperties(graph, cell);
$('#propertyPropertiesOpen').click();
} else {
showAlert('Error', 'Select a property', $scope);
showAlert('Error', 'Select a Property', $scope);
}
} else {
// assume Entity or Connector
Expand All @@ -466,6 +470,21 @@ function main(container, outline, toolbar, sidebar, status) {
}
});

toolbar.appendChild(spacer.cloneNode(true));

addToolbarButton(editor, toolbar, 'sidebarnav', 'Sidebar Navigation', 'map-signs', true);

// Defines a new sidebarnav action
editor.addAction('sidebarnav', function(editor, cell) {

//graph.getModel()
$('#sidebarNavigationPropertiesOpen').click();

// $scope.$parent.cell = cell;
// $scope.$apply();

});

toolbar.appendChild(spacer.cloneNode(true));

addToolbarButton(editor, toolbar, 'copy', 'Copy', 'copy', true);
Expand Down Expand Up @@ -532,6 +551,7 @@ function main(container, outline, toolbar, sidebar, status) {
codec.decode(doc.documentElement.getElementsByTagName('mxGraphModel')[0], graph.getModel());

deserializeFilter(graph);
loadSidebar(doc, graph);
}

function deserializeFilter(graph) {
Expand All @@ -558,3 +578,38 @@ function deserializeFilter(graph) {
}
}

function loadSidebar(doc, graph) {
// console.log(JSON.stringify(doc));
if (!graph.getModel().sidebar) {
graph.getModel().sidebar = [];
}
for (var i=0;i<doc.children.length;i++) {
var element = doc.children[i];
if (element.localName === "model") {
for (var j=0;j<element.children.length;j++) {
var sidebar = element.children[j];
if (sidebar.localName === "sidebar") {
for (var k=0;k<sidebar.children.length;k++) {
var item = sidebar.children[k];
var copy = {};
for (var m=0;m<item.children.length;m++) {
var attribute = item.children[m];
if (attribute.localName === "path") {
copy.path = attribute.textContent;
} else if (attribute.localName === "label") {
copy.label = attribute.textContent;
} else if (attribute.localName === "icon") {
copy.icon = attribute.textContent;
} else if (attribute.localName === "url") {
copy.url = attribute.textContent;
}
}
graph.getModel().sidebar.push(copy);
}
break;
}
}
break;
}
}
}
8 changes: 8 additions & 0 deletions ide/ui/ide-entity/src/main/resources/ide-entity/js/serializer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,14 @@ function createModel(graph) {
}
}
model.push(' </entities>\n');

if (graph.getModel().sidebar) {
model.push(' <sidebar>\n');
for (var i=0; i<graph.getModel().sidebar.length; i++) {
model.push(' <item><path>' + _.escape(graph.getModel().sidebar[i].path) + '</path><label>' + _.escape(graph.getModel().sidebar[i].label) + '</label><icon>' + _.escape(graph.getModel().sidebar[i].icon) + '</icon><url>' + _.escape(graph.getModel().sidebar[i].url) + '</url></item>\n');
}
model.push(' </sidebar>\n');
}

var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(graph.getModel());
Expand Down
118 changes: 118 additions & 0 deletions ide/ui/ide-entity/src/main/resources/ide-entity/modeler.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
<button type="button" id="entityPropertiesOpen" ng-show=false data-toggle="modal" data-target="#dialogEntityProperties"></button>
<button type="button" id="propertyPropertiesOpen" ng-show=false data-toggle="modal" data-target="#dialogPropertyProperties"></button>
<button type="button" id="connectorPropertiesOpen" ng-show=false data-toggle="modal" data-target="#dialogConnectorProperties"></button>
<button type="button" id="sidebarNavigationPropertiesOpen" ng-show=false data-toggle="modal" data-target="#dialogSidebarNavigationProperties"></button>
<button type="button" id="alertOpen" ng-show=false data-toggle="modal" data-target="#dialogAlert"></button>
<button type="button" id="referEntityOpen" ng-show=false data-toggle="modal" data-target="#dialogReferEntity"></button>

Expand Down Expand Up @@ -551,6 +552,123 @@ <h3>Connector Details</h3>
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>


<!-- Sidebar Navigation Properties -->
<div class="modal fade" id="dialogSidebarNavigationProperties" tabindex="-1" role="dialog" aria-labelledby="dialogSidebarNavigationPropertiesLabel" aria-hidden="true">
<div class="modal-header">
<h3>Sidebar Navigation</h3>
</div>
<div class="modal-body">

<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#generalSidebarNavigation">Structure</a></li>
</ul>

<div class="tab-content">
<div id="generalSidebarNavigation" class="tab-pane fade in active">
<br><br>
<div class="form-group row">
<div class="row">
<label class="col-xs-1 col-form-label">Navigation: </label>
<div class="col-xs-11">

<div class="container">
<button type="button" ng-click="openSidebarNewDialog()" class="btn btn-lg btn-outline-primary pull-right"><i class="fa fa-plus" aria-hidden="true"></i></button>
<table class="table product-table">
<thead>
<tr>
<th>Path</th>
<th>Label</th>
<th>Icon</th>
<th>URL</th>
<th class="col-xs-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="next in ctrl.$scope.$parent.graph.model.sidebar">
<td class="view">{{next.path}}</td>
<td class="view">{{next.label}}</td>
<td class="view">{{next.icon}}</td>
<td class="view">{{next.url}}</td>
<td class="view">
<i class="close fa fa-2x fa-remove" ng-click="openSidebarDeleteDialog(next)"></i>
<i class="close fa fa-2x fa-bars" ng-click="openSidebarEditDialog(next)" style="margin-right: 0.5em"></i>
</td>
</tr>
</tbody>
</table>
</div>


</div>
</div>
</div>
</div>

</div>


</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ctrl.okSidebarNavigationProperties()" data-toggle="modal" data-target="#dialogSidebarNavigationProperties">OK</button>
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>

<div class="modal fade" id="sidebarEntityModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 ng-show="actionType === 'sidebarNew'" class="modal-title" id="exampleModalLabel">Create Navigation</h3>
<h3 ng-show="actionType === 'sidebarUpdate'" class="modal-title" id="exampleModalLabel">Update Navigation</h3>
<h3 ng-show="actionType === 'sidebarDelete'" class="modal-title" id="exampleModalLabel">Delete Navigation</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" ng-show="error">
{{error}}
</div>
<form ng-hide="actionType === 'delete'">
<div class="form-group">
<label>Path</label>
<input type="text" class="form-control" placeholder="Enter name" ng-model="sidebarEntity.path">
</div>
<div class="form-group">
<label>Label</label>
<input type="text" class="form-control" placeholder="Enter name" ng-model="sidebarEntity.label">
</div>
<div class="form-group">
<label>Icon</label>
<!-- <div class="col-xs-5"> -->
<select class="form-control" name="entityIcon" id="entityIcon" ng-model="sidebarEntity.icon"
style="font-family: 'FontAwesome', 'Helvetica'">
<option ng-repeat="option in ctrl.icons" id="{{option.name}}" value="{{option.name}}" ng-bind-html="option.icon"></option>
</select>
<!-- </div> -->
</div>
<div class="form-group">
<label>URL</label>
<input type="text" class="form-control" placeholder="Enter name" ng-model="sidebarEntity.url">
</div>

</form>
<div ng-show="actionType === 'delete'">
You are going to delete <b>Navigation</b> with <b>name = {{sidebarEntity.name}}</b>?
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-show="actionType === 'sidebarNew'" ng-click="sidebarCreate()">Save</button>
<button type="button" class="btn btn-primary" ng-show="actionType === 'sidebarUpdate'" ng-click="sidebarUpdate()">Update</button>
<button type="button" class="btn btn-primary" ng-show="actionType === 'sidebarDelete'" ng-click="sidebarDelete()">Delete</button>
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>



<!-- Alert Dialog -->
Expand Down

0 comments on commit 7ac9f8a

Please sign in to comment.