chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Migrate axios calls to service

Browse Source 
* Migrate axios calls to service to make calls to the service consistent
with other components
* Add notifications to give user feedback about the actions they made
pull/4784/head
Daniel Gayoso González 2 years ago
parent d6e4f00112
commit 8136a97cfd
4 changed files with 179 additions and 142 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      assets/vue/components/basecomponents/BaseCard.vue
  2. 18
      assets/vue/components/links/LinkCategoryCard.vue
  3. 62
      assets/vue/services/linkService.js
  4. 238
      assets/vue/views/links/LinksList.vue

3
assets/vue/components/basecomponents/BaseCard.vue
Unescape View File

@ -2,6 +2,9 @@
<Card
:class="customClass"
>
<template #header>
<slot name="header"></slot>
</template>
<template #content>
<slot></slot>
</template>

18
assets/vue/components/links/LinkCategoryCard.vue
Unescape View File

@ -1,10 +1,16 @@
<template>
<BaseCard plain>
<slot name="header">
<h5 class="mb-2">{{ t('General') }}</h5>
</slot>
<hr class="mt-0 mb-4">
<slot></slot>
<BaseCard plain class="bg-white">
<template #header>
<div class="px-4 py-2 -mb-2 bg-gray-15">
<slot name="header"/>
</div>
</template>
<hr class="-mt-2 mb-4 -mx-4">
<div>
<slot/>
</div>
</BaseCard>
</template>

62
assets/vue/services/linkService.js
Unescape View File

