add cover to profile & logout on dashbord

app/Models/User.php

@@ -67,13 +67,19 @@ class User extends Authenticatable
     {
         return $this->morphOne(Image::class, 'imageable')
             ->where('location', 'profile')
-            ->orderBy('id', 'desc');
+            ->orderBy('id', 'desc')
+            ->withDefault(function ($userImage) {
+                $userImage->path = 'images/default-cover.jpg';
+            });
     }
 
     public function coverImage(): MorphOne
     {
         return $this->morphOne(Image::class, 'imageable')
             ->where('location', 'cover')
-            ->orderBy('id', 'desc');
+            ->orderBy('id', 'desc')
+            ->withDefault(function ($userImage) {
+                $userImage->path = 'images/default-cover.jpg';
+            });
     }
 }

resources/js/components/TopBar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex-between flex-center py-1 px-2 topbar">
+    <div class="flex-between flex-middle py-1 px-2 topbar">
-        <router-link v-if="authUser" :to="'/profil'" class="flex-middle avatar-box">
+        <router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
             <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
             {{ authUser.data.attributes.name }}
         </router-link>
@@ -10,14 +10,9 @@
                 <svg-vue icon="search" />
             </button>
         </form>
-        <div v-if="authUser">
+        <router-link to="/dashboard" v-if="authUser" class="mr-1">
-            <router-link to="/dashboard" class="mr-1">
+            <svg-vue icon="params" />
-                <svg-vue icon="params" />
+        </router-link>
-            </router-link>
-            <a href="#" @click.prevent="logout" class="nav-link">
-                <svg-vue icon="logout" />
-            </a>
-        </div>
         <router-link v-else to="/login">
             Se connecter
         </router-link>

resources/js/components/UploadableImage.vue

@@ -1,12 +1,10 @@
 <template>
-    <div>
+    <img
-        <img
+        v-if="image"
-            v-if="image"
+        :class="classes"
-            :class="classes"
+        :src="imageObject.data.attributes.path"
-            :src="imageObject.data.attributes.path"
+        ref="image"
-            ref="image"
+        :alt="alt">
-            :alt="alt">
-    </div>
 </template>
 
 <script>

resources/js/router.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from "./views/Home"
-import Profil from "./views/User/UserProfile";
+import Profile from "./views/User/ProfileUser";
+import ShowUser from "./views/User/ShowUser";
 import DashBoard from "./views/DashBoard";
 import CssTesteur from "./views/CssTesteur";
 import MemoIndex from "./views/Memo/MemoIndex";
@@ -22,8 +23,12 @@ export default new VueRouter({
             meta: { title: 'Home'}
         },
         {
-            path: '/profil', name: 'profil', component: Profil,
+            path: '/profile', name: 'profile', component: Profile,
-            meta: { title: 'Profil'}
+            meta: { title: 'Profile'}
+        },
+        {
+            path: '/users/:id', name: 'user', component: ShowUser,
+            meta: { title: 'User'}
         },
         {
             path: '/dashboard', name: 'dashboard', component: DashBoard,

resources/js/views/DashBoard.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="m-2">
-        <h1 class="mb-3">Administration</h1>
+        <div class="flex-between">
+            <h1 class="mb-3">Administration</h1>
+            <a href="#" @click.prevent="logout" class="btn btn-icon">
+                <svg-vue icon="logout" /> Déconnexion
+            </a>
+        </div>
         <UserAdmin />
     </div>
 </template>

resources/js/views/User/ProfileUser.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="relative">
+            <UploadableImage
+                :image-width=1500
+                :image-height=500
+                location="cover"
+                :image="authUser.data.attributes.cover_image"
+                :author="authUser"
+                :id="authUser.data.user_id"
+                :model="authUser.data.type"
+                classes="cover"
+                :alt="authUser.data.attributes.name"/>
+            <div class="absolute b-0">
+                <UploadableImage
+                    :image-width=750
+                    :image-height=750
+                    location="profile"
+                    :image="authUser.data.attributes.profile_image"
+                    :author="authUser"
+                    :id="authUser.data.user_id"
+                    :model="authUser.data.type"
+                    classes="profile absolute"
+                    :alt="authUser.data.attributes.name"/>
+                <h1 class="profile-title">{{ authUser.data.attributes.name }}</h1>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import UploadableImage from "../../components/UploadableImage";
+
+    export default {
+        name: 'Profil',
+        components: {
+            UploadableImage
+        },
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser',
+            })
+        },
+    }
+</script>

resources/js/views/User/ShowUser.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="relative">
+            <img
+                class="cover"
+                :src="user.attributes.cover_image.data.attributes.path"
+                :alt="user.attributes.name"/>
+        </div>
+        <h1>{{ user.attributes.name }}</h1>
+    </div>
+</template>
+
+<script>
+    import UploadableImage from "../../components/UploadableImage";
+
+    export default {
+        name: 'Profile',
+        components: {
+            UploadableImage
+        },
+        data: function () {
+            return {
+                loading: true,
+                user: null,
+            }
+        },
+        mounted() {
+            axios.get('/api/users/' + this.$route.params.id)
+                .then(response => {
+                    this.user = response.data.data
+                    this.loading = false
+                })
+                .catch(errorRes => {
+                    this.loading = false
+                    if (errorRes.response.status === 404) {
+                        this.$router.push('/user')
+                    }
+                })
+        },
+    }
+</script>

resources/js/views/User/UserAdmin.vue

@@ -37,7 +37,7 @@
             <ul v-if="userListToggle"  class="box-toggle-content">
                 <Loader v-if="loading" />
                 <li v-else v-for="user in users">
-                    <router-link :to="'/user/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
+                    <router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ user.data.attributes.is_admin }}
                 </li>
             </ul>
             </transition>

resources/js/views/User/UserProfile.vue

@@ -1,18 +0,0 @@
-<template>
-    <div class="p-2">
-        <h1>{{ authUser.data.attributes.name }}</h1>
-    </div>
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-
-    export default {
-        name: 'Profil',
-        computed: {
-            ...mapGetters({
-                authUser: 'authUser',
-            })
-        },
-    }
-</script>

resources/sass/app.scss

@@ -22,6 +22,7 @@
 @import "components/owfont-regular";
 
 @import "pages/auth";
+@import "pages/users";
 @import "pages/memos";
 @import "pages/meteo";
 @import "pages/games";

resources/sass/components/_btn.scss

@@ -46,3 +46,23 @@
         background-color: $dark;
     }
 }
+
+.btn-icon {
+    @extend .btn;
+    display: flex;
+    align-items: center;
+    height: 4rem;
+
+    &:hover svg {
+        fill: $white;
+    }
+
+    svg {
+        height: 3rem;
+        margin-right: 1rem;
+
+        &:hover {
+            fill: $white;
+        }
+    }
+}

resources/sass/components/images.scss

@@ -5,6 +5,10 @@
     object-position: 50% 50%;
 }
 
-.test {
+.profile {
-    height: 30rem;
+    width: 20rem;
+    height: 20rem;
+    border-radius: 50%;
+    left: 3rem;
+    bottom: -3rem;
 }

resources/sass/pages/users.scss

@@ -0,0 +1,8 @@
+.profile-title {
+    position: relative;
+    color: $white;
+    z-index: 2;
+    padding-bottom: 2rem;
+    left: 25rem;
+    text-shadow: 1px 1px 2px $dark;
+}