From e83caf45c6de61afc529f630f1ec2ba443c99a73 Mon Sep 17 00:00:00 2001
From: Cyril Dubuisson <cyril.dubuisson@gmail.com>
Date: Thu, 2 Apr 2020 17:04:47 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20migrate=20stacks=20pag?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/client/app/pages/stacks/stacks.vue   | 65 ++++++++++++++++++-
 .../app/shared/config/bootstrap-vue-config.js |  2 +
 .../app/shared/config/fontawesome-config.js   | 10 ++-
 3 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/src/main/client/app/pages/stacks/stacks.vue b/src/main/client/app/pages/stacks/stacks.vue
index ec310301e..f1c139f24 100644
--- a/src/main/client/app/pages/stacks/stacks.vue
+++ b/src/main/client/app/pages/stacks/stacks.vue
@@ -1,10 +1,73 @@
 <template>
-  <div>This is not the final stacks page xD</div>
+  <b-card-group columns>
+    <b-card
+      v-for="stack in stacks"
+      :key="stack.id"
+      :title="stack.name"
+      :sub-title="stack.description"
+    >
+      <b-card-text>
+        <b-badge
+          :id="'badge-' + stack.id"
+          pill
+          :variant="states[stack.state].variant"
+        >
+          <font-awesome-icon :icon="states[stack.state].icon" />&nbsp;{{ states[stack.state].text }}
+        </b-badge>
+        <b-tooltip :target="'badge-' + stack.id">
+          {{ states[stack.state].tooltip }}
+        </b-tooltip>
+      </b-card-text>
+
+      <b-button
+        :to="{ name: 'stack_edition', params: { stackId: stack.id }}"
+        title="Edit this stack"
+        variant="primary"
+        class="mr-1"
+      >
+        <font-awesome-icon icon="edit" />
+      </b-button>
+    </b-card>
+  </b-card-group>
 </template>
 
 <script>
+  import { getStacks } from '@/shared/api/stacks-api';
+
   export default {
     name: 'AppStacks',
+    data: () => ({
+      stacks: [],
+      states: {
+        NEW: {
+          variant: 'success',
+          tooltip: 'Your stack is new and has not been started yet.',
+          icon: 'star-of-life',
+          text: 'new',
+        },
+        RUNNING: {
+          variant: 'primary',
+          tooltip: 'Your stack is up and running !',
+          icon: ['far', 'check-square'],
+          text: 'running',
+        },
+        TO_UPDATE: {
+          variant: 'warning',
+          tooltip: 'Your stack needs an update !',
+          icon: 'upload',
+          text: 'to update',
+        },
+        STOPPED: {
+          variant: 'danger',
+          tooltip: 'Your stack has been stopped.',
+          icon: 'stop-circle',
+          text: 'stopped',
+        },
+      },
+    }),
+    async created() {
+      this.stacks = await getStacks();
+    },
   };
 </script>
 
diff --git a/src/main/client/app/shared/config/bootstrap-vue-config.js b/src/main/client/app/shared/config/bootstrap-vue-config.js
index e732d3c1e..dda09b217 100644
--- a/src/main/client/app/shared/config/bootstrap-vue-config.js
+++ b/src/main/client/app/shared/config/bootstrap-vue-config.js
@@ -19,6 +19,7 @@ import {
   TablePlugin,
   TabsPlugin,
   ToastPlugin,
+  TooltipPlugin,
 } from 'bootstrap-vue';
 
 export default {
@@ -42,5 +43,6 @@ export default {
     Vue.use(TablePlugin);
     Vue.use(TabsPlugin);
     Vue.use(ToastPlugin);
+    Vue.use(TooltipPlugin);
   },
 };
diff --git a/src/main/client/app/shared/config/fontawesome-config.js b/src/main/client/app/shared/config/fontawesome-config.js
index 508e17b01..6c46c46c6 100644
--- a/src/main/client/app/shared/config/fontawesome-config.js
+++ b/src/main/client/app/shared/config/fontawesome-config.js
@@ -11,12 +11,13 @@ import {
   faInfo,
   faLayerGroup,
   faLock,
-  faObjectGroup,
   faMinus,
+  faObjectGroup,
   faPlus,
   faRocket,
   faSave,
   faSignOutAlt,
+  faStarOfLife,
   faStopCircle,
   faStopwatch,
   faTachometerAlt,
@@ -33,7 +34,10 @@ import {
   faMarkdown,
   faSuperpowers,
 } from '@fortawesome/free-brands-svg-icons';
-import { faUser as farUser } from '@fortawesome/free-regular-svg-icons';
+import {
+  faCheckSquare as farCheckSquare,
+  faUser as farUser,
+} from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
@@ -70,6 +74,8 @@ export default {
       faStopCircle,
       faUpload,
       faUserShield,
+      faStarOfLife,
+      farCheckSquare,
     );
     Vue.component('font-awesome-icon', FontAwesomeIcon);
   },