spinner updated

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;