Refactor expertise form

frontend/src/api/api-client.ts

@@ -0,0 +1,44 @@
+import axios from "axios";
+import {
+  ASK_FOR_OPINION_ROUTE,
+  IDENTIFICATION_DUMMY_ROUTE,
+  IDENTIFICATION_FEEDBACK_ROUTE,
+  TUTORIAL_FEEDBACK_ROUTE,
+  UPLOAD_PHOTO_FOR_DETECTION_ROUTE,
+} from "./api-routes";
+
+export const uploadPhotoForDetection = async (file: File) => {
+  const fd = new FormData();
+  fd.append("image", file, file.name);
+  fd.append("date", "" + Date.now() / 1000); // date.now gives in milliseconds, convert to seconds
+
+  const { data } = await axios.post(UPLOAD_PHOTO_FOR_DETECTION_ROUTE, fd);
+  return data;
+};
+
+export const sendTutorialFeedback = async (feedback: any) => {
+  const { data } = await axios.post(TUTORIAL_FEEDBACK_ROUTE, feedback);
+  return data;
+};
+
+export const sendIdentificationFeedback = async (feedbackData: any) => {
+  const { data } = await axios.post(
+    IDENTIFICATION_FEEDBACK_ROUTE,
+    feedbackData,
+  );
+  return data;
+};
+
+export const sendIdentificationDummyFeedback = async (feedbackDummy: any) => {
+  const { data } = await axios.post(IDENTIFICATION_DUMMY_ROUTE, feedbackDummy);
+  return data;
+};
+
+export const sendExpertiseForm = async (feedbackExpert: any) => {
+  const { data } = await axios.post(ASK_FOR_OPINION_ROUTE, feedbackExpert, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  return data;
+};

frontend/src/api/api-routes.ts

@@ -0,0 +1,5 @@
+export const UPLOAD_PHOTO_FOR_DETECTION_ROUTE = "/upload";
+export const TUTORIAL_FEEDBACK_ROUTE = "/tutorial-feedback";
+export const IDENTIFICATION_FEEDBACK_ROUTE = "/identification-feedback";
+export const IDENTIFICATION_DUMMY_ROUTE = "/identification-dummy";
+export const ASK_FOR_OPINION_ROUTE = "http://localhost:8000/api/requests/";

frontend/src/components/AskingExpert.vue

@@ -1,92 +1,86 @@
-<script setup>
-import { ref, computed } from 'vue'
-import axios from 'axios'
-import { useRoute, useRouter } from 'vue-router'
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import { useSnackbarStore } from '@/stores/snackbar.js'
-import SnackbarAlert from '@/components/SnackbarAlert.vue'
-import { useStepsStore } from '@/stores/steps.js'
-import { useResultStore } from '@/stores/result.js'
+import { useSnackbarStore } from "@/stores/snackbar";
+import { useStore } from "@/stores/result";
+import SnackbarAlert from "@/components/SnackbarAlert.vue";
+import { sendTutorialFeedback } from "@/api/api-client";
 
-const { setMessage } = useSnackbarStore()
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
-const router = useRouter()
-const route = useRoute()
+const { setMessage } = useSnackbarStore();
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
 
-const typology = computed(() => resultStore.typology)
-const confidence = computed(() => resultStore.confidence)
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const imgUrl = computed(() => resultStore.imgUrl)
+const typology = computed(() => store.typology);
+const confidence = computed(() => store.confidence);
+const confidenceLevel = computed(() => store.confidenceLevel);
+const imgUrl = computed(() => store.imgUrl);
 
-const showModal = ref(false)
+const showModal = ref(false);
 
-function onClose () {
-  stepsStore.tutorialFeedback = ''
-  showModal.value = false
+function onClose() {
+  store.tutorialFeedback = "";
+  showModal.value = false;
 }
 
-async function sendTutorialFeedback () {
-  const json = {
+async function submitTutorialFeedback() {
+  const feedback = {
     image_url: imgUrl.value,
-    tutorial_feedback: stepsStore.tutorialFeedback,
+    tutorial_feedback: store.tutorialFeedback,
     label: typology.value,
-    tutorial_option: stepsStore.selectedOptionStep || null,
+    tutorial_option: store.currentOptionStep[store.currentStep] || null,
     route_name: route.name,
     confidence: confidence.value,
     confidence_level: confidenceLevel.value,
-  }
-  await axios.post('/tutorial-feedback', json)
-    .then(async res => {
-      console.log(res)
-      stepsStore.tutorialFeedback = json.tutorial_feedback
-      setMessage({ type: 'success', message: 'Votre message a été pris en compte' })
+  };
+  await axios
+    .post("/tutorial-feedback", feedback)
+    .then(async () => {
+      store.tutorialFeedback = feedback.tutorial_feedback;
+      setMessage({
+        type: "success",
+        message: "Votre message a été pris en compte",
+      });
     })
     .catch(async (err) => {
-      console.log(err)
-      setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant de votre message.' })
+      import.meta.env.DEV && console.log(err);
+      setMessage({
+        type: "error",
+        message: "Une erreur a eu lieu en enregistrant de votre message.",
+      });
     })
-    .finally(setTimeout(() => {
-      stepsStore.setCurrentStep(undefined)
-      stepsStore.tutorialFeedback = ''
-      router.push({ name: 'ResultPage' })
-    }, 3000))
+    .finally(() =>
+      setTimeout(() => {
+        store.tutorialFeedback = "";
+        router.push({ name: "ResultPage" });
+      }, 3000),
+    );
 }
 </script>
 <template>
   <div class="text-center">
-    <a
-      class="help"
-      href="#"
-      @click="showModal = true"
-    >
+    <a class="help" href="#" @click="showModal = true">
       Je n'arrive pas à réaliser cette étape
-      <VIcon
-        name="ri-information-line"
-      />
+      <VIcon name="ri-information-line" />
     </a>
   </div>
   <Teleport to="body">
-    <DsfrModal
-      title=""
-      :opened="showModal"
-      @close="onClose()"
-    >
+    <DsfrModal title="" :opened="showModal" @close="onClose()">
       <div class="modal">
         <div class="modal-content">
-          <h2>
-            <VIcon
-              name="ri-arrow-right-line"
-              scale="1.5"
-            />
+          <div class="fr-modal__title fr-mb-2w">
+            <VIcon name="ri-arrow-right-line" scale="1.5" />
             Je n'arrive pas à compléter une étape
-          </h2>
+          </div>
           <p>
-            Si vous rencontrez une difficulté pour poursuivre ce tutoriel, nous vous conseillons de faire appel à un expert. <br>
-            <br>En attendant, vous pouvez nous permettre d'améliorer le contenu de ce tutoriel en nous décrivant votre problème ci-dessous.
+            Si vous rencontrez une difficulté pour poursuivre ce tutoriel, nous
+            vous conseillons de faire appel à un expert. <br />
+            <br />En attendant, vous pouvez nous permettre d'améliorer le
+            contenu de ce tutoriel en nous décrivant votre problème ci-dessous.
           </p>
           <DsfrInput
-            v-model="stepsStore.tutorialFeedback"
+            v-model="store.tutorialFeedback"
             label="Décrivez votre problème"
             label-visible
             is-textarea
@@ -99,7 +93,7 @@ async function sendTutorialFeedback () {
         <div class="modal-footer">
           <DsfrButton
             label="Valider et retour au résultat"
-            :disabled="!stepsStore.tutorialFeedback"
+            :disabled="!store.tutorialFeedback"
             @click="sendTutorialFeedback()"
           />
         </div>
@@ -108,7 +102,6 @@ async function sendTutorialFeedback () {
   </Teleport>
 </template>
 <style scoped>
-
 :deep(.fr-btn) span {
   margin: auto !important;
 }