<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" data-cy="old-class-item"><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 OLD_CLASSES_QUERY from '@/graphql/gql/oldClasses.gql';

  import updateSelectedClassMixin from '@/mixins/updateSelectedClass';

  export default {
    mixins: [updateSelectedClassMixin],

    methods: {
      updateSelectedClassAndGoToClassList(selectedClass) {
        this.updateSelectedClass(selectedClass).then(() => {
          this.$router.push({name: 'my-class'});
        });
      }
    },

    // todo: test this in front- and backend
    apollo: {
      me: {
        query: OLD_CLASSES_QUERY,
        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>
