spinner updated

src/views/pages/KsDocuments.vue

@@ -1,5 +1,11 @@
 <template>
-	<div className="card">
+	<div class="card">
+		<div v-if="loading" class="loading-container">
+            <div class="spinner-container">
+                <ProgressSpinner class="spinner" />
+                <p class="loading-text">Loading data...</p>
+            </div>
+        </div>
 		<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
 			filterDisplay="menu" :loading="loading"
 			:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']">
@@ -22,7 +28,7 @@
 				</div>
 			</template>
 			<template #empty>No Records found</template>
-			<template #loading>Loading Data. Please wait....</template>
+			
 			<!--Column field="id" header="id" sortable style="min-width: 12rem">
 				<template #body="slotProps">
 					<Tag>ksdocuments: {{ slotProps.data.id }}</Tag>
@@ -125,6 +131,7 @@ import InputText from 'primevue/inputtext';
 import Select from 'primevue/select';
 import Tag from 'primevue/tag';
 import Tooltip from 'primevue/tooltip';
+import ProgressSpinner from 'primevue/progressspinner';
 
 
 const router = useRouter()
@@ -301,10 +308,6 @@ function formatDate(dateString) {
 </script>
 
 <style scoped>
-/* Add this to ensure buttons are spaced consistently */
-.space-x-3 > * + * {
-  margin-left: 1rem; /* Adjust as needed for desired spacing */
-}
 
 /* Custom styling for disabled red button */
 .p-button-danger {
@@ -319,4 +322,76 @@ function formatDate(dateString) {
 	color: red;
 	cursor: not-allowed;
 }
-</style>
+
+.space-x-3 > * + * {
+  margin-left: 1rem; /* Adjust as needed for desired spacing */
+}
+
+.loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed; /* Change to fixed */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999; /* Ensure it’s on top of everything */
+    background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a background to obscure content */
+}
+
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    animation: fade-in 1s ease-in-out;
+}
+
+.spinner {
+    animation: spin 1s linear infinite;
+    width: 50px;
+    height: 50px;
+    color: var(--primary-color, #007bff);
+}
+
+.loading-text {
+    font-size: 1.2rem;
+    animation: pulse 1.5s infinite;
+    margin-top: 10px;
+    color: var(--primary-color, #007bff);
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 1;
+        color: var(--primary-color, #007bff);
+    }
+    50% {
+        opacity: 0.11;
+        color: var(--primary-color, #007bff);
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.card {
+    margin: 2rem;
+}
+</style>

src/views/pages/KsGitRepos.vue

@@ -84,6 +84,7 @@
 
             <Column header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                 <template #body="slotProps">
+                <div class="flex justify-center items-center space-x-3" >
                     <Button
                         type="button"
                         icon="pi pi-play"
@@ -93,13 +94,23 @@
                         :disabled="slotProps.data.ingestionStatus === 'INGESTED'"
                         :class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }"
                     />
+                
+                <Button type="button" icon="pi pi-trash" rounded @click="showConfirmDialog(slotProps.data.id)"
+							v-tooltip="'Delete the ingested Record'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
+							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
+                </div>
+
+                <Dialog header="Confirm Deletion" :visible="confirmDialogVisible" modal @hide="resetConfirmDialog"
+							:style="{ width: '300px' }">
+							<p>Are you sure you want to delete this record?</p>
+							<template #footer>
+								<Button label="No" icon="pi pi-times" @click="confirmDialogVisible = false"/>
+								<Button label="Yes" icon="pi pi-check" @click="confirmDelete" class="p-button-danger" />
+							</template>
+				</Dialog>
                 </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" />
-        </Dialog> -->
         <Dialog v-model:visible="ingestionDialogVisible" :header="popupTitle">
             <p>{{ popupMessage }}</p>
             <Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
@@ -131,6 +142,9 @@ const codeRepoInfo = ref(null);
 const loading = ref(true);
 const toast = useToast();
 
+const confirmDialogVisible = ref(false);
+const recordToDelete = ref(null);
+
 const ingestionDialogVisible = ref(false);
 const ingestionResult = ref('');
 const popupTitle = ref('');
@@ -268,9 +282,75 @@ const getStatus = (data) => {
         return 'warn';
     }
 };
+
+//delete functionality
+function showConfirmDialog(id) {
+	recordToDelete.value = id;
+	confirmDialogVisible.value = true;
+}
+
+function confirmDelete() {
+	if (recordToDelete.value !== null) {
+		deleteRecordsFromVectorStore(recordToDelete.value);
+		recordToDelete.value = null;
+	}
+	confirmDialogVisible.value = false;
+}
+
+function resetConfirmDialog() {
+	recordToDelete.value = null;
+}
+
+
+const deleteRecordsFromVectorStore = (id) => {
+	const ksGitInfoToDelete = codeRepoInfo.value.find(ksGitInfo => ksGitInfo.id === id);
+
+	if (!ksGitInfoToDelete) {
+		console.error('Repository not found');
+		return;
+	}
+
+	const requestPayload = {
+		ksGitInfoId: id,
+		ksGitIngestionInfoId: ksGitInfoToDelete.ksGitIngestionInfo.id,
+		ksDoctype: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsDoctype,
+		ksDocSource: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsDocSource,
+		ksFileSource: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsFileSource,
+		ksApplicationName: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsApplicationName
+	};
+
+	axios.post('/fe-api/vector-store/deleteGitRecords', requestPayload)
+		.then(response => {
+			console.log('Delete resource:', response.data)
+			codeRepoInfo.value = codeRepoInfo.value.filter(ksGitInfo => ksGitInfo.id !== id);
+		})
+		.catch(error => {
+			console.error('Error deleting records: ', error)
+		});
+}
+
 </script>
 
 <style scoped>
+
+/* Custom styling for disabled red button */
+.p-button-danger {
+	background-color: white;
+	border-color: blue;
+	color: black;
+}
+
+.p-button-danger:disabled {
+	/*background-color: red;*/
+	border-color: red;
+	color: red;
+	cursor: not-allowed;
+}
+
+.space-x-3 > * + * {
+  margin-left: 1rem; /* Adjust as needed for desired spacing */
+}
+
 .loading-container {
     display: flex;
     align-items: center;