table in progress

src/assets/base.css

@@ -54,7 +54,7 @@
 *::before,
 *::after {
   box-sizing: border-box;
-  margin: 0;
+  
   font-weight: normal;
 }
 

src/components/InputFieldCard.vue

@@ -1,23 +1,115 @@
 <template>
 
-<div class="card bg-red-100 w-[300px]">
-    <p>hello world</p>
-
-    <div class="mt-6">
-      <span class="block font-bold mb-2">Search Type:</span>
-      <div class="flex space-x-4">
-        <label v-for="type in searchTypes" :key="type" class="flex items-center space-x-1">
-          <input type="radio" v-model="selectedSearchType" :value="type" class="radio radio-primary" />
-          <span>{{ type }}</span>
-        </label>
-      </div>
+<div class="card bg-[#081f6e] text-[#FFF] w-[30%] p-6">
+    
+    <div>
+      <label for="userInput" class="block text-sm !font-bold mb-2">Query</label>
+      <input 
+        id="userInput"
+        v-model="searchQuery"
+        type="text"
+        class="w-full p-3 border border-gray-300 bg-[#1a1a1a] rounded-md focus:border-blue-500 focus:ring focus:ring-blue-200"
+      />
     </div>
+
+    <div class="mt-[20px]">
+      <label for="searchType" class="block text-sm !font-bold">Search Type</label>
+      <select v-model="selectedSearchType" id="searchType" class="mt-4 p-[10px] block w-full bg-[#1a1a1a] rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
+        <option v-for="option in searchTypes" :key="option" :value="option">
+          {{ option }}
+        </option>
+      </select>
+    </div>
+
+    <div class="mt-[20px]">
+      <label for="pageNumber" class="block  text-sm !font-bold ">Page Number</label>
+      <input
+        type="number"
+        id="pageNumber"
+        v-model.number="pageNumber"
+        class="input input-bordered border-white bg-[#1a1a1a] w-full mt-4"
+        min="1"
+         />
+    </div>
+
+    <div class="mt-[20px]">
+      <label for="pageSize" class="block text-sm !font-bold">Page Size</label>
+      <input
+        type="number"
+        id="pageSize"
+        v-model.number="pageSize"
+        class="input input-bordered border-white bg-[#1a1a1a] w-full mt-4"
+        min="1"
+         />
+    </div>
+
+    <button  @click="sendRequest" class="btn mt-[40px]">Send Request</button>
+
+
 </div>
 </template>
 <script setup lang="ts">
 import {ref} from "vue";
+import { useSearchStore } from "@/stores/searchStore";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
 
 const selectedSearchType= ref("precise")
-const searchTypes = []
+const searchTypes = ref(["precise","associative","proximity","semantic"])
+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,
+    pageNumber: pageNumber.value,
+    pageSize: pageSize.value
+  };
+  console.log("searchStore: ", searchStore.searchParams)
+  router.push("/table");
+}
 </script>

src/components/TableComp.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <h3>Search Parameters</h3>
+    <pre>{{ searchStore.searchParams }}</pre>  <!-- ✅ Displays as JSON -->
+
+    <p>Query: {{ searchStore.searchParams.query }}</p>
+    <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 { useSearchStore } from "@/stores/searchStore";
+const searchStore = useSearchStore();
+</script>

src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/router/index.ts

@@ -17,6 +17,14 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue'),
     },
+    {
+      path: '/table',
+      name: 'table',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/ResponseView.vue'),
+    },
   ],
 })
 

src/stores/searchStore.ts

@@ -0,0 +1,8 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSearchStore = defineStore('search', () => {
+  const searchParams = ref({})
+
+  return { searchParams }
+})

src/utils/api.js

@@ -0,0 +1,32 @@
+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=="
+            }
+        }
+
+        if (requestType !=="GET" && requestBody){
+            options.body = JSON.stringify(requestBody)
+        }
+
+        const response = await fetch(`http://192.168.99.121/${endpoints}`, options)
+        console.log("response butrte: ", response)
+        if (!response.ok){
+            throw new Error(`HTTP error! Status: ${response.status}`)
+        }
+
+        return await response.json()
+
+    }
+    catch(error){
+        console.log("Fetch error:", error)
+        return null
+    }
+
+}

src/views/HomeView.vue

@@ -3,8 +3,7 @@ import InputFieldCard from '@/components/InputFieldCard.vue'
 </script>
 
 <template>
-  <main>
-    <p>home page</p>
+  <main class="flex place-content-center p-4  h-[100%]">
     <InputFieldCard/>
   </main>
 </template>

src/views/ResponseView.vue

@@ -0,0 +1,9 @@
+<template>
+    <main class="flex place-content-center p-4  h-[100%]">
+        <TableComp />
+    </main>
+    
+</template>
+<script setup lang="ts">
+import TableComp from "@/components/TableComp.vue"
+</script>

vite.config.ts

@@ -6,6 +6,15 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/search": {
+        target: "https://192.168.99.121",
+        changeOrigin: true,
+        secure: false,  // Ignores SSL certificate issues
+      },
+    },
+  },
   plugins: [
     vue(),
     vueDevTools(),