<template>
  <div class="activity">
    <h1 class="activity__header">Meine Aktivitäten</h1>
    <activity-filter
      :filter="filter"
      @change-filter="filter = $event"
    />
    <loading-message v-if="loading">Aktivitäten werden geladen</loading-message>
    <div class="modules">
      <module-activity
        :filter="filter"
        :module="module"
        class="activity"
        v-for="(module, id) in modules"
        :key="id"
      />
    </div>
    <instrument-activity
      :filter="filter"
      :instrument="instrument"
      v-for="(instrument, id) in instruments"
      :key="id"
    />
  </div>
</template>

<script>
import ModuleActivity from '@/components/profile/ModuleActivity.vue';
import InstrumentActivity from '@/components/profile/InstrumentActivity.vue';
import ActivityFilter from '@/components/profile/ActivityFilter.vue';
import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';
import LoadingMessage from '@/components/ui/loadingMessage.vue';

export default {
  components: {
    LoadingMessage,
    ModuleActivity,
    InstrumentActivity,
    ActivityFilter,
  },

  apollo: {
    modules: {
      query: MY_ACTIVITY_QUERY,
      update(data) {
        this.loading = false;
        return this.$getRidOfEdges(data).myActivity;
      },
      pollInterval: 15000,
    },
    instruments: {
      query: MY_ACTIVITY_QUERY,
      update(data) {
        this.loading = false;
        return this.$getRidOfEdges(data).myInstrumentActivity;
      },
      pollInterval: 15000,
    },
  },

  data() {
    return {
      modules: [],
      instruments: [],
      filter: '',
      loading: true,
    };
  },
};
</script>

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

.module-activity {
  margin-bottom: $large-spacing;
}
</style>
