107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<template>
|
|
|
|
<div class=" w-[100%] h-[100%] overflow-hidden">
|
|
<div class="flex justify-between mb-[20px]">
|
|
<div>
|
|
<div>Entity you searched for: <span class="!font-bold">{{ searchWhat || "You did not provide" }}</span></div>
|
|
<div>Search Type: <span class="!font-bold">{{ searchStore.searchParams.search_type || "You did not provide" }}</span></div>
|
|
</div>
|
|
<div>
|
|
<button @click="goToSearchPage" class="btn rounded-[10px] bg-[#0000FF] text-[white]">Back To Search Page</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="responseData" class="pt-[0px] h-[90%] w-[100%] border border-[blue] overflow-scroll">
|
|
<table class="table table-pin-rows border w-full">
|
|
<thead class="">
|
|
<!-- <tr class=""> -->
|
|
<!-- <th v-for="item in keys_of_a_data" class=" sticky top-0 z-10">{{item}}</th> -->
|
|
<!-- <th colspan="52">metadata</th>
|
|
<th>search</th>
|
|
</tr> -->
|
|
<tr class="sticky border bg-[#000C66] text-[white]">
|
|
<th v-for="item in arr_col_items" class="sticky border border-gray-600">{{ item }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in row_values" >
|
|
<td v-for="item2 in item" class="border">{{ item2 }}</td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="h-[90%] w-[100%] flex justify-center items-center font-bold text-[red] text-[32px]" v-else>No search results</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref,reactive,onMounted,toRaw} from "vue";
|
|
import { useSearchStore } from "@/stores/searchStore";
|
|
import {fetchData} from "@/utils/api.ts"
|
|
import { useRouter } from "vue-router";
|
|
const searchStore = useSearchStore();
|
|
|
|
const responseData = ref("")
|
|
const searchWhat = ref(searchStore.searchParams.query)
|
|
|
|
const query={...searchStore.searchParams}
|
|
|
|
const keys_of_a_data=ref<any[]>()
|
|
|
|
const arr_col_items=ref<any[]>([])
|
|
|
|
const row_values = ref<any[]>([])
|
|
const router = useRouter();
|
|
const goToSearchPage=()=>{
|
|
router.push ("/")
|
|
}
|
|
|
|
onMounted(()=>{
|
|
fetchData("/search","POST",query).then(response =>{
|
|
|
|
console.log("response kk:", response)
|
|
//console.log("responseData start dolphine: ", typeof responseData.value.data.length)
|
|
if (response.data.length===0){
|
|
|
|
console.log("responseData.value 12: ", responseData.value)
|
|
responseData.value=""
|
|
console.log("responseData.value 13: ", responseData.value)
|
|
}
|
|
else {
|
|
responseData.value = response
|
|
keys_of_a_data.value = Object.keys(response.data[0])
|
|
|
|
|
|
const test = Object.keys(response.data[0].metadata)
|
|
|
|
const test2 = Object.keys(response.data[0].search)
|
|
|
|
keys_of_a_data.value.forEach((item, index)=>{
|
|
|
|
arr_col_items.value.push(...Object.keys(response.data[0][item]))
|
|
})
|
|
|
|
|
|
response.data.map(item=>{
|
|
const values:any[]=[]
|
|
|
|
Object.keys(item).forEach(key=>{
|
|
console.log("key12: ", key)
|
|
values.push(...Object.values(item[key]))
|
|
|
|
})
|
|
|
|
row_values.value.push(values)
|
|
|
|
}) }
|
|
|
|
|
|
}).catch(error=>{
|
|
responseData.value = "error"
|
|
console.log(error)
|
|
})
|
|
|
|
}
|
|
);
|
|
|
|
</script> |