filters added
This commit is contained in:
sumedh
10
package-lock.json
generated
10
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"@primevue/themes": "^4.0.0",
|
||||
"axios": "^1.7.2",
|
||||
"chart.js": "3.3.2",
|
||||
"moment": "^2.30.1",
|
||||
"primeicons": "^6.0.1",
|
||||
"primevue": "^4.0.0",
|
||||
"vue": "^3.4.34",
|
||||
@@ -2519,6 +2520,15 @@
|
||||
"ufo": "^1.5.3"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"@primevue/themes": "^4.0.0",
|
||||
"axios": "^1.7.2",
|
||||
"chart.js": "3.3.2",
|
||||
"moment": "^2.30.1",
|
||||
"primeicons": "^6.0.1",
|
||||
"primevue": "^4.0.0",
|
||||
"vue": "^3.4.34",
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
|
||||
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'fileName', 'ingestionStatus', 'ingestionDateFormat']">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-4 p-4 bg-gray-100 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between gap-4 p-4 ">
|
||||
<span class="text-xl font-bold">KS Documents</span>
|
||||
<div class="flex items-center gap-2 flex-grow">
|
||||
<IconField class="flex-grow">
|
||||
@@ -13,12 +13,15 @@
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</IconField>
|
||||
</div>
|
||||
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" />
|
||||
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" v-tooltip="'Create New Document'" class="mr-2" />
|
||||
<Button icon="pi pi-check-circle" rounded raised @click="startlngestion()" v-tooltip="'Start All documents Ingestion'" class="mr-8" :disabled="allDocumentsIngested" :class="{ 'p-button-danger': allDocumentsIngested }"/>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>No Records found</template>
|
||||
<template #loading>Loading Data. Please wait....</template>
|
||||
<Column field="name" header="Name" style="min-width: 12rem">
|
||||
<Column field="id" header="ksdocuments id" sortable style="min-width: 12rem"/>
|
||||
<Column field="ingestionInfo.id" header="ksingestioninfo id" sortable style="min-width: 12rem"/>
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
@@ -26,7 +29,7 @@
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="fileName" header="File Name">
|
||||
<Column field="fileName" header="File Name" sortable >
|
||||
<template #body="{ data }">
|
||||
{{ data.fileName }}
|
||||
</template>
|
||||
@@ -34,7 +37,7 @@
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File Name" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="ingestionStatus" header="Status">
|
||||
<Column field="ingestionStatus" header="Status" sortable >
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
|
||||
</template>
|
||||
@@ -48,7 +51,7 @@
|
||||
</Column>
|
||||
<Column header="Ingestion Date" filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.ingestionDate }}
|
||||
{{ formatDate(data.ingestionDate) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" @change="updateFilterModel"/>
|
||||
@@ -56,11 +59,21 @@
|
||||
</Column>
|
||||
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" />
|
||||
<Tag :value="slotProps.data.id" />
|
||||
<Tag :value="slotProps.data.ingestionInfo.id" />
|
||||
<Button type="button" v-if="slotProps.data.ingestionStatus === 'NEW'" icon="pi pi-play" rounded
|
||||
@click="startIngestion(slotProps.data.id)" />
|
||||
<div class="flex justify-center items-center">
|
||||
<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" v-tooltip="'Edit the information of document'" class="mr-4" />
|
||||
<!--Tag :value="slotProps.data.id" /-->
|
||||
<!--Tag :value="slotProps.data.ingestionInfo.id" /-->
|
||||
<!--Button type="button" v-if="slotProps.data.ingestionStatus === 'NEW'" icon="pi pi-play" rounded
|
||||
@click="startIndividualngestion(slotProps.data.id)" v-tooltip="'Start Ingestion of document'" class="mr-4" /-->
|
||||
<Button type="button"
|
||||
icon="pi pi-play"
|
||||
rounded
|
||||
@click="startIndividualngestion(slotProps.data.id)"
|
||||
v-tooltip="'Start Ingestion of document'"
|
||||
:disabled="slotProps.data.ingestionStatus === 'INGESTED'"
|
||||
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }"
|
||||
class="mr-7" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
@@ -76,6 +89,7 @@ import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import axios from 'axios';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import moment from 'moment';
|
||||
|
||||
import Button from 'primevue/button';
|
||||
import Column from 'primevue/column';
|
||||
@@ -85,6 +99,7 @@ import Dialog from 'primevue/dialog';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Select from 'primevue/select';
|
||||
import Tag from 'primevue/tag';
|
||||
import Tooltip from 'primevue/tooltip';
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
@@ -119,6 +134,12 @@ onMounted(() => {
|
||||
});
|
||||
});
|
||||
|
||||
// Computed property to check if all documents are ingested
|
||||
const allDocumentsIngested = computed(() => {
|
||||
return ksdocuments.value && ksdocuments.value.every(doc => doc.ingestionStatus === 'INGESTED');
|
||||
});
|
||||
|
||||
|
||||
const getStatus = (data) => {
|
||||
if (data.ingestionStatus === 'INGESTED') {
|
||||
return 'success';
|
||||
@@ -145,7 +166,7 @@ const editKsDocument = (data) => {
|
||||
router.push({ name: 'ks-document-edit', params: { id: data.id } });
|
||||
}
|
||||
|
||||
const startIngestion = (id) => {
|
||||
const startIndividualngestion = (id) => {
|
||||
axios.get(`http://localhost:8082/test/ingest_document/${id}`)
|
||||
//axios.get('http://localhost:8082/test/ingestion_loop')
|
||||
.then(response => {
|
||||
@@ -167,9 +188,53 @@ const startIngestion = (id) => {
|
||||
});
|
||||
};
|
||||
|
||||
const startlngestion = () => {
|
||||
axios.get('http://localhost:8082/test/ingestion_loop')
|
||||
.then(response => {
|
||||
ingestionResult.value = response.data;
|
||||
if (response.data.status == "OK") {
|
||||
ksdocuments.value.forEach(element => {
|
||||
if (response.data.ingestedDocumentId.includes(element.id)) {
|
||||
element.status = "INGESTED"
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ingestionResult.value = `Error: ${response.data.message}`;
|
||||
}
|
||||
|
||||
ingestionDialogVisible.value = true;
|
||||
})
|
||||
.catch(error => {
|
||||
ingestionDialogVisible.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
const newKsDocument = () => {
|
||||
console.log('new');
|
||||
router.push({ name: 'ks-document-new' });
|
||||
|
||||
}
|
||||
|
||||
// Function to format date string
|
||||
function formatDate(dateString) {
|
||||
// Parse the date string using moment
|
||||
return moment(dateString).format('MM/DD/YYYY');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Custom styling for disabled red button */
|
||||
.p-button-danger {
|
||||
background-color: red;
|
||||
border-color: red;
|
||||
color: white;
|
||||
}
|
||||
.p-button-danger:disabled {
|
||||
background-color: red;
|
||||
border-color: red;
|
||||
color: white;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user