From 5077072747fd1777d4c11ea99e4559416dd6e565 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Wed, 16 Dec 2020 12:08:18 +0100
Subject: [PATCH] add basic skeletons components

---
 .../globals/skeletons/CardButtonsSkeleton.vue | 32 ++++++++++++
 .../globals/skeletons/CardFormSkeleton.vue    | 52 +++++++++++++++++++
 .../globals/skeletons/CardInfoSkeleton.vue    | 30 +++++++++++
 .../globals/skeletons/CardListSkeleton.vue    | 30 +++++++++++
 .../globals/skeletons/ListGroupSkeleton.vue   | 22 ++++++++
 app/src/helpers/commons.js                    |  5 ++
 6 files changed, 171 insertions(+)
 create mode 100644 app/src/components/globals/skeletons/CardButtonsSkeleton.vue
 create mode 100644 app/src/components/globals/skeletons/CardFormSkeleton.vue
 create mode 100644 app/src/components/globals/skeletons/CardInfoSkeleton.vue
 create mode 100644 app/src/components/globals/skeletons/CardListSkeleton.vue
 create mode 100644 app/src/components/globals/skeletons/ListGroupSkeleton.vue

diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
new file mode 100644
index 00000000..14be30dc
--- /dev/null
+++ b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
@@ -0,0 +1,32 @@
+<template>
+  <b-card>
+    <template #header>
+      <b-skeleton width="30%" height="36px" class="m-0" />
+    </template>
+
+    <div v-for="count in itemCount" :key="count">
+      <template v-if="randint(0, 1)">
+        <b-skeleton width="100%" height="24px" />
+        <b-skeleton :width="randint(15, 60) + '%'" height="24px" />
+      </template>
+      <b-skeleton v-else :width="randint(45, 100) + '%'" height="24px" />
+
+      <b-skeleton :width="randint(20, 30) + '%'" height="38px" class="mt-3" />
+      <hr>
+    </div>
+  </b-card>
+</template>
+
+<script>
+import { randint } from '@/helpers/commons'
+
+export default {
+  name: 'CardButtonsSkeleton',
+
+  props: {
+    itemCount: { type: Number, default: 5 }
+  },
+
+  methods: { randint }
+}
+</script>
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
new file mode 100644
index 00000000..882e7270
--- /dev/null
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -0,0 +1,52 @@
+<template>
+  <b-card>
+    <template #header>
+      <b-skeleton width="30%" height="36px" class="m-0" />
+    </template>
+
+    <template v-for="count in itemCount">
+      <b-row :key="count" :class="{ 'd-block': cols === null }">
+        <b-col v-bind="cols">
+          <div style="height: 38px" class="d-flex align-items-center">
+            <b-skeleton class="m-0" :width="randint(45, 100) + '%'" height="24px" />
+          </div>
+        </b-col>
+
+        <b-col>
+          <div class="w100 d-flex justify-content-between" v-if="count % 2 === 0">
+            <b-skeleton width="100%" height="38px" />
+
+            <b-skeleton width="38px" height="38px" class="ml-2" />
+          </div>
+
+          <b-skeleton v-else width="100%" height="38px" />
+
+          <b-skeleton :width="randint(15, 35) + '%'" height="19px" />
+        </b-col>
+      </b-row>
+
+      <hr :key="count + '-hr'">
+    </template>
+
+    <template #footer>
+      <div class="d-flex justify-content-end w-100">
+        <b-skeleton width="100px" height="38px" />
+      </div>
+    </template>
+  </b-card>
+</template>
+
+<script>
+import { randint } from '@/helpers/commons'
+
+export default {
+  name: 'CardFormSkeleton',
+
+  props: {
+    itemCount: { type: Number, default: 5 },
+    cols: { type: [Object, null], default () { return { md: 4, lg: 2 } } }
+  },
+
+  methods: { randint }
+}
+</script>
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
new file mode 100644
index 00000000..ed234e61
--- /dev/null
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -0,0 +1,30 @@
+<template>
+  <b-card>
+    <template #header>
+      <b-skeleton width="30%" height="36px" class="m-0" />
+    </template>
+
+    <b-row v-for="i in itemCount" :key="i" no-gutters>
+      <b-col cols="5" md="3" xl="3">
+        <b-skeleton :width="randint(45, 95) + '%'" height="19px" />
+      </b-col>
+      <b-col>
+        <b-skeleton :width="randint(10, 60) + '%'" height="19px" />
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+
+<script>
+import { randint } from '@/helpers/commons'
+
+export default {
+  name: 'CardInfoSkeleton',
+
+  props: {
+    itemCount: { type: Number, default: 5 }
+  },
+
+  methods: { randint }
+}
+</script>
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
new file mode 100644
index 00000000..f96884ab
--- /dev/null
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -0,0 +1,30 @@
+<template>
+  <b-card no-body>
+    <template #header>
+      <b-skeleton width="30%" height="36px" class="m-0" />
+    </template>
+
+    <b-list-group flush>
+      <b-list-group-item v-for="count in itemCount" :key="count" class="d-flex">
+        <div style="width: 20%;">
+          <b-skeleton :width="randint(50, 100) + '%'" height="24px" class="mr-3" />
+        </div>
+        <b-skeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
+      </b-list-group-item>
+    </b-list-group>
+  </b-card>
+</template>
+
+<script>
+import { randint } from '@/helpers/commons'
+
+export default {
+  name: 'CardListSkeleton',
+
+  props: {
+    itemCount: { type: Number, default: 5 }
+  },
+
+  methods: { randint }
+}
+</script>
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
new file mode 100644
index 00000000..bebfa82f
--- /dev/null
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -0,0 +1,22 @@
+<template>
+  <b-list-group>
+    <b-list-group-item v-for="count in itemCount" :key="count">
+      <b-skeleton :width="randint(15, 25) + '%'" height="24px" class="mb-2" />
+      <b-skeleton :width="randint(25, 50) + '%'" height="24px" class="m-0" />
+    </b-list-group-item>
+  </b-list-group>
+</template>
+
+<script>
+import { randint } from '@/helpers/commons'
+
+export default {
+  name: 'ListGroupSkeleton',
+
+  props: {
+    itemCount: { type: Number, default: 5 }
+  },
+
+  methods: { randint }
+}
+</script>
diff --git a/app/src/helpers/commons.js b/app/src/helpers/commons.js
index 82cd9fd6..768e62c1 100644
--- a/app/src/helpers/commons.js
+++ b/app/src/helpers/commons.js
@@ -101,3 +101,8 @@ export function flattenObjectLiteral (obj, flattened = {}) {
 export function arrayDiff (arr1 = [], arr2 = []) {
   return arr1.filter(item => !arr2.includes(item))
 }
+
+
+export function randint (min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}