Add old classes view

client/src/components/school-class/ClassSelectionWidget.vue

@@ -2,7 +2,8 @@
   <div class="class-selection" v-if="currentClassSelection">
     <div data-cy="class-selection" class="class-selection__selected-class selected-class"
          @click="showPopover = !showPopover">
-      <current-class class="selected-class__text"></current-class> <chevron-down class="selected-class__dropdown-icon"></chevron-down>
+      <current-class class="selected-class__text"></current-class>
+      <chevron-down class="selected-class__dropdown-icon"></chevron-down>
     </div>
     <widget-popover v-if="showPopover"
                     @hide-me="showPopover = false"
@@ -13,9 +14,13 @@
           :key="schoolClass.id"
           :label="schoolClass.name"
           :item="schoolClass"
-          @click="updateFilter(schoolClass)">
+          @click="updateSelectedClass(schoolClass)">
         {{schoolClass.name}}
       </li>
+      <li class="popover-links__link popover-links__link--large popover-links__divider">Klasse erfassen</li>
+      <li class="popover-links__link popover-links__link--large popover-links__divider">
+        <router-link :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>
+      </li>
     </widget-popover>
   </div>
 </template>
@@ -24,8 +29,10 @@
   import WidgetPopover from '@/components/WidgetPopover';
   import ChevronDown from '@/components/icons/ChevronDown';
   import CurrentClass from '@/components/school-class/CurrentClass';
+
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
-  import UPDATE_USER_SETTING from '@/graphql/gql/mutations/updateUserSetting.gql';
+
+  import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
 
   export default {
     components: {
@@ -41,6 +48,8 @@
       }
     },
 
+    mixins: [updateSelectedClassMixin],
+
     apollo: {
       me: {
         query: ME_QUERY,
@@ -67,22 +76,8 @@
     },
 
     methods: {
-      updateFilter(selectedClass) {
-        this.$apollo.mutate({
-          mutation: UPDATE_USER_SETTING,
-          variables: {
-            input: {
-              id: selectedClass.id
-            }
-          },
-          update(store, data) {
-            let meData = store.readQuery({query: ME_QUERY});
-            meData.me.selectedClass = selectedClass;
-            store.writeQuery({query: ME_QUERY, data: meData});
-          }
-        }).catch((error) => {
-          console.log('fail', error)
-        });
+      updateSelectedClassAndHidePopover(selectedClass) {
+        this.updateSelectedClass(selectedClass);
         this.showPopover = false;
       }
     },
@@ -139,9 +134,4 @@
       fill: $color-brand;
     }
   }
-
-  .popover-links__link {
-    cursor: pointer;
-  }
-
 </style>

client/src/mixins/updateSelectedClass.js

@@ -0,0 +1,24 @@
+import ME_QUERY from '@/graphql/gql/meQuery.gql';
+import UPDATE_USER_SETTING from '@/graphql/gql/mutations/updateUserSetting.gql';
+
+export default {
+  methods: {
+    updateSelectedClass(selectedClass) {
+      return this.$apollo.mutate({
+        mutation: UPDATE_USER_SETTING,
+        variables: {
+          input: {
+            id: selectedClass.id
+          }
+        },
+        update(store, data) {
+          let meData = store.readQuery({query: ME_QUERY});
+          meData.me.selectedClass = selectedClass;
+          store.writeQuery({query: ME_QUERY, data: meData});
+        }
+      }).catch((error) => {
+        console.log('fail', error)
+      });
+    }
+  },
+}

client/src/pages/oldClasses.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="old-classes">
+    <h1 class="old-classes__title">Alte Klassen</h1>
+    <ul class="old-classes__list simple-list">
+      <li class="simple-list__item" v-for="schoolClass in me.oldClasses" :key="schoolClass.id"><span
+        class="old-classes__class-name">{{schoolClass.name}}</span> <a
+        class="simple-list__action" @click="updateSelectedClassAndGoToClassList(schoolClass)">Anzeigen</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import gql from 'graphql-tag';
+
+  import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
+
+  export default {
+    mixins: [updateSelectedClassMixin],
+
+    methods: {
+      updateSelectedClassAndGoToClassList(selectedClass) {
+        this.updateSelectedClass(selectedClass).then(() => {
+          console.log('roger');
+          this.$router.push({name: 'my-class'});
+        });
+      }
+    },
+
+    apollo: {
+      me: {
+        query: gql`
+        query OldClassesQuery {
+          me {
+            id
+            oldClasses {
+              edges {
+                node {
+                  id
+                  name
+                }
+              }
+            }
+          }
+        }
+        `,
+        update(data) {
+          return this.$getRidOfEdges(data).me;
+        }
+      }
+    },
+
+    data: () => ({
+      me: {
+        oldClasses: []
+
+      }
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .old-classes {
+    &__class-name {
+      font-family: $sans-serif-font-family;
+    }
+  }
+</style>

client/src/router/index.js

@@ -31,6 +31,7 @@ import login from '@/pages/login'
 import registration from '@/pages/registration'
 import waitForClass from '@/pages/waitForClass'
 import joinClass from '@/pages/joinClass'
+import oldClasses from '@/pages/oldClasses';
 
 import store from '@/store/index';
 
@@ -111,6 +112,13 @@ const routes = [
       {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: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},

server/users/schema.py

@@ -1,5 +1,5 @@
 import graphene
-from django.db.models import Prefetch, Value, CharField
+from django.db.models import Prefetch, Value, CharField, Q
 from django.db.models.functions import Concat
 from graphene import relay, ObjectType
 from graphene_django import DjangoObjectType
@@ -34,6 +34,7 @@ class UserNode(DjangoObjectType):
     permissions = graphene.List(graphene.String)
     selected_class = graphene.Field(SchoolClassNode)
     is_teacher = graphene.Boolean()
+    old_classes = DjangoFilterConnectionField(SchoolClassNode)
 
     class Meta:
         model = User
@@ -54,6 +55,14 @@ class UserNode(DjangoObjectType):
     def resolve_is_teacher(self, info):
         return self.is_teacher()
 
+    def resolve_school_classes(self, info):
+        return SchoolClass.objects.filter(
+            Q(schoolclassmember__active=True, schoolclassmember__user=self) | Q(pk=self.selected_class().pk)).distinct()
+
+    def resolve_old_classes(self, info):
+        return SchoolClass.objects.filter(schoolclassmember__active=False, schoolclassmember__user=self)
+
+
 class ClassMemberNode(ObjectType):
     """
     We need to build this ourselves, because we want the active property on the node, because providing it on the