add type, validation & toast

user-interface/src/components/CollectKnowledge.vue

@@ -1,22 +1,57 @@
 <script setup lang="ts">
-    import { BField, BInput, BButton } from "buefy";
+    import { BField, BInput, BButton, useToast } from "buefy";
     import { apiClient } from "@/services/api";
+    import { ref } from "vue";
 
-    let knowledgeText = ""
-    function postKnowledge(){
-        let knowlegde = {
-            content: knowledgeText,
-            uri: "wiki"
+    import type { Knowledge } from "@/types/types";
+
+    const knowledgeModel = ref<string>("")
+    const uriModel = ref<string>("")
+    
+    const Toast = useToast()
+
+    async function postKnowledge(){
+        const knowledge: Knowledge = {
+            id: null,
+            content: knowledgeModel.value,
+            uri: uriModel.value
+        }
+        if(validation(knowledge)){
+            try {
+                await apiClient.post("api/v1/knowledges/", knowledge)
+                Toast.open({message: "Knowledge collected", type: "is-success"})
+            }
+            catch {
+                Toast.open({message: "Data entry error", type: "is-danger"})
+            }
         }
-        apiClient.post("api/v1/knowledges/", knowlegde)
     }
+
+    function validation(knowledge: Knowledge){
+        return knowledge.content && knowledge.uri
+    }
+
 </script>
 
 <template>
 <div class="container">
     <h2>Collect Knowledge</h2>
     <b-field label="Knowledge">
-         <b-input maxlength="1200" type="textarea" v-model="knowledgeText"></b-input>
+        <!-- @vue-ignore -->
+        <b-input
+            v-model="knowledgeModel"
+            maxlength="1200" 
+            type="textarea" 
+            required
+            ></b-input>
+    </b-field>
+    <b-field label="URI">
+        <!-- @vue-ignore -->
+        <b-input 
+            v-model="uriModel" 
+            maxlength="100"
+            required
+        ></b-input>
     </b-field>
     <b-button type="is-primary" @click="postKnowledge" >Submit</b-button>
 </div>

user-interface/src/types/types.ts

@@ -0,0 +1,20 @@
+interface Knowledge {
+    id: number | null,
+    content: string,
+    uri: string,
+}
+
+interface Question {
+    id: number | null,
+    question: string,
+    knowledgId: number,
+    metric: Metric | null
+}
+
+interface Metric {
+    id: number | null,
+    questionId: number,
+    needIndex: number
+}
+
+export type {Knowledge, Question, Metric}