Merge pull request #5467 from daniboygg/gh-5466-fix-edit-html-document

Fix edition of html document

assets/vue/components/documents/FormNewDocument.vue

@@ -3,18 +3,14 @@
     <BaseInputTextWithVuelidate
       id="item_title"
       v-model.trim="item.title"
-      vuelidate-property="v$.item.title"
+      :vuelidate-property="v$.item.title"
       :label="$t('Title')"
     />
 
     <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"
       :title="t('Content')"
       editor-id="item_content"
@@ -27,10 +23,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"
 import { useI18n } from "vue-i18n"
@@ -53,79 +49,79 @@ export default {
     },
   },
   setup() {
-    const platformConfigStore = usePlatformConfig();
-    const extraPlugins = ref("");
+    const platformConfigStore = usePlatformConfig()
+    const extraPlugins = ref("")
     const { t } = useI18n()
 
     if ("true" === platformConfigStore.getSetting("editor.translate_html")) {
-      extraPlugins.value = "translatehtml";
+      extraPlugins.value = "translatehtml"
     }
 
-    return { v$: useVuelidate(), extraPlugins, t };
+    return { v$: useVuelidate(), extraPlugins, t }
   },
   data() {
     return {
       title: null,
-      contentFile: this.initialValues ? this.initialValues.contentFile : '',
+      contentFile: this.initialValues ? this.initialValues.contentFile : "",
       parentResourceNodeId: null,
       resourceNode: null,
-    };
+    }
   },
   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 || {}
     },
   },
   watch: {
     contentFile(newContent) {
-      tinymce.get('item_content').setContent(newContent);
-    }
+      tinymce.get("item_content").setContent(newContent)
+    },
   },
   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(
         {
@@ -137,35 +133,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: {
@@ -180,5 +176,5 @@ export default {
       resourceNode: {},
     },
   },
-};
+}
 </script>

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,14 +14,17 @@
 
 <script>
 export default {
-  name: 'TemplateList',
+  name: "TemplateList",
   props: {
-    templates: []
+    templates: {
+      type: Array,
+      required: true,
+    },
   },
   methods: {
     selectTemplate(content) {
-      this.$emit('template-selected', content);
+      this.$emit("template-selected", content)
     },
-  }
+  },
 }
 </script>

assets/vue/views/documents/UpdateFile.vue

@@ -52,8 +52,12 @@ import UpdateMixin from "../../mixins/UpdateMixin"
 import EditLinks from "../../components/resource_links/EditLinks.vue"
 import TemplateList from "../../components/documents/TemplateList.vue"
 import axios from "axios"
+import Panel from "primevue/panel"
+import { storeToRefs } from "pinia"
+import { useSecurityStore } from "../../store/securityStore"
 
 const servicePrefix = "Documents"
+const { isCurrentTeacher } = storeToRefs(useSecurityStore())
 
 export default {
   name: "DocumentsUpdate",
@@ -64,6 +68,7 @@ export default {
     Loading,
     Toolbar,
     DocumentsForm,
+    Panel,
   },
   mixins: [UpdateMixin],
   data() {
@@ -82,9 +87,9 @@ export default {
       violations: "violations",
     }),
     ...mapGetters("documents", ["find"]),
-    ...mapGetters({
-      isCurrentTeacher: "security/isCurrentTeacher",
-    }),
+    isCurrentTeacher: () => {
+      return isCurrentTeacher.value
+    },
   },
   methods: {
     handleBack() {