feat(tutor): shows all syllabus

Author: sandragjacinto

src/components/ModalWrapper.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
 const props = defineProps<{
   isOpen: boolean;
   onClose?: () => void;
 }>();
 
 const computedState = computed(() => props.isOpen);
 
-watch(props.isOpen, (val) => {
-  computedState.value = val;
-});
-
 const handleModalClose = () => {
   props.onClose();
   computedState.value = false;

src/components/tutor/ThirdStep.vue

@@ -2,27 +2,37 @@
 import { marked } from 'marked';
 defineProps<{
   visible?: boolean;
-  syllabus?: string;
+  syllabus?: { content: string; source: string }[];
 }>();
 </script>
 <template>
   <div class="wrapper" :class="{ visible: visible && syllabus.length }">
     <h1 class="title is-4">{{ $t('tutor.thirdStep.title') }}</h1>
     <p class="subtitle is-6">{{ $t('tutor.thirdStep.description') }}</p>
     <!-- syllabus -->
-    <p
-      contenteditable="true"
-      id="syllabus"
-      class="syllabus content"
-      v-if="syllabus.length"
-      v-html="marked.parse(syllabus)"
-    />
+    <details
+      :key="item.source"
+      v-for="item in syllabus"
+      class="details"
+      :open="item.source === 'PedagogicalEngineerAgent'"
+    >
+      <summary class="title is-6 mb-2">
+        {{ $t(`tutor.agents.${item.source}`) }}
+      </summary>
+      <p
+        contenteditable="true"
+        id="syllabus"
+        class="syllabus content"
+        v-if="item.content.length"
+        v-html="marked.parse(item.content)"
+      />
+    </details>
   </div>
 </template>
 
 <style scoped>
 .wrapper {
-  overflow: hidden;
+  overflow: scroll;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -35,14 +45,18 @@ defineProps<{
   flex-grow: 3;
 }
 
+details:not([open]) {
+  opacity: 0.5;
+}
+
 .syllabus {
   padding: 2rem;
   border: 1px solid var(--neutral-20);
   border-radius: 0.5rem;
   min-height: 10rem;
   max-width: 80rem;
   overflow-y: auto;
-  overflow-x: auto;
+  overflow-x: scroll;
   background-color: var(--neutral-10);
   cursor: text;
 }

src/localisation/en.ts

@@ -194,6 +194,11 @@ export const en = {
   },
   textLengthFeedback: 'Please provide a longer text for the search',
   tutor: {
+    agents: {
+      UniversityTeacherAgent: 'Professor',
+      SDGExpertAgent: 'SDG Expert',
+      PedagogicalEngineerAgent: 'Pedagogical Engineer'
+    },
     fileSizeExceeded: 'File size exceeds 5MB',
     loading: {
       wait: 'Please wait:',

src/localisation/fr.ts

@@ -198,6 +198,11 @@ export const fr = {
   },
   textLengthFeedback: 'Veuillez fournir un texte plus long pour la recherche',
   tutor: {
+    agents: {
+      UniversityTeacherAgent: 'Professeur',
+      SDGExpertAgent: 'Expert ODD',
+      PedagogicalEngineerAgent: 'Ingénieur pédagogique'
+    },
     fileSizeExceeded: 'Le fichier dépasse les 5MB',
     loading: {
       wait: 'Veuillez patienter :',

src/views/TutorPage.vue

@@ -12,7 +12,7 @@ const store = useTutorStore();
 
 const files: Ref<File[]> = ref([]);
 const response: Ref<TutorSearch | null> = ref(null);
-const syllabus = ref<string>('');
+const syllabus = ref<[]>([]);
 const step = ref(1);
 const isLoading = ref(false);
 
@@ -51,6 +51,7 @@ const handleCreateSyllabus = async () => {
   const newSylalbus = await store.retrieveSyllabus();
   isLoading.value = false;
   syllabus.value = newSylalbus.syllabus;
+
   step.value = step.value + 1;
 };
 
@@ -66,7 +67,7 @@ const loaderI18nPathText = {
 };
 
 const handleDownload = async () => {
-  const blob = await convertMarkdownToDocx(syllabus.value);
+  const blob = await convertMarkdownToDocx(syllabus.value[2].content);
   downloadDocx(blob, 'syllabus.docx');
 };
 

src/views/__tests__/__snapshots__/TutorPage.test.ts.snap

@@ -199,7 +199,8 @@ exports[`TutorPage > renders properly 1`] = `
         tutor.thirdStep.description
       </p>
       <!-- syllabus -->
-      <!--v-if-->
+      
+      
     </div>
   </div>
   <div