From 7058be76aa4484b666e09381e449eb8d92b93ca2 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Wed, 8 Sep 2021 23:18:39 +0200
Subject: [PATCH 1/2] Add minicards stats

---
 src/components/Dashboard.vue     | 61 ++++++++++++++++++++++++++
 src/components/DashboardCard.vue | 75 ++++++++++++++++++++++++++++++++
 src/views/Home.vue               |  3 ++
 3 files changed, 139 insertions(+)
 create mode 100644 src/components/Dashboard.vue
 create mode 100644 src/components/DashboardCard.vue

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
new file mode 100644
index 0000000..c204d94
--- /dev/null
+++ b/src/components/Dashboard.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="dashboard">
+    <DashboardCard :value="totalRoutes" legend="TOTAL ROUTES"/>
+    <DashboardCard :value="requestOK" legend="REQUEST OK" light="#30d230"/>
+    <DashboardCard :value="requestKO" legend="REQUEST KO" light="red"/>
+    <DashboardCard :value="requestNotStarted" legend="NOT STARTED" light="grey"/>
+    <DashboardCard :value="totalGet" legend="GET"/>
+    <DashboardCard :value="totalPut" legend="PUT"/>
+    <DashboardCard :value="totalPatch" legend="PATCH"/>
+    <DashboardCard :value="totalPost" legend="POST"/>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import DashboardCard from './DashboardCard.vue';
+
+export default {
+  name: 'Dashboard',
+  components: {
+    DashboardCard,
+  },
+  computed: {
+    ...mapGetters({
+      routeCollection: 'routeCollection',
+    }),
+    totalRoutes() {
+      return this.routeCollection.length;
+    },
+    totalGet() {
+      return this.routeCollection.filter((route) => route.routeVerb === 'get').length;
+    },
+    totalPut() {
+      return this.routeCollection.filter((route) => route.routeVerb === 'put').length;
+    },
+    totalPatch() {
+      return this.routeCollection.filter((route) => route.routeVerb === 'patch').length;
+    },
+    totalPost() {
+      return this.routeCollection.filter((route) => route.routeVerb === 'post').length;
+    },
+    requestOK() {
+      return this.routeCollection.filter((route) => route.apiResponse?.status < 300).length;
+    },
+    requestKO() {
+      return this.routeCollection.filter((route) => route.apiResponse?.status >= 300).length;
+    },
+    requestNotStarted() {
+      return this.routeCollection.filter((route) => route.apiResponse === '').length;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dashboard {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--unit-2);
+}
+</style>
diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue
new file mode 100644
index 0000000..ca1b6df
--- /dev/null
+++ b/src/components/DashboardCard.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="dashboard-card">
+      <div v-if="light" class="color-status" :style="mocolor"></div>
+      <div class="data-value">{{ value }}</div>
+      <div class="data-legend">{{ legend }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dashboard',
+  props: {
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+    legend: {
+      type: String,
+      default: 'no legend',
+    },
+    light: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    mocolor() {
+      return {
+        '--light-color': this.light,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dashboard {
+  display: flex;
+}
+
+.dashboard-card {
+  background: var(--color-1);
+  border-radius: var( --unit-1);
+  width: fit-content;
+  min-width: 100px;
+  height: 3em;
+  text-align: right;
+  padding: 1em;
+  margin-right: 1em;
+  margin-top: 1em;
+}
+
+.data-value {
+  font-size: 2em;
+  font-weight: 100;
+  margin: 0;
+}
+
+.data-legend {
+  font-size: 0.7em;
+  margin-top: -0.7em;
+}
+
+.color-status {
+  --light-color: yellow;
+  position: relative;
+  top: 0;
+  left: 0;
+  background: var(--light-color);
+  height: 2px;
+  width: var(--unit-2);
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ba0fb50..cd4f204 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="home">
     <Onboard />
+    <Dashboard />
     <RouteApi />
     <RouteBlockCollection/>
     <div class="action-button">
@@ -13,6 +14,7 @@
 <script>
 import downloadJson from '../mixins/downloadJson';
 import Onboard from '@/components/Onboard.vue';
+import Dashboard from '@/components/Dashboard.vue';
 import RouteApi from '@/components/RouteApi.vue';
 import RouteBlockCollection from '@/components/RouteBlockCollection.vue';
 
@@ -20,6 +22,7 @@ export default {
   name: 'Home',
   components: {
     Onboard,
+    Dashboard,
     RouteApi,
     RouteBlockCollection,
   },
-- 
GitLab


From 87f20c669b6c6d3131a07dc1c42823694f399506 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Wed, 8 Sep 2021 23:19:34 +0200
Subject: [PATCH 2/2] Update version to 0.5.0

---
 package.json               | 2 +-
 src/components/Onboard.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ab15f73..f0998b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vapi",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue
index 749d254..9463803 100644
--- a/src/components/Onboard.vue
+++ b/src/components/Onboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="on-board">
-    <h1>VAPI <span>0.4.4</span></h1>
+    <h1>VAPI <span>0.5.0</span></h1>
     <p>A minimal api tester</p>
   </div>
 </template>
-- 
GitLab