Merge branch 'refs/heads/master' into chamilogh-5377-remove-vuex-docu…

…mens

# Conflicts:
#	assets/vue/components/documents/FormNewDocument.vue

assets/css/app.scss

@@ -606,8 +606,9 @@ form .field {
   }
 
   .freeze + label,
-  .html-editor-container + label,
-  .advmultiselect + label {
+  .advmultiselect + label,
+  textarea + label.settings-label
+  {
     font-size: 13px;
     @apply absolute top-0 left-0 text-support-3 text-caption px-1 bg-white text-primary;
   }

assets/css/scss/atoms/_form.scss

@@ -81,11 +81,13 @@
   &:has(textarea:focus) label,
   &:has(textarea.p-filled) label,
   &:has(.p-inputwrapper-focus) label,
-  &:has(.p-inputwrapper-filled) label {
-    @apply top-0 left-2 text-caption px-1 bg-white text-primary;
+  &:has(.p-inputwrapper-filled) label,
+  &:has(.tox.tox-tinymce) label {
+    @apply top-0 left-2 text-caption px-1 bg-white text-primary z-[1];
   }
 
-  .html-editor-container > div {
+  .html-editor-container > div,
+  .tox.tox-tinymce {
     @apply pt-2 border-support-3 rounded-lg;
   }
 

assets/css/scss/organisms/_menu.scss

@@ -2,7 +2,7 @@
   @apply bg-white px-0 py-2 border border-gray-25 rounded-sm w-52;
 
   .p-menuitem-link {
-    @apply p-3 duration-150 select-none;
+    @apply p-3 duration-150 select-none flex cursor-pointer;
 
     .p-menuitem-text {
       @apply text-body-2;

assets/locales/en.json

@@ -542,5 +542,11 @@
     "Error fetching friends list": "Error fetching friends list",
     "Error fetching users": "Error fetching users",
     "Search users for friends": "Search users for friends",
-    "Business card": "Business card"
-}
+    "Contact Us": "Contact Us",
+    "Business card": "Business card",
+    "Teacher profile picture": "Teacher profile picture",
+    "Picture": "Picture",
+    "Sender profile picture": "Sender profile picture",
+    "Receiver profile picture": "Receiver profile picture",
+    "Carbon copy receiver profile picture": "Carbon copy receiver profile picture"
+}

assets/vue/components/TeacherBar.vue

@@ -8,9 +8,10 @@
       :key="user.id"
       class="teacher-bar__item"
     >
-      <Avatar
-        :image="`${user.illustrationUrl}?w=80&h=80&fit=crop`"
-        shape="circle"
+      <BaseUserAvatar
+        :image-url="`${user.illustrationUrl}?w=80&h=80&fit=crop`"
+        :alt="t('Teacher profile picture')"
+        class="mr-2"
       />
       <div
         v-if="isSimpleLayout"
@@ -24,15 +25,18 @@
 </template>
 
 <script setup>
-import Avatar from 'primevue/avatar';
+import BaseUserAvatar from "./basecomponents/BaseUserAvatar.vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
   teachers: {
     required: true,
-    type: Array
-  }
-});
+    type: Array,
+  },
+})
 
-const isSimpleLayout = props.teachers.length < 3;
+const isSimpleLayout = props.teachers.length < 3
 </script>

assets/vue/components/assignments/AssignmentsLayout.vue

