DistrictCentral/imports/ui/Assets.svelte

<script>
	import Tab, { Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import {Meteor} from "meteor/meteor";
	import {onMount} from "svelte";
	import AssetList from "/imports/ui/Assets/AssetList.svelte";
	import AddAssets from "/imports/ui/Assets/AddAssets.svelte";
	import {useTracker} from "meteor/rdb:svelte-meteor-data";
	import AssignAssets from "/imports/ui/Assets/AssignAssets.svelte";
	import AssignmentByAssignee from "/imports/ui/Assets/AssignmentByAssignee.svelte";
	import AssignmentByAsset from "/imports/ui/Assets/AssignmentByAsset.svelte";

	let canManageLaptops = false;
	let isAdmin = false;
	$: currentUser = useTracker(() => Meteor.user());

	Tracker.autorun(() => {
		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
		let user = Meteor.user();
		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
	});

	let tabs = [];

	if(canManageLaptops) {
		tabs.push({id: 'listAssignmentsByAssignee', label: 'Assignments By Assignee'});
		tabs.push({id: 'listAssignmentsByAsset', label: 'Assignments By Asset'});
		tabs.push({id: 'assignAssets', label: 'Assign Assets'});
	}
	if(isAdmin) {
		tabs.push({id: 'listAssets', label: 'Asset List'});
		tabs.push({id: 'addAssets', label: 'Add Assets'});
	}
	let activeTab = tabs[0];
</script>

<div class="container">
	<TabBar tabs={tabs} minWidth let:tab bind:active={activeTab}>
		<Tab {tab}>
			<Label>{tab.label}</Label>
		</Tab>
	</TabBar>
	{#if activeTab && activeTab.id === 'listAssets'}
		<AssetList></AssetList>
	{:else if activeTab && activeTab.id === 'addAssets'}
		<AddAssets></AddAssets>
	{:else if activeTab && activeTab.id === 'assignAssets'}
		<AssignAssets></AssignAssets>
	{:else if activeTab && activeTab.id === 'listAssignmentsByAssignee'}
		<AssignmentByAssignee></AssignmentByAssignee>
	{:else if activeTab && activeTab.id === 'listAssignmentsByAsset'}
		<AssignmentByAsset></AssignmentByAsset>
	{/if}
</div>

<style>
</style>