From 2f4b68e043a3f87279ffa06238e563122d589e8f Mon Sep 17 00:00:00 2001
From: Chaim Lando <chiptus@gmail.com>
Date: Thu, 6 Sep 2018 11:41:54 +0300
Subject: [PATCH] feat(engine-details): add labels-table component

---
 .../node-labels-table-controller.js           | 24 +++++++++
 .../node-labels-table/node-labels-table.html  | 53 +++++++++++++++++++
 .../node-labels-table/node-labels-table.js    |  9 ++++
 3 files changed, 86 insertions(+)
 create mode 100644 app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js
 create mode 100644 app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
 create mode 100644 app/docker/components/host-view-panels/node-labels-table/node-labels-table.js

diff --git a/app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js b/app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js
new file mode 100644
index 000000000..e80dc3d0d
--- /dev/null
+++ b/app/docker/components/host-view-panels/node-labels-table/node-labels-table-controller.js
@@ -0,0 +1,24 @@
+angular.module('portainer.docker').controller('NodeLabelsTableController', [
+  function NodeLabelsTableController() {
+    var ctrl = this;
+    ctrl.removeLabel = removeLabel;
+    ctrl.updateLabel = updateLabel;
+
+    function removeLabel(index) {
+      var removedElement = ctrl.labels.splice(index, 1);
+      if (removedElement !== null) {
+        console.log(ctrl.labels);
+        ctrl.onChangedLabels({labels: ctrl.labels});
+      }
+    }
+
+    function updateLabel(label) {
+      if (
+        label.value !== label.originalValue ||
+        label.key !== label.originalKey
+      ) {
+        ctrl.onChangedLabels({labels: ctrl.labels});
+      }
+    }
+  }
+]);
diff --git a/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html b/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
new file mode 100644
index 000000000..e8076f265
--- /dev/null
+++ b/app/docker/components/host-view-panels/node-labels-table/node-labels-table.html
@@ -0,0 +1,53 @@
+<div ng-if="!$ctrl.labels.length">
+  There are no labels for this node.
+</div>
+
+<table class="table" ng-if="$ctrl.labels.length">
+  <thead>
+    <tr>
+      <th>Label</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr ng-repeat="label in $ctrl.labels">
+      <td>
+        <div class="input-group input-group-sm">
+          <span class="input-group-addon fit-text-size">Name</span>
+          <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo"
+            ng-change="$ctrl.updateLabel(label)">
+        </div>
+      </td>
+      <td>
+        <div class="input-group input-group-sm">
+          <span class="input-group-addon fit-text-size">Value</span>
+          <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"
+            ng-change="$ctrl.updateLabel(label)">
+          <span class="input-group-btn">
+            <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
+              <i class="fa fa-trash" aria-hidden="true"></i>
+            </button>
+          </span>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td></td>
+      <td>
+        <div class="btn-toolbar" role="toolbar">
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.hasChanges()"
+              ng-click="$ctrl.save()">Apply changes</button>
+            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a ng-click="$ctrl.cancelChanges(node)">Reset changes</a></li>
+            </ul>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
\ No newline at end of file
diff --git a/app/docker/components/host-view-panels/node-labels-table/node-labels-table.js b/app/docker/components/host-view-panels/node-labels-table/node-labels-table.js
new file mode 100644
index 000000000..5d6d6c320
--- /dev/null
+++ b/app/docker/components/host-view-panels/node-labels-table/node-labels-table.js
@@ -0,0 +1,9 @@
+angular.module('portainer.docker').component('nodeLabelsTable', {
+  templateUrl:
+    'app/docker/components/host-view-panels/node-labels-table/node-labels-table.html',
+  controller: 'NodeLabelsTableController',
+  bindings: {
+    labels: '<',
+    onChangedLabels: '&'
+  }
+});