feat: Trigger add modal in People page via url (#223)

* feat add

* code refactor

* Update +page.svelte

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Course/components/People/InvitationModal.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
+  import copy from 'copy-to-clipboard';
   import { Popover } from 'carbon-components-svelte';
   import Link from 'carbon-icons-svelte/lib/Link.svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
   import Modal from '$lib/components/Modal/index.svelte';
-  import copy from 'copy-to-clipboard';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { ROLE } from '$lib/utils/constants/roles';
   import { addGroupMember, fetchGroup } from '$lib/utils/services/courses';
-  import { invitationModal, resetForm } from './store';
   import { course, setCourse } from '$lib/components/Course/store';
   import { MultiSelect, Loading } from 'carbon-components-svelte';
-  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgDomain, currentOrgPath } from '$lib/utils/store/org';
   import { getOrgTeam } from '$lib/utils/services/org';
   import type { OrgTeamMember } from '$lib/utils/types/org';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -26,6 +27,8 @@
     email: string;
     profileId?: string;
   }
+
+  let addPeopleParm;
   let tutors: Tutor[] = [];
   let selectedIds: Array<number> = [];
   let selectedTutors: Tutor[] = [];
@@ -40,7 +43,7 @@
 
   function onSubmit() {
     if (!selectedTutors.length) {
-      resetForm();
+      goto($page.url.pathname);
       return;
     }
 
@@ -76,7 +79,7 @@
         false
       );
 
-      resetForm();
+      goto($page.url.pathname);
     });
   }
 
@@ -96,7 +99,7 @@
       }));
   }
 
-  async function setTutors(orgId: string | undefined, _open: boolean) {
+  async function setTutors(orgId: string | undefined) {
     if (!orgId) return;
 
     isLoadingTutors = true;
@@ -127,17 +130,23 @@
     }, 1000);
   }
 
+  function closeModal() {
+    goto($page.url.pathname);
+  }
+
   $: {
     selectedTutors = formatSelected(selectedIds);
     console.log('selectedTutors', selectedTutors);
+    const query = new URLSearchParams($page.url.search);
+    addPeopleParm = query.get('add');
   }
 
-  $: setTutors($currentOrg.id, $invitationModal.open);
+  $: setTutors($currentOrg.id);
 </script>
 
 <Modal
-  onClose={resetForm}
+  onClose={() => closeModal()}
-  bind:open={$invitationModal.open}
+  open={addPeopleParm === 'true'}
   width="w-4/5 md:w-2/5"
   maxWidth="max-w-lg"
   modalHeading="Invite people"

apps/dashboard/src/lib/components/Course/components/People/store.js

@@ -3,12 +3,3 @@ import { writable } from 'svelte/store';
 export const deleteMemberModal = writable({
   open: false
 });
-
-export const invitationModal = writable({
-  open: false
-});
-
-export const resetForm = () =>
-  invitationModal.update(() => ({
-    open: false
-  }));

apps/dashboard/src/routes/courses/[id]/people/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import TextChip from '$lib/components/Chip/Text.svelte';
-  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
   import copy from 'copy-to-clipboard';
   import {
     CopyButton,
@@ -11,6 +9,8 @@
     StructuredListHead,
     StructuredListRow
   } from 'carbon-components-svelte';
+  import TextChip from '$lib/components/Chip/Text.svelte';
+  import ComingSoon from '$lib/components/ComingSoon/index.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -21,18 +21,17 @@
   import IconButton from '$lib/components/IconButton/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import { group } from '$lib/components/Course/store';
-  import InviationModal from '$lib/components/Course/components/People/InviationModal.svelte';
+  import InvitationModal from '$lib/components/Course/components/People/InvitationModal.svelte';
   import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
-  import {
+  import { deleteMemberModal } from '$lib/components/Course/components/People/store';
-    invitationModal,
-    deleteMemberModal
-  } from '$lib/components/Course/components/People/store';
   import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
   import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
   import { profile } from '$lib/utils/store/user';
   import { snackbar } from '$lib/components/Snackbar/store';
   import Avatar from '$lib/components/Avatar/index.svelte';
   import type { GroupPerson } from '$lib/utils/types';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
 
   export let data;
 
@@ -110,10 +109,15 @@
     }
   }
 
+  const handleClick = () => {
+    const url = $page.url.href + '?add=true';
+    goto(url);
+  };
+
   $: sortAndFilterPeople($group.people, filterBy);
 </script>
 
-<InviationModal />
+<InvitationModal />
 
 <DeleteConfirmation
   email={member.email || (member.profile && member.profile.email)}
@@ -124,11 +128,7 @@
   <PageNav title="People" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
+        <PrimaryButton className="mr-2" label="Add" onClick={handleClick} />
-          className="mr-2"
-          label="Add"
-          onClick={() => ($invitationModal.open = true)}
-        />
       </RoleBasedSecurity>
     </slot:fragment>
   </PageNav>