feat(tutor): fix how files are handled when added, removed, replaced

Author: sandragjacinto

src/components/tutor/FirstStep.vue

@@ -2,47 +2,72 @@
 import { ref } from 'vue';
 const props = defineProps<{
   disabled?: boolean;
-  addFile?: (e: Event) => void;
+  addFile?: (e: Event, id?: string) => void;
+  removeFile?: (id: string) => void;
   searchError?: boolean;
 }>();
-const inputGroupLength = ref(1);
+const inputGroupLength = ref(document.querySelectorAll('.input-group input').length || 1);
+const uid = ref(0);
+const inputGroupRef = ref<HTMLElement | null>(null);
+const inputContainerRef = ref<HTMLElement | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const deleteButtonRef = ref<HTMLButtonElement | null>(null);
+
+const updateInputGroupLength = () => {
+  inputGroupLength.value = document.querySelectorAll('.input-group input').length;
+};
+
+const createInput = (id: string) => {
+  const input = fileInputRef.value?.cloneNode(false) as HTMLInputElement;
+  input.id = id;
+  input.files = new DataTransfer().files; // Clear previous files
+  input.addEventListener('change', (e) => props.addFile(e, id));
+  return input;
+};
+
+const createDeletebutton = (container: HTMLElement) => {
+  const delButton = deleteButtonRef.value?.cloneNode(true) as HTMLButtonElement;
+  delButton.addEventListener('click', () => {
+    props.removeFile(container.id);
+    if (container && container.parentNode === inputGroupRef.value) {
+      inputGroupRef.value.removeChild(container);
+    }
+    updateInputGroupLength();
+  });
+  return delButton;
+};
 
-// TODO: think of a vue way of doing this
 const appendNewInputFile = () => {
-  const inputGroup = document.querySelector('.input-group');
-  const div = document.createElement('div');
-  div.className = 'is-flex is-flex-direction-row';
-  const deleteButton = document.createElement('button');
-  deleteButton.className = 'button';
-  deleteButton.innerHTML = 'x';
-  deleteButton.onclick = () => {
-    inputGroup.removeChild(div);
-    inputGroupLength.value -= 1;
-  };
-  const input = document.createElement('input');
-  input.id = `file-${inputGroupLength.value}`;
-  input.type = 'file';
-  input.className = 'input';
-  input.accept = 'application/pdf, text/*';
-  input.placeholder = 'Enter the new file';
-  input.setAttribute('data-testid', 'file-input');
-  input.onchange = (e) => props.addFile(e);
-  div.appendChild(input);
-  div.appendChild(deleteButton);
-  inputGroup.appendChild(div);
-  inputGroupLength.value += 1;
+  if (!inputGroupRef.value || !inputContainerRef.value) {
+    console.error('Input group is not defined');
+    return;
+  }
+
+  const elementId = `file_${++uid.value}`;
+
+  const container = inputContainerRef.value.cloneNode(false) as HTMLElement;
+  container.id = elementId;
+  const input = createInput(elementId);
+  const delButton = createDeletebutton(container);
+
+  container.appendChild(input);
+  container.appendChild(delButton);
+  inputGroupRef.value.appendChild(container);
+  updateInputGroupLength();
 };
 
 const removeFirstChild = () => {
-  const inputGroup = document.querySelector('.input-group');
+  const inputGroup = inputGroupRef.value;
   inputGroup.removeChild(inputGroup.firstChild);
-  inputGroupLength.value -= 1;
+  props.removeFile('file_0');
+  updateInputGroupLength();
 };
 
 const removeLastInputFile = () => {
   const inputGroup = document.querySelector('.input-group');
   inputGroup.removeChild(inputGroup.lastChild);
-  inputGroupLength.value -= 1;
+  props.removeFile(`file_${inputGroupLength.value}`);
+  updateInputGroupLength();
 };
 </script>
 <template>
