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

Minor: Migrate to script setup

Browse Source
pull/4789/head
Daniel Gayoso González 2 years ago
parent 66f04f2fb0
commit fc90edfae8
8 changed files with 247 additions and 323 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. 91
      assets/vue/components/glossary/GlossaryExportForm.vue
  2. 202
      assets/vue/components/glossary/GlossaryForm.vue
  3. 132
      assets/vue/components/glossary/GlossaryImportForm.vue
  4. 5
      assets/vue/components/glossary/GlossaryLayout.vue
  5. 35
      assets/vue/views/glossary/GlossaryExport.vue
  6. 33
      assets/vue/views/glossary/GlossaryImport.vue
  7. 33
      assets/vue/views/glossary/GlossaryTermCreate.vue
  8. 39
      assets/vue/views/glossary/GlossaryTermUpdate.vue

91
assets/vue/components/glossary/GlossaryExportForm.vue
Unescape View File

@ -13,61 +13,52 @@
</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";
<script setup>
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 {
setup() {
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const route = useRoute()
const router = useRouter()
const {t} = useI18n()
const selectedFormat = ref('csv');
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 selectedFormat = ref('csv')
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 submitForm = () => {
const format = selectedFormat.value;
const submitForm = () => {
const format = selectedFormat.value
const formData = new FormData();
formData.append('format', format);
formData.append("sid", route.query.sid);
formData.append("cid", route.query.cid);
const formData = new FormData()
formData.append('format', format)
formData.append("sid", route.query.sid)
formData.append("cid", route.query.cid)
const endpoint = `${ENTRYPOINT}glossaries/export`;
axios.post(endpoint, formData, { responseType: 'blob' })
.then(response => {
const fileUrl = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', `glossary.${format}`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(error => {
console.error('Error exporting glossary:', error);
});
};
return {
selectedFormat,
submitForm,
};
},
const endpoint = `${ENTRYPOINT}glossaries/export`
axios.post(endpoint, formData, {responseType: 'blob'})
.then(response => {
const fileUrl = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = fileUrl;
link.setAttribute('download', `glossary.${format}`)
document.body.appendChild(link)
link.click();
document.body.removeChild(link)
})
.catch(error => {
console.error('Error exporting glossary:', error)
})
};
</script>

202
assets/vue/components/glossary/GlossaryForm.vue
Unescape View File

@ -3,7 +3,8 @@
<form @submit.prevent="submitGlossaryForm" name="glossary" id="glossary">
<div class="field">
<div class="p-float-label">
<input v-model="formData.name" id="glossary_title" name="name" type="text" class="p-inputtext p-component p-filled" />
<input v-model="formData.name" id="glossary_title" name="name" type="text"
class="p-inputtext p-component p-filled"/>
<label for="glossary_title">
<span class="form_required">*</span>
@ -39,116 +40,107 @@
<small>Required field</small>
</div>
</div>
<input name="_qf__glossary" type="hidden" value="" id="glossary__qf__glossary" />
<input name="sec_token" type="hidden" value="1e7d47c276bfdfe308a79e1b71d58089" id="glossary_sec_token" />
<input name="_qf__glossary" type="hidden" value="" id="glossary__qf__glossary"/>
<input name="sec_token" type="hidden" value="1e7d47c276bfdfe308a79e1b71d58089" id="glossary_sec_token"/>
</form>
</div>
</template>
<script>
<script setup>
import axios from "axios";
import { ENTRYPOINT } from "../../config/entrypoint";
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { ref, onMounted } from "vue";
import {ENTRYPOINT} from "../../config/entrypoint";
import {useRoute, useRouter} from 'vue-router';
import {useI18n} from "vue-i18n";
import {ref, onMounted} from "vue";
import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
export default {
props: {
termId: {
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({
name: '',
description: '',
});
const fetchTerm = () => {
if (props.termId) {
axios.get(ENTRYPOINT + 'glossaries/' + props.termId)
.then(response => {
const glossary = response.data;
formData.value.name = glossary.name;
formData.value.description = glossary.description;
})
.catch(error => {
console.error('Error fetching link:', error);
});
}
};
onMounted(() => {
fetchTerm();
});
const submitGlossaryForm = () => {
const postData = {
name: formData.value.name,
description: formData.value.description,
parentResourceNodeId: parentResourceNodeId.value,
resourceLinkList: resourceLinkList.value,
sid: route.query.sid,
cid: route.query.cid,
};
if (props.termId) {
const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`;
axios.put(endpoint, postData)
.then(response => {
console.log('Glossary updated:', response.data);
router.push({
name: "GlossaryList",
query: route.query,
});
})
.catch(error => {
console.error('Error updating Glossary:', error);
});
} else {
const endpoint = `${ENTRYPOINT}glossaries`;
axios.post(endpoint, postData)
.then(response => {
console.log('Glossary created:', response.data);
router.push({
name: "GlossaryList",
query: route.query,
});
})
.catch(error => {
console.error('Error creating Glossary:', error);
});
}
};
return {
formData,
submitGlossaryForm,
};
},
};
const route = useRoute()
const router = useRouter()
const {t} = useI18n()
const props = defineProps({
termId: {
type: Number,
default: null
}
})
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({
name: '',
description: '',
})
onMounted(() => {
fetchTerm();
})
const fetchTerm = () => {
if (props.termId) {
axios.get(ENTRYPOINT + 'glossaries/' + props.termId)
.then(response => {
const glossary = response.data
formData.value.name = glossary.name
formData.value.description = glossary.description
})
.catch(error => {
console.error('Error fetching link:', error)
})
}
}
const submitGlossaryForm = () => {
const postData = {
name: formData.value.name,
description: formData.value.description,
parentResourceNodeId: parentResourceNodeId.value,
resourceLinkList: resourceLinkList.value,
sid: route.query.sid,
cid: route.query.cid,
}
if (props.termId) {
const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`
axios.put(endpoint, postData)
.then(response => {
console.log('Glossary updated:', response.data)
router.push({
name: "GlossaryList",
query: route.query,
})
})
.catch(error => {
console.error('Error updating Glossary:', error);
})
} else {
const endpoint = `${ENTRYPOINT}glossaries`
axios.post(endpoint, postData)
.then(response => {
console.log('Glossary created:', response.data)
router.push({
name: "GlossaryList",
query: route.query,
});
})
.catch(error => {
console.error('Error creating Glossary:', error)
})
}
}
</script>

132
assets/vue/components/glossary/GlossaryImportForm.vue
Unescape View File

@ -5,24 +5,25 @@
<label for="glossary_file" class="h-4">
File
</label>
<input class="mt-1" :ref="fileInputRef" name="file" type="file" id="glossary_file" />
<input class="mt-1" :ref="fileInputRef" name="file" type="file" id="glossary_file"/>
</div>
</div>
<div class="field">
<label>File type</label>
<div class="field-radiobutton">
<input name="file_type" value="csv" type="radio" id="qf_85f94d" v-model="fileType" checked="checked" />
<input name="file_type" value="csv" type="radio" id="qf_85f94d" v-model="fileType" checked="checked"/>
<label for="qf_85f94d" class="">CSV</label>
</div>
<div class="field-radiobutton">
<input name="file_type" value="xls" type="radio" id="qf_bff468" v-model="fileType" />
<input name="file_type" value="xls" type="radio" id="qf_bff468" v-model="fileType"/>
<label for="qf_bff468" class="">XLS</label>
</div>
</div>
<div class="field 2">
<div class="8">
<div id="replace" class="field-checkbox">
<input class="appearance-none checked:bg-support-4 outline-none" name="replace" type="checkbox" value="1" id="qf_5b8df0" v-model="replace" />
<input class="appearance-none checked:bg-support-4 outline-none" name="replace" type="checkbox" value="1"
id="qf_5b8df0" v-model="replace"/>
<label for="qf_5b8df0" class="">
Delete all terms before import.
</label>
@ -32,7 +33,8 @@
<div class="field 2">
<div class="8">
<div id="update" class="field-checkbox">
<input class="appearance-none checked:bg-support-4 outline-none" name="update" type="checkbox" value="1" id="qf_594e6e" v-model="update" />
<input class="appearance-none checked:bg-support-4 outline-none" name="update" type="checkbox" value="1"
id="qf_594e6e" v-model="update"/>
<label for="qf_594e6e" class="">
Update existing terms.
</label>
@ -49,79 +51,67 @@
</form>
</template>
<script>
<script setup>
import axios from 'axios';
import { ENTRYPOINT } from "../../config/entrypoint";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
import {ENTRYPOINT} from "../../config/entrypoint";
import {useRoute, useRouter} from "vue-router";
import {useI18n} from "vue-i18n";
import {ref} from "vue";
import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
export default {
setup() {
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const route = useRoute()
const router = useRouter()
const {t} = useI18n()
const fileInputRef = ref(null);
const fileType = ref("csv");
const replace = ref(false);
const update = ref(false);
const parentResourceNodeId = ref(Number(route.params.node));
const fileInputRef = ref(null)
const fileType = ref("csv")
const replace = ref(false)
const update = ref(false)
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 resourceLinkList = ref(
JSON.stringify([
{
sid: route.query.sid,
cid: route.query.cid,
visibility: RESOURCE_LINK_PUBLISHED, // visible by default
},
])
)
const submitForm = async () => {
const fileInput = document.getElementById('glossary_file');
const file = fileInput.files[0];
const formData = new FormData();
formData.append("file", file);
formData.append("file_type", fileType.value);
formData.append("replace", replace.value);
formData.append("update", update.value);
formData.append("sid", route.query.sid);
formData.append("cid", route.query.cid);
formData.append("parentResourceNodeId", parentResourceNodeId.value);
formData.append("resourceLinkList", resourceLinkList.value);
const submitForm = async () => {
const fileInput = document.getElementById('glossary_file')
const file = fileInput.files[0]
const formData = new FormData()
formData.append("file", file)
formData.append("file_type", fileType.value)
formData.append("replace", replace.value)
formData.append("update", update.value)
formData.append("sid", route.query.sid)
formData.append("cid", route.query.cid)
formData.append("parentResourceNodeId", parentResourceNodeId.value)
formData.append("resourceLinkList", resourceLinkList.value)
console.log('formData', formData);
console.log('formData', formData)
console.log(ENTRYPOINT + 'glossaries/import');
try {
// eslint-disable-next-line no-unused-vars
const response = await axios.post(ENTRYPOINT + 'glossaries/import', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
router.push({
name: "GlossaryList",
query: route.query,
});
} catch (error) {
fileInputRef.value = null;
fileType.value = "csv";
replace.value = false;
update.value = false;
console.log(ENTRYPOINT + 'glossaries/import')
try {
// eslint-disable-next-line no-unused-vars
const response = await axios.post(ENTRYPOINT + 'glossaries/import', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
};
})
return {
fileInputRef,
fileType,
replace,
update,
submitForm,
};
},
};
router.push({
name: "GlossaryList",
query: route.query,
})
} catch (error) {
fileInputRef.value = null
fileType.value = "csv"
replace.value = false
update.value = false
}
}
</script>

5
assets/vue/components/glossary/GlossaryLayout.vue
Unescape View File

@ -2,8 +2,5 @@
<router-view></router-view>
</template>
<script>
export default {
name: 'GlossaryLayout'
}
<script setup>
</script>

35
assets/vue/views/glossary/GlossaryExport.vue
Unescape View File

@ -4,34 +4,23 @@
<button class="btn btn--secondary" @click="goBack">Back</button>
</div>
<h2>Export Glossary</h2>
<GlossaryExportForm />
<GlossaryExportForm/>
</div>
</template>
<script>
import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue';
import {useRoute, useRouter} from "vue-router";
<script setup>
import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue'
import {useRoute, useRouter} from "vue-router"
export default {
components: {
GlossaryExportForm
},
setup() {
const router = useRouter();
const route = useRoute();
const router = useRouter()
const route = useRoute()
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
});
};
return {
goBack,
};
},
};
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
})
}
</script>
<style scoped>

