CLASSROOMIO-T-29: Limit org to one

Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-4
Merged-by: Digdippa Team <digdippa@gmail.com>

rollup.config.js

@@ -14,8 +14,8 @@ import pkg from './package.json';
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
-const sourcemap = dev ? false : 'inline';
-// const sourcemap = 'inline';
+// const sourcemap = dev ? false : 'inline';
+const sourcemap = 'inline';
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
 const onwarn = (warning, onwarn) => {

src/components/Chip/Text.svelte

@@ -7,7 +7,7 @@
 <p
   class="{className} {size === 'sm'
     ? 'py-1 px-1'
-    : 'py-2 px-2'} org-avatar bg-blue-200 font-bold rounded-md text-center"
+    : 'py-2 px-2'} org-avatar bg-gray-200 rounded-md text-center"
 >
   {value}
 </p>

src/components/Org/SideBar.svelte

@@ -11,7 +11,7 @@
   import AudienceIcon from '../../components/Icons/AudienceIcon.svelte';
   import { currentOrg } from '../../utils/store/org';
 
-  let orgName = '';
+  let orgSiteName = '';
   let activeClass = 'bg-gray-200';
   let { page } = stores();
 
@@ -26,55 +26,58 @@
     return pagePath.includes(itemPath);
   }
 
-  $: orgName = $currentOrg.siteName;
+  $: orgSiteName = $currentOrg.siteName;
 </script>
 
 <aside class="root bg-gray-100 h-full">
   <div class="h-full flex flex-col">
-    <div class="border-b border-gray-200 pt-5 px-4 ">
-      <TextChip value="DA" />
+    <div class="border-b border-gray-200 pt-5 px-4">
+      <TextChip
+        value={$currentOrg.shortName}
+        className="bg-blue-200 font-bold"
+      />
 
       <OrgSelector />
 
       <ul class="my-5">
-        <a href="/org/{orgName}" class="text-black">
+        <a href="/org/{orgSiteName}" class="text-black">
           <li
             class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
               $page.path,
-              `/org/${orgName}`
+              `/org/${orgSiteName}`
             ) && activeClass}"
           >
             <HomeIcon />
             <p class="ml-2">Home</p>
           </li>
         </a>
-        <a href="/org/{orgName}/courses" class="text-black">
+        <a href="/org/{orgSiteName}/courses" class="text-black">
           <li
             class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
               $page.path,
-              `/org/${orgName}/courses`
+              `/org/${orgSiteName}/courses`
             ) && activeClass}"
           >
             <CourseIcon />
             <p class="ml-2">Courses</p>
           </li>
         </a>
-        <a href="/org/{orgName}/site" class="text-black">
+        <a href="/org/{orgSiteName}/site" class="text-black">
           <li
             class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
               $page.path,
-              `/org/${orgName}/site`
+              `/org/${orgSiteName}/site`
             ) && activeClass}"
           >
             <SiteSettingsIcon />
             <p class="ml-2">Site settings</p>
           </li>
         </a>
-        <a href="/org/{orgName}/audience" class="text-black">
+        <a href="/org/{orgSiteName}/audience" class="text-black">
           <li
             class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
               $page.path,
-              `/org/${orgName}/audience`
+              `/org/${orgSiteName}/audience`
             ) && activeClass}"
           >
             <AudienceIcon />
@@ -84,18 +87,18 @@
       </ul>
     </div>
     <span class="flex-grow" />
-    <ul class="my-5 pb-5 px-4 ">
+    <ul class="my-5 pb-5 px-4">
       <a href="/help" class="text-black">
         <li class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200">
           <Help />
           <p class="ml-2">Help</p>
         </li>
       </a>
-      <a href="/org/{orgName}/settings" class="text-black">
+      <a href="/org/{orgSiteName}/settings" class="text-black">
         <li
           class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
             $page.path,
-            `/org/${orgName}/settings`
+            `/org/${orgSiteName}/settings`
           ) && activeClass}"
         >
           <UserAvatar />

src/components/OrgSelector/OrgSelector.svelte

@@ -11,16 +11,21 @@
   import Modal from '../Modal/index.svelte';
   import TextField from '../Form/TextField.svelte';
   import PrimaryButton from '../PrimaryButton/index.svelte';
