Minor: Format code

assets/vue/components/layout/Sidebar.vue

@@ -10,7 +10,11 @@
       <div class="app-sidebar__bottom">
         <p>{{ t("Created with Chamilo &copy; {year}", { year: 2022 }) }}</p>
       </div>
-      <a v-if="isAuthenticated" href="/logout" class="app-sidebar__logout-link">
+      <a
+        v-if="isAuthenticated"
+        class="app-sidebar__logout-link"
+        href="/logout"
+      >
         <span class="pi pi-fw pi-sign-out" />
         <span class="logout-text">{{ t("Sign out") }}</span>
       </a>
@@ -25,8 +29,8 @@
 
   <Teleport to=".p-megamenu .p-megamenu-end">
     <a
-      tabindex="0"
       class="app-sidebar__topbar-button"
+      tabindex="0"
       @click="sidebarIsOpen = !sidebarIsOpen"
     >
       <i class="pi pi-times" />
@@ -35,21 +39,19 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch } from "vue"
-import PanelMenu from "primevue/panelmenu";
+import PanelMenu from "primevue/panelmenu"
-import ToggleButton from "primevue/togglebutton";
+import ToggleButton from "primevue/togglebutton"
-import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n"
-import { useStore } from "vuex";
+import { useStore } from "vuex"
 
-const store = useStore();
+const store = useStore()
-const { t } = useI18n();
+const { t } = useI18n()
 
-const isAuthenticated = computed(
+const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
-  () => store.getters["security/isAuthenticated"]
+const isAdmin = computed(() => store.getters["security/isAdmin"])
-);
+const isBoss = computed(() => store.getters["security/isBoss"])
-const isAdmin = computed(() => store.getters["security/isAdmin"]);
+const isStudent = computed(() => store.getters["security/isStudent"])
-const isBoss = computed(() => store.getters["security/isBoss"]);
-const isStudent = computed(() => store.getters["security/isStudent"]);
 
 const items = ref([
   {
@@ -137,23 +139,21 @@ const items = ref([
       },
     ],
   },
-]);
+])
 
-const sidebarIsOpen = ref(
+const sidebarIsOpen = ref(window.localStorage.getItem("sidebarIsOpen") === "true")
-  window.localStorage.getItem("sidebarIsOpen") === "true"
-);
 
 watch(
   sidebarIsOpen,
   (newValue) => {
-    const appEl = document.querySelector("#app");
+    const appEl = document.querySelector("#app")
 
-    window.localStorage.setItem("sidebarIsOpen", newValue.toString());
+    window.localStorage.setItem("sidebarIsOpen", newValue.toString())
 
-    appEl.classList.toggle("app--sidebar-inactive", !newValue);
+    appEl.classList.toggle("app--sidebar-inactive", !newValue)
   },
   {
     immediate: true,
-  }
+  },
-);
+)
 </script>

assets/vue/components/layout/Topbar.vue

@@ -1,19 +1,20 @@
 <template>
   <TopbarNotLoggedIn v-if="!isAuthenticated" />
-  <TopbarLoggedIn v-if="isAuthenticated" :current-user="currentUser" />
+  <TopbarLoggedIn
+    v-if="isAuthenticated"
+    :current-user="currentUser"
+  />
 </template>
 
 <script setup>
-import { useStore } from "vuex";
+import { useStore } from "vuex"
 
-import TopbarLoggedIn from "./TopbarLoggedIn.vue";
+import TopbarLoggedIn from "./TopbarLoggedIn.vue"
-import TopbarNotLoggedIn from "./TopbarNotLoggedIn.vue";
+import TopbarNotLoggedIn from "./TopbarNotLoggedIn.vue"
-import { computed } from "vue";
+import { computed } from "vue"
 
-const store = useStore();
+const store = useStore()
 
-const isAuthenticated = computed(
+const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
-  () => store.getters["security/isAuthenticated"]
+const currentUser = computed(() => store.getters["security/getUser"])
-);
-const currentUser = computed(() => store.getters["security/getUser"]);
 </script>

