Jeppe BandJeppe Bundgaard
db1c0e25c0
* Move limited backoffice shortcut into header * Use shared Playwright port locks in CI --------- Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>
100 lines
3.1 KiB
Vue
100 lines
3.1 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { useI18n } from "vue-i18n";
|
|
import { IS_DEV } from "@/config.js";
|
|
import SessionUser from "@/components/session/token/SessionUser.vue";
|
|
import {
|
|
getAdminDepartmentIdFromRoute,
|
|
getAdminDepartmentRoute,
|
|
getLimitedBackofficeDepartmentIdFromRoute,
|
|
getLimitedBackofficeDepartmentRoute,
|
|
} from "@/components/viewport/page/headers/headerShortcuts.js";
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n({ useScope: "global" });
|
|
|
|
const adminDepartmentId = computed(() => getAdminDepartmentIdFromRoute(route));
|
|
const backofficeDepartmentId = computed(() => getLimitedBackofficeDepartmentIdFromRoute(route));
|
|
|
|
const canAccessDepartment = (departmentId) =>
|
|
Number.isInteger(departmentId) && departmentId > 0 && SessionUser.canAccessDepartment(departmentId);
|
|
|
|
const canShowSuperuserBackoffice = computed(
|
|
() => SessionUser.canAccessSuperUser() && !route.path.includes("/superuser")
|
|
);
|
|
|
|
const canShowLimitedBackoffice = computed(() => {
|
|
const departmentId = adminDepartmentId.value;
|
|
|
|
return (
|
|
canAccessDepartment(departmentId) &&
|
|
SessionUser.hasPermission("limited_backoffice_access") &&
|
|
!SessionUser.canAccessSuperUser()
|
|
);
|
|
});
|
|
|
|
const limitedBackofficeTarget = computed(() => getLimitedBackofficeDepartmentRoute(adminDepartmentId.value));
|
|
|
|
const adminShortcutTarget = computed(() =>
|
|
backofficeDepartmentId.value ? getAdminDepartmentRoute(backofficeDepartmentId.value) : "/admin"
|
|
);
|
|
|
|
const canShowAdminShortcut = computed(() => {
|
|
if (!SessionUser.canAccessAdmin() || route.path.includes("/admin")) {
|
|
return false;
|
|
}
|
|
|
|
const departmentId = backofficeDepartmentId.value;
|
|
return departmentId === null || canAccessDepartment(departmentId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<router-link
|
|
v-if="canShowSuperuserBackoffice"
|
|
class="button is-white"
|
|
to="/superuser"
|
|
data-testid="superuser-backoffice-header-button"
|
|
>
|
|
<span class="icon">
|
|
<i class="fas fa-tools" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
|
|
</span>
|
|
<span>{{ t("header.backoffice") }}</span>
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="canShowLimitedBackoffice"
|
|
class="button is-white"
|
|
:to="limitedBackofficeTarget"
|
|
data-testid="limited-backoffice-header-button"
|
|
>
|
|
<span class="icon">
|
|
<i class="fas fa-tools" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
|
|
</span>
|
|
<span>{{ t("templates.limited_backoffice.title") }}</span>
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="canShowAdminShortcut"
|
|
class="button is-white"
|
|
:to="adminShortcutTarget"
|
|
data-testid="admin-header-button"
|
|
>
|
|
<span class="icon">
|
|
<i class="fas fa-building" :class="{ 'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV }"></i>
|
|
</span>
|
|
<span>{{ t("common.departments") }}</span>
|
|
</router-link>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.transform-color-black {
|
|
filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
|
|
}
|
|
|
|
.transform-color-red {
|
|
filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
|
|
}
|
|
</style>
|