Move role-change notification inside members list

sillsdev · May 15, 2024 · 725ba0f · 725ba0f
1 parent 247840b
commit 725ba0f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 52 deletions.
diff --git a/frontend/src/lib/components/MembersList.svelte b/frontend/src/lib/components/MembersList.svelte
@@ -15,9 +15,16 @@
   import { Button } from '$lib/forms';
   import type { OrgRole, ProjectRole } from '$lib/gql/types';
   import { createEventDispatcher } from 'svelte';
+  import ChangeMemberRoleModal from '../../routes/(authenticated)/project/[project_code]/ChangeMemberRoleModal.svelte';
+  import { DialogResponse } from './modals';
+  import { useNotifications } from '$lib/notify';
+  import type { UUID } from 'crypto';
 
   export let members: Member[] = [];
   export let canManageMember: (member: Member) => boolean;
+  type RoleType = 'project' | 'org'
+  export let roleType: RoleType;
+  export let projectOrOrgId: string;
 
   let dispatch = createEventDispatcher();
 
@@ -26,6 +33,33 @@
   let showAllMembers = false;
   $: showMembers = showAllMembers ? members : members.slice(0, truncatedMemberCount);
 
+  const { notifySuccess/*, notifyWarning*/ } = useNotifications();
+
+  let changeMemberRoleModal: ChangeMemberRoleModal;
+  async function changeMemberRole(member: Member): Promise<void> {
+    if (!member.user) return;
+    console.log('About to change member role for', member);
+    const { response, formState } = await changeMemberRoleModal.open({
+      userId: member.user.id as UUID,
+      name: member.user.name ?? '', // TODO: Fall back to email address if name missing? Would require adding `email: string` to Member definition above
+      role: member.role,
+    });
+
+    if (response === DialogResponse.Submit) {
+      const notification: `${RoleType}_page.notifications.role_change` = `${roleType}_page.notifications.role_change`;
+      const role = formState.role.currentValue.toLowerCase();
+      // @ts-expect-error Typescript will always warn that "admin" isn't in the project roles list, or "manager" isn't in the org roles list. Ignore.
+      const roleText = $t(`${roleType}_role.${role}`);
+      notifySuccess(
+        $t(notification, {
+          name: member.user?.name ?? '',
+          role: roleText,
+        }),
+      );
+    }
+  }
+
+
 </script>
 
 <div>
@@ -49,7 +83,7 @@
             </li>
           </AdminContent>
           <li>
-            <button on:click={() => dispatch('changeMemberRole', member)}>
+            <button on:click={() => changeMemberRole(member)}>
               <span class="i-mdi-account-lock text-2xl" />
               {$t('project_page.change_role')}
             </button>
@@ -80,4 +114,5 @@
     <slot />
 
   </BadgeList>
+  <ChangeMemberRoleModal {roleType} projectId={projectOrOrgId} bind:this={changeMemberRoleModal} />
 </div>
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
@@ -194,6 +194,16 @@ the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chia
       }
     },
   },
