Minor: Format code

pull/4810/head
Angel Fernando Quiroz Campos 2 years ago
parent 891b78f9d6
commit dc5bac0b74
  1. 48
      assets/vue/components/layout/Sidebar.vue
  2. 21
      assets/vue/components/layout/Topbar.vue
  3. 68
      assets/vue/components/layout/TopbarLoggedIn.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 PanelMenu from "primevue/panelmenu";
import ToggleButton from "primevue/togglebutton";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
import { computed, ref, watch } from "vue"
import PanelMenu from "primevue/panelmenu"
import ToggleButton from "primevue/togglebutton"
import { useI18n } from "vue-i18n"
import { useStore } from "vuex"
const store = useStore();
const { t } = useI18n();
const store = useStore()
const { t } = useI18n()
const isAuthenticated = computed(
() => store.getters["security/isAuthenticated"]
);
const isAdmin = computed(() => store.getters["security/isAdmin"]);
const isBoss = computed(() => store.getters["security/isBoss"]);
const isStudent = computed(() => store.getters["security/isStudent"]);
const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
const isAdmin = computed(() => store.getters["security/isAdmin"])
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(
window.localStorage.getItem("sidebarIsOpen") === "true"
);
const sidebarIsOpen = ref(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>

@ -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 TopbarNotLoggedIn from "./TopbarNotLoggedIn.vue";
import { computed } from "vue";
import TopbarLoggedIn from "./TopbarLoggedIn.vue"
import TopbarNotLoggedIn from "./TopbarNotLoggedIn.vue"
import { computed } from "vue"
const store = useStore();
const store = useStore()
const isAuthenticated = computed(
() => store.getters["security/isAuthenticated"]
);
const currentUser = computed(() => store.getters["security/getUser"]);
const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
const currentUser = computed(() => store.getters["security/getUser"])
</script>

@ -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">
<span :class="item.icon" class="p-menuitem-icon mx-0" />
<router-link
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 { useRoute } from "vue-router";
import { ref } from "vue"
import { useRoute } from "vue-router"
import MegaMenu from "primevue/megamenu";
import Avatar from "primevue/avatar";
import Menu from "primevue/menu";
import { usePlatformConfig } from "../../store/platformConfig";
import MegaMenu from "primevue/megamenu"
import Avatar from "primevue/avatar"
import Menu from "primevue/menu"
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 =
route.query.cid || route.params.id || queryParams.get("cid") || 0;
const sid = route.query.sid || queryParams.get("sid") || 0;
const gid = route.query.gid || queryParams.get("gid") || 0;
const cid = route.query.cid || route.params.id || queryParams.get("cid") || 0
const sid = route.query.sid || queryParams.get("sid") || 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:
"true" !==
platformConfigStore.getSetting("display.show_link_ticket_notification"),
visible: "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>

Loading…
Cancel
Save