Merged PR 135: Update VideoGroup structure

Update VideoGroup structure

src/main.js

@@ -14,8 +14,10 @@ import '@/assets/tailwind.css';
 import Nora from '@primevue/themes/nora';
 import axios from 'axios';
 import { LoadingStore } from './stores/LoadingStore.js';
-axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8082' //'
+
-console.log(import.meta.env.VITE_BACKEND_URL);
+//axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;
+axios.defaults.baseURL = 'http://localhost:8082' 
+console.log(axios.defaults.baseURL);
 
 
 

src/service/KsVideoGroupService.js

@@ -23,5 +23,11 @@ export const KsVideoGroupService = {
 
     getVideoGroupById(id) {
         return axios.get(`/fe-api/video-group/${id}`);
+    },
+
+    getVideoCountByGroup(groupIds) {
+        return axios.get('/fe-api/ksvideos/video-count', {
+            params: { groupIds } 
+        });
     }
 };

src/stores/KsVideoGroupStore.js

@@ -5,6 +5,7 @@ import { KsVideoGroupService } from '../service/KsVideoGroupService';
 export const KsVideoGroupStore = defineStore('ksvideogroup_store', () => {
     const lstKsVideoGroup = ref([]);
     const selectedKsVideoGroup = ref(null);
+    const videoCountsByGroup = ref([]);
 
     async function fetchKsVideoGroup(projectId) {
         try {
@@ -20,6 +21,15 @@ export const KsVideoGroupStore = defineStore('ksvideogroup_store', () => {
         return lstKsVideoGroup.value;
     });
 
+    async function fetchKsVideoGroupById(id) {
+        try {
+            const response = await KsVideoGroupService.getVideoGroupById(id);
+            selectedKsVideoGroup.value = response.data;
+        } catch (error) {
+            console.error('Error fetching video group by ID:', error);
+        }
+    }
+
     const getSelectedKsVideoGroup = computed(() => {
         return selectedKsVideoGroup.value;
     });
@@ -29,12 +39,28 @@ export const KsVideoGroupStore = defineStore('ksvideogroup_store', () => {
         console.log('selectedVideoGroup', selectedKsVideoGroup.value);
     }
 
+    async function fetchVideoCountsByGroup(groupIds) {
+        try {
+            const response = await KsVideoGroupService.getVideoCountByGroup(groupIds);
+            videoCountsByGroup.value = response.data;
+        } catch (error) {
+            console.error('Error fetching video counts by group:', error);
+        }
+    }
+
+    const getVideoCountsByGroup = computed(() => {
+        return videoCountsByGroup.value;
+    });
+
     return {
         fetchKsVideoGroup,
         selectedKsVideoGroup,
         lstKsVideoGroup,
         ksVideoGroup,
         getSelectedKsVideoGroup,
-        setSelectedKsVideoGroup
+        setSelectedKsVideoGroup,
+        fetchKsVideoGroupById,
+        getVideoCountsByGroup,
+        fetchVideoCountsByGroup
     };
 });

src/views/pages/KsVideos/KsNewVideoForm.vue

@@ -138,7 +138,7 @@
                 </div>
                 <div class="flex justify-center mt-8 w-1/2 mx-auto" v-if="uploadPercentage > 0">
                   <div class="flex flex-col items-center gap-4 w-full">
-                    <p class="text-center">Wait until the upload is completed. You will be automatically redirected.</p>
+                    <p class="text-center">Wait until the upload is completed. You will be automatically redirected in few minutes.</p>
                     <ProgressBar :value="uploadPercentage" class="w-full" />
                   </div>
                 </div>
@@ -291,13 +291,12 @@ onMounted(async () => {
 const fetchVideos = async () => {
   ksVideoStore.fetchKsVideoByGroupId(route.params.groupId).then(() => {
     ksVideos.value = (ksVideoStore.ksVideo || []);
-    console.log('ksVideos', ksVideos.value);
   });
 };
 
 const fetchGroupVideo = async () => {
   ksVideoGroupStore.fetchKsVideoGroupById(route.params.groupId).then(() => {
-    groupDocType.value = (ksVideoGroupStore.getSelectedKsVideoGroup.type || []);
+    groupDocType.value = (ksVideoGroupStore.getSelectedKsVideoGroup.type || '');
   });
 }
 

src/views/pages/KsVideos/KsVideoGroup.vue

@@ -38,9 +38,20 @@
 						placeholder="Search By Name" />
 				</template>
 			</Column>
+			<Column field="description" header="Description" sortable>
+				<template #body="{ data }">
+					<span>
+						{{ data.description }}
+					</span>
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Description" />
+				</template>
+			</Column>
 			<Column field="type" header="DocType" dataType="date" sortable>
 				<template #body="{ data }">
-					{{ mapDocType(data.type) }}
+					{{data.type.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
@@ -56,6 +67,17 @@
 						placeholder="Search By Date" />
 				</template>
 			</Column>
+			<Column field="videoNumber" header="# Video" sortable>
+				<template #body="{ data }">
+					<span>
+						{{ data.videoCount }}
+					</span>
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By VideoNumber" />
+				</template>
+			</Column>
 			<Column field="id" header="Actions" style="width: 10rem" class="text-center">
 				<template #body="slotProps">
 					<div class="flex justify-center items-center space-x-3">
@@ -79,6 +101,11 @@
 				<InputText id="groupName" v-model="newGroup.name" placeholder="Enter group name"
 					style="width: 20rem;" />
 			</div>
+			<div>
+				<label for="description" class="block font-bold mb-2">Group Description</label>
+				<InputText id="description" v-model="newGroup.description" placeholder="Enter group description"
+					style="width: 20rem;" />
+			</div>
 			<div>
 				<label for="groupType" class="block font-bold mb-2">DocType</label>
 				<Dropdown id="groupType" v-model="newGroup.type" :options="groupTypes" optionLabel="name"
@@ -157,39 +184,37 @@ const filters = ref({
 const editingGroup = ref(null);
 const showNewGroupModal = ref(false);
 const showEditGroupModal = ref(false);
-const newGroup = ref({ name: '', type: '' });
+const newGroup = ref({ name: '', description: '', type: '' });
 const groupTypes = [
 	{ name: 'Functional video', value: 'functional_video' },
 	{ name: 'Code Instruction video', value: 'code_instruction_video' },
 	{ name: 'Specification video', value: 'specification_video' },
-	{ name: 'Other', value: 'other_video' }
+	{ name: 'Other video', value: 'other_video' }
 ];
 
-const mapDocType = (type) => {
-	const mapping = {
-		'functional_video': 'Functional Video',
-		'code_instruction_video': 'Code Instruction Video',
-		'specification_video': 'Specification Video',
-		'other_video': 'Other'
-	};
-	return mapping[type] || type;
-};
 
-onMounted(() => {
+onMounted(async () => {
-	userPrefStore.fetchUserData().then(() => {
+    await userPrefStore.fetchUserData();
-		loadVideoGroups();
+    await ksVideoGroupStore.fetchKsVideoGroup(userPrefStore.selectedProject.id);
-	});
+    const groupIdsArr = (ksVideoGroupStore.ksVideoGroup || []).map(g => g.id);
+    const groupIds = groupIdsArr.join(','); 
+    await ksVideoGroupStore.fetchVideoCountsByGroup(groupIds);
+    videoGroups.value = getCustomDateAndCountwithAllResponse();
 });
 
 const loadVideoGroups = async () => {
-	ksVideoGroupStore.fetchKsVideoGroup(userPrefStore.selectedProject.id).then(() => {
+	await ksVideoGroupStore.fetchKsVideoGroup(userPrefStore.selectedProject.id);
-		videoGroups.value = getCustomDatewithAllResponse();
+	videoGroups.value = getCustomDatewithAllResponse();
-	});
 };
 
-const getCustomDatewithAllResponse = () => {
+const getCustomDateAndCountwithAllResponse = () => {
+	const counts = ksVideoGroupStore.getVideoCountsByGroup || [];
+	const countMap = {};
+	counts.forEach(c => { countMap[c.id] = c.count; });
+
 	return [...(ksVideoGroupStore.ksVideoGroup || [])].map((d) => {
 		d.date = new Date(d.date);
+		d.videoCount = countMap[d.id] || 0;
 		return d;
 	});
 };
@@ -200,14 +225,15 @@ const openNewGroupModal = () => {
 
 const closeNewGroupModal = () => {
 	showNewGroupModal.value = false;
-	newGroup.value = { name: '', type: '' };
+	newGroup.value = { name: '', description: '', type: '' };
 };
 
 const saveNewGroup = async () => {
 	formDataToSend.value = new FormData(); // Reset del formData ogni volta
-	if (newGroup.value.name && newGroup.value.type) {
+	if (newGroup.value.name && newGroup.value.description && newGroup.value.type) {
 		try {
 			formDataToSend.value.append('name', newGroup.value.name.trim());
+			formDataToSend.value.append('description', newGroup.value.description)
 			formDataToSend.value.append('type', newGroup.value.type);
 			formDataToSend.value.append('projectId', userPrefStore.selectedProject.id);
 			formDataToSend.value.append('applicationId', "");
@@ -218,9 +244,6 @@ const saveNewGroup = async () => {
 				showDialog.value = true;
 				return;
 			}
-			// Add the name to the response data for display
-			//const groupType = groupTypes.find(type => type.value === response.data.type);
-			//response.data.type = groupType ? groupType.name : response.data.type;
 			videoGroups.value.push(response.data);
 			await loadVideoGroups();
 			closeNewGroupModal();