[bug] openAPI clients interface has a bugged behavior when creating/editing a client

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Fix a bug: when an admin logs on the subscription page, his view is broken
 - Fix a bug: admin's members list shows the same members multiple times
 - Fix a bug: when a new account is created through the sign-up modal, the role is not reported in the StatisticProfile (#196)
+- Fix a bug: openAPI clients interface has a bugged behavior when creating/editing a client
 - Fix a security issue: updated actionpack-page_caching from 1.1.0 to 1.2.2 to fix [CVE-2020-8159](https://nvd.nist.gov/vuln/detail/CVE-2020-8159)
 - [TODO DEPLOY] `rails fablab:fix:role_in_statistic_profile`
 - [TODO DEPLOY] `rails fablab:es:generate_stats[2019-06-13]` (run after the command above!)

app/assets/javascripts/controllers/admin/open_api_clients.js

@@ -20,11 +20,18 @@ Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clien
     $scope.clientFormVisible = false;
     $scope.client = {};
 
-    $scope.toggleForm = () => $scope.clientFormVisible = !$scope.clientFormVisible;
+    /**
+     * Show the name edition form for a new client
+     */
+    $scope.createClient = function () {
+      $scope.clientFormVisible = true;
+      $scope.client = {};
+    };
 
-    // Change the order criterion to the one provided
-    // @param orderBy {string} ordering criterion
-    //
+    /**
+     * Change the order criterion to the one provided
+     * @param orderBy {string} ordering criterion
+     */
     $scope.setOrder = function (orderBy) {
       if ($scope.order === orderBy) {
         return $scope.order = `-${orderBy}`;
@@ -33,6 +40,14 @@ Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clien
       }
     };
 
+    /**
+     * Reset the name ot its original value and close the edition form
+     */
+    $scope.cancelEdit = function () {
+      $scope.client.name = $scope.clientOriginalName;
+      $scope.clientFormVisible = false;
+    };
+
     $scope.saveClient = function (client) {
       if (client.id != null) {
         OpenAPIClient.update({ id: client.id }, { open_api_client: client }, function (clientResp) {
@@ -47,13 +62,13 @@ Application.Controllers.controller('OpenAPIClientsController', ['$scope', 'clien
       }
 
       $scope.clientFormVisible = false;
-      $scope.clientForm.$setPristine();
-      return $scope.client = {};
+      $scope.client = {};
     };
 
     $scope.editClient = function (client) {
       $scope.clientFormVisible = true;
-      return $scope.client = client;
+      $scope.client = client;
+      $scope.clientOriginalName = client.name;
     };
 
     $scope.deleteClient = index =>

app/assets/templates/admin/open_api_clients/index.html.erb

@@ -34,14 +34,14 @@
     <div class="col-md-12">
       <div class="col-md-12">
 
-        <button type="button" class="btn btn-warning m-t m-b" ng-click="toggleForm()" ng-show="!clientFormVisible" translate>{{ 'app.admin.open_api_clients.add_new_client' | translate }}</button>
+        <button type="button" class="btn btn-warning m-t m-b" ng-click="createClient()" ng-show="!clientFormVisible" translate>{{ 'app.admin.open_api_clients.add_new_client' | translate }}</button>
 
         <form role="form" id="clientForm" ng-show="clientFormVisible" name="clientForm" class="form-inline m-b m-t" novalidate>
           <div class="form-group" ng-class="{'has-error': clientForm['client[name]'].$dirty && clientForm['client[name]'].$invalid}">
             <input class="form-control" type="text" name="client[name]" ng-model="client.name" value="" placeholder="{{ 'app.admin.open_api_clients.client_name' | translate }}" required>
           </div>
 
-          <button class="btn btn-default" ng-click="toggleForm()" name="button">{{ 'app.shared.buttons.cancel' | translate }}</button>
+          <button class="btn btn-default" ng-click="cancelEdit()" name="button">{{ 'app.shared.buttons.cancel' | translate }}</button>
           <input type="submit" class="btn btn-warning" ng-disabled="!client.name || client.name.length == 0" ng-click="saveClient(client)" value="{{ 'app.shared.buttons.save' | translate }}">
         </form>