Course: Improvements to course tools (student view) - refs #6666

assets/vue/components/StudentViewButton.vue

@@ -33,27 +33,27 @@ const isStudentView = computed({
     try {
       const resp = await permissionService.toogleStudentView()
       const mode = (typeof resp === "string" ? resp : resp?.data || "").toString().toLowerCase()
-      const desired = mode.includes("student")
+      const desired = mode === "studentview"
 
-      platformConfigStore.studentView = desired
+      platformConfigStore.setStudentViewEnabled(desired)
       emit("change", desired)
     } catch (e) {
       console.warn("[SVB] toggle failed", e)
-      const desired = !platformConfigStore.isStudentViewActive
-      platformConfigStore.studentView = desired
-      emit("change", desired)
+      platformConfigStore.setStudentViewEnabled(!platformConfigStore.isStudentViewActive)
+      emit("change", platformConfigStore.isStudentViewActive)
     }
   },
   get() {
-    return platformConfigStore.isStudentViewActive
+    return !!platformConfigStore.isStudentViewActive
   },
 })
 
-const showButton = computed(() =>
-  securityStore.isAuthenticated &&
-  cidReqStore.course &&
-  (securityStore.isCourseAdmin || securityStore.isAdmin || isCoach.value) &&
-  platformConfigStore.getSetting("course.student_view_enabled") === "true"
+const showButton = computed(
+  () =>
+    securityStore.isAuthenticated &&
+    cidReqStore.course &&
+    (securityStore.isCourseAdmin || securityStore.isAdmin || isCoach.value) &&
+    platformConfigStore.getSetting("course.student_view_enabled") === "true",
 )
 
 const windowSize = ref(window.innerWidth)

assets/vue/components/attendance/AttendanceTable.vue

@@ -6,7 +6,7 @@
     data-key="id"
     @page="onPageChange"
   >
-    <!-- Column for Name -->
+    <!-- Name -->
     <Column
       field="title"
       header="Name"
@@ -33,7 +33,7 @@
       </template>
     </Column>
 
-    <!-- Column for Description -->
+    <!-- Description -->
     <Column
       field="description"
       header="Description"
@@ -44,20 +44,20 @@
       </template>
     </Column>
 
-    <!-- Column for # attended -->
+    <!-- # attended -->
     <Column
       field="doneCalendars"
       header="# attended"
       sortable
     >
       <template #body="slotProps">
-        <center>{{ slotProps.data.doneCalendars ?? 0 }}</center>
+        <div class="text-center">{{ slotProps.data.doneCalendars ?? 0 }}</div>
       </template>
     </Column>
 
-    <!-- Column for Detail -->
+    <!-- Detail -->
     <Column
-      v-if="isAdminOrTeacher"
+      v-if="showActions"
       header="Detail"
     >
       <template #body="slotProps">
@@ -96,25 +96,17 @@ const route = useRoute()
 const securityStore = useSecurityStore()
 
 const props = defineProps({
-  attendances: {
-    type: Array,
-    required: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  totalRecords: {
-    type: Number,
-    default: 0,
-  },
+  attendances: { type: Array, required: true },
+  loading: { type: Boolean, default: false },
+  totalRecords: { type: Number, default: 0 },
+  readonly: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(["edit", "view", "delete", "pageChange"])
 
-// Roles
 const isAdminOrTeacher = computed(() => securityStore.isAdmin || securityStore.isTeacher)
-computed(() => securityStore.isStudent)
+const showActions = computed(() => !props.readonly && isAdminOrTeacher.value)
+
 const onEdit = (attendance) => emit("edit", attendance)
 const onView = (attendance) => emit("view", attendance)
 const onDelete = (attendance) => emit("delete", attendance)
@@ -127,12 +119,7 @@ const getVisibilityIcon = (attendance) => {
 
 const getVisibilityClass = (attendance) => {
   const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
-
-  if (isAdminOrTeacher.value) {
-    return visibility === 2 ? "p-button-success" : "p-button-secondary opacity-50"
-  }
-
-  return visibility === 2 ? "p-button-success" : "p-button-warning"
+  return visibility === 2 ? "p-button-success" : "p-button-secondary opacity-50"
 }
 
 const getVisibilityTooltip = (attendance) => {

assets/vue/composables/document/documentActionButtons.js

@@ -1,53 +1,36 @@
-import { computed, ref } from "vue"
+import { computed } from "vue"
 import { useRoute } from "vue-router"
+import { useSecurityStore } from "../../store/securityStore"
 import { usePlatformConfig } from "../../store/platformConfig"
-import { checkIsAllowedToEdit } from "../userPermissions"
 
 export function useDocumentActionButtons() {
   const route = useRoute()
-
+  const securityStore = useSecurityStore()
   const platformConfigStore = usePlatformConfig()
 
-  const isCertificateMode = computed(() => {
-    return route.query.filetype === "certificate"
-  })
+  const inStudentView = computed(() => platformConfigStore.isStudentViewActive)
+  const isTeacherUI = computed(
+    () =>
+      (securityStore.isCurrentTeacher || securityStore.isCourseAdmin || securityStore.isAdmin) && !inStudentView.value,
+  )
+
+  const isCertificateMode = computed(() => route.query.filetype === "certificate")
+
+  const showNewDocumentButton = computed(() => isTeacherUI.value && !isCertificateMode.value)
+  const showUploadButton = computed(() => isTeacherUI.value && !isCertificateMode.value)
+  const showNewFolderButton = computed(() => isTeacherUI.value && !isCertificateMode.value)
+  const showNewDrawingButton = computed(() => isTeacherUI.value && !isCertificateMode.value)
+  const showRecordAudioButton = computed(() => isTeacherUI.value && !isCertificateMode.value)
+  const showNewCloudFileButton = computed(() => isTeacherUI.value && !isCertificateMode.value)
 
-  const showNewDocumentButton = ref(false)
-  const showUploadButton = ref(false)
-  const showNewFolderButton = ref(false)
-  const showNewDrawingButton = ref(false)
-  const showRecordAudioButton = ref(false)
-  const showNewCloudFileButton = ref(false)
-  const showSlideshowButton = ref(false)
-  const showUsageButton = ref(false)
-  const showDownloadAllButton = ref(false)
+  const showSlideshowButton = computed(() => true)
 
-  const showNewCertificateButton = ref(false)
-  const showUploadCertificateButton = ref(false)
+  const showUsageButton = computed(() => isTeacherUI.value)
 
-  checkIsAllowedToEdit(false, true).then((isAllowedToEdit) => {
-    if (isAllowedToEdit) {
-      if (!isCertificateMode.value) {
-        showNewDocumentButton.value = true
-        showRecordAudioButton.value = true
-        showUploadButton.value = true
-        showNewFolderButton.value = true
-        showNewCloudFileButton.value = true // enable_add_file_link ?
-        showSlideshowButton.value = true // disable_slideshow_documents ?
-        showUsageButton.value = true
-      } else {
-        showNewCertificateButton.value = true
-        showUploadCertificateButton.value = true
-      }
-    }
+  const showDownloadAllButton = computed(() => securityStore.isAuthenticated)
 
-    if (
-      !isCertificateMode.value &&
-      ("true" === platformConfigStore.getSetting("document.students_download_folders") || isAllowedToEdit.value)
-    ) {
-      showDownloadAllButton.value = true
-    }
-  })
+  const showNewCertificateButton = computed(() => isTeacherUI.value && isCertificateMode.value)
+  const showUploadCertificateButton = computed(() => isTeacherUI.value && isCertificateMode.value)
 
   return {
     showNewDocumentButton,

assets/vue/store/platformConfig.js

@@ -48,6 +48,15 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
 
   const isStudentViewActive = computed(() => "studentview" === studentView.value)
 
+  function setStudentViewEnabled(enabled) {
+    studentView.value = enabled ? "studentview" : "teacherview"
+  }
+
+  function setStudentViewMode(mode) {
+    const m = (mode || "").toString().toLowerCase() === "studentview" ? "studentview" : "teacherview"
+    studentView.value = m
+  }
+
   return {
     isLoading,
     settings,
@@ -60,5 +69,7 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
     oauth2Providers,
     ldapAuth,
     forcedLoginMethod,
+    setStudentViewEnabled,
+    setStudentViewMode,
   }
 })

assets/vue/store/securityStore.js

@@ -2,15 +2,15 @@ import { defineStore } from "pinia"
 import { isEmpty } from "lodash"
 import { computed, ref } from "vue"
 import securityService from "../services/securityService"
+import { usePlatformConfig } from "./platformConfig"
 
 export const useSecurityStore = defineStore("security", () => {
   const user = ref(null)
   const isLoading = ref(true)
   const isAuthenticated = computed(() => !isEmpty(user.value))
 
-  /**
-   * @param {Object} newUserInfo
-   */
+  const platformConfigStore = usePlatformConfig()
+
   function setUser(newUserInfo) {
     user.value = newUserInfo
   }
@@ -45,7 +45,9 @@ export const useSecurityStore = defineStore("security", () => {
 
   const isTeacher = computed(() => isAdmin.value || hasRole.value("ROLE_TEACHER"))
 
-  const isCurrentTeacher = computed(() => isAdmin.value || hasRole.value("ROLE_CURRENT_COURSE_TEACHER"))
+  const isCurrentTeacher = computed(
+    () => (isAdmin.value || hasRole.value("ROLE_CURRENT_COURSE_TEACHER")) && !platformConfigStore.isStudentViewActive,
+  )
 
   const isCourseAdmin = computed(
     () =>
@@ -66,7 +68,7 @@ export const useSecurityStore = defineStore("security", () => {
         user.value = null
       }
     } catch (error) {
-      console.error("Error checking session:", error)
+      console.error("[SecurityStore] Failed to check session", error)
       user.value = null
     } finally {
       isLoading.value = false