33
assets/vue/views/glossary/GlossaryImport.vue
Unescape View File

@ -8,28 +8,17 @@
</div>
</template>
<script>
import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue";
import {useRoute, useRouter} from "vue-router";
<script setup>
import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue"
import {useRoute, useRouter} from "vue-router"
export default {
components: {
GlossaryImportForm,
},
setup() {
const router = useRouter();
const route = useRoute();
const router = useRouter()
const route = useRoute()
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
});
};
return {
goBack,
};
},
};
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
})
}
</script>

33
assets/vue/views/glossary/GlossaryTermCreate.vue
Unescape View File

@ -8,28 +8,17 @@
</div>
</template>
<script>
import GlossaryForm from "../../components/glossary/GlossaryForm.vue";
import { useRouter, useRoute } from 'vue-router';
<script setup>
import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
import { useRouter, useRoute } from 'vue-router'
export default {
components: {
GlossaryForm,
},
setup() {
const router = useRouter();
const route = useRoute();
const router = useRouter()
const route = useRoute()
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
});
};
return {
goBack,
};
},
};
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
})
}
</script>

39
assets/vue/views/glossary/GlossaryTermUpdate.vue
Unescape View File

@ -8,33 +8,20 @@
</div>
</template>
<script>
import GlossaryForm from "../../components/glossary/GlossaryForm.vue";
import {useRoute, useRouter} from "vue-router";
<script setup>
import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
import {useRoute, useRouter} from "vue-router"
import {computed} from "vue"
export default {
components: {
GlossaryForm,
},
setup() {
const router = useRouter();
const route = useRoute();
const router = useRouter()
const route = useRoute()
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
});
};
const termId = computed(() => route.params.id)
return {
goBack,
};
},
computed: {
termId() {
return this.$route.params.id;
},
},
};
const goBack = () => {
router.push({
name: "GlossaryList",
query: route.query,
})
}
</script>

Write Preview
Loading…
Cancel
Save