clean tests & other things

resources/js/components/AlertBox.vue

@@ -1,10 +1,26 @@
 <template>
-    <div v-bind:class="'alert-' + type" class="p-1">{{ message }}</div>
+  <div
+    v-bind:class="'alert-' + type"
+    class="p-1"
+  >
+    {{ message }}
+  </div>
 </template>
 
 <script>
     export default {
         name: "AlertBox",
-        props: ['type', 'message']
+        props: {
+            type: {
+                type: String,
+                required: true,
+                default: 'success',
+            },
+            message: {
+                type: String,
+                required: true,
+                default: 'message',
+            },
+        }
     }
 </script>

resources/js/views/CssTesteur.vue

@@ -21,16 +21,17 @@
             <a href="#" class="btn-alert">X</a>
         </div>
         <form>
-            <label>Test label</label>
-            <input type="text" placeholder="Test placeholder">
-            <input type="number">
-            <input type="checkbox">
-            <select>
+            <label class="mb-1">Test label</label>
+            <input type="text" placeholder="Test placeholder" class="mb-1">
+            <input type="number" class="mb-1">
+            <input type="checkbox" class="mb-1">
+            <select class="mb-1">
                 <option>test 1</option>
                 <option>test 2</option>
                 <option>test 3</option>
             </select>
-            <input type="submit">
+            <textarea cols="30" rows="10" class="mb-1">Texte exemple</textarea>
+            <input type="submit" class="mb-1">
         </form>
     </div>
 </template>

resources/js/views/Memo/MemoIndex.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="p-2">
         <div class="flex-between flex-center mb-1">
-            <a href="#" @click="$router.back()" class="link">
+            <a href="#" @click="$router.back()">
                 < Back
             </a>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
@@ -11,8 +11,8 @@
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <div v-for="memo in memos">
-                <router-link :to="'/memos/' + memo.data.memo_id" class="link-large relative flex-center p-2">
+            <div v-for="memo in memos" class="memo-list">
+                <router-link :to="'/memos/' + memo.data.memo_id" class="relative flex-center flex-between p-1">
                     <h1>{{ memo.data.name }}</h1>
                     <div class="memo-date">{{ memo.data.last_updated }}</div>
                 </router-link>

resources/js/views/Memo/MemoShow.vue

@@ -1,31 +1,74 @@
 <template>
-    <div>
-        <div v-if="loading">> Loading...</div>
-        <div v-else>
-            <div class="flex-between mb-2">
-                <a href="#" @click="$router.back()" class="link">
-                    < Back
-                </a>
-                <div class="relative">
-                    <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-success mr-1">Edit</router-link>
-                    <a href="#" @click="modal = ! modal" class="btn-alert">Delete</a>
-                    <div v-if="modal" class="absolute modal mt-2">
-                        <p>Are you sure you want to delete this record ?</p>
-                        <div class="flex-end flex-center mt-2">
-                            <button @click="modal = ! modal" class="btn mr-2">Cancel</button>
-                            <button @click="destroy" class="btn-alert-strong">Delete</button>
-                        </div>
-                    </div>
-                </div>
-                <div v-if="modal" @click="modal = ! modal" class="modal-background"></div>
-            </div>
-<!--            <TagBox :memo="memo" />-->
-            <p class="title-section pt-3">Memo</p>
-            <h1 class="memo-title">{{ memo.name }}</h1>
-            <p class="memo-style pt-1" v-html="memoMarkdown"> </p>
-            <div class="memo-change my-2 p-1">@last update : {{ memo.last_updated }}</div>
-        </div>
+  <div class="p-2">
+    <div
+      v-if="loading"
+    >
+      > Loading...
     </div>
+    <div v-else>
+      <div class="flex-between flex-center mb-1">
+        <a
+          href="#"
+          class="link"
+          @click="$router.back()"
+        >< Back</a>
+        <div class="relative">
+          <router-link
+            :to="'/memos/' + memo.memo_id + '/edit'"
+            class="btn-secondary mr-1"
+          >
+            Edit
+          </router-link>
+          <a
+            href="#"
+            class="btn-alert"
+            @click="modal = ! modal"
+          >
+            Delete
+          </a>
+          <div
+            v-if="modal"
+            class="absolute modal mt-2"
+          >
+            <p>Are you sure you want to delete this record ?</p>
+            <div class="flex-end flex-center mt-2">
+              <button
+                class="btn mr-2"
+                @click="modal = ! modal"
+              >
+                Cancel
+              </button>
+              <button
+                class="btn-alert-strong"
+                @click="destroy"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="modal"
+          class="modal-background"
+          @click="modal = ! modal"
+         />
+    </div>
+<!--           <TagBox :memo="memo" />-->
+      <p class="title-section pt-3">
+        Memo
+      </p>
+      <h1 class="memo-title">
+        {{ memo.name }}
+      </h1>
+      <p
+        class="memo-style pt-1"
+        v-html="memoMarkdown"
+      ></p>
+      <div class="memo-change my-2 p-1">
+        @last update : {{ memo.last_updated }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -34,7 +77,7 @@
         md = new MarkdownIt();
 
     export default {
-        name: "MemoShow",
+        name: 'MemoShow',
         components: {
             // TagBox
         },
@@ -50,29 +93,29 @@
                 return md.render(this.memo.memo)
             }
         },
