Documents: remove vuex from create file

* Set warning about using api.js

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')"
     />
 

assets/vue/components/documents/TemplateList.vue

@@ -15,7 +15,10 @@
 export default {
   name: 'TemplateList',
   props: {
-    templates: []
+    templates: {
+      type: Array,
+      required: true,
+    }
   },
   methods: {
     selectTemplate(content) {

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
     }
   };
 

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}`)
+  },
+}

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