CLASSROOMIO-T-160: Limit teachers features

src/lib/components/Org/Settings/index.svelte

@@ -8,6 +8,7 @@
   import { onMount } from 'svelte';
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
+  import { isOrgAdmin } from '$lib/utils/store/org';
 
   let selected = 0;
   let query = new URLSearchParams($page.url.search);
@@ -18,19 +19,22 @@
       key: 0,
       label: 'Profile',
       tabKey: '',
-      href: $page.url.pathname
+      href: $page.url.pathname,
+      disabled: false
     },
     {
       key: 1,
       label: 'Organization',
       tabKey: 'org',
-      href: `${$page.url.pathname}?tab=org`
+      href: `${$page.url.pathname}?tab=org`,
+      disabled: !$isOrgAdmin
     },
     {
       key: 2,
       label: 'LandingPage',
       tabKey: 'landingpage',
-      href: `${$page.url.pathname}?tab=landingpage`
+      href: `${$page.url.pathname}?tab=landingpage`,
+      disabled: !$isOrgAdmin
     }
   ];
 
@@ -59,7 +63,7 @@
 
 <Tabs autoWidth bind:selected>
   {#each tabs as tab}
-    <Tab label={tab.label} href={tab.href} />
+    <Tab label={tab.label} href={tab.href} disabled={tab.disabled} />
   {/each}
   <!-- <Tab label="Account" /> -->
   <svelte:fragment slot="content">

src/lib/components/PrimaryButton/index.svelte

@@ -13,12 +13,12 @@
   export let isDisabled = false;
   export let isLoading = false;
 
-  $: isDisabled = isLoading ? true : false;
+  $: isDisabled = isLoading ? true : isDisabled;
 </script>
 
 <button
   class="{isDisabled
-    ? 'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'
+    ? 'opacity-25 cursor-not-allowed'
     : 'cursor-pointer'} flex items-center h-auto {VARIANTS_CLASS[
     isLoading ? VARIANTS.OUTLINED : variant
   ]} {!disablePadding &&

src/lib/utils/store/org.ts

@@ -2,6 +2,7 @@ import { writable, derived } from 'svelte/store';
 import { STEPS } from '../constants/quiz';
 import type { Writable } from 'svelte/store';
 import type { CurrentOrg, OrgTeamMember } from '../types/org';
+import { ROLE } from '$lib/utils/constants/roles';
 
 export const orgs = writable<CurrentOrg[]>([]);
 export const currentOrg: Writable<CurrentOrg> = writable({
@@ -17,6 +18,10 @@ export const currentOrg: Writable<CurrentOrg> = writable({
 });
 export const orgAudience = writable([]);
 export const orgTeam = writable<OrgTeamMember[]>([]);
+export const isOrgAdmin = derived(
+  currentOrg,
+  ($currentOrg) => parseInt($currentOrg.role_id) === ROLE.ADMIN
+);
 export const currentOrgPath = derived(currentOrg, ($currentOrg) =>
   $currentOrg.siteName ? `/org/${$currentOrg.siteName}` : ''
 );