+  "org_page": {
+    "notifications": {
+      "role_change": "Organizational role of {name} set to {role}.",
+      "user_delete": "{name} has been removed.",
+      "rename_project": "Organization name set to {name}.",
+      "describe": "Organization description has been updated.",
+      "add_member": "{email} has been added to organization.",
+      "member_invited": "{email} has been sent an invitation email to register and join the organization."
+    },
+  },
   "project_page": {
     "project": "Project",
     "add_user": {

diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/+page.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/+page.svelte
@@ -12,9 +12,6 @@
   import { useNotifications } from '$lib/notify';
   import { _changeOrgName } from './+page';
   import MembersList from '$lib/components/MembersList.svelte';
-  import ChangeMemberRoleModal from '../../project/[project_code]/ChangeMemberRoleModal.svelte';
-  import { DialogResponse } from '$lib/components/modals';
-  import type { UUID } from 'crypto';
 
   // TODO: Use org.description instead... once orgs *have* descriptions, that is. Or remove if we decide orgs won't have descriptions
   export let description = 'Fake description since orgs don\'t currently have descriptions';
@@ -23,7 +20,6 @@
   $: user = data.user;
   let orgStore = data.org;
   $: org = $orgStore;
-  type Member = typeof org.members[number];
 
   let loadingExtraButton = false;
 
@@ -43,28 +39,6 @@
     notifySuccess($t('project_page.notifications.rename_project', { name: newName }));
     // TODO: notifySuccess($t('org_page.notifications.rename_org', { name: newName }));
   }
-
-  // TODO: Duplicated with project page.
-  // Move inside MembersList now that ChangeMemberRoleModal is generic (handles both org and project roles)
-  let changeMemberRoleModal: ChangeMemberRoleModal;
-  async function changeMemberRole(member: Member): Promise<void> {
-    if (!member.user) return;
-    const { response } = await changeMemberRoleModal.open({
-      userId: member.user.id as UUID,
-      name: member.user.name ?? member.user.email ?? '',
-      role: member.role,
-    });
-
-    if (response === DialogResponse.Submit) {
-      notifySuccess(
-        $t('project_page.notifications.role_change', { // TODO: org_page.notifications.role_change
-          name: member.user?.name ?? member.user?.email ?? '',
-          role: member.role.toLowerCase(),
-        }),
-      );
-    }
-  }
-
 </script>
 
 <DetailsPage wide title={org.name}>
@@ -117,10 +91,10 @@
     multiline={true}
     />
   <MembersList
+    roleType="org"
+    projectOrOrgId={org.id}
     members={org.members}
     canManageMember={(member) => member?.role === OrgRole.Admin || user.isAdmin}
-    on:changeMemberRole={(event) => changeMemberRole(event.detail)}
     />
-    <ChangeMemberRoleModal roleType="org" projectId={org.id} bind:this={changeMemberRoleModal} />
 </DetailsPage>
 
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
@@ -17,7 +17,6 @@
   } from './+page';
   import AddProjectMember from './AddProjectMember.svelte';
   import BulkAddProjectMembers from './BulkAddProjectMembers.svelte';
-  import ChangeMemberRoleModal from './ChangeMemberRoleModal.svelte';
   import { CircleArrowIcon, TrashIcon } from '$lib/icons';
   import { useNotifications } from '$lib/notify';
   import {DialogResponse, Modal} from '$lib/components/modals';
@@ -43,7 +42,6 @@
   import ProjectConfidentialityModal from './ProjectConfidentialityModal.svelte';
   import { DetailItem } from '$lib/layout';
   import MembersList from '$lib/components/MembersList.svelte';
-  import type { UUID } from 'crypto';
 
   export let data: PageData;
   $: user = data.user;
@@ -76,25 +74,6 @@
     loadingEntryCount = false;
   }
 
-  // TODO: Move inside MembersList now that ChangeMemberRoleModal is generic (handles both org and project roles)
-  let changeMemberRoleModal: ChangeMemberRoleModal;
-  async function changeMemberRole(projectUser: ProjectUser): Promise<void> {
-    const { response } = await changeMemberRoleModal.open({
-      userId: projectUser.user.id as UUID,
-      name: projectUser.user.name,
-      role: projectUser.role,
-    });
-
-    if (response === DialogResponse.Submit) {
-      notifySuccess(
-        $t('project_page.notifications.role_change', {
-          name: projectUser.user.name,
-          role: projectUser.role.toLowerCase(),
-        }),
-      );
-    }
-  }
-
   let resetProjectModal: ResetProjectModal;
   async function resetProject(): Promise<void> {
     await resetProjectModal.open(project.code, project.resetStatus);
@@ -363,10 +342,11 @@
       </div>
 
       <MembersList
+        roleType="project"
+        projectOrOrgId={project.id}
         {members}
         canManageMember={(member) => canManage && (member.user?.id !== userId || user.isAdmin)}
         on:openUserModal={(event) => userModal.open(event.detail.user)}
-        on:changeMemberRole={(event) => changeMemberRole(event.detail)}
         on:deleteProjectUser={(event) => deleteProjectUser(event.detail)}
         >
           <svelte:fragment slot="extraButtons">
@@ -377,7 +357,6 @@
             <BulkAddProjectMembers projectId={project.id} />
             {/if}
           </svelte:fragment>
-          <ChangeMemberRoleModal projectId={project.id} bind:this={changeMemberRoleModal} />
           <UserModal bind:this={userModal}/>
 
           <DeleteModal