@ -3,10 +3,18 @@ import axios from "axios";
export default {
/**
* @param {Object} params
*/
getLinks: async (params) => {
const response = await axios.get(ENTRYPOINT + 'links/', {params})
return response.data
},
/**
* @param {Number|String} linkId
*/
getLink: async(linkId) => {
getLink: async (linkId) => {
const response = await axios.get(ENTRYPOINT + 'links/' + linkId)
return response.data
},
@ -33,6 +41,35 @@ export default {
return response.data
},
/**
* @param {Number|String} linkId
* @param {Boolean} visible
*/
toggleLinkVisibility: async (linkId, visible) => {
const endpoint = `${ENTRYPOINT}links/${linkId}/toggle_visibility`
const response = await axios.put(endpoint, {visible})
return response.data
},
/**
* @param {Number|String} linkId
* @param {Number} position
*/
moveLink: async (linkId, position) => {
const endpoint = `${ENTRYPOINT}links/${linkId}/move`;
const response = await axios.put(endpoint, {position})
return response.data
},
/**
* @param {Number|String} linkId
*/
deleteLink: async (linkId) => {
const endpoint = `${ENTRYPOINT}links/${linkId}`
const response = await axios.delete(endpoint)
return response.data
},
getCategories: async () => {
const response = await axios.get(ENTRYPOINT + 'link_categories')
return response.data['hydra:member']
@ -49,7 +86,7 @@ export default {
/**
* @param {Object} data
*/
createCategory: async(data) => {
createCategory: async (data) => {
const endpoint = `${ENTRYPOINT}link_categories`
const response = await axios.post(endpoint, data)
return response.data
@ -59,9 +96,28 @@ export default {
* @param {Number|String} categoryId
* @param {Object} data
*/
updateCategory: async(categoryId, data) => {
updateCategory: async (categoryId, data) => {
const endpoint = `${ENTRYPOINT}link_categories/${categoryId}`
const response = await axios.put(endpoint, data)
return response.data
},
/**
* @param {Number|String} categoryId
*/
deleteCategory: async (categoryId) => {
const endpoint = `${ENTRYPOINT}link_categories/${categoryId}`
const response = await axios.delete(endpoint)
return response.data
},
/**
* @param {Number|String} categoryId
* @param {Boolean} visible
*/
toggleCategoryVisibility: async (categoryId, visible) => {
const endpoint = `${ENTRYPOINT}link_categories/${categoryId}/toggle_visibility`;
const response = await axios.put(endpoint, {visible})
return response.data
},
}

238
assets/vue/views/links/LinksList.vue
Unescape View File

@ -22,6 +22,13 @@
type="black"
@click="exportToPDF"
/>
<BaseButton
:label="t('Switch to student view')"
icon="eye-on"
class="mr-2 mb-2"
type="black"
@click="toggleTeacherStudent"
/>
</ButtonToolbar>
<div v-if="!linksWithoutCategory && !categories">
@ -43,6 +50,10 @@
<div class="flex flex-col gap-4">
<!-- Render the list of links -->
<LinkCategoryCard v-if="linksWithoutCategory && linksWithoutCategory.length > 0">
<template #header>
<h5>{{ t('General') }}</h5>
</template>
<ul>
<li v-for="link in linksWithoutCategory" :key="link.id" class="mb-4">
<LinkItem
@ -61,7 +72,7 @@
<LinkCategoryCard v-for="category in categories" :key="category.info.id">
<template #header>
<div class="flex justify-between mb-2">
<div class="flex justify-between">
<div class="flex items-center">
<BaseIcon class="mr-2" icon="folder-generic" size="big"/>
<h5>{{ category.info.name }}</h5>
@ -75,18 +86,18 @@
@click="editCategory(category)"
/>
<BaseButton
:label="t('Delete')"
:label="t('Change visibility')"
type="black"
:icon="category.info.visible ? 'eye-on' : 'eye-off'"
size="small"
@click="deleteCategory(category)"
@click="toggleCategoryVisibility(category)"
/>
<BaseButton
:label="t('Delete')"
type="danger"
type="black"
icon="delete"
size="small"
@click="toggleCategoryVisibility(category)"
@click="deleteCategory(category)"
/>
</div>
</div>
@ -122,12 +133,11 @@ import {computed, onMounted, ref} from "vue";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {useI18n} from "vue-i18n";
import axios from "axios";
import {ENTRYPOINT} from "../../config/entrypoint";
import BaseIcon from "../../components/basecomponents/BaseIcon.vue";
import LinkItem from "../../components/links/LinkItem.vue";
import {useNotification} from "../../composables/notification";
import LinkCategoryCard from "../../components/links/LinkCategoryCard.vue";
import linkService from "../../services/linkService";
const store = useStore();
const route = useRoute();
@ -146,6 +156,13 @@ const categories = ref([]);
const selectedLink = ref(null);
const selectedCategory = ref(null);
onMounted(() => {
linksWithoutCategory.value = [];
categories.value = [];
fetchLinks()
});
function editLink(link) {
selectedLink.value = {...link};
router.push({
@ -155,90 +172,63 @@ function editLink(link) {
});
}
function deleteLink(id) {
axios
.delete(`${ENTRYPOINT}links/${id}`)
.then(response => {
console.log('Link deleted:', response.data);
fetchLinks();
})
.catch(error => {
console.error('Error deleting link:', error);
});
async function deleteLink(id) {
try {
await linkService.deleteLink(id)
notifications.showSuccessNotification(t('Link deleted'))
fetchLinks()
} catch (error) {
console.error('Error deleting link:', error);
notifications.showErrorNotification(t('Could not delete link'))
}
}
function checkLink(id, url) {
// Implement the logic to check the link using the provided id and url
}
function toggleVisibility(link) {
const makeVisible = !link.visible;
const endpoint = `${ENTRYPOINT}links/${link.iid}/toggle_visibility`;
axios
.put(endpoint, {visible: makeVisible})
.then(response => {
const updatedLink = response.data;
notifications.showSuccessNotification(t('Link visibility updated'))
async function toggleVisibility(link) {
try {
const makeVisible = !link.visible;
await linkService.toggleLinkVisibility(link.iid, makeVisible)
notifications.showSuccessNotification(t('Link visibility updated'))
fetchLinks()
linksWithoutCategory.value.forEach((item) => {
if (item.iid === link.iid) {
item.linkVisible = !item.linkVisible;
}
})
.catch(error => {
console.error('Error updating link visibility:', error);
});
linksWithoutCategory.value.forEach((item) => {
if (item.iid === link.iid) {
item.linkVisible = !item.linkVisible;
}
});
} catch (error) {
console.error('Error deleting link:', error);
notifications.showErrorNotification(t('Could not change visibility of link'))
}
}
function moveUp(id, position) {
console.log('linkIndex Down position', position);
// Send the updated position to the server
const endpoint = `${ENTRYPOINT}links/${id}/move`;
async function moveUp(id, position) {
let newPosition = parseInt(position) - 1;
if (newPosition < 0) {
newPosition = 0;
}
console.log('linkIndex Up newPosition', newPosition);
axios
.put(endpoint, {position: newPosition})
.then((response) => {
console.log("Link moved up:", response.data);
// Perform any additional actions or updates if needed
fetchLinks();
})
.catch((error) => {
console.error("Error moving link up:", error);
});
try {
await linkService.moveLink(id, newPosition)
notifications.showSuccessNotification(t('Link moved up'))
fetchLinks()
} catch (error) {
console.error("Error moving link up:", error);
notifications.showErrorNotification(t('Could not moved link up'))
}
}
function moveDown(id, position) {
console.log('linkIndex Down position', position);
// Send the updated position to the server
const endpoint = `${ENTRYPOINT}links/${id}/move`;
async function moveDown(id, position) {
const newPosition = parseInt(position) + 1;
console.log('linkIndex Down newPosition', newPosition);
axios
.put(endpoint, {position: newPosition})
.then((response) => {
console.log("Link moved down:", response.data);
// Perform any additional actions or updates if needed
fetchLinks();
})
.catch((error) => {
console.error("Error moving link down:", error);
});
try {
await linkService.moveLink(id, newPosition)
notifications.showSuccessNotification(t('Link moved down'))
fetchLinks()
} catch (error) {
console.error("Error moving link down:", error);
notifications.showErrorNotification(t('Could not moved link down'))
}
}
function redirectToCreateLink() {
@ -255,38 +245,7 @@ function redirectToCreateLinkCategory() {
});
}
function fetchLinks() {
const params = {
'resourceNode.parent': route.query.parent || null,
'cid': route.query.cid || null,
'sid': route.query.sid || null
};
axios
.get(ENTRYPOINT + 'links', {params})
.then(response => {
console.log('responsedata:', response.data);
const data = response.data;
linksWithoutCategory.value = data.linksWithoutCategory;
categories.value = data.categories;
console.log('linksWithoutCategory:', linksWithoutCategory.value);
console.log('categories:', categories.value);
})
.catch(error => {
console.error('Error fetching links:', error);
});
}
onMounted(() => {
linksWithoutCategory.value = [];
categories.value = [];
fetchLinks();
});
function editCategory(category) {
console.log('category.info.id', category.info.id);
selectedCategory.value = {...category};
router.push({
name: "UpdateLinkCategory",
@ -295,38 +254,51 @@ function editCategory(category) {
});
}
function deleteCategory(category) {
axios
.delete(`${ENTRYPOINT}link_categories/${category.info.id}`)
.then(response => {
console.log('Category deleted:', response.data);
fetchLinks();
})
.catch(error => {
console.error('Error deleting category:', error);
});
async function deleteCategory(category) {
try {
await linkService.deleteCategory(category.info.id)
notifications.showSuccessNotification(t('Category deleted'))
fetchLinks()
} catch (error) {
console.error('Error deleting category:', error);
notifications.showErrorNotification(t('Could not delete category'))
}
}
function toggleCategoryVisibility(category) {
const makeVisible = !category.info.visible;
const endpoint = `${ENTRYPOINT}link_categories/${category.info.id}/toggle_visibility`;
axios
.put(endpoint, {visible: makeVisible})
.then(response => {
const updatedLinkCategory = response.data;
console.log('Link visibility updated:', updatedLinkCategory);
category.info.visible = updatedLinkCategory.linkCategoryVisible;
})
.catch(error => {
console.error('Error updating link visibility:', error);
});
async function toggleCategoryVisibility(category) {
const makeVisible = !category.info.visible
try {
const updatedLinkCategory = await linkService.toggleCategoryVisibility(category.info.id, makeVisible)
category.info.visible = updatedLinkCategory.linkCategoryVisible;
notifications.showSuccessNotification(t('Visibility of category changed'))
} catch (error) {
console.error('Error updating link visibility:', error)
notifications.showErrorNotification(t('Could not change visibility of category'))
}
}
function exportToPDF() {
// TODO
}
function toggleTeacherStudent() {
// TODO
}
async function fetchLinks() {
const params = {
'resourceNode.parent': route.query.parent || null,
'cid': route.query.cid || null,
'sid': route.query.sid || null
};
try {
const data = await linkService.getLinks(params)
linksWithoutCategory.value = data.linksWithoutCategory;
categories.value = data.categories;
} catch (error) {
console.error('Error fetching links:', error);
notifications.showErrorNotification(t('Could not retrieve links'))
}
}
</script>

Write Preview
Loading…
Cancel
Save