feat(tutor): connects tutor to API and data

Author: sandragjacinto

src/components/tutor/FirstStep.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-defineProps<{
+const props = defineProps<{
   disabled?: boolean;
+  addFile?: (e: Event) => void;
 }>();
 const inputGroupLength = ref(1);
 
@@ -22,6 +23,7 @@ const appendNewInputFile = () => {
   input.type = 'file';
   input.className = 'input';
   input.placeholder = 'Enter the name of the file';
+  input.onchange = (e) => props.addFile(e);
   div.appendChild(input);
   div.appendChild(deleteButton);
   inputGroup.appendChild(div);
@@ -52,6 +54,7 @@ const removeLastInputFile = () => {
           type="text"
           id="cursus-title"
           :placeholder="$t('tutor.firstStep.cursusTitlePlaceholder')"
+          @change="(e) => addFile(e)"
         />
       </div>
       <div class="description">

src/components/tutor/SecondStep.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { type Document } from '@/types';
 import CardSimpleComponent from '@/components/CardSimpleComponent.vue';
-import data from './mockedSearchResult.json';
 defineProps<{
+  sources?: Document[];
   disabled?: boolean;
   visible?: boolean;
 }>();
-
-const sources = ref<Document[]>(data);
 </script>
 <template>
   <div class="wrapper" :class="{ disabled: disabled, visible: visible }">

src/components/tutor/ThirdStep.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { marked } from 'marked';
-import { syllabus } from './mockedSyllabus.js';
 defineProps<{
   visible?: boolean;
+  syllabus?: string;
 }>();
 </script>
 <template>
@@ -39,6 +39,7 @@ defineProps<{
   border: 1px solid var(--neutral-20);
   border-radius: 0.5rem;
   min-height: 10rem;
+  max-width: 80rem;
   overflow-y: auto;
   overflow-x: auto;
   background-color: var(--neutral-10);

src/stores/tutor.ts

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia';
+import { type Ref, ref } from 'vue';
+import { type Document } from '@/types';
+import { postAxios } from '@/utils/fetch';
+
+export type TutorSearch = {
+  extracts: { original_document: string; summary: string; themes: string[] }[];
+  nb_results: number;
+  documents: Document[];
+};
+
+type TutorSyllabus = {
+  syllabus: string;
+  documents: Document[];
+};
+// TODO: :arrow-up: move this to types
+
+export const useTutorStore = defineStore('tutor', () => {
+  const tutorSearch: Ref<TutorSearch | null> = ref(null);
+
+  const retrieveTutorSearch = async (arg: FormData): Promise<TutorSearch> => {
+    const resp = await postAxios('/tutor/search', arg, {
+      headers: { 'content-type': 'multipart/form-data' }
+    });
+
+    tutorSearch.value = resp.data;
+
+    return resp.data;
+  };
+
+  const retrieveSyllabus = async (): Promise<TutorSyllabus> => {
+    if (!tutorSearch.value) {
+      throw new Error('Body is empty');
+    }
+    const resp = await postAxios('/tutor/syllabus', {
+      ...tutorSearch.value
+    });
+    return resp.data;
+  };
+
+  return { retrieveTutorSearch, retrieveSyllabus };
+});

src/views/TutorPage.vue

@@ -4,36 +4,67 @@ import FirstStep from '@/components/tutor/FirstStep.vue';
 import SecondStep from '@/components/tutor/SecondStep.vue';
 import ThirdStep from '@/components/tutor/ThirdStep.vue';
 import StepsIndicator from '@/components/tutor/StepsIndicator.vue';
+import { useTutorStore, type TutorSearch } from '@/stores/tutor';
 
+const store = useTutorStore();
+
+const files: Ref<File[]> = ref([]);
+const response: Ref<TutorSearch | null> = ref(null);
+const syllabus = ref<string>('');
 const step = ref(1);
-const setStep = (val) => {
-  step.value = val;
+
+const formData = new FormData();
+
+const addFile = (e: any) => {
+  formData.append('files', e.target.files[0]);
+  files.value.push(e.target.files);
 };
 
-const handleSearch = () => {
-  console.log('handle search');
+const handleSearch = async () => {
+  response.value = null;
+
+  if (!files.value.length) {
+    return;
+  }
+
+  const resp = await store.retrieveTutorSearch(formData);
+
+  response.value = resp;
   step.value = step.value + 1;
 };
 
-const handleCreateSyllabus = () => {
-  console.log('create syllabus');
+const setStep = (val) => {
+  step.value = val;
+};
+
+const handleCreateSyllabus = async () => {
+  const newSylalbus = await store.retrieveSyllabus();
+  syllabus.value = newSylalbus.syllabus;
   step.value = step.value + 1;
 };
 
 const stepToAction = {
   1: handleSearch,
   2: handleCreateSyllabus
 };
+
+// TODO: add a modal with waiting info
+// button to export syllabus
 </script>
 <template>
   <div class="content-centered-wrapper">
     <StepsIndicator :step="step" :setStep="setStep" :stepsLength="3" />
     <div class="layout-flex">
       <div class="flex-wrap" :class="{ shrink: step === 3 }">
-        <FirstStep data-test="fist-step" :disabled="step > 1" v-if="step >= 1" />
-        <SecondStep data-test="second-step" :disabled="step > 2" :visible="step >= 2" />
+        <FirstStep data-test="fist-step" :disabled="step > 1" v-if="step >= 1" :addFile="addFile" />
+        <SecondStep
+          data-test="second-step"
+          :disabled="step > 2"
+          :visible="step >= 2 && response"
+          :sources="response ? response?.documents : null"
+        />
       </div>
-      <ThirdStep data-test="third-step" :visible="step >= 3" />
+      <ThirdStep data-test="third-step" :visible="step >= 3 && syllabus" :syllabus="syllabus" />
     </div>
     <div class="actions">
       <button class="button" v-if="step > 1" @click="step = step - 1">previous</button>