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}` : ''
 );

src/routes/org/[slug]/+page.svelte

@@ -15,6 +15,7 @@
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
   import { Add } from 'carbon-icons-svelte';
+  import { isOrgAdmin } from '$lib/utils/store/org';
 
   export let data;
   const { orgName } = data;
@@ -201,7 +202,7 @@
         <Add size={24} />
       </PrimaryButton>
     {:else}
-      <PrimaryButton label="Create Course" onClick={createCourse} />
+      <PrimaryButton label="Create Course" onClick={createCourse} isDisabled={!$isOrgAdmin} />
     {/if}
   </div>
 

src/routes/org/[slug]/courses/+page.svelte

@@ -10,6 +10,7 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { Add } from 'carbon-icons-svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
+  import { isOrgAdmin } from '$lib/utils/store/org';
 
   export let data;
   let { allCourses, cantFetch } = data;
@@ -51,11 +52,15 @@
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Courses</h1>
       {#if $isMobile}
-        <PrimaryButton onClick={() => ($createCourseModal.open = true)}>
+        <PrimaryButton isDisabled={!$isOrgAdmin} onClick={() => ($createCourseModal.open = true)}>
           <Add size={24} />
         </PrimaryButton>
       {:else}
-        <PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
+        <PrimaryButton
+          label="Create Course"
+          isDisabled={!$isOrgAdmin}
+          onClick={() => ($createCourseModal.open = true)}
+        />
       {/if}
     </div>