From 836e88707125e22d561e59dad15fa6a1bf791289 Mon Sep 17 00:00:00 2001
From: daniboygg <danigayosog@gmail.com>
Date: Mon, 22 Apr 2024 12:34:52 +0200
Subject: [PATCH 1/4] Documents: Remove vuex from audio recorder component

---
 .../documents/DocumentAudioRecorder.vue          | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/assets/vue/components/documents/DocumentAudioRecorder.vue b/assets/vue/components/documents/DocumentAudioRecorder.vue
index ad1aa848a9..a12a9e62b7 100644
--- a/assets/vue/components/documents/DocumentAudioRecorder.vue
+++ b/assets/vue/components/documents/DocumentAudioRecorder.vue
@@ -31,17 +31,16 @@
 
 <script setup>
 import { ref } from "vue";
-import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import BaseInputText from "../basecomponents/BaseInputText.vue";
 import AudioRecorder from "../AudioRecorder.vue";
 import BaseButton from "../basecomponents/BaseButton.vue";
 import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
 import { useCidReq } from "../../composables/cidReq";
+import documentsService from "../../services/documents"
 
 const { t } = useI18n();
 const queryParams = useCidReq();
-const store = useStore();
 
 const props = defineProps({
   parentResourceNodeId: {
@@ -70,7 +69,7 @@ const recordAudio = () => {
   audioRecorder.value.record();
 };
 
-const saveAudio = () => {
+const saveAudio = async () => {
   if (recordName.value === "") {
     recordError.value = t("It is necessary a file name before save recorded audio");
     return;
@@ -90,9 +89,12 @@ const saveAudio = () => {
       },
     ]),
   };
-  store
-    .dispatch("documents/createWithFormData", data)
-    .then(() => emit("document-saved"))
-    .catch((error) => emit("document-not-saved", error));
+
+  try {
+    await documentsService.createWithFormData(data)
+    emit("document-saved")
+  } catch (error) {
+    emit("document-not-saved", error)
+  }
 };
 </script>

From 092161858a27ea71d0a9ec2f2fe1a7bd16a4b0ba Mon Sep 17 00:00:00 2001
From: daniboygg <danigayosog@gmail.com>
Date: Thu, 25 Apr 2024 09:21:49 +0200
Subject: [PATCH 2/4] Documents: remove vuex from create file

* Set warning about using api.js
---
 .../components/documents/FormNewDocument.vue  |  2 +-
 .../vue/components/documents/TemplateList.vue |  5 +-
 assets/vue/services/api.js                    | 11 ++++
 assets/vue/services/documents.js              | 21 +++++++-
 assets/vue/views/documents/CreateFile.vue     | 54 ++++++++++---------
 5 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/assets/vue/components/documents/FormNewDocument.vue b/assets/vue/components/documents/FormNewDocument.vue
index 99d6058d69..5f6981c5ef 100644
--- a/assets/vue/components/documents/FormNewDocument.vue
+++ b/assets/vue/components/documents/FormNewDocument.vue
@@ -3,7 +3,7 @@
     <BaseInputTextWithVuelidate
       id="item_title"
       v-model.trim="item.title"
-      vuelidate-property="v$.item.title"
+      :vuelidate-property="v$.item.title"
       :label="$t('Title')"
     />
 
diff --git a/assets/vue/components/documents/TemplateList.vue b/assets/vue/components/documents/TemplateList.vue
index e55523e560..b1323edc6a 100644
--- a/assets/vue/components/documents/TemplateList.vue
+++ b/assets/vue/components/documents/TemplateList.vue
@@ -15,7 +15,10 @@
 export default {
   name: 'TemplateList',
   props: {
-    templates: []
+    templates: {
+      type: Array,
+      required: true,
+    }
   },
   methods: {
     selectTemplate(content) {
diff --git a/assets/vue/services/api.js b/assets/vue/services/api.js
index af8421d397..2fd9ffeece 100644
--- a/assets/vue/services/api.js
+++ b/assets/vue/services/api.js
@@ -1,5 +1,8 @@
 import fetch from '../utils/fetch';
 
+// As stated here https://github.com/chamilo/chamilo-lms/pull/5386#discussion_r1578471409
+// this service should not be used and instead the assets/bue/config/api.js should be used instead
+// take a look at assets/bue/services/socialService.js to have an example
 export default function makeService(endpoint, extensions = {}) {
   const baseService = {
     find(id, params) {
@@ -63,6 +66,14 @@ export default function makeService(endpoint, extensions = {}) {
         method: 'PUT',
         body: JSON.stringify(payload)
       });
+    },
+    handleError(error, errorsRef, violationsRef) {
+      if (error instanceof SubmissionError) {
+        violationsRef.value = error.errors
+        errorsRef.value = error.errors._error
+        return
+      }
+      errorsRef.value = error.message
     }
   };
 
diff --git a/assets/vue/services/documents.js b/assets/vue/services/documents.js
index 4bce188a24..0a04df88c9 100644
--- a/assets/vue/services/documents.js
+++ b/assets/vue/services/documents.js
@@ -1,3 +1,20 @@
-import makeService from './api';
+import makeService from "./api"
+import baseService from "./baseService"
 
-export default makeService('documents');
+// we should refactor this to use methods in export default using baseService
+// see assets/vue/services/api.js for reference
+const oldService = makeService("documents")
+
+export default {
+  ...oldService,
+
+  /**
+   * Retrieves all document templates for a given course.
+   *
+   * @param {string} courseId - The ID of the course.
+   * @returns {Promise}
+   */
+  getTemplates: async (courseId) => {
+    return baseService.get(`/template/all-templates/${courseId}`)
+  },
+}
diff --git a/assets/vue/views/documents/CreateFile.vue b/assets/vue/views/documents/CreateFile.vue
index b5da0b5510..f0ab8ba4f6 100644
--- a/assets/vue/views/documents/CreateFile.vue
+++ b/assets/vue/views/documents/CreateFile.vue
@@ -15,7 +15,7 @@
     <div class="documents-form-container">
       <DocumentsForm
         ref="createForm"
-        :errors="violations"
+        :errors="errors"
         :values="item"
       />
       <Panel
@@ -34,8 +34,6 @@
 </template>
 
 <script>
-import { mapActions } from "vuex"
-import { createHelpers } from "vuex-map-fields"
 import DocumentsForm from "../../components/documents/FormNewDocument.vue"
 import Loading from "../../components/Loading.vue"
 import Toolbar from "../../components/Toolbar.vue"
@@ -43,15 +41,10 @@ import CreateMixin from "../../mixins/CreateMixin"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
 import Panel from "primevue/panel"
 import TemplateList from "../../components/documents/TemplateList.vue"
-import axios from "axios"
+import documentsService from "../../services/documents"
 
 const servicePrefix = "Documents"
 
-const { mapFields } = createHelpers({
-  getterType: "documents/getField",
-  mutationType: "documents/updateField",
-})
-
 export default {
   name: "DocumentsCreateFile",
   servicePrefix,
@@ -68,19 +61,19 @@ export default {
     const finalTags = this.getCertificateTags()
     return {
       item: {
+        title: "",
+        contentFile: "",
         newDocument: true, // Used in FormNewDocument.vue to show the editor
         filetype: filetype,
         parentResourceNodeId: null,
         resourceLinkList: null,
-        contentFile: null,
       },
       templates: [],
+      isLoading: false,
+      errors: {},
       finalTags,
     }
   },
-  computed: {
-    ...mapFields(["error", "isLoading", "created", "violations"]),
-  },
   created() {
     this.item.parentResourceNodeId = this.$route.params.node
     this.item.resourceLinkList = JSON.stringify([
@@ -92,7 +85,6 @@ export default {
       },
     ])
   },
-
   methods: {
     handleBack() {
       this.$router.back()
@@ -100,17 +92,16 @@ export default {
     addTemplateToEditor(templateContent) {
       this.item.contentFile = templateContent
     },
-    fetchTemplates() {
+    async fetchTemplates() {
+      this.errors = {}
       const courseId = this.$route.query.cid
-      axios
-        .get(`/template/all-templates/${courseId}`)
-        .then((response) => {
-          this.templates = response.data
-          console.log("Templates fetched successfully:", this.templates)
-        })
-        .catch((error) => {
-          console.error("Error fetching templates:", error)
-        })
+      try {
+        let data = await documentsService.getTemplates(courseId)
+        this.templates = data
+      } catch (error) {
+        console.error(error)
+        this.errors = error.errors
+      }
     },
     getCertificateTags() {
       let finalTags = ""
@@ -144,7 +135,20 @@ export default {
 
       return finalTags
     },
-    ...mapActions("documents", ["createWithFormData", "reset"]),
+    async createWithFormData(payload) {
+      this.isLoading = true
+      this.errors = {}
+      try {
+        let response = await documentsService.createWithFormData(payload)
+        let data = await response.json()
+        console.log(data)
+      } catch (error) {
+        console.error(error)
+        this.errors = error.errors
+      } finally {
+        this.isLoading = false
+      }
+    },
   },
   mounted() {
     this.fetchTemplates()

From 6aa6abc5ee6af4d86d9740b2bda18c97c82c0b9c Mon Sep 17 00:00:00 2001
From: daniboygg <danigayosog@gmail.com>
Date: Thu, 25 Apr 2024 09:31:23 +0200
Subject: [PATCH 3/4] Documents: Change buttons to base buttons for consistency

---
 assets/vue/components/Toolbar.vue             | 80 ++++++++++---------
 .../components/basecomponents/BaseButton.vue  |  5 ++
 2 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/assets/vue/components/Toolbar.vue b/assets/vue/components/Toolbar.vue
index 256a118d5f..5e0f5996f5 100644
--- a/assets/vue/components/Toolbar.vue
+++ b/assets/vue/components/Toolbar.vue
@@ -1,11 +1,11 @@
 <template>
   <PrimeToolbar>
     <template #start>
-      <PrimeButton
+      <BaseButton
         v-if="handleBack"
         :label="$t('Back')"
-        icon="mdi mdi-arrow-left"
-        class="p-button-outlined"
+        type="primary"
+        icon="back"
         @click="backAction"
       />
 
@@ -26,12 +26,12 @@
         @click="editItem"
       />
 
-      <PrimeButton
+      <BaseButton
         v-if="handleSubmit"
-        :loading="isLoading"
-        :title="$t('Submit')"
-        class="p-button-outlined"
-        icon="mdi mdi-content-save"
+        :is-loading="isLoading"
+        :label="$t('Submit')"
+        type="success"
+        icon="save"
         @click="submitItem"
       />
 
@@ -81,12 +81,14 @@
 </template>
 
 <script>
-import PrimeToolbar from 'primevue/toolbar';
-import PrimeButton from 'primevue/button';
+import PrimeToolbar from "primevue/toolbar"
+import PrimeButton from "primevue/button"
+import BaseButton from "./basecomponents/BaseButton.vue"
 
 export default {
-  name: 'Toolbar',
+  name: "Toolbar",
   components: {
+    BaseButton,
     PrimeToolbar,
     PrimeButton,
   },
@@ -96,105 +98,105 @@ export default {
     },
     handleFilter: {
       type: Function,
-      required: false
+      required: false,
     },
     handleList: {
       type: Function,
-      required: false
+      required: false,
     },
     handleEdit: {
       type: Function,
-      required: false
+      required: false,
     },
     handleBack: {
       type: Function,
-      required: false
+      required: false,
     },
     handleSubmit: {
       type: Function,
-      required: false
+      required: false,
     },
     handleReset: {
       type: Function,
-      required: false
+      required: false,
     },
     handleDelete: {
       type: Function,
-      required: false
+      required: false,
     },
     handleAdd: {
       type: Function,
-      required: false
+      required: false,
     },
     handleSend: {
       type: Function,
-      required: false
+      required: false,
     },
     handleAddDocument: {
       type: Function,
-      required: false
+      required: false,
     },
     onSendFilter: {
       type: Function,
-      required: false
+      required: false,
     },
     resetFilter: {
       type: Function,
-      required: false
+      required: false,
     },
     handleUploadDocument: {
       type: Function,
-      required: false
+      required: false,
     },
     title: {
       type: String,
-      required: false
+      required: false,
     },
     isLoading: {
       type: Boolean,
       required: false,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
   methods: {
     backAction() {
       if (this.handleBack) {
-        this.handleBack();
+        this.handleBack()
       }
     },
     listItem() {
       if (this.handleList) {
-        this.handleList();
+        this.handleList()
       }
     },
     addItem() {
       if (this.handleAdd) {
-        this.handleAdd();
+        this.handleAdd()
       }
     },
     addDocument() {
       if (this.addDocument) {
-        this.handleAddDocument();
+        this.handleAddDocument()
       }
     },
     uploadDocument() {
       if (this.uploadDocument) {
-        this.handleUploadDocument();
+        this.handleUploadDocument()
       }
     },
     editItem() {
       if (this.handleEdit) {
-        this.handleEdit();
+        this.handleEdit()
       }
     },
     sendItem() {
       if (this.handleSend) {
-        this.handleSend();
+        this.handleSend()
       }
     },
     submitItem() {
       if (this.handleSubmit) {
-        this.handleSubmit();
+        this.handleSubmit()
       }
     },
     onHandleDelete() {
@@ -208,9 +210,9 @@ export default {
     },
     resetItem() {
       if (this.handleReset) {
-        this.handleReset();
+        this.handleReset()
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
diff --git a/assets/vue/components/basecomponents/BaseButton.vue b/assets/vue/components/basecomponents/BaseButton.vue
index 61570b5a07..3217f1eb61 100644
--- a/assets/vue/components/basecomponents/BaseButton.vue
+++ b/assets/vue/components/basecomponents/BaseButton.vue
@@ -13,6 +13,7 @@
     :text="onlyIcon"
     :title="onlyIcon ? label : undefined"
     :type="isSubmit ? 'submit' : 'button'"
+    :loading="isLoading"
     @click="$emit('click', $event)"
   />
 </template>
@@ -62,6 +63,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  }
 })
 
 defineEmits(["click"])

From 31783531f913c9335747a17bce06f3bcea3aa5f1 Mon Sep 17 00:00:00 2001
From: daniboygg <danigayosog@gmail.com>
Date: Thu, 25 Apr 2024 09:33:06 +0200
Subject: [PATCH 4/4] Minor: format files

---
 .../components/basecomponents/BaseButton.vue  |  2 +-
 .../documents/DocumentAudioRecorder.vue       | 87 ++++++++++-------
 .../components/documents/FormNewDocument.vue  | 93 +++++++++----------
 .../vue/components/documents/TemplateList.vue | 11 ++-
 4 files changed, 105 insertions(+), 88 deletions(-)

diff --git a/assets/vue/components/basecomponents/BaseButton.vue b/assets/vue/components/basecomponents/BaseButton.vue
index 3217f1eb61..cff8ea1ae1 100644
--- a/assets/vue/components/basecomponents/BaseButton.vue
+++ b/assets/vue/components/basecomponents/BaseButton.vue
@@ -66,7 +66,7 @@ const props = defineProps({
   isLoading: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 
 defineEmits(["click"])
diff --git a/assets/vue/components/documents/DocumentAudioRecorder.vue b/assets/vue/components/documents/DocumentAudioRecorder.vue
index a12a9e62b7..ada8b41ea1 100644
--- a/assets/vue/components/documents/DocumentAudioRecorder.vue
+++ b/assets/vue/components/documents/DocumentAudioRecorder.vue
@@ -9,7 +9,11 @@
       class="max-w-full self-center mb-4 w-60"
     />
 
-    <audio v-if="audio" class="max-w-full self-center mb-4" controls>
+    <audio
+      v-if="audio"
+      class="max-w-full self-center mb-4"
+      controls
+    >
       <source :src="window.URL.createObjectURL(audio)" />
     </audio>
 
@@ -22,61 +26,76 @@
       @recorded-audio="processAudio($event)"
     />
 
-    <div v-if="audio" class="flex">
-      <BaseButton :label="t('Start recording')" class="mr-2" icon="restart" type="black" @click="recordAudio" />
-      <BaseButton :label="t('Save recorded audio')" class="mr-2" icon="send" type="success" @click="saveAudio" />
+    <div
+      v-if="audio"
+      class="flex"
+    >
+      <BaseButton
+        :label="t('Start recording')"
+        class="mr-2"
+        icon="restart"
+        type="black"
+        @click="recordAudio"
+      />
+      <BaseButton
+        :label="t('Save recorded audio')"
+        class="mr-2"
+        icon="send"
+        type="success"
+        @click="saveAudio"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { useI18n } from "vue-i18n";
-import BaseInputText from "../basecomponents/BaseInputText.vue";
-import AudioRecorder from "../AudioRecorder.vue";
-import BaseButton from "../basecomponents/BaseButton.vue";
-import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
-import { useCidReq } from "../../composables/cidReq";
+import { ref } from "vue"
+import { useI18n } from "vue-i18n"
+import BaseInputText from "../basecomponents/BaseInputText.vue"
+import AudioRecorder from "../AudioRecorder.vue"
+import BaseButton from "../basecomponents/BaseButton.vue"
+import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility"
+import { useCidReq } from "../../composables/cidReq"
 import documentsService from "../../services/documents"
 
-const { t } = useI18n();
-const queryParams = useCidReq();
+const { t } = useI18n()
+const queryParams = useCidReq()
 
 const props = defineProps({
   parentResourceNodeId: {
     type: String,
     required: true,
   },
-});
+})
 
-const emit = defineEmits(["document-saved", "document-not-saved"]);
+const emit = defineEmits(["document-saved", "document-not-saved"])
 
-const recordName = ref("");
-const recordError = ref("");
-const audioRecorder = ref(null);
-const showAudioRecorderButtons = ref(true);
-const audio = ref();
+const recordName = ref("")
+const recordError = ref("")
+const audioRecorder = ref(null)
+const showAudioRecorderButtons = ref(true)
+const audio = ref()
 
 const processAudio = (recordedAudio) => {
-  audio.value = recordedAudio;
-  showAudioRecorderButtons.value = false;
-};
+  audio.value = recordedAudio
+  showAudioRecorderButtons.value = false
+}
 
 const recordAudio = () => {
-  recordError.value = "";
-  audio.value = null;
-  showAudioRecorderButtons.value = true;
-  audioRecorder.value.record();
-};
+  recordError.value = ""
+  audio.value = null
+  showAudioRecorderButtons.value = true
+  audioRecorder.value.record()
+}
 
 const saveAudio = async () => {
   if (recordName.value === "") {
-    recordError.value = t("It is necessary a file name before save recorded audio");
-    return;
+    recordError.value = t("It is necessary a file name before save recorded audio")
+    return
   }
 
-  let fileName = recordName.value + ".wav";
-  let uploadFile = new File([audio.value], fileName);
+  let fileName = recordName.value + ".wav"
+  let uploadFile = new File([audio.value], fileName)
   let data = {
     title: fileName,
     filetype: "file",
@@ -88,7 +107,7 @@ const saveAudio = async () => {
         visibility: RESOURCE_LINK_PUBLISHED,
       },
     ]),
-  };
+  }
 
   try {
     await documentsService.createWithFormData(data)
@@ -96,5 +115,5 @@ const saveAudio = async () => {
   } catch (error) {
     emit("document-not-saved", error)
   }
-};
+}
 </script>
diff --git a/assets/vue/components/documents/FormNewDocument.vue b/assets/vue/components/documents/FormNewDocument.vue
index 5f6981c5ef..238a0575bb 100644
--- a/assets/vue/components/documents/FormNewDocument.vue
+++ b/assets/vue/components/documents/FormNewDocument.vue
@@ -12,18 +12,15 @@
         <div class="html-editor-container">
           <BaseTinyEditor
             v-if="
-            (
-              item.resourceNode
-              && item.resourceNode.resourceFile
-              && item.resourceNode.resourceFile.text
-            )
-            || item.newDocument"
+              (item.resourceNode && item.resourceNode.resourceFile && item.resourceNode.resourceFile.text) ||
+              item.newDocument
+            "
             v-model="item.contentFile"
             editor-id="item_content"
             required
           />
         </div>
-        <label v-t="'Content'"/>
+        <label v-t="'Content'" />
       </div>
     </div>
 
@@ -33,10 +30,10 @@
 </template>
 
 <script>
-import useVuelidate from "@vuelidate/core";
-import { required } from "@vuelidate/validators";
-import { ref } from "vue";
-import { usePlatformConfig } from "../../store/platformConfig";
+import useVuelidate from "@vuelidate/core"
+import { required } from "@vuelidate/validators"
+import { ref } from "vue"
+import { usePlatformConfig } from "../../store/platformConfig"
 import BaseInputTextWithVuelidate from "../basecomponents/BaseInputTextWithVuelidate.vue"
 import BaseTinyEditor from "../basecomponents/BaseTinyEditor.vue"
 
@@ -58,78 +55,78 @@ export default {
     },
   },
   setup() {
-    const platformConfigStore = usePlatformConfig();
-    const extraPlugins = ref("");
+    const platformConfigStore = usePlatformConfig()
+    const extraPlugins = ref("")
 
     if ("true" === platformConfigStore.getSetting("editor.translate_html")) {
-      extraPlugins.value = "translatehtml";
+      extraPlugins.value = "translatehtml"
     }
 
-    return { v$: useVuelidate(), extraPlugins };
+    return { v$: useVuelidate(), extraPlugins }
   },
   data() {
     return {
       title: null,
-      contentFile: this.initialValues ? this.initialValues.contentFile : '',
+      contentFile: this.initialValues ? this.initialValues.contentFile : "",
       parentResourceNodeId: null,
       resourceNode: null,
-    };
+    }
   },
   watch: {
     contentFile(newContent) {
-      tinymce.get('item_content').setContent(newContent);
-    }
+      tinymce.get("item_content").setContent(newContent)
+    },
   },
   computed: {
     item() {
-      return this.initialValues || this.values;
+      return this.initialValues || this.values
     },
     titleErrors() {
-      const errors = [];
+      const errors = []
 
       /*if (!this.$v.item.title.$dirty) return errors;
             has(this.violations, 'title') && errors.push(this.violations.title);
             !this.$v.item.title.required && errors.push(this.$t('Field is required'));*/
 
       if (this.v$.item.title.required) {
-        return this.$t("Field is required");
+        return this.$t("Field is required")
       }
 
-      return errors;
+      return errors
     },
     violations() {
-      return this.errors || {};
+      return this.errors || {}
     },
   },
   methods: {
     browser(callback, value, meta) {
       //const route = useRoute();
-      let nodeId = this.$route.params["node"];
-      let folderParams = this.$route.query;
+      let nodeId = this.$route.params["node"]
+      let folderParams = this.$route.query
       let url = this.$router.resolve({
         name: "DocumentForHtmlEditor",
         params: { id: nodeId },
         query: folderParams,
-      });
-      url = url.fullPath;
-      console.log(url);
+      })
+      url = url.fullPath
+      console.log(url)
 
       if (meta.filetype === "image") {
-        url = url + "&type=images";
+        url = url + "&type=images"
       } else {
-        url = url + "&type=files";
+        url = url + "&type=files"
       }
 
-      console.log(url);
+      console.log(url)
 
       window.addEventListener("message", function (event) {
-        var data = event.data;
+        var data = event.data
         if (data.url) {
-          url = data.url;
-          console.log(meta); // {filetype: "image", fieldname: "src"}
-          callback(url);
+          url = data.url
+          console.log(meta) // {filetype: "image", fieldname: "src"}
+          callback(url)
         }
-      });
+      })
 
       tinymce.activeEditor.windowManager.openUrl(
         {
@@ -141,35 +138,35 @@ export default {
         },
         {
           oninsert: function (file, fm) {
-            var url, info;
+            var url, info
 
             // URL normalization
-            url = fm.convAbsUrl(file.url);
+            url = fm.convAbsUrl(file.url)
 
             // Make file info
-            info = file.name + " (" + fm.formatSize(file.size) + ")";
+            info = file.name + " (" + fm.formatSize(file.size) + ")"
 
             // Provide file and text for the link dialog
             if (meta.filetype === "file") {
-              callback(url, { text: info, title: info });
+              callback(url, { text: info, title: info })
             }
 
             // Provide image and alt text for the image dialog
             if (meta.filetype === "image") {
-              callback(url, { alt: info });
+              callback(url, { alt: info })
             }
 
             // Provide alternative source and posted for the media dialog
             if (meta.filetype === "media") {
-              callback(url);
+              callback(url)
             }
           },
-        }
-      );
-      return false;
+        },
+      )
+      return false
     },
     updateContent(content) {
-      this.contentFile = content;
+      this.contentFile = content
     },
   },
   validations: {
@@ -184,5 +181,5 @@ export default {
       resourceNode: {},
     },
   },
-};
+}
 </script>
diff --git a/assets/vue/components/documents/TemplateList.vue b/assets/vue/components/documents/TemplateList.vue
index b1323edc6a..4bd4259f6b 100644
--- a/assets/vue/components/documents/TemplateList.vue
+++ b/assets/vue/components/documents/TemplateList.vue
@@ -4,7 +4,8 @@
       v-for="template in templates"
       :key="template.id"
       class="template-item"
-      @click="selectTemplate(template.content)">
+      @click="selectTemplate(template.content)"
+    >
       <img :src="template.image" />
       <div>{{ template.title }}</div>
     </div>
@@ -13,17 +14,17 @@
 
 <script>
 export default {
-  name: 'TemplateList',
+  name: "TemplateList",
   props: {
     templates: {
       type: Array,
       required: true,
-    }
+    },
   },
   methods: {
     selectTemplate(content) {
-      this.$emit('template-selected', content);
+      this.$emit("template-selected", content)
     },
-  }
+  },
 }
 </script>