Basic UI to manage conversations (#33)

frontend/src/app/index.html

@@ -10,6 +10,7 @@
   <!-- bower:css -->
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
   <link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css" />
+  <link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
   <!-- endbower -->
   <!-- endbuild -->
   <!-- build:css(.tmp) styles/main.css -->
@@ -47,19 +48,28 @@ <h1>Smarti Configuration</h1>
 <script src="bower_components/angular-route/angular-route.js"></script>
 <script src="bower_components/codemirror/lib/codemirror.js"></script>
 <script src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
+<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
+<script src="bower_components/angular-animate/angular-animate.js"></script>
 <!-- endbower -->
 <script src="bower_components/codemirror/mode/javascript/javascript.js"></script>
 <!-- endbuild -->
+
 <script src="scripts/config.js"></script>
+
 <!-- build:js({.tmp,app}) scripts/scripts.js -->
 <script src="scripts/app.js"></script>
-<script src="scripts/controllers/overview.js"></script>
+<script src="scripts/config/toastr.js"></script>
 <script src="scripts/services/clientservice.js"></script>
 <script src="scripts/services/configurationservice.js"></script>
+<script src="scripts/services/conversation.service.js"></script>
 <script src="scripts/models/client.js"></script>
 <script src="scripts/models/configuration.js"></script>
 <script src="scripts/models/componentconfiguration.js"></script>
+<script src="scripts/controllers/overview.js"></script>
 <script src="scripts/controllers/client.js"></script>
+<script src="scripts/controllers/conversation.js"></script>
+<script src="scripts/controllers/conversationEdit.js"></script>
 <!-- endbuild -->
 </body>
 </html>

frontend/src/app/scripts/app.js

@@ -12,7 +12,10 @@ angular
   .module('smartiApp', [
     'config',
     'ngRoute',
-    'ui.codemirror'
+    'ngAnimate',
+    'ui.codemirror',
+    'ui.bootstrap',
+    'toastr'
   ])
   .config(function ($routeProvider) {
     $routeProvider
@@ -35,7 +38,31 @@ angular
             } else {
               return new Client();
             }
-          }}
+          }
+        }
+      })
+      .when('/client/:clientId/conversations', {
+        templateUrl: 'views/conversations.html',
+        controller: 'ConversationCtrl',
+        controllerAs: '$ctrl',
+        resolve: {
+          client: function ($route, ClientService) {
+            return ClientService.getById($route.current.params.clientId);
+          }
+        }
+      })
+      .when('/client/:clientId/conversations/:conversationId', {
+        templateUrl: 'views/conversationEdit.html',
+        controller: 'ConversationEditCtrl',
+        controllerAs: '$ctrl',
+        resolve: {
+          client: function ($route, ClientService) {
+            return ClientService.getById($route.current.params.clientId);
+          },
+          conversation: function($route, ConversationService) {
+            return ConversationService.getConversation($route.current.params.conversationId);
+          }
+        }
       })
       .otherwise({
         redirectTo: '/'

frontend/src/app/scripts/config/toastr.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2017 Redlink GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+'use strict';
+
+angular
+  .module('smartiApp')
+  .config(function (toastrConfig) {
+    angular.extend(toastrConfig, {
+      autoDismiss: true,
+      maxOpened: 2,
+      newestOnTop: false,
+      tapToDismiss: true,
+      positionClass: 'toast-bottom-right'
+    });
+  });

frontend/src/app/scripts/controllers/conversation.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2017 Redlink GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name smartiApp.controller:ConversationCtrl
+ * @description
+ * # ConversationCtrl
+ * Controller of the smartiApp
+ */
+angular.module('smartiApp')
+  .controller('ConversationCtrl', function ($scope, $location, client, ConversationService) {
+    var $ctrl = this;
+
+    $ctrl.conversations = null;
+    $ctrl.paging = {
+      currentPage: 1,
+      pageSize: 10,
+      totalItems: 0
+    };
+
+    $ctrl.openConversation = openConversation;
+
+    $scope.$watch('$ctrl.paging.currentPage', loadConversations);
+    $scope.$watch('$ctrl.paging.pageSize', loadConversations);
+
+    loadConversations();
+
+    function loadConversations() {
+      $ctrl.conversations = null;
+      return ConversationService.listForClient(client.data.id, $ctrl.paging.currentPage -1, $ctrl.paging.pageSize)
+        .then(function (response) {
+          $ctrl.paging.currentPage = response.number + 1;
+          $ctrl.paging.pageSize = response.size;
+          $ctrl.paging.totalItems = response.totalElements;
+          $ctrl.conversations = response.content;
+
+          return response;
+        });
+    }
+
+    function openConversation(conversationId) {
+      $location.path('client/' + client.data.id + '/conversations/' + conversationId);
+    }
+
+
+  });

frontend/src/app/scripts/controllers/conversationEdit.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2017 Redlink GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name smartiApp.controller:ConversationEditCtrl
+ * @description
+ * # ConversationEditCtrl
+ * Controller of the smartiApp
+ */
+angular.module('smartiApp')
+  .controller('ConversationEditCtrl', function ($scope, $location, client, conversation, ConversationService, toastr) {
+    var $ctrl = this;
+
+    $ctrl.backToList = backToList;
+    $ctrl.saveMessage = saveMessage;
+    $ctrl.deleteMessage = deleteMessage;
+
+    function backToList() {
+      $location.path('client/' + client.data.id + '/conversations');
+
+    }
+
+    function handleError(error) {
+      if (error.status === 501) {
+        toastr.warning('This function has not (yet) been implemented', '501 - Not Implemented');
+      } else {
+        toastr.error(error.data.message, 'Error ' + error.status);
+      }
+    }
+
+    function saveMessage(message) {
+      return ConversationService.saveMessage(conversation.id, message).then(
+        function (response) {
+          conversation.messages = response.messages;
+        },
+        handleError
+      ).then(function () {
+          message.editing = false;
+      });
+    }
+
+    function deleteMessage(message) {
+      return ConversationService.deleteMessage(conversation.id, message.id).then(
+        function (response) {
+          conversation.messages = response.messages;
+          return response;
+        },
+        handleError
+      )
+    }
+
+  });

frontend/src/app/scripts/controllers/overview.js

@@ -38,6 +38,10 @@ angular.module('smartiApp')
       }
     };
 