assets/vue/components/layout/TopbarLoggedIn.vue

@@ -1,15 +1,25 @@
 <template>
-  <MegaMenu :model="menuItems" class="app-topbar">
+  <MegaMenu
+    :model="menuItems"
+    class="app-topbar"
+  >
     <template #start>
       <img
-        alt="Chamilo LMS"
         :src="headerLogo"
+        alt="Chamilo LMS"
       />
     </template>
 
     <template #item="{ item }">
-      <router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
+      <router-link
-        <span :class="item.icon" class="p-menuitem-icon mx-0" />
+        v-if="item.to"
+        :to="item.to"
+        class="p-menuitem-link"
+      >
+        <span
+          :class="item.icon"
+          class="p-menuitem-icon mx-0"
+        />
         <span class="p-menuitem-text hidden">{{ item.label }}</span>
       </router-link>
       <a
@@ -19,7 +29,10 @@
         aria-haspopup="true"
         class="p-menuitem-link"
       >
-        <span :class="item.icon" class="p-menuitem-icon mx-0" />
+        <span
+          :class="item.icon"
+          class="p-menuitem-icon mx-0"
+        />
         <span class="p-menuitem-text hidden">{{ item.label }}</span>
       </a>
     </template>
@@ -44,15 +57,15 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref } from "vue"
-import { useRoute } from "vue-router";
+import { useRoute } from "vue-router"
 
-import MegaMenu from "primevue/megamenu";
+import MegaMenu from "primevue/megamenu"
-import Avatar from "primevue/avatar";
+import Avatar from "primevue/avatar"
-import Menu from "primevue/menu";
+import Menu from "primevue/menu"
-import { usePlatformConfig } from "../../store/platformConfig";
+import { usePlatformConfig } from "../../store/platformConfig"
 
-import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg";
+import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -60,29 +73,26 @@ const props = defineProps({
     required: true,
     type: Object,
   },
-});
+})
 
-const route = useRoute();
+const route = useRoute()
 
-const platformConfigStore = usePlatformConfig();
+const platformConfigStore = usePlatformConfig()
 
 const menuItems = ref([
   {
     label: "Tickets",
     icon: "pi pi-fw pi-ticket",
     url: (function () {
-      const queryParams = new URLSearchParams(window.location.href);
+      const queryParams = new URLSearchParams(window.location.href)
 
-      const cid =
+      const cid = route.query.cid || route.params.id || queryParams.get("cid") || 0
-        route.query.cid || route.params.id || queryParams.get("cid") || 0;
+      const sid = route.query.sid || queryParams.get("sid") || 0
-      const sid = route.query.sid || queryParams.get("sid") || 0;
+      const gid = route.query.gid || queryParams.get("gid") || 0
-      const gid = route.query.gid || queryParams.get("gid") || 0;
 
-      return `/main/ticket/tickets.php?project_id=1&cid=${cid}&sid=${sid}&gid=${gid}`;
+      return `/main/ticket/tickets.php?project_id=1&cid=${cid}&sid=${sid}&gid=${gid}`
     })(),
-    visible:
+    visible: "true" !== platformConfigStore.getSetting("display.show_link_ticket_notification"),
-      "true" !==
-      platformConfigStore.getSetting("display.show_link_ticket_notification"),
     items: [],
   },
   {
@@ -97,9 +107,9 @@ const menuItems = ref([
     to: "/resources/messages",
     items: [],
   },
-]);
+])
 
-const elUserSubmenu = ref(null);
+const elUserSubmenu = ref(null)
 const userSubmenuItems = [
   {
     label: props.currentUser.fullName,
@@ -110,11 +120,11 @@ const userSubmenuItems = [
       },
     ],
   },
-];
+]
 
 function toogleUserMenu(event) {
-  elUserSubmenu.value.toggle(event);
+  elUserSubmenu.value.toggle(event)
 }
 
-const headerLogo = headerLogoPath;
+const headerLogo = headerLogoPath
 </script>