@@ -79,17 +104,26 @@ const removeLastInputFile = () => {
       </div>
     </div>
     <div>
-      <div class="input-group is-flex is-flex-direction-column">
-        <div class="is-flex is-flex-direction-row" id="first">
+      <div ref="inputGroupRef" class="input-group is-flex is-flex-direction-column">
+        <div ref="inputContainerRef" class="is-flex is-flex-direction-row" id="first">
           <input
+            ref="fileInputRef"
             class="input"
             type="file"
             accept="application/pdf, text/*"
+<<<<<<< HEAD
             placeholder="Enter the new file"
             data-testid="file-input"
             @change="addFile"
+||||||| parent of aeaf9fa (feat(tutor): fix how files are handled when added, removed, replaced)
+            placeholder="Enter the name of the file"
+            @change="addFile"
+=======
+            placeholder="Enter the name of the file"
+            @change="(e) => addFile(e, 'file_0')"
+>>>>>>> aeaf9fa (feat(tutor): fix how files are handled when added, removed, replaced)
           />
-          <button class="button" @click="removeFirstChild">x</button>
+          <button ref="deleteButtonRef" class="button" @click="removeFirstChild">x</button>
         </div>
       </div>
       <button class="button" :disabled="inputGroupLength === 3" @click="appendNewInputFile">

src/stores/tutor.ts

@@ -19,8 +19,12 @@ type TutorSyllabus = {
 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, {
+  const retrieveTutorSearch = async (arg: { string: File }): Promise<TutorSearch> => {
+    const formData = new FormData();
+    const files = Object.values(arg);
+    files.forEach((file) => formData.append('files', file));
+
+    const resp = await postAxios('/tutor/search', formData, {
       headers: { 'content-type': 'multipart/form-data' }
     });
 

src/views/TutorPage.vue

@@ -10,42 +10,55 @@ import { convertMarkdownToDocx, downloadDocx } from '@/utils/md-to-docx';
 import i18n from '@/localisation/i18n';
 const store = useTutorStore();
 
-const files: Ref<File[]> = ref([]);
+const files: Ref<{ string: File }> = ref({});
 const response: Ref<TutorSearch | null> = ref(null);
 const syllabus = ref<[]>([]);
 const step = ref(1);
 const isLoading = ref(false);
 const searchError = ref(false);
 
-const formData = new FormData();
 
 // TODO: handle remove document
-const addFile = (e: any) => {
+const addFile = (e: any, input_id?: str = 'files') => {
   if (e.target.files[0].size > 5 * 1024 * 1024) {
     alert(i18n.global.t('tutor.fileSizeExceeded'));
     return;
   }
+
   searchError.value = false;
-  formData.append('files', e.target.files[0]);
-  files.value.push(e.target.files);
+  files.value = {
+    ...files.value,
+    [input_id]: e.target.files[0]
+  };
+  console.log('Current files:', files.value);
+};
+
+const handleRemoveFile = (id: string) => {
+  if (files.value[id]) {
+    delete files.value[id];
+  } else {
+    console.error('File not found:', id);
+  }
 };
 
 const handleSearch = async () => {
   response.value = null;
   searchError.value = false;
 
-  if (!files.value.length) {
+  if (!Object.keys(files.value).length) {
+    console.error('No files selected');
     return;
   }
   isLoading.value = true;
 
   try {
-    const resp = await store.retrieveTutorSearch(formData);
+    const resp = await store.retrieveTutorSearch(files.value);
     response.value = resp;
   } catch (error) {
     isLoading.value = false;
     response.value = { documents: [] };
     searchError.value = true;
+    console.error('Error during search:', error);
     return;
   } finally {
     isLoading.value = false;
@@ -113,6 +126,7 @@ const stepToAction = {
           :disabled="step > 1"
           v-if="step >= 1"
           :addFile="addFile"
+          :removeFile="handleRemoveFile"
         />
         <SecondStep
           data-test="second-step"