admin/apollo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update VideoGroup structure

Browse Source
This commit is contained in:
Emanuele Ferrelli
2025-05-21 12:41:42 +02:00
parent 27f596ed8f
commit 28ebf7f300
5 changed files with 87 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/main.js
View File

@@ -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);

6
src/service/KsVideoGroupService.js
View File

@@ -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 }
});
}
};

28
src/stores/KsVideoGroupStore.js
View File

@@ -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
};
});

5
src/views/pages/KsVideos/KsNewVideoForm.vue
View File

@@ -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 || '');
});
}

73
src/views/pages/KsVideos/KsVideoGroup.vue
View File

@@ -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(() => {
userPrefStore.fetchUserData().then(() => {
loadVideoGroups();
});
onMounted(async () => {
await userPrefStore.fetchUserData();
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(() => {
videoGroups.value = getCustomDatewithAllResponse();
});
await ksVideoGroupStore.fetchKsVideoGroup(userPrefStore.selectedProject.id);
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();