-        methods: {
-            destroy: function () {
-                axios.delete('/api/memos/' + this.$route.params.id)
-                    .then(response => {
-                        this.$router.push('/memos')
-                    })
-                    .catch(error => {
-                        alert('Internal Error, Unable to delete contact.')
-                    })
-            }
-        },
         mounted() {
             axios.get('/api/memos/' + this.$route.params.id)
                 .then(response => {
                     this.memo = response.data.data
                     this.loading = false
                 })
-                .catch(error => {
+                .catch(errorRes => {
                     this.loading = false
-                    if (error.response.status === 404) {
+                    if (errorRes.response.status === 404) {
                         this.$router.push('/memos')
                     }
                 })
+        },
+        methods: {
+            destroy: function () {
+                axios.delete('/api/memos/' + this.$route.params.id)
+                    .then(response => {
+                        this.$router.push('/memos')
+                    })
+                    .catch(errorRes => {
+                        alert('Internal Error, Unable to delete contact.' + errorRes)
+                    })
+            }
         }
     }
 </script>

resources/js/views/User/UserAdmin.vue

@@ -1,35 +1,66 @@
 <template>
-    <div>
-        <div class="flex mb-4">
-            <div class="avatar mr-2">
-                <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
-            </div>
-            <div class="flex-col flex-center">
-                <div><strong>{{ authUser.data.attributes.name }}</strong></div>
-                <div><strong>{{ authUser.data.attributes.email }}</strong></div>
-            </div>
-        </div>
-        <div v-if="authUser.data.attributes.is_admin">
-            <h2 class="mb-1">Ajouter un membre</h2>
-            <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
-            <form @submit.prevent="addMember">
-                <InputField name="name" type="text" label="Nom du nouveau membre" placeholder="Nom" @update:field="form.name = $event" :errors="errors" />
-                <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" @update:field="form.email = $event" :errors="errors" />
-                <button>Ajouter</button>
-            </form>
-        </div>
-
+  <div>
+    <div class="flex mb-4">
+      <div class="avatar mr-2">
+        <Avatar
+          :avatar="authUser.data.attributes.avatar"
+          size="large"
+          :alt="authUser.data.attributes.name"
+        />
+      </div>
+      <div class="flex-col flex-center">
+        <div><strong>{{ authUser.data.attributes.name }}</strong></div>
+        <div><strong>{{ authUser.data.attributes.email }}</strong></div>
+      </div>
     </div>
+    <div v-if="authUser.data.attributes.is_admin">
+      <h2 class="mb-1">
+        Ajouter un membre
+      </h2>
+      <AlertBox
+        v-if="alertType"
+        :type="alertType"
+        :message="alertMessage"
+        class="mb-1"
+      />
+      <form @submit.prevent="addMember">
+        <InputField
+          name="name"
+          type="text"
+          label="Nom du nouveau membre"
+          placeholder="Nom"
+          :errors="errors"
+          @update:field="form.name = $event"
+        />
+        <InputField
+          name="email"
+          type="email"
+          label="Adresse email du nouveau membre"
+          placeholder="E-mail"
+          :errors="errors"
+          @update:field="form.email = $event"
+        />
+        <button>Ajouter</button>
+      </form>
+    </div>
+      <div>
+          <h2>Liste des utilisateurs</h2>
+          <ul>
+              <li v-if="loading">> Loading...</li>
+              <li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
+          </ul>
+      </div>
+  </div>
 </template>
 
 <script>
-    import {mapGetters} from "vuex";
-    import Avatar from "../../components/Avatar";
-    import AlertBox from "../../components/AlertBox";
-    import InputField from "../../components/InputField";
+    import {mapGetters} from 'vuex';
+    import Avatar from '../../components/Avatar';
+    import AlertBox from '../../components/AlertBox';
+    import InputField from '../../components/InputField';
 
     export default {
-        name: "UserAdmin",
+        name: 'UserAdmin',
         components: {
             Avatar, AlertBox, InputField,
         },
@@ -42,6 +73,8 @@
                 alertType: '',
                 alertMessage: '',
                 errors: null,
+                loading: '',
+                users: null,
             }
         },
         computed: {
@@ -49,6 +82,17 @@
                 authUser: 'authUser',
             })
         },
+        mounted() {
+            axios.get('/api/users')
+                .then(response => {
+                    this.users = response.data.data
+                    this.loading = false
+                })
+                .catch(error => {
+                    this.loading = false
+                    alert('Unable to fetch users.')
+                })
+        },
         methods: {
             addMember: function () {
                 console.log('addMember')
@@ -64,11 +108,11 @@
                         .catch(errors => {
                             console.log(errors)
                             this.alertType = 'error'
-                            this.alertMessage = `L'utilisateur n'a pas été créé`
+                            this.alertMessage = 'L\'utilisateur n\'a pas été créé'
                         })
                 } else {
                     this.alertType = 'error'
-                    this.alertMessage = `Le formulaire n'est pas correctement renseigné.`
+                    this.alertMessage = 'Le formulaire n\'est pas correctement renseigné.'
                 }
             }
         }

resources/js/views/User/UserProfil.vue

@@ -8,7 +8,7 @@
     import { mapGetters } from 'vuex'
 
     export default {
-        name: "Profil",
+        name: 'Profil',
         computed: {
             ...mapGetters({
                 authUser: 'authUser',