charlene/UI_MFA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
charlene tau express 2025-03-03 17:15:32 +08:00
parent fc5d3263ef
commit 6733f46f58
11 changed files with 131 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.dockerignore Normal file
View File

@ -0,0 +1,3 @@
node_modules
dist
.git

23
Dockerfile Normal file
View File

@ -0,0 +1,23 @@
# Stage 1: Build the Vue App
FROM node:18 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build -- --force
# Stage 2: Serve the Built App Using Nginx
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/dist ./
# Nginx Config
# COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

33
src/App.vue
View File

@ -1,33 +1,20 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import NavBars from './components/NavBars.vue'
import NavBars from '@/components/NavBars.vue'
</script>
<template>
<header class="w-[100%]">
<NavBars/>
<!-- <div class="wrapper w-[100%]">
<nav class="text-[blue]">
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div> -->
</header>
<RouterView />
<div class="h-screen flex flex-col ">
<div class="h-[10vh]">
<NavBars class=" w-[100%]"/>
</div>
<div class="flex-1 overflow-hidden">
<RouterView />
</div>
</div>
</template>
<style scoped>

83
src/assets/base.css
View File

@ -1,87 +1,4 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
font-weight: normal;
}
body {
background-color: #2c3e50;
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

10
src/assets/main.css
View File

@ -1,14 +1,8 @@
@import './base.css';
/* @import './base.css'; */
@import "tailwindcss";
@plugin "daisyui";
#app {
/* max-width: 1280px; */
width:100vw;
/* margin: 0 0; */
/* padding: 2rem; */
font-weight: normal;
}

4
src/components/InputFieldCard.vue
View File

@ -69,8 +69,8 @@ const sendRequest = async()=>{
searchStore.searchParams = {
query: searchQuery.value,
search_type: selectedSearchType.value,
page_num: pageNumber.value,
page_size: pageSize.value
// page_num: pageNumber.value,
// page_size: pageSize.value
};
console.log("searchStore: ", searchStore.searchParams)
router.push("/table");

8
src/components/NavBars.vue
View File

@ -68,9 +68,9 @@ import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuIt
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
const navigation = [
{ name: 'Dashboard', href: '#', current: true },
{ name: 'Team', href: '#', current: false },
{ name: 'Projects', href: '#', current: false },
{ name: 'Calendar', href: '#', current: false },
{ name: 'Dashboard', href: '/', current: true },
// { name: 'Team', href: '#', current: false },
// { name: 'Projects', href: '#', current: false },
// { name: 'Calendar', href: '#', current: false },
]
</script>

120
src/components/TableComp.vue
View File

@ -1,66 +1,100 @@
<template>
<div>
<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 v-if="responseData">
<table class="table">
<thead>
<tr>
</tr>
<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>
</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.js"
import {fetchData} from "@/utils/api.ts"
import { useRouter } from "vue-router";
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 keys_of_a_data=ref()
// const workingVar = {
// query: "Thailand",
// search_type: "precise",
// page_num: "2",
// page_size: "2"
// }
//responseData = {data:(100)[...], pagination:{...}}
//data =[{metadata: {...} , search: {...} },{},{}]
const arr_col_items=ref([])
const row_values = ref([])
const router = useRouter();
const goToSearchPage=()=>{
router.push ("/")
}
onMounted(()=>{
fetchData("/search","POST",query).then(response =>{
console.log("response apple: ",response)
responseData.value = response
console.log("response starfish: ",Object.keys(response.data[0]))
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])
console.log("keys_of_a_data: ",keys_of_a_data)
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=[]
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"

6
src/shims-vue.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
// src/shims-vue.d.ts
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}

3
src/utils/api.js → src/utils/api.ts
View File

@ -15,6 +15,9 @@ export const fetchData = async(endpoints="", requestType="GET", requestBody=null
options.body = JSON.stringify(requestBody)
}
console.log("callign endpoints: ", endpoints)
const response = await fetch(`${endpoints}`, options)

2
src/views/ResponseView.vue
View File

@ -1,5 +1,5 @@
<template>
<main class="flex place-content-center p-4 h-[100%]">
<main class="flex p-4 w-[100%] h-[100%] overflow-hidden">
<TableComp />
</main>