sudomarcma
110 lines
6.3 KiB
Vue
110 lines
6.3 KiB
Vue
<template>
|
|
<div class="max-w-full mx-auto px-4 py-4">
|
|
<div
|
|
class="flex flex-wrap justify-center gap-2 sm:gap-4 border-b-2 border-gray-200 dark:border-gray-700 mb-6 pb-2 relative z-10">
|
|
<button v-if="permissions.view_all || permissions.edit_workers" @click="activeTab = 'personnel'" :class="{
|
|
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
|
|
activeTab === 'personnel',
|
|
'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
|
|
activeTab !== 'personnel',
|
|
}"
|
|
class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
|
|
{{ $t('tabPersonnel') }}
|
|
</button>
|
|
<button v-if="permissions.view_all" @click="activeTab = 'warning'" :class="{
|
|
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
|
|
activeTab === 'warning',
|
|
'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
|
|
activeTab !== 'warning',
|
|
}"
|
|
class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
|
|
{{ $t('tabWarning') }}
|
|
</button>
|
|
<button v-if="permissions.view_all || permissions.manage_resources" @click="activeTab = 'qr'" :class="{
|
|
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
|
|
activeTab === 'qr',
|
|
'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
|
|
activeTab !== 'qr',
|
|
}"
|
|
class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
|
|
{{ $t('tabQrCodes') }}
|
|
</button>
|
|
<button v-if="permissions.view_all || permissions.manage_resources" @click="activeTab = 'geofencing'" :class="{
|
|
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
|
|
activeTab === 'geofencing',
|
|
'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
|
|
activeTab !== 'geofencing',
|
|
}"
|
|
class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
|
|
{{ $t('tabGeofencing') }}
|
|
</button>
|
|
<button v-if="permissions.view_all" @click="activeTab = 'killSwitch'" :class="{
|
|
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
|
|
activeTab === 'killSwitch',
|
|
'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
|
|
activeTab !== 'killSwitch',
|
|
}"
|
|
class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
|
|
{{ $t('workScheduleTitle') }}
|
|
</button>
|
|
<button v-if="permissions.manager_permissions" @click="activeTab = 'permissions'" :class="{
|
|
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-bold':
|
|
activeTab === 'permissions',
|
|
'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600':
|
|
activeTab !== 'permissions',
|
|
}"
|
|
class="flex-shrink-0 px-3 py-2 text-sm sm:px-4 sm:py-2 sm:text-base transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">
|
|
{{ $t('managerPermissions') }}
|
|
</button>
|
|
</div>
|
|
<div class="tab-content">
|
|
<WarningReporting v-if="activeTab === 'warning' && permissions.view_all" />
|
|
<QrCodeManagement v-if="activeTab === 'qr' && (permissions.view_all || permissions.manage_resources)" />
|
|
<PersonnelManagement v-if="activeTab === 'personnel' && (permissions.view_all || permissions.edit_workers)" />
|
|
<ManagerPermissions v-if="activeTab === 'permissions' && permissions.manager_permissions" />
|
|
<GeofenceManagement v-if="activeTab === 'geofencing' && (permissions.view_all || permissions.manage_resources)" />
|
|
<KillSwitchManagement v-if="activeTab === 'killSwitch' && permissions.view_all" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { permissions, fetchPermissions } from '@/stores/permissions.js'
|
|
import WarningReporting from '@/components/WarningReporting.vue'
|
|
import QrCodeManagement from '@/components/QrCodeManagement.vue'
|
|
import PersonnelManagement from '@/components/PersonnelManagement.vue'
|
|
import ManagerPermissions from '@/components/ManagerPermissions.vue'
|
|
import GeofenceManagement from '@/components/GeofenceManagement.vue'
|
|
import KillSwitchManagement from '@/components/KillSwitchManagement.vue'
|
|
|
|
const activeTab = ref('personnel')
|
|
|
|
onMounted(async () => {
|
|
await fetchPermissions();
|
|
// Set the default active tab to the first one the user has permission for
|
|
if (permissions.value.view_all) {
|
|
activeTab.value = 'personnel'; // Default to personnel tab if view_all is true
|
|
} else if (permissions.value.edit_workers) {
|
|
activeTab.value = 'personnel';
|
|
} else if (permissions.value.manager_permissions) {
|
|
activeTab.value = 'permissions';
|
|
} else if (permissions.value.manage_resources) {
|
|
activeTab.value = 'qr';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
}
|
|
</style>
|