From 07302dfdfea37813803c272f2401e7dd273818bf Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Tue, 14 Jul 2020 19:51:25 +0200
Subject: [PATCH]  add Users view and route

---
 app/src/routes.js            |  4 ++
 app/src/scss/_variables.scss |  5 +++
 app/src/scss/main.scss       |  4 ++
 app/src/views/Users.vue      | 81 ++++++++++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 app/src/views/Users.vue

diff --git a/app/src/routes.js b/app/src/routes.js
index b1ad44c7..7128a434 100644
--- a/app/src/routes.js
+++ b/app/src/routes.js
@@ -1,5 +1,6 @@
 import Home from './views/Home'
 import Login from './views/Login'
+import Users from './views/Users'
 
 
 const routes = [
@@ -7,6 +8,9 @@ const routes = [
     {name: 'login', path: '/login', component: Login, meta: {
         noAuth: true
     }},
+    {name: 'users', path: '/users', component: Users, meta: {
+        breadcrumb: [{name: 'users', trad: 'users'}]
+    }},
 ]
 
 export default routes
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 315ad83c..36497368 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -16,6 +16,7 @@
 // For exemple, turning rounding of elements off, the bases colors, etc.
 // $enable-rounded: false;
 
+$alert-padding-x: 1rem;
 
 
 /*
@@ -33,3 +34,7 @@
 
 $fa-font-path: '~fork-awesome/fonts';
 $fa-font-size-base: 1rem;
+
+
+
+$skeleton-color: #eaeaea;
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 63dfa553..c872e023 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -23,6 +23,10 @@ body {
     font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
+
+.list-group-item {
+    padding: 0.75rem 1rem;
+}
 .list-group-item-action {
     color: #333;
 }
diff --git a/app/src/views/Users.vue b/app/src/views/Users.vue
new file mode 100644
index 00000000..1153c185
--- /dev/null
+++ b/app/src/views/Users.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="users">
+        <breadcrumb/>
+        <template v-if="users === null">
+            <b-alert variant="warning" show>
+                <icon iname="exclamation-triangle" class="fa-fw mr-1"/>
+                {{ $t('users_no') }}
+            </b-alert>
+        </template>
+        <template v-else>
+            <b-list-group :class="{skeleton: !users}">
+                <b-list-group-item
+                    class="d-flex justify-content-between align-items-center pr-0"
+                    v-for="(user, index) in (users ? users : 3)"
+                    :key="index"
+                    :to="users ? { name: 'user', params: { name: user.username }} : null"
+                >
+                    <div>
+                        <h5 :class="{rounded: !users}">
+                            {{ user.username }}
+                            <small>({{ user.fullname }})</small>
+                        </h5>
+                        <p :class="{rounded: !users}">{{ user.mail }}</p>
+                    </div>
+                    <icon iname="chevron-right" class="lg fs-sm ml-auto"/>
+                </b-list-group-item>
+            </b-list-group>
+        </template>
+    </div>
+</template>
+
+<script>
+import api from '@/helpers/api'
+import Breadcrumb from '@/components/Breadcrumb'
+
+export default {
+    name: 'Users',
+    data: function () {
+        return {
+            users:  undefined
+        }
+    },
+    computed: {
+    },
+    async created() {
+        const data = await api.get('users')
+        if (!data || Object.keys(data.users).length === 0) {
+            this.users = null
+        } else {
+            this.users = data.users
+        }
+    },
+    components: {
+        Breadcrumb
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/scss/_variables.scss';
+
+p {
+    margin: 0
+}
+
+.skeleton {
+    @each $i, $opacity in 1 .75, 2 .5, 3 .25 {
+        .list-group-item:nth-child(#{$i}) { opacity: $opacity; }
+    }
+
+    h5, p {
+        background-color: $skeleton-color;
+        height: 1.5rem;
+        width: 10rem;
+    }
+
+    small {
+        display: none;
+    }
+}
+</style>