Minor: Format code

assets/vue/views/course/CourseHome.vue

@@ -1,133 +1,66 @@
 <template>
-  <div
+  <div v-if="isCourseLoading" class="flex flex-col gap-4">
-    v-if="isCourseLoading"
-    class="flex flex-col gap-4"
-  >
     <div class="flex gap-4 items-center">
-      <Skeleton
+      <Skeleton class="mr-auto" height="2.5rem" width="12rem" />
-        class="mr-auto"
+      <Skeleton v-if="isCurrentTeacher" height="2.5rem" width="8rem" />
-        height="2.5rem"
+      <Skeleton v-if="isCurrentTeacher" height="2.5rem" width="3rem" />
-        width="12rem"
-      />
-      <Skeleton
-        v-if="isCurrentTeacher"
-        height="2.5rem"
-        width="8rem"
-      />
-      <Skeleton
-        v-if="isCurrentTeacher"
-        height="2.5rem"
-        width="3rem"
-      />
     </div>
 
-    <Skeleton
+    <Skeleton height="16rem" />
-      height="16rem"
-    />
 
     <div class="flex items-center gap-6">
-      <Skeleton
+      <Skeleton height="1.5rem" width="6rem" />
-        height="1.5rem"
+      <Skeleton v-if="isCurrentTeacher" class="ml-auto" height="1.5rem" width="6rem" />
-        width="6rem"
+      <Skeleton v-if="isCurrentTeacher" class="aspect-square" height="1.5rem" width="6rem" />
-      />
+      <Skeleton v-if="isCurrentTeacher" class="aspect-square" height="1.5rem" width="6rem" />
-      <Skeleton
+      <Skeleton v-if="isCurrentTeacher" class="aspect-square" height="1.5rem" width="6rem" />
-        v-if="isCurrentTeacher"
-        class="ml-auto"
-        height="1.5rem"
-        width="6rem"
-      />
-      <Skeleton
-        v-if="isCurrentTeacher"
-        class="aspect-square"
-        height="1.5rem"
-        width="6rem"
-      />
-      <Skeleton
-        v-if="isCurrentTeacher"
-        class="aspect-square"
-        height="1.5rem"
-        width="6rem"
-      />
-      <Skeleton
-        v-if="isCurrentTeacher"
-        class="aspect-square"
-        height="1.5rem"
-        width="6rem"
-      />
     </div>
 
-    <hr class="mt-0 mb-4">
+    <hr class="mt-0 mb-4" />
 
     <div class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 justify-between grid-cols-course-tools">
-      <Skeleton
+      <Skeleton v-for="v in 30" :key="v" class="aspect-square" height="auto" width="7.5rem" />
-        v-for="v in 30"
-        :key="v"
-        class="aspect-square"
-        height="auto"
-        width="7.5rem"
-      />
     </div>
   </div>
-  <div
+  <div v-else class="flex flex-col gap-4">
-    v-else
-    class="flex flex-col gap-4"
-  >
     <div class="flex gap-4 items-center">
-      <h2
+      <h2 class="mr-auto">
-        class="mr-auto"
-      >
         {{ course.title }}
-        <small v-if="session">
+        <small v-if="session"> ({{ session.name }}) </small>
-          ({{ session.name }})
-        </small>
       </h2>
 
-      <BaseButton
+      <BaseButton v-if="course && isCurrentTeacher" :label="t('See as student')" icon="eye" type="black" />
-        v-if="course && isCurrentTeacher"
-        type="black"
-        :label="t('See as student')"
-        icon="eye"
-      />
 
       <BaseButton
         v-if="showUpdateIntroductionButton"
-        type="black"
         :label="t('Edit introduction')"
         icon="pencil"
+        type="black"
         @click="updateIntro(intro)"
       />
 
       <BaseButton
         v-if="course && isCurrentTeacher"
-        type="black"
-        popup-identifier="course-tmenu"
         icon="cog"
         only-icon
+        popup-identifier="course-tmenu"
+        type="black"
         @click="toggleCourseTMenu"
       />
 
-      <BaseMenu
+      <BaseMenu id="course-tmenu" ref="courseTMenu" :model="courseItems" />
-        id="course-tmenu"
-        ref="courseTMenu"
-        :model="courseItems"
-      />
     </div>
 
-    <div
+    <div v-if="isCurrentTeacher">
-      v-if="isCurrentTeacher"
+      <div v-if="intro" class="flex flex-col gap-4">
-    >
-      <div
-        v-if="intro"
-        class="flex flex-col gap-4"
-      >
         <div v-html="intro.introText" />
 
         <BaseButton
           v-if="createInSession && introTool"
           :label="t('Course introduction')"
           class="ml-auto"
-          type="primary"
           icon="plus"
+          type="primary"
           @click="addIntro(course, introTool)"
         />
       </div>
@@ -140,16 +73,13 @@
         <BaseButton
           :label="t('Course introduction')"
           class="mt-4"
-          type="primary"
           icon="plus"
+          type="primary"
           @click="addIntro(course, introTool)"
         />
       </EmptyState>
     </div>
-    <div
+    <div v-else-if="intro" v-html="intro.introText" />
-      v-else-if="intro"
-      v-html="intro.introText"
-    />
 
     <div class="flex items-center gap-6">
       <h6 v-t="'Tools'" />
@@ -190,7 +120,7 @@
         on-icon="mdi mdi-format-paint"
       />
     </div>
