StudentViewButton load by ajax #4678

assets/vue/components/StudentViewButton.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseToggleButton
-    v-if="isCurrentTeacher && 'true' === platformConfigurationStore.getSetting('course.student_view_enabled')"
+    v-if="isCurrentTeacher && 'true' === platformConfigStore.getSetting('course.student_view_enabled')"
     v-model="isStudentView"
     :off-label="t('Switch to student view')"
     :on-label="t('Switch to teacher view')"
@@ -11,27 +11,33 @@
 
 <script setup>
 import BaseToggleButton from "./basecomponents/BaseToggleButton.vue";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch } from "vue"
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { useStore } from "vuex";
-import { usePlatformConfig } from "../store/platformConfig";
+import { usePlatformConfig } from "../store/platformConfig"
+import axios from "axios"
 
-const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
+const platformConfigStore = usePlatformConfig()
 
-const platformConfigurationStore = usePlatformConfig();
+const isStudentView = ref(platformConfigStore.isStudentViewActive)
 
-const isStudentView = ref('studentview' === platformConfigurationStore.studentView);
+const isLoading = ref(false);
 
-watch(isStudentView, (newValue) => {
-  const params = new URLSearchParams(window.location.search);
-  params.delete('isStudentView');
-  params.append('isStudentView', newValue ? 'true' : 'false');
+watch(isStudentView, async () => {
+  isLoading.value = true
 
-  window.location.href = route.path + '?' + params.toString();
-});
+  try {
+    const { data } = await axios.get(`${window.location.origin}/toggle_student_view`)
+
+    platformConfigStore.isStudentViewActive = 'studentview' === data
+  } catch (e) {
+    console.log(e)
+  } finally {
+    isLoading.value = false
+  }
+})
 
 const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]);
 </script>

assets/vue/store/platformConfig.js

@@ -5,7 +5,7 @@ import { ref } from "vue";
 export const usePlatformConfig = defineStore("platformConfig", () => {
   const isLoading = ref(false);
   const settings = ref(null);
-  const studentView = ref(null);
+  const isStudentViewActive = ref(false);
 
   function getSetting(variable) {
     if (settings.value && settings.value[variable]) {
@@ -18,12 +18,17 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
   async function findSettingsRequest() {
     isLoading.value = true;
 
-    const { data } = await axios.get("/platform-config/list");
+    try {
+      const { data } = await axios.get("/platform-config/list")
 
-    settings.value = data.settings;
-    studentView.value = data.studentview;
+      settings.value = data.settings
 
-    isLoading.value = false;
+      isStudentViewActive.value = 'studentview' === data.studentview
+    } catch (e) {
+      console.log(e)
+    } finally {
+      isLoading.value = false
+    }
   }
 
   async function initialize() {
@@ -33,7 +38,7 @@ export const usePlatformConfig = defineStore("platformConfig", () => {
   return {
     isLoading,
     settings,
-    studentView,
+    isStudentViewActive,
     initialize,
     getSetting,
   };

src/CoreBundle/Controller/IndexController.php

@@ -6,6 +6,7 @@ declare(strict_types=1);
 
 namespace Chamilo\CoreBundle\Controller;
 
+use Chamilo\CoreBundle\Settings\SettingsManager;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -60,4 +61,32 @@ class IndexController extends BaseController
             ['content' => $content]
         );
     }
+
+    /**
+     * Toggle the student view action.
+     */
+    #[Route('/toggle_student_view', methods: ['GET'])]
+    #[Security("is_granted('ROLE_TEACHER')")]
+    public function toggleStudentViewAction(Request $request, SettingsManager $settingsManager): Response
+    {
+        if (!api_is_allowed_to_edit(false, false, false, false)) {
+            throw $this->createAccessDeniedException();
+        }
+
+        if ('true' !== $settingsManager->getSetting('course.student_view_enabled')) {
+            throw $this->createAccessDeniedException();
+        }
+
+        $studentView = $request->getSession()->get('studentview');
+
+        if (empty($studentView) || 'studentview' === $studentView) {
+            $content = 'teacherview';
+        } else {
+            $content = 'studentview';
+        }
+
+        $request->getSession()->set('studentview', $content);
+
+        return new Response($content);
+    }
 }