+  import { currentOrg } from '../../utils/store/org';
 
   let open = false;
   let openAddOrg = false;
   let loading = false;
   let orgName = '';
 
+  const IS_FEATURE_ENABLED = false;
+
   function handleAddOrg() {
-    console.log('add org modal');
-    open = false;
-    openAddOrg = true;
+    if (IS_FEATURE_ENABLED) {
+      console.log('add org modal');
+      open = false;
+      openAddOrg = true;
+    }
   }
 
   function createNewOrg() {}
@@ -34,25 +39,22 @@
       open = !open;
     }}
   >
-    <p class="text-lg font-bold">DigDippa</p>
+    <p class="text-lg font-bold">{$currentOrg.name}</p>
     <CaretSortIcon class="ml-2" />
   </div>
   <Popover bind:open closeOnOutsideClick align="bottom-left">
     <OrgSelectorItem
       size="sm"
-      active={false}
-      avatarText="DA"
-      text="DigDippa"
+      active={true}
+      avatarText={$currentOrg.shortName}
+      text={$currentOrg.name}
       hasDivider={true}
     />
     <OrgSelectorItem
-      size="sm"
-      active={true}
-      avatarText="PA"
-      text="Pepsi Co"
-      hasDivider={true}
+      text=" + Add Organization"
+      onClick={handleAddOrg}
+      disabled={!IS_FEATURE_ENABLED}
     />
-    <OrgSelectorItem text=" + Add Organization" onClick={handleAddOrg} />
   </Popover>
 </div>
 

src/components/OrgSelector/OrgSelectorItem.svelte

@@ -7,21 +7,40 @@
   export let avatarText = '';
   export let text = '';
   export let onClick;
+  export let disabled = false;
 </script>
 
-<button
-  class="flex items-center w-60 py-2 px-3 {hasDivider &&
-    'border-b border-gray-100'} {active && 'bg-blue-100'}"
-  on:click={onClick}
->
-  {#if avatarText}
-    <TextChip value={avatarText} className="mr-2" {size} />
+<div class="relative">
+  <button
+    class="{disabled &&
+      'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
+      'border-b border-gray-100'} {active && 'bg-blue-100'}"
+    on:click={onClick}
+  >
+    {#if avatarText}
+      <TextChip
+        value={avatarText}
+        className="mr-2 bg-blue-200 font-bold"
+        {size}
+      />
+    {/if}
+    {text}
+  </button>
+  {#if disabled}
+    <div class="coming-soon">
+      <TextChip value="Coming soon" className="text-xs" />
+    </div>
   {/if}
-  {text}
-</button>
+</div>
 
 <style>
   button {
     min-height: 56px;
   }
+
+  .coming-soon {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
 </style>

src/routes/_layout.svelte

@@ -97,7 +97,10 @@
       // If user coming to login page, then
       if (_.isEmpty(orgRes.orgs)) {
         goto(ROUTE.ONBOARDING);
-      } else if (['login', 'signup', 'onboarding'].includes(path)) {
+      } else if (
+        ['login', 'signup', 'onboarding'].includes(path) ||
+        path === '' // for home page
+      ) {
         // By default redirect to first organization
         goto(`/org/${orgRes.currentOrg.siteName}`);
       }

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

@@ -80,10 +80,3 @@
     <Courses />
   </div>
 </section>
-
-<style>
-  .root {
-    width: 100%;
-    padding: 0 10px;
-  }
-</style>

src/utils/services/org/index.js

@@ -23,6 +23,8 @@ export async function getOrganizations(userId) {
       orgsArray.push({
         id: orgMember?.organization?.id,
         name: orgMember?.organization?.name,
+        shortName:
+          orgMember?.organization?.name?.substring(0, 2)?.toUpperCase() || '',
         siteName: orgMember?.organization?.siteName,
       });
     });

src/utils/store/org.js

@@ -1,4 +1,9 @@
 import { writable } from 'svelte/store';
 
 export const orgs = writable([]);
-export const currentOrg = writable({});
+export const currentOrg = writable({
+  id: '',
+  name: '',
+  shortName: '',
+  siteName: '',
+});