Added delete record button and redefined stores/services

src/views/pages/KsVideos/KsVideos.vue

@@ -71,7 +71,8 @@
 			</Column>
 			<Column field="ingestionInfo.metadata.KsDoctype" header="DocType" sortable style="min-width: 12rem">
 				<template #body="{ data }">
-					{{ mapDocType(data.ingestionInfo.metadata.KsDoctype) }}
+					{{data.ingestionInfo.metadata.KsDoctype.replace(/_/g, ' ').replace(/\b\w/g, char =>
+						char.toUpperCase())}}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
@@ -96,10 +97,10 @@
 							:disabled="slotProps.data.ingestionStatus === 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS' || slotProps.data.ingestionStatus == 'INGESTING' || slotProps.data.ingestionStatus == 'INGESTION_QUEUE'"
 							:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }"></Button>
 						<Button type="button" icon="pi pi-trash" rounded
-							@click="confirmDeleteFromVectorStore(slotProps.data.id)"
+							@click="(slotProps.data.ingestionStatus === 'LOADED' || slotProps.data.ingestionStatus === 'ERROR') ? deleteLoadedRecord(slotProps.data.id) : confirmDeleteFromVectorStore(slotProps.data.id)"
 							v-tooltip.left="'Delete the ingested Record'"
-							:disabled="slotProps.data.ingestionStatus !== 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
-							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
+							:disabled="(slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR') || slotProps.data.ingestionStatus == 'IN PROGRESS'"
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' }"></Button>
 
 						<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
 							v-tooltip.left="'Similarity Search'"
@@ -107,11 +108,17 @@
 							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
 						<Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
 							v-tooltip.left="'Download file'" class="mr-2 p-button"></Button>
+						<!-- <Button type="button" icon="pi pi-play" rounded @click="playVideo(slotProps.data)"
+							v-tooltip.left="'Play Video'" class="mr-2 p-button"></Button> -->
 					</div>
 				</template>
 			</Column>
 
 		</DataTable>
+		<!-- <Dialog v-model:visible="isVideoPlayerVisible" :header="selectedVideo?.fileName || 'Video Player'" :modal="true"
+			:closable="true" :style="{ width: '80vw' }">
+			<video v-if="selectedVideo" :src="selectedVideo.filePath" controls autoplay style="width: 100%;"></video>
+		</Dialog> -->
 	</div>
 </template>
 
@@ -121,13 +128,14 @@ import axios from 'axios';
 import moment from 'moment';
 import { useConfirm } from "primevue/useconfirm";
 import { useToast } from 'primevue/usetoast';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useRoute, 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';
@@ -155,6 +163,35 @@ const loadingStore = LoadingStore();
 const fe_status = ref('');
 let updateTimer = null; // Variabile per memorizzare l'ID del timer
 
+const isVideoPlayerVisible = ref(false);
+const selectedVideoUrl = ref(null);
+
+const playVideo = async (video) => {
+	try {
+		// 1) Scarica il video come arraybuffer o blob
+		const response = await KsVideoService.downloadKsVideo(video)
+		// 2) Leggi il content-type dinamico
+		const contentType = response.headers['content-type'] || 'video/mp4'
+		// 3) Crea il blob
+		const blob = new Blob([response.data], { type: contentType })
+		// 4) Crea e registra l'ObjectURL
+		const url = window.URL.createObjectURL(blob)
+		blobUrls.add(url)
+		// 5) Mostra il player
+		selectedVideoUrl.value = url
+		isVideoPlayerVisible.value = true
+
+	} catch (err) {
+		console.error('Error while preparing video for playback:', err)
+		toast.add({
+			severity: 'error',
+			summary: 'Playback Error',
+			detail: 'Impossibile caricare il video.',
+			life: 3000
+		})
+	}
+}
+
 const initFilters = () => {
 	filters.value = {
 		global: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -199,8 +236,6 @@ const onRowCollapse = (event) => {
 };
 
 
-// watch(() => userPrefStore.getSelApp, updateVideos, { immediate: true });
-
 function updateVideos() {
 	ksVideoStore.fetchKsVideoByGroupId(route.params.groupId).then(() => {
 		ksVideos.value = getCustomDatewithAllResponse();
@@ -214,9 +249,6 @@ const getCustomDatewithAllResponse = () => {
 	});
 };
 
-const allVideosIngested = computed(() => {
-	return ksVideos.value && ksVideos.value.every(doc => doc.ingestionStatus == 'INGESTED');
-});
 
 const getStatus = (data) => {
 	if (data.ingestionStatus == 'INGESTED') {
@@ -235,9 +267,6 @@ const updateFilterModel = () => {
 	console.log("updateFilterModel")
 }
 
-// Variabile reattiva per il nome del file
-const filename = ref("");
-
 // Funzione per scaricare il file
 const downloadFile = async (video) => {
 	console.log("video", video)
@@ -330,6 +359,32 @@ const confirmDeleteFromVectorStore = (id) => {
 	})
 };
 
+// Funzione per cancellare record in stato LOADED
+const deleteLoadedRecord = async (id) => {
+	toast.add({ severity: 'info', summary: 'Info', detail: 'Deleting record...', life: 3000 });
+	const videoToDelete = ksVideos.value.find(video => video.id === id);
+	if (!videoToDelete) {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Video not found', life: 3000 });
+		return;
+	}
+	const requestPayload = {
+		ksDocumentId: videoToDelete.id,
+		ksIngestionInfoId: videoToDelete.ingestionInfo.id,
+		ksDocType: videoToDelete.ingestionInfo.metadata.KsDoctype,
+		ksDocSource: videoToDelete.ingestionInfo.metadata.KsDocSource,
+		ksFileSource: videoToDelete.ingestionInfo.metadata.KsFileSource,
+		ksApplicationName: videoToDelete.ingestionInfo.metadata.KsApplicationName,
+	};
+	try {
+		await ksVideoStore.deleteKsVideoRecord(requestPayload);
+		toast.add({ severity: 'success', summary: 'Success', detail: 'Record deleted', life: 3000 });
+		updateVideos();
+	} catch (error) {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting record', life: 3000 });
+	}
+};
+
+
 //ingestion
 const startIndividualngestion = (id) => {
 	toast.add({ severity: 'info', summary: 'Info', detail: 'Starting indexing...', life: 3000 });
@@ -358,28 +413,6 @@ const startIndividualngestion = (id) => {
 		});
 };
 
-const startlngestion = () => {
-	axios.get('/test/ingestion_loop')
-		.then(response => {
-			ingestionResult.value = response.data;
-			if (response.data.status == "OK") {
-				ksVideos.value.forEach(element => {
-					if (response.data.ingestedVideoId.includes(element.id)) {
-						element.status = "INGESTED"
-					}
-				});
-			} else {
-				ingestionResult.value = `Error: ${response.data.message}`;
-			}
-
-			//ingestionDialogVisible.value = true;
-		})
-		.catch(error => {
-			//ingestionDialogVisible.value = true;
-			console.error('Error ingesting records: ', error)
-			toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Ingestion', life: 3000 });
-		});
-};
 
 //new record creation
 const newKsVideo = () => {
@@ -413,13 +446,10 @@ const mapDocType = (type) => {
 	return mapping[type] || type;
 };
 
-// Function to format date string
 function formatDate(dateString) {
-	// Parse the date string using moment
 	return moment(dateString).format('DD/MM/YYYY');
 }
 
-
 </script>
 
 <style scoped>