#65: Vocabulary admin UI

docs-web/src/main/webapp/src/app/docs/app.js

@@ -106,6 +106,15 @@ angular.module('docs',
           }
         }
       })
+  .state('settings.vocabulary', {
+    url: '/vocabulary',
+    views: {
+      'settings': {
+        templateUrl: 'partial/docs/settings.vocabulary.html',
+        controller: 'SettingsVocabulary'
+      }
+    }
+  })
   .state('document', {
     url: '/document',
     abstract: true,

docs-web/src/main/webapp/src/app/docs/controller/SettingsVocabulary.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/**
+ * Settings vocabulary page controller.
+ */
+angular.module('docs').controller('SettingsVocabulary', function($scope, Restangular) {
+  $scope.entries = [];
+
+  // Watch for vocabulary selection change
+  $scope.$watch('vocabulary', function(name) {
+    if (_.isUndefined(name) || name == '') {
+      $scope.entries = [];
+      return;
+    }
+
+    // Load entries
+    Restangular.one('vocabulary', name).get().then(function(result) {
+      $scope.entries = result.entries;
+    });
+  });
+
+  // Delete an entry
+  $scope.deleteEntry = function(entry) {
+    Restangular.one('vocabulary', entry.id).remove().then(function() {
+      $scope.entries.splice($scope.entries.indexOf(entry), 1);
+    });
+  };
+
+  // Update an entry
+  $scope.updateEntry = function(entry) {
+    Restangular.one('vocabulary', entry.id).post('', entry);
+  };
+
+  // Add an entry
+  $scope.addEntry = function(entry) {
+    entry.name = $scope.vocabulary;
+    Restangular.one('vocabulary').put(entry).then(function() {
+      $scope.entries.push(entry);
+      $scope.entry = {};
+    });
+  };
+});

docs-web/src/main/webapp/src/index.html

@@ -60,6 +60,7 @@
     <script src="app/docs/controller/SettingsLog.js" type="text/javascript"></script>
     <script src="app/docs/controller/SettingsUser.js" type="text/javascript"></script>
     <script src="app/docs/controller/SettingsUserEdit.js" type="text/javascript"></script>
+    <script src="app/docs/controller/SettingsVocabulary.js" type="text/javascript"></script>
     <script src="app/docs/service/User.js" type="text/javascript"></script>
     <script src="app/docs/service/Tag.js" type="text/javascript"></script>
     <script src="app/docs/filter/Newline.js" type="text/javascript"></script>

docs-web/src/main/webapp/src/partial/docs/settings.html

@@ -12,6 +12,7 @@
       <div class="panel-heading" ng-show="isAdmin"><strong>General settings</strong></div>
       <ul class="list-group">
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/user.*" href="#/settings/user">Users</a>
+        <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/vocabulary.*" href="#/settings/vocabulary">Vocabularies</a>
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/log" href="#/settings/log">Server logs</a>
       </ul>
     </div>

docs-web/src/main/webapp/src/partial/docs/settings.vocabulary.html

@@ -0,0 +1,51 @@
+<h1>Vocabulary <small>entries</small></h1>
+
+<div class="row">
+  <form class="form-inline">
+    <div class="form-group">
+      <label for="inputVocabulary">Choose a vocabulary to edit</label>
+      <select class="form-control" id="inputVocabulary" ng-model="vocabulary" ng-init="vocabulary = 'type'">
+        <option value="type">Type</option>
+        <option value="coverage">Coverage</option>
+        <option value="rights">Rights</option>
+      </select>
+    </div>
+  </form>
+
+  <table class="table table-striped" ng-show="entries">
+    <thead>
+      <tr>
+        <th width="70%">Value</th>
+        <th width="20%">Order</th>
+        <th width="10%"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="info">
+        <td>
+          <input type="text" placeholder="New entry" class="form-control" ng-model="entry.value" maxlength="100" />
+        </td>
+        <td>
+          <input type="number" class="form-control" ng-model="entry.order" />
+        </td>
+        <td>
+          <span ng-click="addEntry(entry)" class="glyphicon glyphicon-plus pointer"></span>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">&nbsp;</td>
+      </tr>
+      <tr ng-repeat="entry in entries | orderBy: 'order'">
+        <td>
+          <input type="text" class="form-control" ng-model="entry.value" maxlength="100" ng-blur="updateEntry(entry)" />
+        </td>
+        <td>
+          <input type="number" class="form-control" ng-model="entry.order" ng-blur="updateEntry(entry)" />
+        </td>
+        <td>
+          <span ng-click="deleteEntry(entry)" class="glyphicon glyphicon-trash pointer"></span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>