@@ -5,14 +5,12 @@
 <script setup>
 import { computed, ref, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { useCidReq } from "../../composables/cidReq";
 import { useSecurityStore } from "../../store/securityStore"
 
 const route = useRoute();
 const router = useRouter()
-const store = useStore();
 const { t } = useI18n();
 
 const { cid, sid, gid } = useCidReq();

assets/vue/components/basecomponents/BaseTinyEditor.vue

@@ -1,25 +1,22 @@
 <template>
-  <div class="base-tiny-editor">
-    <label
-      v-if="title"
-      :for="editorId"
-    >
-      {{ title }}
-    </label>
-    <TinyEditor
-      :id="editorId"
-      :model-value="modelValue"
-      :init="editorConfig"
-      :required="required"
-      @update:model-value="updateValue"
-      @input="updateValue"
-    />
-    <p
+  <div class="field">
+    <FloatLabel>
+      <TinyEditor
+        :id="editorId"
+        v-model="modelValue"
+        :init="editorConfig"
+        :required="required"
+      />
+      <label
+        v-if="title"
+        :for="editorId"
+        v-text="title"
+      />
+    </FloatLabel>
+    <small
       v-if="helpText"
-      class="help-text"
-    >
-      {{ helpText }}
-    </p>
+      v-text="helpText"
+    />
   </div>
 </template>
 
@@ -30,21 +27,21 @@ import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
 import { useSecurityStore } from "../../store/securityStore"
-
-import { TINYEDITOR_MODE_DOCUMENTS, TINYEDITOR_MODE_PERSONAL_FILES, TINYEDITOR_MODES } from "./TinyEditorOptions"
+import FloatLabel from "primevue/floatlabel"
 
 //import contentUiCss from "css-loader!tinymce/skins/ui/oxide/content.css"
 //import contentCss from "css-loader!tinymce/skins/content/default/content.css"
 
+const modelValue = defineModel({
+  type: String,
+  required: true,
+})
+
 const props = defineProps({
   editorId: {
     type: String,
     required: true,
   },
-  modelValue: {
-    type: String,
-    required: true,
-  },
   required: {
     type: Boolean,
     default: false,
@@ -68,35 +65,28 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  // change mode when useFileManager=True
-  mode: {
-    type: String,
-    default: TINYEDITOR_MODE_PERSONAL_FILES,
-    validator: (value) => TINYEDITOR_MODES.includes(value),
-  },
   fullPage: {
     type: Boolean,
     required: false,
     default: true,
   },
 })
-const emit = defineEmits(["update:modelValue"])
+
 const router = useRouter()
 const route = useRoute()
 const parentResourceNodeId = ref(0)
 
 const securityStore = useSecurityStore()
+const cidReqStore = useCidReqStore()
+
+const { course } = storeToRefs(cidReqStore)
 
 // Set the parent node ID based on the user's resource node ID or route parameter
-parentResourceNodeId.value = securityStore.user.resourceNode["id"]
+parentResourceNodeId.value = securityStore.user.resourceNode.id
 if (route.params.node) {
   parentResourceNodeId.value = Number(route.params.node)
 }
 
-const updateValue = (value) => {
-  emit("update:modelValue", value)
-}
-
 const toolbarUndo = "undo redo"
 const toolbarFormatText = "bold italic underline strikethrough"
 const toolbarInsertMedia = "image media template link"
@@ -186,23 +176,8 @@ const editorConfig = computed(() => ({
 }))
 
 async function filePickerCallback(callback, value, meta) {
-  if (!props.useFileManager) {
-    const input = document.createElement("input")
-    input.setAttribute("type", "file")
-    if ("image" === meta.filetype) {
-      input.accept = "image/*"
-    } else if ("media" === meta.filetype) {
-      input.accept = "audio/*, video/*"
-    }
-    input.style.display = "none"
-    input.onchange = inputFileHandler(callback, input)
-    document.body.appendChild(input)
-    input.click()
-    return
-  }
-
-  let url = getUrlForTinyEditor(props.mode)
-  if (meta.filetype === "image") {
+  let url = getUrlForTinyEditor()
+  if ("image" === meta.filetype) {
     url += "&type=images"
   } else {
     url += "&type=files"
@@ -217,7 +192,7 @@ async function filePickerCallback(callback, value, meta) {
   })
 
   // tinymce is already in the global scope, set by backend and php
-  tinymce.activeEditor.windowManager.openUrl({
+  window.tinymce.activeEditor.windowManager.openUrl({
     url: url,
     title: "File manager",
     onMessage: (api, message) => {
@@ -230,57 +205,29 @@ async function filePickerCallback(callback, value, meta) {
   })
 }
 
-function inputFileHandler(callback, input) {
-  return async () => {
-    const file = input.files[0]
-    const title = file.name
-    const comment = ""
-    const fileType = "file"
-    const resourceLinkList = []
-
-    const formData = new FormData()
-    formData.append("uploadFile", file)
-    formData.append("title", title)
-    formData.append("comment", comment)
-    formData.append("parentResourceNodeId", parentResourceNodeId.value)
-    formData.append("filetype", fileType)
-    formData.append("resourceLinkList", resourceLinkList)
-
-    try {
-      let response = await fetch("/file-manager/upload-image", {
-        method: "POST",
-        body: formData,
-      })
-      const { data, location } = await response.json()
-      if (location) {
-        callback(location, { alt: data.title })
-      } else {
-        console.error("Failed to upload file")
-      }
-    } catch (error) {
-      console.error("Error uploading file:", error)
-    } finally {
-      document.body.removeChild(input)
-    }
+function getUrlForTinyEditor() {
+  if (!course.value) {
+    return router.resolve({
+      name: "FileManagerList",
+      params: {
+        node: parentResourceNodeId.value,
+      },
+    }).href
   }
-}
-
-function getUrlForTinyEditor(mode) {
-  if (props.mode === TINYEDITOR_MODE_PERSONAL_FILES) {
-    return "/resources/filemanager/personal_list/" + parentResourceNodeId.value
-  } else if (props.mode === TINYEDITOR_MODE_DOCUMENTS) {
-    const cidReqStore = useCidReqStore()
-    const { course } = storeToRefs(cidReqStore)
 
-    let nodeId = course.value && course.value.resourceNode ? course.value.resourceNode.id : null
-    if (!nodeId) {
-      console.error("Resource node ID is not available.")
-      return
-    }
+  let nodeId = course.value.resourceNode ? course.value.resourceNode.id : null
 
-    return router.resolve({ name: "DocumentForHtmlEditor", params: { id: nodeId }, query: route.query }).href
-  } else {
-    console.error(`Mode "${mode}" is not valid. Check valid modes on TinyEditorOptions.js`)
+  if (!nodeId) {
+    console.error("Resource node ID is not available.")
+    return
   }
+
+  return router.resolve({
+    name: "DocumentForHtmlEditor",
+    params: {
+      node: nodeId,
+    },
+    query: route.query,
+  }).href
 }
 </script>

assets/vue/components/basecomponents/BaseUserAvatar.vue

@@ -1,5 +1,12 @@
 <template>
-  <Avatar :image="`${imageUrl}?w=${imageSize}&h=${imageSize}&fit=crop`" :shape="shape" />
+  <Avatar
+    :image="`${imageUrl}?w=${imageSize}&h=${imageSize}&fit=crop`"
+    :shape="shape"
+    :size="size"
+    class="rounded-full"
+    :class="avatarClass"
+    :aria-label="alt"
+  />
 </template>
 
 <script setup>
@@ -12,6 +19,11 @@ const props = defineProps({
     require: true,
     default: "",
   },
+  // this sets the aria-label which sets the alt property of the image inside Avatar component
+  alt: {
+    type: String,
+    required: true,
+  },
   size: {
     type: String,
     require: false,
@@ -27,14 +39,25 @@ const props = defineProps({
 });
 
 const imageSize = computed(() => {
-  if ('large' === props.size) {
-    return 56;
+  // these numbers are approximate, they were calculated with a size
+  // allowing to see the image clearly
+  if (props.size === "xlarge") {
+    return 250;
+  } else if (props.size === "large") {
+    return 125;
   }
+  return 75;
+});
 
-  if ('xlarge' === props.size) {
-    return 42;
+const avatarClass = computed(() => {
+  let clazz = ""
+  if (props.size === "xlarge") {
+    clazz += "h-28 w-28 "
+  } else if (props.size === "large") {
+    clazz += "h-16 w-16 "
+  } else if (props.size === "normal") {
+    clazz += "h-10 w-10 "
   }
-
-  return 28;
-});
+  return clazz
+})
 </script>