skillbox/client/src/pages/activity.vue

<template>
  <div class="activity">
    <h1 class="activity__heading">Meine Aktivitäten</h1>
    <div class="activity__categories">
      <a
        class="activity__category default-link"
        data-cy="activity-category"
        :class="{ 'activity__category--active': selectedCategory === HIGHLIGHTS }"
        @click="selectedCategory = HIGHLIGHTS"
        >Markierungen</a
      >
      <a
        class="activity__category default-link"
        data-cy="activity-category"
        :class="{ 'activity__category--active': selectedCategory === BOOKMARKS }"
        @click="selectedCategory = BOOKMARKS"
        >Lesezeichen</a
      >
      <a
        class="activity__category default-link"
        data-cy="activity-category"
        :class="{ 'activity__category--active': selectedCategory === ASSIGNMENTS }"
        @click="selectedCategory = ASSIGNMENTS"
        >Ergebnisse</a
      >
      <a
        class="activity__category default-link"
        data-cy="activity-category"
        :class="{ 'activity__category--active': selectedCategory === SURVEYS }"
        @click="selectedCategory = SURVEYS"
        >Übungen</a
      >
    </div>
    <div class="activity__activities">
      <h2>Activities go here</h2>
      <activity-list
        :topics="highlightTopics"
        property="myHighlights"
        v-if="selectedCategory === HIGHLIGHTS"
        v-slot="{ item }"
      >
        <mark
          class="highlight"
          :class="[`highlight--${item?.color}`]"
          >{{ item?.text }}</mark
        >
        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
      </activity-list>
      <activity-list
        :topics="bookmarkTopics"
        property="myBookmarks"
        v-if="selectedCategory === BOOKMARKS"
        v-slot="{ item }"
      >
        <div>Lesezeichen: {{ item.id }}</div>
        <div v-if="item.note">Notiz: {{ item.note.text }}</div>
      </activity-list>
      <activity-list
        :topics="submissionsTopics"
        property="mySubmissions"
        v-if="selectedCategory === ASSIGNMENTS"
        v-slot="{ item }"
      >
        Submission: {{ item.text }}
      </activity-list>
      <activity-list
        :topics="answersTopics"
        property="myAnswers"
        v-if="selectedCategory === SURVEYS"
        v-slot="{ item }"
      >
        Übung: {{ item.survey.title }}
      </activity-list>
      <!-- <div -->
      <!--   v-for="topic in highlightTopics" -->
      <!--   :key="topic?.id" -->
      <!-- > -->
      <!--   <h4>{{ topic?.title }}</h4> -->
      <!--   <template v-for="module in topic?.modules"> -->
      <!--     <div -->
      <!--       class="activity__module" -->
      <!--       v-if="module?.myHighlights?.length" -->
      <!--       :key="module?.id" -->
      <!--     > -->
      <!--       <div -->
      <!--         v-for="highlight in module.myHighlights" -->
      <!--         :key="highlight.id" -->
      <!--       > -->
      <!--         <activity-entry :to="`/${highlight.page.path}`"> -->
      <!--           <mark -->
      <!--             class="highlight" -->
      <!--             :class="[`highlight--${highlight?.color}`]" -->
      <!--             >{{ highlight?.text }}</mark -->
      <!--           > -->
      <!--         </activity-entry> -->
      <!--       </div> -->
      <!--     </div> -->
      <!--   </template> -->
      <!-- </div> -->
      <!-- <div v-if="selectedCategory === BOOKMARKS"> -->
      <!--   <div -->
      <!--     v-for="topic in bookmarkTopics" -->
      <!--     :key="topic?.id" -->
      <!--   > -->
      <!--     <h4>{{ topic?.title }}</h4> -->
      <!--     <template v-for="module in topic?.modules"> -->
      <!--       <div -->
      <!--         class="activity__module" -->
      <!--         v-if="module?.myBookmarks?.length" -->
      <!--         :key="module?.id" -->
      <!--       > -->
      <!--         <div -->
      <!--           v-for="bookmark in module?.myBookmarks" -->
      <!--           :key="bookmark?.id" -->
      <!--         > -->
      <!--           <pre>{{ bookmark }}</pre> -->
      <!--           <activity-entry :to="`/${bookmark.path}`"> > Lesezeichen: {{ bookmark.id }} </activity-entry> -->
      <!--         </div> -->
      <!--       </div> -->
      <!--     </template> -->
      <!--   </div> -->
      <!-- </div> -->
      <!-- <div v-if="selectedCategory === ASSIGNMENTS"> -->
      <!--   <h3>ASSIGNMENTS</h3> -->
      <!--   <div -->
      <!--     v-for="topic in submissionsTopics" -->
      <!--     :key="topic?.id" -->
      <!--   > -->
      <!--     <h4>{{ topic?.title }}</h4> -->
      <!--     <template v-for="module in topic?.modules"> -->
      <!--       <div -->
      <!--         class="activity__module" -->
      <!--         v-if="module?.mySubmissions?.length" -->
      <!--         :key="module.id" -->
      <!--       > -->
      <!--         <div -->
      <!--           v-for="submission in module?.mySubmissions" -->
      <!--           :key="submission?.id" -->
      <!--         > -->
      <!--           <pre>{{ submission }}</pre> -->
      <!--           <activity-entry :to="`/module/${submission.assignment.module.slug}#${submission.assignment.id}`"> -->
      <!--             Submission {{ submission?.text }}</activity-entry -->
      <!--           > -->
      <!--         </div> -->
      <!--       </div> -->
      <!--     </template> -->
      <!--   </div> -->
      <!-- </div> -->
      <!-- <div v-if="selectedCategory === SURVEYS"> -->
      <!--   <h3>SURVEYS</h3> -->
      <!--   <div -->
      <!--     v-for="topic in answersTopics" -->
      <!--     :key="topic?.id" -->
      <!--   > -->
      <!--     <h4>{{ topic?.title }}</h4> -->
      <!--     <template v-for="module in topic?.modules"> -->
      <!--       <div -->
      <!--         v-if="module?.myAnswers?.length" -->
      <!--         :key="module.id" -->
      <!--       > -->
      <!--         <div -->
      <!--           class="activity__module" -->
      <!--           v-for="answer in module?.myAnswers" -->
      <!--           :key="answer.id" -->
      <!--         > -->
      <!--           <pre>{{ answer }}</pre> -->
      <!--           <activity-entry :to="{ name: 'profile' }"> Übung: {{ answer?.survey.title }}</activity-entry> -->
      <!--         </div> -->
      <!--       </div> -->
      <!--     </template> -->
      <!--   </div> -->
      <!-- </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { graphql } from '@/__generated__';
