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

Extract api links call to service object

Browse Source 
* Change id to first attribute in html for consistency
pull/4784/head
Daniel Gayoso González 1 year ago
parent 2a1342241e
commit 672d8d93eb
3 changed files with 157 additions and 137 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. 258
      assets/vue/components/links/LinkForm.vue
  2. 2
      assets/vue/config/entrypoint.js
  3. 34
      assets/vue/services/linkService.js

258
assets/vue/components/links/LinkForm.vue
Unescape View File

@ -2,7 +2,13 @@
<form @submit.prevent="submitForm">
<div class="field">
<div class="p-float-label">
<input v-model="formData.url" name="url" type="text" id="link_url" class="p-inputtext p-component p-filled" />
<input
id="link_url"
v-model="formData.url"
name="url"
type="text"
class="p-inputtext p-component p-filled"
/>
<label for="link_url">
<span class="form_required">*</span>
URL
@ -11,7 +17,13 @@
</div>
<div class="field">
<div class="p-float-label">
<input v-model="formData.title" name="title" type="text" id="link_title" class="p-inputtext p-component p-filled" />
<input
id="link_title"
v-model="formData.title"
name="title"
type="text"
class="p-inputtext p-component p-filled"
/>
<label for="link_title">
<span class="form_required">*</span>
Link name
@ -20,7 +32,7 @@
</div>
<div class="field">
<div class="p-float-label">
<textarea v-model="formData.description" id="description" name="description"></textarea>
<textarea id="description" v-model="formData.description" name="description"></textarea>
<label for="description">
Description
</label>
@ -30,9 +42,9 @@
<div class="field">
<div class="p-float-label">
<select
id="link_category_id"
v-model="formData.category"
name="category_id"
id="link_category_id"
class="p-dropdown p-component p-inputwrapper p-inputwrapper-filled"
>
<option value="0">--</option>
@ -52,7 +64,13 @@
<div class="8">
<label for="qf_88d91d" class="h-4"></label>
<div id="on_homepage" class="field-checkbox">
<input v-model="formData.showOnHomepage" class="appearance-none checked:bg-support-4 outline-none" name="on_homepage" type="checkbox" value="1" id="qf_88d91d" />
<input
id="qf_88d91d"
v-model="formData.showOnHomepage"
class="appearance-none checked:bg-support-4 outline-none"
name="on_homepage"
type="checkbox" value="1"
/>
<label for="qf_88d91d">
Show link on course homepage
</label>
@ -61,7 +79,12 @@
</div>
<div class="field">
<div class="p-float-label">
<select v-model="formData.target" name="target" id="link_target" class="p-dropdown p-component p-inputwrapper p-inputwrapper-filled">
<select
id="link_target"
v-model="formData.target"
name="target"
class="p-dropdown p-component p-inputwrapper p-inputwrapper-filled"
>
<option value="_self">Open self</option>
<option value="_blank">Open blank</option>
<option value="_parent">Open parent</option>
@ -76,7 +99,7 @@
<div class="field 2">
<div class="8">
<label for="link_submitLink" class="h-4"></label>
<button class="btn btn--primary" name="submitLink" type="submit" id="link_submitLink">
<button id="link_submitLink" class="btn btn--primary" name="submitLink" type="submit">
<em class="mdi mdi-check"></em> Save links
</button>
</div>
@ -90,137 +113,100 @@
</form>
</template>
<script>
import axios from "axios";
import { ENTRYPOINT } from "../../config/entrypoint";
import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { ref, onMounted } from "vue";
export default {
props: {
linkId: {
type: Number,
default: null
}
<script setup>
import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
import linkService from "../../services/linkService";
import {useRoute, useRouter} from 'vue-router';
import {useI18n} from "vue-i18n";
import {onMounted, ref} from "vue";
import {useCidReq} from "../../composables/cidReq";
const {t} = useI18n();
const {cid, sid} = useCidReq()
const router = useRouter()
const route = useRoute()
const props = defineProps({
linkId: {
type: Number,
default: null
},
setup(props) {
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const parentResourceNodeId = ref(Number(route.params.node));
const resourceLinkList = ref(
JSON.stringify([
{
sid: route.query.sid,
cid: route.query.cid,
visibility: RESOURCE_LINK_PUBLISHED, // visible by default
},
])
);
const formData = ref({
url: 'http://',
title: '',
description: '',
category: 0,
showOnHomepage: false,
target: '_blank',
});
const categories = ref([]);
const currentCategory = ref(0);
const fetchCategories = () => {
axios.get(ENTRYPOINT + 'link_categories')
.then(response => {
categories.value = response.data['hydra:member']
})
.catch(error => {
console.error('Error fetching categories:', error);
});
};
const fetchLink = () => {
if (props.linkId) {
axios.get(ENTRYPOINT + 'links/' + props.linkId)
.then(response => {
console.log("fetchLink");
console.log(response.data);
formData.value = response.data;
if (response.data.category) {
formData.value.category = parseInt(response.data.category["@id"].split("/").pop());
}
console.log('currentCategory', currentCategory.value);
console.log('formData.category', formData.value.category);
})
.catch(error => {
console.error('Error fetching link:', error);
});
}
};
onMounted(() => {
fetchCategories();
fetchLink();
});
const submitForm = () => {
const postData = {
url: formData.value.url,
title: formData.value.title,
description: formData.value.description,
category: formData.value.category,
showOnHomepage: formData.value.showOnHomepage,
target: formData.value.target,
parentResourceNodeId: parentResourceNodeId.value,
resourceLinkList: resourceLinkList.value,
};
if (props.linkId) {
const endpoint = `${ENTRYPOINT}links/${props.linkId}`;
postData.id = props.linkId;
axios.put(endpoint, postData)
.then(response => {
console.log('Link updated:', response.data);
router.push({
name: "LinksList",
query: route.query,
});
})
.catch(error => {
console.error('Error updating link:', error);
});
} else {
const endpoint = `${ENTRYPOINT}links`;
axios.post(endpoint, postData)
.then(response => {
console.log('Link created:', response.data);
})
const parentResourceNodeId = ref(Number(route.params.node));
const resourceLinkList = ref(
JSON.stringify([
{
sid,
cid,
visibility: RESOURCE_LINK_PUBLISHED, // visible by default
},
])
);
const formData = ref({
url: 'http://',
title: '',
description: '',
category: 0,
showOnHomepage: false,
target: '_blank',
});
const categories = ref([]);
onMounted(() => {
fetchCategories();
fetchLink();
});
const fetchCategories = async () => {
try {
categories.value = await linkService.getCategories()
} catch (error) {
console.error('Error fetching categories:', error)
}
};
router.push({
name: "LinksList",
query: route.query,
});
})
.catch(error => {
console.error('Error creating link:', error);
});
const fetchLink = async () => {
if (props.linkId) {
try {
const response = await linkService.getLink(props.linkId)
formData.value = response
if (response.category) {
formData.value.category = parseInt(response.data.category["@id"].split("/").pop())
}
};
} catch (error) {
console.error('Error fetching link:', error)
}
}
}
const submitForm = async () => {
const postData = {
url: formData.value.url,
title: formData.value.title,
description: formData.value.description,
category: formData.value.category,
showOnHomepage: formData.value.showOnHomepage,
target: formData.value.target,
parentResourceNodeId: parentResourceNodeId.value,
resourceLinkList: resourceLinkList.value,
}
try {
if (props.linkId) {
await linkService.updateLink(props.linkId, postData)
} else {
await linkService.createLink(postData)
}
return {
formData,
categories,
currentCategory,
submitForm
};
},
};
await router.push({
name: "LinksList",
query: route.query,
})
} catch (error) {
console.error('Error updating link:', error)
}
}
</script>

2
assets/vue/config/entrypoint.js
Unescape View File

@ -1,3 +1,3 @@
export const ENTRYPOINT = window.location.origin+'/api/';
export const ENTRYPOINT = window.location.origin + '/api/'
//export const ENTRYPOINT = process.env.APP_API_PLATFORM_URL;

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

@ -0,0 +1,34 @@
import {ENTRYPOINT} from "../config/entrypoint";
import axios from "axios";
export default {
getLink: async(linkId) => {
const response = await axios.get(ENTRYPOINT + 'links/' + linkId)
return response.data
},
/**
* @param {Object} data
*/
createLink: async (data) => {
const endpoint = `${ENTRYPOINT}links`
const response = await axios.post(endpoint, data)
return response.data
},
/**
* @param {Number} linkId
* @param {Object} data
*/
updateLink: async (linkId, data) => {
const endpoint = `${ENTRYPOINT}links/${linkId}`;
data.id = linkId;
const response = await axios.put(endpoint, data)
return response.data
},
getCategories: async () => {
const response = await axios.get(ENTRYPOINT + 'link_categories')
return response.data['hydra:member']
},
}
Write Preview
Loading…
Cancel
Save