filter capability added
This commit is contained in:
sumedh
@@ -18,8 +18,8 @@ const router = createRouter({
|
||||
children: [
|
||||
{path: '', name: 'ks-document', component: () => import('@/views/pages/KsDocuments.vue')},
|
||||
{path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsNewDocumentForm.vue')},
|
||||
{path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
|
||||
{path: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/KsSimilaritySearch.vue')}
|
||||
//{path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
|
||||
{path: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/KsSimilaritySearch.vue')},
|
||||
|
||||
]
|
||||
|
||||
|
||||
@@ -1,21 +1,59 @@
|
||||
<template>
|
||||
<div className="card">
|
||||
|
||||
<DataTable :value="ksdocuments" :paginator="true" :rows="10" dataKey="id" :rowHover="true" showGridlines>
|
||||
<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 flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center justify-between gap-4 p-4 bg-gray-100 border-b border-gray-200">
|
||||
<span class="text-xl font-bold">KS Documents</span>
|
||||
<div class="flex items-center gap-2 flex-grow">
|
||||
<IconField class="flex-grow">
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</IconField>
|
||||
</div>
|
||||
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="fileName" header="File Name"></Column>
|
||||
<template #empty>No Records found</template>
|
||||
<template #loading>Loading Data. Please wait....</template>
|
||||
<Column field="name" header="Name" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="fileName" header="File Name">
|
||||
<template #body="{ data }">
|
||||
{{ data.fileName }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File Name" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="ingestionStatus" header="Status">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
|
||||
<template #option="{ option }">
|
||||
<Tag :value="option" :severity="getStatus({ ingestionStatus: option })" />
|
||||
</template>
|
||||
</Select>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Ingestion Date" filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.ingestionDate }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" @change="updateFilterModel"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="ingestionDate" header="Ingestion Date"></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)" />
|
||||
@@ -26,7 +64,6 @@
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<Dialog header="Ingestion Result" v-model:visible="ingestionDialogVisible" :modal="true" :closable="false">
|
||||
<p>{{ ingestionResult }}</p>
|
||||
<Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
|
||||
@@ -35,21 +72,50 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import Button from 'primevue/button';
|
||||
import Column from 'primevue/column';
|
||||
import DataTable from 'primevue/datatable';
|
||||
import DatePicker from 'primevue/datepicker'
|
||||
import Dialog from 'primevue/dialog';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Select from 'primevue/select';
|
||||
import Tag from 'primevue/tag';
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const ksdocuments = ref(null);
|
||||
const loading = ref(true);
|
||||
|
||||
const ingestionDialogVisible = ref(false);
|
||||
const ingestionResult = ref('');
|
||||
const filters = ref();
|
||||
|
||||
const initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
fileName: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
ingestionDateFormat: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
|
||||
ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
|
||||
};
|
||||
};
|
||||
|
||||
initFilters();
|
||||
|
||||
const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here
|
||||
|
||||
onMounted(() => {
|
||||
axios.get('http://localhost:8082/fe-api/ksdocuments')
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
ksdocuments.value = response.data;
|
||||
ksdocuments.value = getCustomDatewithAllResponse(response.data);
|
||||
console.log(ksdocuments.value);
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -63,6 +129,17 @@ const getStatus = (data) => {
|
||||
}
|
||||
}
|
||||
|
||||
const getCustomDatewithAllResponse = (data) => {
|
||||
return [...(data || [])].map((d) => {
|
||||
d.ingestionDateFormat = new Date(d.ingestionDateFormat);
|
||||
return d;
|
||||
});
|
||||
};
|
||||
|
||||
const updateFilterModel = () => {
|
||||
console.log("updateFilterModel")
|
||||
}
|
||||
|
||||
const editKsDocument = (data) => {
|
||||
console.log(data);
|
||||
router.push({ name: 'ks-document-edit', params: { id: data.id } });
|
||||
|
||||
Reference in New Issue
Block a user