From 28d4ac11845f45e2828b995f80f923c347ea1a2e Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Fri, 4 Oct 2024 18:11:46 +0530
Subject: [PATCH] textingestion UI changes

---
 src/layout/AppMenu.vue      |   3 +-
 src/router/index.js         |   6 ++
 src/views/pages/KsTexts.vue | 129 ++++++++++++++++++++++++++++++++++++
 3 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 src/views/pages/KsTexts.vue

diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 95861bd..7ed57b6 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -7,7 +7,8 @@ const model = ref([
     {
         label: 'Knowledge Source',
         items: [{ label: 'Documents', icon: 'pi pi-fw pi-id-card', to: '/ksdocuments' },
-        { label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos' }
+        { label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos' },
+        { label: 'Texts', icon: 'pi pi-fw pi-id-card', to: '/kstexts' }
         ]
     },
     {
diff --git a/src/router/index.js b/src/router/index.js
index 5969bac..8984ba9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,6 +34,12 @@ const router = createRouter({
               {path: '/clone', name: 'ks-git-clone-repo', component: () => import('@/views/pages/KsGitCloneRepoForm.vue')},        
           ]
         },
+        {
+          path: '/kstexts', 
+          children: [
+            {path: '', name: 'ks-texts', component: () => import('@/views/pages/KsTexts.vue')},
+          ]
+        },
       ]
     },
     {
diff --git a/src/views/pages/KsTexts.vue b/src/views/pages/KsTexts.vue
new file mode 100644
index 0000000..9706143
--- /dev/null
+++ b/src/views/pages/KsTexts.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+import axios from 'axios';
+import moment from 'moment';
+import Button from 'primevue/button';
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from 'primevue/usetoast';
+import { onMounted, ref } from 'vue';
+
+const textInfo = ref(null);
+const toast = useToast();
+const confirm = useConfirm();
+
+const filters = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }] },
+    ingestionDateFormat: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+    ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+});
+onMounted(() => {
+    fectchDetails();
+});
+
+const fectchDetails = async () => {
+    try {
+        const response = await axios.get('/texts');
+        console.log(response.data);
+        textInfo.value = getCustomDatewithAllResponse(response.data);
+    } catch (error) {
+        console.error('Failed to fetch texts info: ', error)
+    }
+}
+
+const ingesttext = (textDetails) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: "Do you want to Proceed?",
+        icon: 'pip pi-exclamation-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Ingest Record',
+            severity: 'danger',
+        },
+        accept: () => {
+            axios.get(`/ingest_texts/${textDetails.id}`)
+                .then((response) => {
+                    toast.add({ severity: 'success', summary: 'Ingestion Summary', detail: 'Ingestion Done', life: 6000 });
+                    console.log("inhgestion info: ", response.data)
+
+                })
+                .catch((error) => {
+                    console.error('Error while ingestion', error)
+                    toast.add({ severity: 'error', summary: 'Error Summary', detail: 'Ingestion Failed', life: 6000 });
+                })
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+        }
+    })
+};
+//format date
+const getCustomDatewithAllResponse = (data) => {
+    return [...(data || [])].map((d) => {
+        d.ingestionDateFormat = new Date(d.ingestionDateFormat);
+        return d;
+    })
+}
+
+function formatDate(dateString) {
+    // Parse the date string using moment
+    return moment(dateString).format('MM/DD/YYYY');
+}
+</script>
+<template>
+    <div>
+        <div content-section introduction big-title>
+            <div class="feature-intro">
+                <h1>Texts <span>DataTable</span></h1>
+            </div>
+        </div>
+        <div class="card">
+            <Toast />
+            <ConfirmPopup></ConfirmPopup>
+            <Toolbar class="mb-6">
+
+            </Toolbar>
+            <DataTable :value="textInfo" :filters="filters">
+                <Column field="id" header="Id">
+                    {{ id }}
+                </Column>
+                <Column field="name" header="Name">
+                    <template #body="{ data }">
+                        {{ data.name }}
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+                            placeholder="Search By Name"></InputText>
+                    </template>
+                </Column>
+                <Column field="KsApplicationName" header="ApplicationName">
+                    <template #body="{ data }">
+                        {{ data.ingestionInfo.metadata.KsApplicationName }}
+                    </template>
+                </Column>
+                <Column field="ingestionDate" header="Date">
+                    <template #body="{ data }">
+                        {{ formatDate(data.ingestionDate) }}
+                    </template>
+                </Column>
+                <Column field="ingestionStatus" header="ingestionStatus">
+                    <template #body="{ data }">
+                        {{ data.ingestionStatus }}
+                    </template>
+                </Column>
+                <Column :exportable="false" style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <Button text raised rounded severity="info" type="button" class="mr-2" icon="pi pi-play"
+                            @click="ingesttext(slotProps.data)" v-tooltip.top="'Start Ingestion of text'">
+                        </Button>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </div>
+</template>
\ No newline at end of file