filter capability added

src/views/pages/KsDocuments.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 } });