import { useQuery } from '@vue/apollo-composable';
import { ref, computed } from 'vue';
import ActivityEntry from '@/components/profile/ActivityEntry.vue';
import ActivityList from '@/components/profile/ActivityList.vue';
import { TopicNode } from '@/__generated__/graphql';

const HIGHLIGHTS = 'highlights';
const BOOKMARKS = 'bookmarks';
const ASSIGNMENTS = 'assignments';
const SURVEYS = 'surveys';

const selectedCategory = ref(HIGHLIGHTS);

const { result } = useQuery(
  graphql(`
    query MyActivitiesQuery {
      myActivities {
        topics {
          id
          title
          modules {
            id
            slug
            title
            metaTitle
            myHighlights {
              ...HighlightParts
            }
            myBookmarks {
              ... on ChapterBookmarkNode {
                chapter {
                  path
                }
                path
                note {
                  id
                  text
                }
              }
              ... on ContentBlockBookmarkNode {
                id
                uuid
                path
                contentBlock {
                  id
                  path
                }
                note {
                  id
                  text
                }
              }
              ... on ModuleBookmarkNode {
                path
                note {
                  id
                  text
                }
              }
            }
            mySubmissions {
              id
              text
              assignment {
                id
                title
                path
                module {
                  slug
                }
              }
            }
            myAnswers {
              id
              survey {
                path
                id
                title
              }
            }
          }
        }
      }
    }
  `)
);
const topics = computed(() => result.value?.myActivities?.topics || []);
const highlightTopics = computed(() => {
  return topics.value.filter((topic: TopicNode) => topic.modules?.some((module) => module?.myHighlights?.length));
});
const bookmarkTopics = computed(() => {
  return topics.value.filter((topic: TopicNode) => topic.modules?.some((module) => module?.myBookmarks?.length));
});
const submissionsTopics = computed(() => {
  return topics.value.filter((topic: TopicNode) => topic.modules?.some((module) => module?.mySubmissions?.length));
});
const answersTopics = computed(() => {
  return topics.value.filter((topic: TopicNode) => topic.modules?.some((module) => module?.myAnswers?.length));
});
</script>

<style lang="postcss">
.activity {
  &__heading {
    margin-bottom: var(--section-spacing);
  }

  &__categories {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--color-silver);
    padding-bottom: var(--medium-spacing);
  }

  &__category {
    color: inherit;
    flex-grow: 1;

    &--active {
      color: var(--color-brand);
    }
  }

  &__module {
    border-bottom: 1px solid var(--color-silver);
  }

  &__entry {
    padding: var(--medium-spacing) 0;
    border-top: 1px solid var(--color-silver);
  }
}
</style>