-    <hr class="mt-0 mb-4">
+    <hr class="mt-0 mb-4" />
 
     <div class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 grid-cols-course-tools">
       <CourseToolList
@@ -270,8 +200,8 @@ let sessionId = route.query.sid ?? 0;
 const isCourseLoading = ref(true);
 
 const showUpdateIntroductionButton = computed(() => {
-  return course.value && isCurrentTeacher.value && intro.value && !(createInSession.value && introTool.value)
+  return course.value && isCurrentTeacher.value && intro.value && !(createInSession.value && introTool.value);
-})
+});
 const isCurrentTeacher = computed(() => store.getters["security/isCurrentTeacher"]);
 
 const isSorting = ref(false);
@@ -294,9 +224,9 @@ axios
     shortcuts.value = data.shortcuts;
 
     if (tools.value.admin) {
-      courseItems.value = tools.value.admin.map(tool => ({
+      courseItems.value = tools.value.admin.map((tool) => ({
         label: tool.tool.nameToShow,
-        url: goToCourseTool(course, tool)
+        url: goToCourseTool(course, tool),
       }));
     }
 
@@ -304,17 +234,17 @@ axios
 
     isCourseLoading.value = false;
   })
-  .catch(error => console.log(error));
+  .catch((error) => console.log(error));
 
 const courseTMenu = ref(null);
 
-const toggleCourseTMenu = event => {
+const toggleCourseTMenu = (event) => {
   courseTMenu.value.toggle(event);
 };
 
 async function getIntro() {
   // Searching for the CTool called 'course_homepage'.
-  let currentIntroTool = course.value.tools.find(element => element.name === "course_homepage");
+  let currentIntroTool = course.value.tools.find((element) => element.name === "course_homepage");
 
   if (!introTool.value) {
     introTool.value = currentIntroTool;
@@ -327,7 +257,7 @@ async function getIntro() {
     const filter = {
       courseTool: currentIntroTool.iid,
       cid: courseId,
-      sid: sessionId
+      sid: sessionId,
     };
 
     try {
@@ -349,24 +279,24 @@ async function getIntro() {
 function addIntro(course, introTool) {
   return router.push({
     name: "ToolIntroCreate",
-    params: { "courseTool": introTool.iid },
+    params: { courseTool: introTool.iid },
     query: {
-      "cid": courseId,
+      cid: courseId,
-      "sid": sessionId,
+      sid: sessionId,
-      "parentResourceNodeId": course.resourceNode.id
+      parentResourceNodeId: course.resourceNode.id,
-    }
+    },
   });
 }
 
 function updateIntro(intro) {
   return router.push({
     name: "ToolIntroUpdate",
-    params: { "id": intro["@id"] },
+    params: { id: intro["@id"] },
     query: {
-      "cid": courseId,
+      cid: courseId,
-      "sid": sessionId,
+      sid: sessionId,
-      "id": intro["@id"]
+      id: intro["@id"],
-    }
+    },
   });
 }
 
@@ -392,32 +322,35 @@ const setToolVisibility = (tool, visibility) => {
 };
 
 function changeVisibility(course, tool) {
-  axios.post(ENTRYPOINT + "../r/course_tool/links/" + tool.ctool.resourceNode.id + "/change_visibility")
+  axios
-    .then(response => setToolVisibility(tool, response.data.visibility))
+    .post(ENTRYPOINT + "../r/course_tool/links/" + tool.ctool.resourceNode.id + "/change_visibility")
-    .catch(error => console.log(error));
+    .then((response) => setToolVisibility(tool, response.data.visibility))
+    .catch((error) => console.log(error));
 }
 
 function onClickShowAll() {
-  axios.post(ENTRYPOINT + `../r/course_tool/links/change_visibility/show?cid=${courseId}&sid=${sessionId}`)
+  axios
+    .post(ENTRYPOINT + `../r/course_tool/links/change_visibility/show?cid=${courseId}&sid=${sessionId}`)
     .then(() => {
-      tools.value.authoring.forEach(tool => setToolVisibility(tool, 2));
+      tools.value.authoring.forEach((tool) => setToolVisibility(tool, 2));
 
-      tools.value.interaction.forEach(tool => setToolVisibility(tool, 2));
+      tools.value.interaction.forEach((tool) => setToolVisibility(tool, 2));
 
-      tools.value.plugin.forEach(tool => setToolVisibility(tool, 2));
+      tools.value.plugin.forEach((tool) => setToolVisibility(tool, 2));
     })
-    .catch(error => console.log(error));
+    .catch((error) => console.log(error));
 }
 
 function onClickHideAll() {
-  axios.post(ENTRYPOINT + `../r/course_tool/links/change_visibility/hide?cid=${courseId}&sid=${sessionId}`)
+  axios
+    .post(ENTRYPOINT + `../r/course_tool/links/change_visibility/hide?cid=${courseId}&sid=${sessionId}`)
     .then(() => {
-      tools.value.authoring.forEach(tool => setToolVisibility(tool, 0));
+      tools.value.authoring.forEach((tool) => setToolVisibility(tool, 0));
 
-      tools.value.interaction.forEach(tool => setToolVisibility(tool, 0));
+      tools.value.interaction.forEach((tool) => setToolVisibility(tool, 0));
 
-      tools.value.plugin.forEach(tool => setToolVisibility(tool, 0));
+      tools.value.plugin.forEach((tool) => setToolVisibility(tool, 0));
     })
-    .catch(error => console.log(error));
+    .catch((error) => console.log(error));
 }
 </script>