From cf1bcb0eb0f8c0fa0f760e029252f442849baa0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20H=C3=B8vik?= <andehovi@stud.ntnu.no> Date: Fri, 19 Apr 2024 07:15:51 +0200 Subject: [PATCH] Added setup to components in UpdateUserProfile --- .../UpdateUserComponents/UpdateUserLayout.vue | 25 +++++++++++++++++++ .../UserProfile/UserProfileLayout.vue | 8 +++--- src/router/index.ts | 16 ++++++++---- src/views/UpdateUser/UpdateUserView.vue | 12 +++++++++ 4 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 src/components/UpdateUserComponents/UpdateUserLayout.vue create mode 100644 src/views/UpdateUser/UpdateUserView.vue diff --git a/src/components/UpdateUserComponents/UpdateUserLayout.vue b/src/components/UpdateUserComponents/UpdateUserLayout.vue new file mode 100644 index 0000000..f2ae1a5 --- /dev/null +++ b/src/components/UpdateUserComponents/UpdateUserLayout.vue @@ -0,0 +1,25 @@ +<script setup lang="ts"> + +</script> + +<template> + <div class="container text-center"> + <div class="row"> + <div class="col">User profile</div> + <div class="col"> update user form</div> + </div> + <!-- Maybe a profile-pictures here that collapses or not --> + <div class="row"> + <div class="col">User profile pictures</div> + </div> + <!-- Div that contains the configuration --> + <div class="row"> + <div class="col">Configuration</div> + </div> + </div> + +</template> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue index 6734d71..6d212ad 100644 --- a/src/components/UserProfile/UserProfileLayout.vue +++ b/src/components/UserProfile/UserProfileLayout.vue @@ -15,16 +15,19 @@ let route = useRouter() function toRoadmap(){ route.push('/roadmap') } + +function toUpdateUserSettings(){ + route.push('/update-user') +} </script> <template> - <Menu></Menu> <div class="container text-center"> <div class="row"> <div class="col"> <img src="/src/assets/userprofile.png" class="img-fluid"> <p class="h2">Username</p> - <p><a class="link-dark" href="#">Edit profile</a></p> + <p><a class="link-dark" @click="toUpdateUserSettings" href="#">Edit profile</a></p> </div> </div> <div class="row"> @@ -120,7 +123,6 @@ function toRoadmap(){ </div> </div> </div> - <Footer></Footer> </template> <style scoped> diff --git a/src/router/index.ts b/src/router/index.ts index d8c0f7c..89735e9 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -4,6 +4,7 @@ import LoginView from '../views/Authentication/LoginView.vue'; import { useUserInfoStore } from '@/stores/UserStore'; import UserProfileView from "@/views/User/UserProfileView.vue"; import SignUp from '@/components/SignUp/SignUp.vue' +import UpdateUserView from "@/views/UpdateUser/UpdateUserView.vue"; const routes = [ @@ -33,6 +34,16 @@ const routes = [ name: 'test', component: () => import('@/views/TestView.vue'), }, + { + path: '/profile', + name: 'profile', + component: UserProfileView + }, + { + path: 'update-user', + name: 'update-user', + component: UpdateUserView + }, { path: 'roadmap', name: 'roadmap', @@ -71,11 +82,6 @@ const routes = [ name: 'login', component: LoginView, }, - { - path: '/profile', - name: 'profile', - component: UserProfileView - }, { path: '/sign-up', name: 'sign up', diff --git a/src/views/UpdateUser/UpdateUserView.vue b/src/views/UpdateUser/UpdateUserView.vue new file mode 100644 index 0000000..aae915c --- /dev/null +++ b/src/views/UpdateUser/UpdateUserView.vue @@ -0,0 +1,12 @@ +<script setup lang="ts"> + +import UpdateUserLayout from "@/components/UpdateUserComponents/UpdateUserLayout.vue"; +</script> + +<template> +<UpdateUserLayout></UpdateUserLayout> +</template> + +<style scoped> + +</style> \ No newline at end of file -- GitLab