vbv/client/src/stores/circle.ts

import * as log from 'loglevel';

import {defineStore} from 'pinia'

import type {Circle, CircleChild, CircleCompletion, LearningContent, LearningUnit, LearningUnitQuestion} from '@/types'
import {itGet, itPost} from '@/fetchHelpers';
import {parseLearningSequences} from '@/services/circle';
import {useAppStore} from '@/stores/app';

export type CircleStoreState = {
  circleData: Circle;
  completionData: CircleCompletion[];
  currentLearningContent: LearningContent | undefined;
  currentSelfEvaluation: LearningUnit | undefined;
  page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION';
}

export const useCircleStore = defineStore({
  id: 'circle',
  state: () => {
    return {
      circleData: {},
      completionData: {},
      currentLearningContent: undefined,
      currentSelfEvaluation: undefined,
      page: 'INDEX',
    } as CircleStoreState;
  },
  getters: {
    flatChildren: (state) => {
      const result:CircleChild[] = [];
      state.circleData.learningSequences.forEach((learningSequence) => {
        learningSequence.learningUnits.forEach((learningUnit) => {
          learningUnit.children.forEach((learningUnitQuestion) => {
            result.push(learningUnitQuestion);
          })
          learningUnit.learningContents.forEach((learningContent) => {
            result.push(learningContent);
          });
        });
      });
      return result;
    },
  },
  actions: {
    async loadCircle(slug: string) {
      try {
        this.circleData = await itGet(`/learnpath/api/circle/${slug}/`);
        this.circleData.learningSequences = parseLearningSequences(this.circleData.children);
        this.completionData = await itGet(`/api/completion/circle/${this.circleData.translation_key}/`);
        this.parseCompletionData();
      } catch (error) {
        log.error(error);
        return error
      }
    },
    async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
      try {
        page.completed = flag;
        this.completionData = await itPost('/api/completion/circle/mark/', {
          page_key: page.translation_key,
          completed: page.completed,
        });
        this.parseCompletionData();
      } catch (error) {
        log.error(error);
        return error
      }
    },
    parseCompletionData() {
      this.flatChildren.forEach((page) => {
        const pageIndex = this.completionData.findIndex((e) => {
          return e.page_key === page.translation_key;
        });
        if (pageIndex >= 0) {
          page.completed = this.completionData[pageIndex].completed;
        } else {
          page.completed = undefined;
        }
      });
    },
    openLearningContent(learningContent: LearningContent) {
      this.currentLearningContent = learningContent;
      const appStore = useAppStore();
      appStore.showMainNavigationBar = false;
      this.page = 'LEARNING_CONTENT';
    },
    closeLearningContent() {
      this.currentLearningContent = undefined;
      const appStore = useAppStore();
      appStore.showMainNavigationBar = true;
      this.page = 'INDEX';
    },
    openSelfEvaluation(learningUnit: LearningUnit) {
      this.page = 'SELF_EVALUATION';
      const appStore = useAppStore();
      appStore.showMainNavigationBar = false;
      this.currentSelfEvaluation = learningUnit;
    },
    closeSelfEvaluation() {
      this.currentSelfEvaluation = undefined;
      const appStore = useAppStore();
      appStore.showMainNavigationBar = true;
      this.page = 'INDEX';
    },
    calcSelfEvaluationStatus(learningUnit: LearningUnit) {
      if (learningUnit.children.length > 0) {
        if (learningUnit.children.every((q) => q.completed)) {
          return true;
        }
        if (learningUnit.children.some((q) => q.completed !== undefined)) {
          return false;
        }
      }
      return undefined;
    },
    continueFromLearningContent() {
      if (this.currentLearningContent) {
        this.markCompletion(this.currentLearningContent, true);

        const nextLearningContent = this.currentLearningContent.nextLearningContent;
        const currentParent = this.currentLearningContent.parentLearningUnit;
        const nextParent = nextLearningContent?.parentLearningUnit;

        if (
          currentParent && currentParent.id &&
          currentParent.id !== nextParent?.id &&
          currentParent.children.length > 0
        ) {
          // go to self evaluation
          this.openSelfEvaluation(currentParent);
        } else if (this.currentLearningContent.nextLearningContent) {
          this.openLearningContent(this.currentLearningContent.nextLearningContent);
        } else {
          this.closeLearningContent();
        }
      } else {
        log.error('currentLearningContent is undefined');
      }
    },
    continueFromSelfEvaluation() {
      if (this.currentSelfEvaluation) {
        const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
        if (nextContent) {
          this.openLearningContent(nextContent);
        } else {
          this.closeSelfEvaluation();
        }
      } else {
        log.error('currentSelfEvaluation is undefined');
      }
    }
  }
})