Merge pull request #219 from Ontotext-AD/GDB-2179-As-A-User-I-Want-To…

…-Share-Visual-Graph-With-Other-Users GDB-2179 Added logic, which allows users to create shared visual graphs and configs. Buttons for updating and deleting latter won't be shown to users to whom they don't belong.
Ontotext-AD · Aug 13, 2020 · aace314 · aace314
2 parents 96912e1 + 79d7a0a
commit aace314
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 7 deletions.
diff --git a/src/js/angular/graphexplore/controllers/graphs-config.controller.js b/src/js/angular/graphexplore/controllers/graphs-config.controller.js
@@ -75,6 +75,7 @@ function GraphConfigCtrl($scope, $timeout, $location, toastr, $repositories, $mo
     $scope.newConfig = {startQueryIncludeInferred: true, startQuerySameAs: true};
     $scope.newConfig.startMode = 'search';
     $scope.isUpdate = false;
+    $scope.shared = false;
 
     $scope.encodeQuery = function (query) {
         return encodeURIComponent(query);

diff --git a/src/js/angular/graphexplore/controllers/graphs-visualizations.controller.js b/src/js/angular/graphexplore/controllers/graphs-visualizations.controller.js
@@ -103,6 +103,7 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
         $scope.queryResultsMode = false;
         $scope.lastSavedGraphName = null;
         $scope.lastSavedGraphId = null;
+        $scope.shared = false;
         $scope.numberOfPinnedNodes = 0;
 
         // Reset type colours
@@ -2213,6 +2214,7 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
             .success(function (data, status, headers) {
                 $scope.lastSavedGraphName = graph.name;
                 $scope.lastSavedGraphId = headers()['x-saved-graph-id'];
+                $scope.shared = graph.shared;
                 $scope.refreshSavedGraphs();
                 toastr.success('Saved graph ' + graph.name + ' was saved.');
             })
@@ -2228,7 +2230,7 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
 
     $scope.saveOrUpdateGraph = function () {
         const data = JSON.stringify(graph.copyState());
-        const graphToSave = {id: $scope.lastSavedGraphId, name: $scope.lastSavedGraphName, data: data};
+        const graphToSave = {id: $scope.lastSavedGraphId, name: $scope.lastSavedGraphName, data: data, shared: $scope.shared};
 
         if (graphToSave.id) {
             $scope.saveGraphModal('update', graphToSave);
@@ -2239,13 +2241,14 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
 
     $scope.renameSavedGraph = function (graphToRename) {
         // By not sending the 'data' part of a graph we only change the name
-        $scope.saveGraphModal('rename', {id: graphToRename.id, name: graphToRename.name, config: graphToRename.config});
+        $scope.saveGraphModal('rename', {id: graphToRename.id, name: graphToRename.name, config: graphToRename.config, shared: graphToRename.shared});
     };
 
     const editSavedGraphHttp = function (savedGraph) {
         SavedGraphsRestService.editSavedGraph(savedGraph)
             .success(function () {
                 $scope.lastSavedGraphName = savedGraph.name;
+                $scope.shared = savedGraph.shared;
                 $scope.refreshSavedGraphs();
                 toastr.success('Saved graph ' + savedGraph.name + ' was edited.');
             })
@@ -2264,7 +2267,8 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
                     return {
                         mode: mode,
                         graph: graphToSave,
-                        graphExists: graphExists
+                        graphExists: graphExists,
+                        shared: graphToSave.shared
                     };
                 }
             }
@@ -2306,11 +2310,13 @@ function GraphsVisualizationsCtrl($scope, $rootScope, $repositories, toastr, $ti
             // Own saved graph
             $scope.lastSavedGraphName = graphToLoad.name;
             $scope.lastSavedGraphId = graphToLoad.id;
+            $scope.shared = graphToLoad.shared;
             $scope.configLoaded = $scope.findConfigById(graphToLoad.config);
         } else {
             // Someone else's saved graph
             $scope.lastSavedGraphName = null;
             $scope.lastSavedGraphId = null;
+            $scope.shared = graphToLoad.shared;
         }
 
         if (!$scope.configLoaded) {

diff --git a/src/js/angular/graphexplore/templates/modal/save-graph.html b/src/js/angular/graphexplore/templates/modal/save-graph.html
@@ -9,6 +9,11 @@ <h3 class="modal-title">{{title}}</h3>
         <input id="wb-graphviz-savegraph-name" required type="text" ng-model="graph.name" class="form-control"
                ng-change="graphExists = false"
                placeholder="Enter name" ng-maxlength="100"/>
+        <label for="share-graph"
+               tooltip="If checked other users will be able to see the graph but not delete or edit it.">
+            <input id="share-graph" type="checkbox" ng-model="graph.shared">
+            Share graph with other users
+        </label>
         <input style="height: 0; border: 0; padding: 0; margin: 0;" autofocus/>
         <br>
         <div ng-show="form.$error.maxlength">

diff --git a/src/pages/graph-config/saveGraphConfig.html b/src/pages/graph-config/saveGraphConfig.html
@@ -313,6 +313,13 @@ <h5>Start with graph query results</h5>
 </div>
 
 <div class="m-0 clearfix" style="padding-bottom: 2rem">
+    <div>
+        <label for="share-graph-config"
+               tooltip="If checked other users will be able to see the visual graph, but not delete or edit it.">
+            <input id="share-graph-config" type="checkbox" ng-model="newConfig.shared">
+            Share visual graph with other users
+        </label>
+    </div>
     <div class="pull-left">
         <a href ng-click="saveGraphConfig()" class="btn btn-lg btn-primary btn-save-config"
             popover="Closes configuration and saves all changes."

diff --git a/src/pages/graphs-visualizations.html b/src/pages/graphs-visualizations.html
@@ -75,6 +75,7 @@ <h1>
                 tooltip="Click to configure the view"
                 tooltip-placement="bottom"
                 tooltip-trigger="mouseenter"
+                ng-if="isUser()"
                 ng-click="showSettings()">
             <em class="icon-settings icon-2x visual-graph-settings-btn"></em>
         </button>
@@ -120,10 +121,10 @@ <h3>Easy graph</h3>
                         </search-resource-input>
                     </div>
                 </div>
-                <div ng-show="isUser()" class="card mb-2">
+                <div ng-show="isFreeAccessEnabled() || isUser()" class="card mb-2">
                     <div class="card-block graph-configurations" ng-init="getGraphConfigs()">
                         <div class="clearfix">
-                            <a ng-href="graphs-visualizations/config/save" class="btn btn-link pull-right create-graph-config"><span class="icon-plus"></span> Create graph config</a>
+                            <a  ng-if="isUser()" ng-href="graphs-visualizations/config/save" class="btn btn-link pull-right create-graph-config"><span class="icon-plus"></span> Create graph config</a>
                             <h3>Advanced graph configurations</h3>
                             <p>Define how the visualisation works by writing your own SPARQL queries</p>
                         </div>
@@ -145,7 +146,7 @@ <h5>
                                     <samp class="text-muted small text-overflow d-block" ng-if="config.startMode == 'query'">{{config.startGraphQuery}}</samp>
                                     <samp class="text-muted small text-overflow d-block" ng-if="config.startMode == 'node'">{{config.startIRI}}</samp>
                                 </td>
-                                <td class="text-xs-right">
+                                <td class="text-xs-right" ng-if="isUser() && config.owner === principal().username">
                                     <a ng-href="graphs-visualizations/config/save/{{config.id}}" class="btn btn-link" tooltip="Edit configuration"><span class="icon-edit"></span></a>
                                     <button type="button" ng-click="deleteConfig(config)" class="btn btn-link delete-config" tooltip="Delete configuration"><span class="icon-trash"></span></button>
                                 </td>
@@ -155,7 +156,7 @@ <h5>
                     </div>
                 </div>
 
-                <div ng-show="isUser()" class="card mb-2">
+                <div ng-show="isFreeAccessEnabled() || isUser()" class="card mb-2">
                     <div class="card-block">
                         <h3 class="mb-2">Saved graphs</h3>
                         <div ng-show="savedGraphs.length == 0">No saved visual graph snapshots</div>
@@ -176,11 +177,13 @@ <h5><a href ng-click="loadSavedGraph(graph)">{{graph.name}}</a></h5>
                                         <span class="icon-link"></span>
                                     </button>
                                     <button class="btn btn-link"
+                                            ng-if="isUser() && graph.owner === principal().username"
                                             tooltip="Rename graph" tooltip-trigger="mouseenter"
                                             ng-click="renameSavedGraph(graph)">
                                         <span class="icon-edit"></span>
                                     </button>
                                     <button class="btn btn-link"
+                                            ng-if="isUser() && graph.owner === principal().username"
                                             tooltip="Delete graph" tooltip-trigger="mouseenter"
                                             ng-click="deleteSavedGraph(graph)">
                                         <span class="icon-trash"></span>