Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add cover to profile & logout on dashbord

Browse Source
This commit is contained in:
Romulus21
2020-04-19 10:57:43 +02:00
parent a12af09102
commit c71f3ca4d8
13 changed files with 156 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Models/User.php
View File

@@ -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';
});
}
}

15
resources/js/components/TopBar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex-between flex-center py-1 px-2 topbar">
<router-link v-if="authUser" :to="'/profil'" class="flex-middle avatar-box">
<div class="flex-between flex-middle py-1 px-2 topbar">
<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" class="mr-1">
<svg-vue icon="params" />
</router-link>
<a href="#" @click.prevent="logout" class="nav-link">
<svg-vue icon="logout" />
</a>
</div>
<router-link to="/dashboard" v-if="authUser" class="mr-1">
<svg-vue icon="params" />
</router-link>
<router-link v-else to="/login">
Se connecter
</router-link>

14
resources/js/components/UploadableImage.vue
View File

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

11
resources/js/router.js vendored
View File

@@ -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,
meta: { title: 'Profil'}
path: '/profile', name: 'profile', component: Profile,
meta: { title: 'Profile'}
},
{
path: '/users/:id', name: 'user', component: ShowUser,
meta: { title: 'User'}
},
{
path: '/dashboard', name: 'dashboard', component: DashBoard,

7
resources/js/views/DashBoard.vue
View File

@@ -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>

46
resources/js/views/User/ProfileUser.vue Normal file
View File

@@ -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>

41
resources/js/views/User/ShowUser.vue Normal file
View File

@@ -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>

2
resources/js/views/User/UserAdmin.vue
View File

@@ -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>

18
resources/js/views/User/UserProfile.vue
View File

@@ -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>

1
resources/sass/app.scss vendored
View File

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

20
resources/sass/components/_btn.scss vendored
View File

@@ -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;
}
}
}

8
resources/sass/components/images.scss vendored
View File

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

8
resources/sass/pages/users.scss vendored Normal file
View File

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