Refactor learninPath according to the new page code hierarchy

client/src/components/FeedbackForm.vue

@@ -124,18 +124,18 @@
 </template>
 
 <script setup lang="ts">
-import {
-  PERCENTAGES,
-  RATINGS,
-  YES_NO,
-} from "@/components/learningPath/feedback.constants";
-import FeedbackCompletition from "@/components/learningPath/FeedbackCompletition.vue";
-import FeedbackIntro from "@/components/learningPath/FeedbackIntro.vue";
-import LearningContentNavigation from "@/components/learningPath/LearningContentNavigation.vue";
 import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
 import ItTextarea from "@/components/ui/ItTextarea.vue";
 import { graphql } from "@/gql/";
 import type { SendFeedbackInput } from "@/gql/graphql";
+import LearningContentNavigation from "@/pages/learningPath/learningContentPage/LearningContentNavigation.vue";
+import FeedbackCompletition from "@/pages/learningPath/learningContentPage/feedback/FeedbackCompletition.vue";
+import FeedbackIntro from "@/pages/learningPath/learningContentPage/feedback/FeedbackIntro.vue";
+import {
+  PERCENTAGES,
+  RATINGS,
+  YES_NO,
+} from "@/pages/learningPath/learningContentPage/feedback/feedback.constants";
 import { useCircleStore } from "@/stores/circle";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { LearningContent } from "@/types";

client/src/components/ui/ItRadioGroup.vue

@@ -29,14 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import type { RadioItem } from "@/components/learningPath/feedback.types";
+import type { RadioItem } from "@/pages/learningPath/learningContentPage/feedback/feedback.types";
 
