<template>
  <div class="old-classes">
    <h1 class="old-classes__title">Alte Klassen</h1>
    <ul class="old-classes__list simple-list">
      <li
        :key="schoolClass.id"
        class="simple-list__item"
        data-cy="old-class-item"
        v-for="schoolClass in me.oldClasses"><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/queries/oldClasses.gql';

  import updateSelectedClassMixin from '@/mixins/update-selected-class';

  export default {
    mixins: [updateSelectedClassMixin],

    data: () => ({
      me: {
        oldClasses: []
      }
    }),

    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;
        }
      }
    },
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .old-classes {
    &__class-name {
      font-family: $sans-serif-font-family;
    }
  }
</style>
