From 19b721388b62919cb34234e61a20c394e8086efb Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 24 Mar 2021 18:51:29 +0100
Subject: [PATCH] Add my teams page

---
 .../src/components/profile/ProfileSidebar.vue | 17 +++++++++
 client/src/pages/me/team.vue                  | 36 +++++++++++++++++++
 client/src/router/index.js                    | 27 ++------------
 client/src/router/me.names.js                 |  1 +
 client/src/router/me.routes.js                | 32 +++++++++++++++++
 5 files changed, 88 insertions(+), 25 deletions(-)
 create mode 100644 client/src/pages/me/team.vue
 create mode 100644 client/src/router/me.names.js
 create mode 100644 client/src/router/me.routes.js

diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 9ff98521..d3c089c4 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -19,6 +19,14 @@
             class="profile-sidebar__link">Meine Aktivitäten
           </router-link>
         </div>
+        <div
+          class="profile-sidebar__item"
+          @click="close">
+          <router-link
+            :to="myTeamPage"
+            class="profile-sidebar__link">Mein Team
+          </router-link>
+        </div>
       </div>
       <div class="profile-sidebar__section">
         <div class="profile-sidebar__item">
@@ -58,6 +66,7 @@
 
   import sidebarMixin from '@/mixins/sidebar';
   import LogoutWidget from '@/components/LogoutWidget';
+  import {MY_TEAM} from '@/router/me.names';
 
   export default {
 
@@ -70,6 +79,14 @@
       Cross
     },
 
+    computed: {
+      myTeamPage() {
+        return {
+          name: MY_TEAM
+        };
+      }
+    },
+
     methods: {
       close() {
         this.closeSidebar('profile');
diff --git a/client/src/pages/me/team.vue b/client/src/pages/me/team.vue
new file mode 100644
index 00000000..fa0d53b9
--- /dev/null
+++ b/client/src/pages/me/team.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="my-team">
+    <h1 class="my-team__heading">Mein Team</h1>
+    <div class="my-team__section">
+      <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
+      <a class="button button--primary">Zugangscode eingeben</a>
+    </div>
+    <div class="my-team__section">
+      <h2 class="my-team__subheading">Willst du ein neues Team erfassen?</h2>
+      <a class="button button--primary">Team erfassen</a>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {};
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .my-team {
+    &__heading {
+      margin-bottom: $section-spacing;
+    }
+
+    &__section {
+      margin-bottom: $section-spacing;
+    }
+
+    &__subheading {
+      @include heading-3;
+      margin-bottom: $large-spacing;
+    }
+  }
+</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 0912fcdf..d7a37e29 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -6,10 +6,6 @@ import instrumentOverview from '@/pages/instrumentOverview';
 import p404 from '@/pages/p404';
 import start from '@/pages/start';
 import submission from '@/pages/studentSubmission';
-import profilePage from '@/pages/profile';
-import profile from '@/components/profile/Profile';
-import myClass from '@/pages/myClass';
-import activity from '@/pages/activity';
 import Router from 'vue-router';
 import surveyPage from '@/pages/survey';
 import styleGuidePage from '@/pages/styleguide';
@@ -18,14 +14,12 @@ import emailVerification from '@/pages/email-verification';
 import licenseActivation from '@/pages/license-activation';
 import forgotPassword from '@/pages/forgot-password';
 import joinClass from '@/pages/joinClass';
-import oldClasses from '@/pages/oldClasses';
-import createClass from '@/pages/createClass';
-import showCode from '@/pages/showCode';
 import news from '@/pages/news';
 
 import moduleRoutes from './module.routes';
 import portfolioRoutes from './portfolio.routes';
 import onboardingRoutes from './onboarding.routes';
+import meRoutes from './me.routes';
 import authRoutes from './auth.routes';
 import roomRoutes from './room.routes';
 
@@ -50,24 +44,7 @@ const routes = [
   {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
   ...portfolioRoutes,
   {path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug'},
-  {
-    path: '/me',
-    component: profilePage,
-    children: [
-      {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
-      {path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
-      {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
-      {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
-      {
-        path: 'old-classes',
-        name: 'old-classes',
-        component: oldClasses,
-        meta: {isProfile: true},
-      },
-      {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
-      {path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
-    ],
-  },
+  ...meRoutes,
   {path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'public'}},
   {
     path: '/survey/:id',
diff --git a/client/src/router/me.names.js b/client/src/router/me.names.js
new file mode 100644
index 00000000..aabf403e
--- /dev/null
+++ b/client/src/router/me.names.js
@@ -0,0 +1 @@
+export const MY_TEAM = 'my-team';
diff --git a/client/src/router/me.routes.js b/client/src/router/me.routes.js
new file mode 100644
index 00000000..56d3a4c8
--- /dev/null
+++ b/client/src/router/me.routes.js
@@ -0,0 +1,32 @@
+import profilePage from '@/pages/profile';
+import profile from '@/components/profile/Profile';
+import myClass from '@/pages/myClass';
+import activity from '@/pages/activity';
+import oldClasses from '@/pages/oldClasses';
+import createClass from '@/pages/createClass';
+import showCode from '@/pages/showCode';
+import myTeam from '@/pages/me/team';
+
+import {MY_TEAM} from './me.names';
+
+export default [
+  {
+    path: '/me',
+    component: profilePage,
+    children: [
+      {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
+      {path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
+      {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
+      {path: 'my-team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
+      {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
+      {
+        path: 'old-classes',
+        name: 'old-classes',
+        component: oldClasses,
+        meta: {isProfile: true},
+      },
+      {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
+      {path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
+    ],
+  },
+];