-import {
-  RadioGroup,
-  // RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption,
-} from "@headlessui/vue";
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
 
 defineProps<{
   modelValue: any;

client/src/pages/StyleGuidePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LearningPathCircle from "@/components/learningPath/page/LearningPathCircle.vue";
+import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
 import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";

client/src/pages/cockpit/CockpitUserCirclePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CirclePage from "@/pages/learningPath/CirclePage.vue";
+import CirclePage from "@/pages/learningPath/circlePage/CirclePage.vue";
 import { useCockpitStore } from "@/stores/cockpit";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";

client/src/pages/competence/SinglePerformanceCriteriaPage.vue

@@ -3,7 +3,7 @@ import { useCircleStore } from "@/stores/circle";
 import { useCompetenceStore } from "@/stores/competence";
 import * as log from "loglevel";
 
-import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
+import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 

client/src/pages/learningPath/circlePage/CircleDiagram.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { showIcon } from "@/pages/learningPath/circlePage/learningSequenceUtils";
 import { useCircleStore } from "@/stores/circle";
 import type { DefaultArcObject } from "d3";
 import * as d3 from "d3";
 import pick from "lodash/pick";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
-import { showIcon } from "./learningSequenceUtils";
 
 // @ts-ignore
 import colors from "@/colors.json";

client/src/pages/learningPath/circlePage/CirclePage.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import CircleDiagram from "@/components/learningPath/CircleDiagram.vue";
-import CircleOverview from "@/components/learningPath/CircleOverview.vue";
-import DocumentUploadForm from "@/components/learningPath/DocumentUploadForm.vue";
-import LearningSequence from "@/components/learningPath/LearningSequence.vue";
 import ItModal from "@/components/ui/ItModal.vue";
 import * as log from "loglevel";
 import { computed, onMounted, ref, watch } from "vue";
+import CircleDiagram from "./CircleDiagram.vue";
+import CircleOverview from "./CircleOverview.vue";
+import DocumentUploadForm from "./DocumentUploadForm.vue";
+import LearningSequence from "./LearningSequence.vue";
 
 import { uploadCircleDocument } from "@/services/files";
 import { useAppStore } from "@/stores/app";

client/src/pages/learningPath/circlePage/LearningSequence.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
+import LearningContentBadge from "@/pages/learningPath/LearningContentTypeBadge.vue";
+import { showIcon } from "@/pages/learningPath/circlePage/learningSequenceUtils";
 import { useCircleStore } from "@/stores/circle";
 import type {
   CourseCompletionStatus,
@@ -9,8 +11,6 @@ import type {
 import { humanizeDuration } from "@/utils/humanizeDuration";
 import findLast from "lodash/findLast";
 import { computed } from "vue";
-import LearningContentBadge from "./LearningContentTypeBadge.vue";
-import { showIcon } from "./learningSequenceUtils";
 
 type Props = {
   learningSequence: LearningSequence;

client/src/pages/learningPath/learningContentPage/LearningContent.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
+import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
 import { useCircleStore } from "@/stores/circle";
 import type { LearningContent, LearningContentType } from "@/types";
 import log from "loglevel";
 import { computed } from "vue";
 
-import DescriptionBlock from "@/components/learningPath/blocks/DescriptionBlock.vue";
-import DescriptionTextBlock from "@/components/learningPath/blocks/DescriptionTextBlock.vue";
-import FeedbackBlock from "@/components/learningPath/blocks/FeedbackBlock.vue";
-import IframeBlock from "@/components/learningPath/blocks/IframeBlock.vue";
-import MediaLibraryBlock from "@/components/learningPath/blocks/MediaLibraryBlock.vue";
-import PlaceholderBlock from "@/components/learningPath/blocks/PlaceholderBlock.vue";
-import VideoBlock from "@/components/learningPath/blocks/VideoBlock.vue";
+import DescriptionBlock from "./blocks/DescriptionBlock.vue";
+import DescriptionTextBlock from "./blocks/DescriptionTextBlock.vue";
+import FeedbackBlock from "./blocks/FeedbackBlock.vue";
+import IframeBlock from "./blocks/IframeBlock.vue";
+import MediaLibraryBlock from "./blocks/MediaLibraryBlock.vue";
+import PlaceholderBlock from "./blocks/PlaceholderBlock.vue";
+import VideoBlock from "./blocks/VideoBlock.vue";
 
 log.debug("LearningContent.vue setup");
 

client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import LearningContentBadge from "@/components/learningPath/LearningContentTypeBadge.vue";
+import LearningContentBadge from "@/pages/learningPath/LearningContentTypeBadge.vue";
 import type { LearningContentBlock } from "@/types";
 import * as log from "loglevel";
 
-log.debug("LeariningContentContainer.vue setup");
+log.debug("LearningContentContainer.vue setup");
 
 interface Props {
   title: string;

client/src/pages/learningPath/learningContentPage/LearningContentPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LearningContent from "@/components/learningPath/LearningContent.vue";
+import LearningContent from "@/pages/learningPath/learningContentPage/LearningContent.vue";
 import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";
 import type { LearningContent as LearningContentType } from "@/types";

client/src/pages/learningPath/learningContentPage/feedback/feedback.constants.ts

@@ -1,4 +1,4 @@
-import type { RadioItem } from "@/components/learningPath/feedback.types";
+import type { RadioItem } from "@/pages/learningPath/learningContentPage/feedback/feedback.types";
 
 export const YES_NO: RadioItem<boolean>[] = [
   {

client/src/pages/learningPath/learningPathPage/LearningPathCircle.stories.ts

@@ -1,7 +1,6 @@
+import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
 import type { Meta, StoryObj } from "@storybook/vue3";
 
-import LearningPathCircle from "@/components/learningPath/page/LearningPathCircle.vue";
-
 //👇 This default export determines where your story goes in the story list
 const meta: Meta<typeof LearningPathCircle> = {
   /* 👇 The title prop is optional.

client/src/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { CircleSectorData } from "@/components/learningPath/page/LearningPathCircle.vue";
-import LearningPathCircle from "@/components/learningPath/page/LearningPathCircle.vue";
-import LearningPathContinueButton from "@/components/learningPath/page/LearningPathContinueButton.vue";
-import { calculateCircleSectorData } from "@/components/learningPath/page/utils";
+import type { CircleSectorData } from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
+import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
+import LearningPathContinueButton from "@/pages/learningPath/learningPathPage/LearningPathContinueButton.vue";
+import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
 import type { Circle } from "@/services/circle";
 import type { LearningPath } from "@/services/learningPath";
 import type { Topic } from "@/types";

client/src/pages/learningPath/learningPathPage/LearningPathCircleListTile.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import LearningPathCircle from "@/components/learningPath/page/LearningPathCircle.vue";
-import LearningPathContinueButton from "@/components/learningPath/page/LearningPathContinueButton.vue";
-import { calculateCircleSectorData } from "@/components/learningPath/page/utils";
+import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
+import LearningPathContinueButton from "@/pages/learningPath/learningPathPage/LearningPathContinueButton.vue";
+import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
 import type { Circle } from "@/services/circle";
 import type { LearningPath } from "@/services/learningPath";
 import { onMounted, ref } from "vue";

client/src/pages/learningPath/learningPathPage/LearningPathListView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CircleSectorData } from "@/components/learningPath/page/LearningPathCircle.vue";
-import LearningPathCircleListTile from "@/components/learningPath/page/LearningPathCircleListTile.vue";
+import type { CircleSectorData } from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
+import LearningPathCircleListTile from "@/pages/learningPath/learningPathPage/LearningPathCircleListTile.vue";
 import type { Circle } from "@/services/circle";
 import type { LearningPath } from "@/services/learningPath";
 import { computed } from "vue";

client/src/pages/learningPath/learningPathPage/LearningPathPage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import * as log from "loglevel";
 
-import LearningPathAppointmentsMock from "@/components/learningPath/page/LearningPathAppointmentsMock.vue";
-import LearningPathListView from "@/components/learningPath/page/LearningPathListView.vue";
-import LearningPathPathView from "@/components/learningPath/page/LearningPathPathView.vue";
-import CircleProgress from "@/components/learningPath/page/LearningPathProgress.vue";
-import LearningPathTopics from "@/components/learningPath/page/LearningPathTopics.vue";
-import type { ViewType } from "@/components/learningPath/page/LearningPathViewSwitch.vue";
-import LearningPathViewSwitch from "@/components/learningPath/page/LearningPathViewSwitch.vue";
+import LearningPathAppointmentsMock from "@/pages/learningPath/learningPathPage/LearningPathAppointmentsMock.vue";
+import LearningPathListView from "@/pages/learningPath/learningPathPage/LearningPathListView.vue";
+import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
+import CircleProgress from "@/pages/learningPath/learningPathPage/LearningPathProgress.vue";
+import LearningPathTopics from "@/pages/learningPath/learningPathPage/LearningPathTopics.vue";
+import type { ViewType } from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
+import LearningPathViewSwitch from "@/pages/learningPath/learningPathPage/LearningPathViewSwitch.vue";
 import { useLearningPathStore } from "@/stores/learningPath";
 import { useUserStore } from "@/stores/user";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";

client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { CircleSectorData } from "@/components/learningPath/page/LearningPathCircle.vue";
-import LearningPathCircleColumn from "@/components/learningPath/page/LearningPathCircleColumn.vue";
-import LearningPathScrollButton from "@/components/learningPath/page/LearningPathScrollButton.vue";
+import type { CircleSectorData } from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
+import LearningPathCircleColumn from "@/pages/learningPath/learningPathPage/LearningPathCircleColumn.vue";
+import LearningPathScrollButton from "@/pages/learningPath/learningPathPage/LearningPathScrollButton.vue";
 import type { Circle } from "@/services/circle";
 import type { LearningPath } from "@/services/learningPath";
 import { useScroll } from "@vueuse/core";

client/src/pages/learningPath/learningPathPage/utils.ts

@@ -1,7 +1,7 @@
 import type {
   CircleSectorData,
   CircleSectorProgress,
-} from "@/components/learningPath/page/LearningPathCircle.vue";
+} from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
 import type { Circle } from "@/services/circle";
 
 export function calculateCircleSectorData(circle: Circle): CircleSectorData[] {

client/src/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue

@@ -3,11 +3,11 @@ import { useCircleStore } from "@/stores/circle";
 import type { LearningUnit } from "@/types";
 import * as log from "loglevel";
 
-import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
 import { COMPLETION_FAILURE, COMPLETION_SUCCESS } from "@/constants";
+import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { computed, reactive } from "vue";
-import LearningContentNavigation from "./LearningContentNavigation.vue";
+import LearningContentNavigation from "../learningContentPage/LearningContentNavigation.vue";
 
 log.debug("LearningContent.vue setup");
 

client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import * as log from "loglevel";
 
-import SelfEvaluation from "@/components/learningPath/SelfEvaluation.vue";
+import SelfEvaluation from "@/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue";
 
 import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";

client/src/router/index.ts

@@ -83,22 +83,25 @@ const router = createRouter({
     },
     {
       path: "/course/:courseSlug/learn",
-      component: () => import("../pages/learningPath/LearningPathPage.vue"),
+      component: () =>
+        import("../pages/learningPath/learningPathPage/LearningPathPage.vue"),
       props: true,
     },
     {
       path: "/course/:courseSlug/learn/:circleSlug",
-      component: () => import("../pages/learningPath/CirclePage.vue"),
+      component: () => import("../pages/learningPath/circlePage/CirclePage.vue"),
       props: true,
     },
     {
       path: "/course/:courseSlug/learn/:circleSlug/evaluate/:learningUnitSlug",
-      component: () => import("../pages/learningPath/SelfEvaluationPage.vue"),
+      component: () =>
+        import("../pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue"),
       props: true,
     },
     {
       path: "/course/:courseSlug/learn/:circleSlug/:contentSlug",
-      component: () => import("../pages/learningPath/LearningContentPage.vue"),
+      component: () =>
+        import("../pages/learningPath/learningContentPage/LearningContentPage.vue"),
       props: true,
     },
     {