commit

src/components/InputFieldCard.vue

@@ -62,52 +62,15 @@ const searchQuery = ref("")
 const pageNumber = ref()
 const pageSize = ref()
 
-const data = ref(null);
-
-const responseData = ref(null);
-let error=ref(null)
-const fetchData = async () => {
-  try {
-    console.log("fetchData called ")
-    const response = await fetch("/search", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "Authorization": "ApiKey NS00TXlKUUIweUhWaGFuUUpUVTk6bWNVWXI1VXRSN2VWcFRtaEZ6NmdCUQ=="
-      },
-      body: JSON.stringify({
-        query: "China",
-        search_type: "precise",
-        page_num: "2",
-        page_size: "2"
-      }),
-      mode: "cors"
-    });
-
-    if (!response.ok) {
-      console.log("response:", response.ok)
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-
-    responseData.value = await response.json();
-    console.log("Response:", responseData.value);
-  } catch (err) {
-    
-    console.error("Fetch error:", err);
-  }
-};
 
 const searchStore = useSearchStore();
 
 const sendRequest = async()=>{
-
-  console.log("calling fetchData")
-  fetchData()
   searchStore.searchParams = {
     query: searchQuery.value,
-    searchType: selectedSearchType.value,
+    search_type: selectedSearchType.value,
-    pageNumber: pageNumber.value,
+    page_num: pageNumber.value,
-    pageSize: pageSize.value
+    page_size: pageSize.value
   };
   console.log("searchStore: ", searchStore.searchParams)
   router.push("/table");

src/components/TableComp.vue

@@ -1,17 +1,62 @@
 <template>
     <div>
-        <h3>Search Parameters</h3>
+        <div>Entity you searched for: <span class="!font-bold">{{ searchWhat || "You did not provide" }}</span></div>
-    <pre>{{ searchStore.searchParams }}</pre>  <!-- ✅ Displays as JSON -->
+        <div>Search Type: <span class="!font-bold">{{ searchStore.searchParams.search_type || "You did not provide" }}</span></div>
+    <div v-if="responseData">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th v-for="item in headers">{{ item }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in responseData.data">
+                    <td>{{ item.metadata._id }}</td>
+                    <td>{{ item.metadata.title }}</td>
+                    <td>{{ item.metadata.description }}</td>
+                    <td>{{ item.metadata.date }}</td>
+                    <td>{{ item.metadata.created_by }}</td>
+                    <td>{{ item.metadata.countries }}</td>
+                    <td>{{ item.metadata.topics }}</td>
+                    <td>{{ item.metadata.organizations }}</td>
+                    <td>{{ item.metadata.persons }}</td>
+                </tr>
+            </tbody>
+        </table>
         
-    <p>Query: {{ searchStore.searchParams.query }}</p>
+    </div>
-    <p>Search Type: {{ searchStore.searchParams.searchType }}</p>
-    <p>Page Number: {{ searchStore.searchParams.pageNumber }}</p>
-    <p>Page Size: {{ searchStore.searchParams.pageSize }}</p>
 
     </div>
 </template>
 <script setup lang="ts">
-import {ref} from "vue";
+import {ref,reactive,onMounted,toRaw} from "vue";
 import { useSearchStore } from "@/stores/searchStore";
+import {fetchData} from "@/utils/api.js"
 const searchStore = useSearchStore();
+
+
+const headers=["ID","Title","Description","Date","Created By","Countries","Topics","Organizations","Persons"]
+const responseData = ref("")
+const searchWhat = ref(searchStore.searchParams.query)
+
+const query={...searchStore.searchParams}
+// const workingVar = {
+//          query: "Thailand",
+//          search_type: "precise",
+//         page_num: "2",
+//          page_size: "2"
+//        }
+onMounted(()=>{
+    fetchData("/search","POST",query).then(response =>{
+        console.log("response apple: ",response)
+        responseData.value = response
+        console.log(response)
+    }).catch(error=>{
+        responseData.value = "error"
+        console.log(error)
+    })
+
+}
+);
+
 </script>

src/stores/searchStore.ts

@@ -1,8 +1,11 @@
-import { ref, computed } from 'vue'
+import { reactive, computed } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useSearchStore = defineStore('search', () => {
-  const searchParams = ref({})
+  const searchParams = reactive({
+    query:"",
+    search_type:""
+  })
 
   return { searchParams }
 })

src/utils/api.js

@@ -1,22 +1,23 @@
 export const fetchData = async(endpoints="", requestType="GET", requestBody=null)=>{
-    console.log("requestBody:", requestBody)
+
-    console.log("requestType:", requestType)
-    console.log("endpoints:", `https://192.168.99.121/${endpoints}`)
     try{
         const options={
             method:requestType,
             headers:{
                 "Content-Type":"application/json",
                 "Authorization": "ApiKey NS00TXlKUUIweUhWaGFuUUpUVTk6bWNVWXI1VXRSN2VWcFRtaEZ6NmdCUQ=="
-            }
+            },
+            mode: "cors"
         }
 
         if (requestType !=="GET" && requestBody){
+            console.log("before JSON.stringify")
             options.body = JSON.stringify(requestBody)
-        }
             
-        const response = await fetch(`http://192.168.99.121/${endpoints}`, options)
+        }
-        console.log("response butrte: ", response)
+        console.log("callign endpoints: ", endpoints)
+        const response = await fetch(`${endpoints}`, options)
+        
         if (!response.ok){
             throw new Error(`HTTP error! Status: ${response.status}`)
         }