From dc54cfe99f08f725455ae8c7a4fcd3dba7404d95 Mon Sep 17 00:00:00 2001
From: Daniel Petrov <dani@code6.ninja>
Date: Tue, 17 Dec 2024 17:21:06 +0200
Subject: [PATCH] fixup! WIP add ebp settings page

---
 .../controllers/EBPSettingsController.js      |  11 +-
 .../controllers/EBPSpeciesController.js       |  47 +++++
 client/views/ebp.html                         |   2 +-
 client/views/ebp/species.html                 | 175 ++++++++++--------
 4 files changed, 142 insertions(+), 93 deletions(-)
 create mode 100644 client/scripts/controllers/EBPSpeciesController.js

diff --git a/client/scripts/controllers/EBPSettingsController.js b/client/scripts/controllers/EBPSettingsController.js
index e96f5f19..96058471 100644
--- a/client/scripts/controllers/EBPSettingsController.js
+++ b/client/scripts/controllers/EBPSettingsController.js
@@ -1,17 +1,8 @@
-require('../app').controller('EBPSettingsController', /* @ngInject */function ($q, $stateParams, EBPSpecies) {
+require('../app').controller('EBPSettingsController', /* @ngInject */function ($scope, $q, $stateParams, EBPSpecies) {
   const $ctrl = this
 
   $ctrl.selected = 'sources'
-
   if ($stateParams.settings) {
     $ctrl.selected = $stateParams.settings
   }
-
-  $ctrl.requestSpecies = function () {
-    $q.resolve(EBPSpecies.query().$promise).then(function (species) {
-      $ctrl.species = species
-    })
-  }
-
-  $ctrl.requestSpecies()
 })
diff --git a/client/scripts/controllers/EBPSpeciesController.js b/client/scripts/controllers/EBPSpeciesController.js
new file mode 100644
index 00000000..11d1d513
--- /dev/null
+++ b/client/scripts/controllers/EBPSpeciesController.js
@@ -0,0 +1,47 @@
+require('../app').controller('EBPSpeciesController', /* @ngInject */function ($scope, $q, $stateParams, EBPSpecies) {
+  const $ctrl = this
+
+  $ctrl.page = 1
+  $ctrl.pageSize = 20
+
+  $ctrl.requestSpecies = function () {
+    $q.resolve(EBPSpecies.query().$promise).then(function (rows) {
+      $ctrl.count = rows.$$response.data.$$response.count
+      $ctrl.species = rows
+      $ctrl.pageChanged()
+    })
+  }
+
+  $ctrl.pageChanged = function () {
+    const start = ($ctrl.page - 1) * $ctrl.pageSize
+    $ctrl.visible = $ctrl.species.slice(start, start + $ctrl.pageSize)
+  }
+
+  $ctrl.remove = function (idx) {
+    const start = ($ctrl.page - 1) * $ctrl.pageSize
+    $ctrl.species.splice(start + idx, 1)
+    $ctrl.count = $ctrl.species.length
+    if (start >= $ctrl.species.length && $ctrl.page > 0) {
+      $ctrl.page--
+    }
+    $ctrl.pageChanged()
+    $scope.editform.$setDirty()
+  }
+
+  $ctrl.add = function (key) {
+    const len = $ctrl.species.push({
+      ebpId: null,
+      sbNameLa: null,
+      sbNameEn: null
+    })
+    $ctrl.page = Math.ceil(len / $ctrl.pageSize)
+    $ctrl.pageChanged()
+    $scope.editform.$setDirty()
+  }
+
+  $ctrl.save = function () {
+    // TODO: save
+  }
+
+  $ctrl.requestSpecies()
+})
diff --git a/client/views/ebp.html b/client/views/ebp.html
index c4f910e1..9ae16448 100644
--- a/client/views/ebp.html
+++ b/client/views/ebp.html
@@ -40,7 +40,7 @@ <h1 class="page-header" translate>
   <div ng-if="$ctrl.selected === 'organizations'" ng-include="'/views/ebp/organizations.html'" class="col-md-9"></div>
   <div ng-if="$ctrl.selected === 'sources'" ng-include="'/views/ebp/sources.html'" class="col-md-9"></div>
   <div ng-if="$ctrl.selected === 'protocol'" ng-include="'/views/ebp/protocol.html'" class="col-md-9"></div>
-  <div ng-if="$ctrl.selected === 'species'" ng-include="'/views/ebp/species.html'" class="col-md-9"></div>
+  <div ng-if="$ctrl.selected === 'species'"  ng-include="'/views/ebp/species.html'" class="col-md-9"></div>
   <div ng-if="$ctrl.selected === 'species_status'" ng-include="'/views/ebp/species_status.html'" class="col-md-9"></div>
 </div>
 
diff --git a/client/views/ebp/species.html b/client/views/ebp/species.html
index c490c2dd..cb0ae737 100644
--- a/client/views/ebp/species.html
+++ b/client/views/ebp/species.html
@@ -1,82 +1,93 @@
-{{ $ctrl.species | json }}
-<form name="editform"
-      role="form"
-      class="table-responsive"
-      confirm-on-exit="editform.$dirty"
-      confirm-message-window="{{'SPECIES_UNSAVED_DATA_TITLE' | translate}}"
-      confirm-message-route="{{'SPECIES_UNSAVED_DATA_MESSAGE' | translate}}">
-  <table class="table table-hover table-striped table-responsive">
-    <thead>
-    <tr>
-      <th>#</th>
-      <th>EBP species code</th>
-      <th>SB name la</th>
-      <th>EBP name</th>
-      <th class="btn-group btn-group-xs">
-        <button
-          type="button"
-          class="btn btn-info btn-xs"
-          title="{{'SPECIES_BUTTON_ADD' | translate}}"
-          ng-click="$ctrl.addSpecies()">
-          <i class="fa fa-plus fa-fw"></i>
-        </button>
-        <button ng-disabled="editform.$pristine"
-                type="button"
-                class="btn btn-success btn-xs"
-                title="{{'SPECIES_BUTTON_SAVE' | translate}}"
-                ng-click="$ctrl.saveSpecies()">
-          <i class="fa fa-check fa-fw"></i>
-        </button>
-      </th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr class="hover" ng-repeat="item in $ctrl.visibleSpecies track by item.ebpId">
-      <td>{{$index+1+($ctrl.page-1)*$ctrl.pageSize}}</td>
-      <td>
-        <field type="text"
-               model="item.ebpId"
-               required></field>
-      </td>
-      <td>
-        <field type="text"
-               model="item.sbNameLa" required></field>
-      </td>
-      <td>
-        <field type="text"
-               model="item.ebpNameLa"></field>
-      </td>
-      <td>
-        <button type="button" class="btn btn-danger btn-xs visible-hover"
-                ng-click="$ctrl.removeSpecies($index)">
-          <i class="fa fa-remove fa-fw"></i>
-        </button>
-      </td>
-    </tr>
-    </tbody>
-    <tfoot>
-    <tr>
-      <th>#</th>
-      <th>EBP species code</th>
-      <th>SB name la</th>
-      <th>EBP name</th>
-      <th class="btn-group btn-group-xs">
-        <button
-          type="button"
-          class="btn btn-info btn-xs"
-          title="{{'SPECIES_BUTTON_ADD' | translate}}"
-          ng-click="$ctrl.addSpecies()">
-          <i class="fa fa-plus fa-fw"></i>
-        </button>
-        <button ng-disabled="editform.$pristine"
-                type="button"
-                class="btn btn-success btn-xs"
-                title="{{'SPECIES_BUTTON_SAVE' | translate}}"
-                ng-click="$ctrl.saveSpecies()">
-          <i class="fa fa-check fa-fw"></i>
-        </button>
-      </th>
-    </tr>
-    </tfoot>
-  </table>
-</form>
+<div ng-controller="EBPSpeciesController as $ctrl">
+  <form name="editform"
+        role="form"
+        class="table-responsive"
+        confirm-on-exit="editform.$dirty"
+        confirm-message-window="{{'SPECIES_UNSAVED_DATA_TITLE' | translate}}"
+        confirm-message-route="{{'SPECIES_UNSAVED_DATA_MESSAGE' | translate}}">
+    <table class="table table-hover table-striped table-responsive">
+      <thead>
+      <tr>
+        <th>#</th>
+        <th>EBP species code</th>
+        <th>SB name la</th>
+        <th>EBP name</th>
+        <th class="btn-group btn-group-xs">
+          <button
+            type="button"
+            class="btn btn-info btn-xs"
+            title="{{'SPECIES_BUTTON_ADD' | translate}}"
+            ng-click="$ctrl.add()">
+            <i class="fa fa-plus fa-fw"></i>
+          </button>
+          <button ng-disabled="editform.$pristine"
+                  type="button"
+                  class="btn btn-success btn-xs"
+                  title="{{'SPECIES_BUTTON_SAVE' | translate}}"
+                  ng-click="$ctrl.save()">
+            <i class="fa fa-check fa-fw"></i>
+          </button>
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr class="hover" ng-repeat="item in $ctrl.visible track by item.id">
+        <td>{{$index+1+($ctrl.page-1)*$ctrl.pageSize}}</td>
+        <td>
+          <field type="text"
+                 model="item.ebpId"
+                 required></field>
+        </td>
+        <td>
+          <field type="text"
+                 model="item.sbNameLa" required></field>
+        </td>
+        <td>
+          <field type="text"
+                 model="item.ebpNameLa"></field>
+        </td>
+        <td>
+          <button type="button" class="btn btn-danger btn-xs visible-hover"
+                  ng-click="$ctrl.remove($index)">
+            <i class="fa fa-remove fa-fw"></i>
+          </button>
+        </td>
+      </tr>
+      </tbody>
+      <tfoot>
+      <tr>
+        <th>#</th>
+        <th>EBP species code</th>
+        <th>SB name la</th>
+        <th>EBP name</th>
+        <th class="btn-group btn-group-xs">
+          <button
+            type="button"
+            class="btn btn-info btn-xs"
+            title="{{'SPECIES_BUTTON_ADD' | translate}}"
+            ng-click="$ctrl.add()">
+            <i class="fa fa-plus fa-fw"></i>
+          </button>
+          <button ng-disabled="editform.$pristine"
+                  type="button"
+                  class="btn btn-success btn-xs"
+                  title="{{'SPECIES_BUTTON_SAVE' | translate}}"
+                  ng-click="$ctrl.save()">
+            <i class="fa fa-check fa-fw"></i>
+          </button>
+        </th>
+      </tr>
+      </tfoot>
+    </table>
+  </form>
+
+  <div class="actions actions-species">
+    <ul uib-pagination
+        total-items="$ctrl.count"
+        items-per-page="$ctrl.pageSize"
+        max-size="5"
+        boundary-link-numbers="true"
+        ng-model="$ctrl.page"
+        ng-change="$ctrl.pageChanged()"></ul>
+  </div>
+</div>