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

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