+    $scope.manageConversations = function (clientId) {
+      $location.path('client/' + clientId + '/conversations');
+    };
+
     listClients();
 
   });

frontend/src/app/scripts/services/conversation.service.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2017 Redlink GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+'use strict';
+
+/**
+ * @ngdoc service
+ * @name smartiApp.ConversationService
+ * @description
+ * # ConversationService
+ * Service in the smartiApp.
+ */
+angular.module('smartiApp')
+  .service('ConversationService', function ($http, $q, ENV) {
+
+    this.listForClient = getForClient;
+    this.getConversation = getConversation;
+
+    this.saveMessage = saveMessage;
+    this.deleteMessage = deleteMessage;
+
+    function getForClient(clientId, page, pageSize) {
+      return $http.get(ENV.serviceBaseUrl + 'admin/conversation', {
+        params: {
+          clientId: clientId,
+          page: page,
+          pageSize: pageSize
+        }
+      }).then(function (response) {
+        return response.data;
+      });
+    }
+
+    function getConversation(conversationId) {
+      return $http.get(ENV.serviceBaseUrl + 'admin/conversation/' + conversationId)
+        .then(function (response) {
+          return response.data;
+        });
+    }
+
+    function saveMessage(conversationId, message) {
+      return $http.put(ENV.serviceBaseUrl + 'admin/conversation/' + conversationId + '/message/' + message.id, message)
+        .then(function (response) {
+          return response.data;
+        });
+    }
+
+    function deleteMessage(conversationId, messageId) {
+      return $http.delete(ENV.serviceBaseUrl + 'admin/conversation/' + conversationId + '/message/' + messageId)
+        .then(function (response) {
+          return response.data;
+        });
+    }
+
+  });

frontend/src/app/styles/main.scss

@@ -28,6 +28,10 @@ h3 {
   }
 }
 
+*[ng-click] {
+  cursor: pointer;
+}
+
 .CodeMirror {
   border: 1px solid #ccc;
   border-radius: 4px;

frontend/src/app/views/conversationEdit.html

@@ -0,0 +1,49 @@
+<!--
+  ~ Copyright 2017 Redlink GmbH
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+<div class="clearfix">
+  <div class="pull-right">
+    <button class="btn btn-default" ng-click="$ctrl.backToList()">Back to List</button>
+  </div>
+  <h2>Edit conversation <span ng-bind="$resolve.conversation.id"></span></h2>
+</div>
+<div>
+  <h3>Messages</h3>
+  <div class="panel panel-info panel-sm"
+       ng-repeat="m in $resolve.conversation.messages"
+       id="#{{$index}}">
+    <div class="panel-heading">
+      #{{$index}}
+      <span ng-bind="m.user.displayName"></span>
+      <span class="pull-right" style="display: inline-block">
+        <button ng-if="m.editing" class="btn btn-default btn-xs" ng-click="$ctrl.saveMessage(m)"><i class="glyphicon glyphicon-floppy-disk"></i></button>
+        <button ng-if="!m.editing" class="btn btn-default btn-xs" ng-click="m.editing = true"><i class="glyphicon glyphicon-pencil"></i></button>
+        <button ng-if="!m.editing" class="btn btn-default btn-xs" ng-click="$ctrl.deleteMessage(m.id)"><i class="glyphicon glyphicon-remove"></i></button>
+      </span>
+    </div>
+    <div class="panel-body">
+      <span ng-if="!m.editing" ng-bind="m.content"></span>
+      <form ng-if="m.editing">
+        <div class="form-group">
+          <textarea class="form-control" ng-model="m.content"></textarea>
+        </div>
+      </form>
+    </div>
+    <div class="panel-footer">
+      <span ng-bind="m.time | date:'medium'"></span>
+    </div>
+  </div>
+</div>