Project page now shows "Ask to join project" btn

Org members who aren't yet project members can ask to join a project by clicking the button, which will send an email to project managers.
sillsdev · Jan 17, 2025 · 28087b2 · 28087b2
1 parent 30c8d5a
commit 28087b2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
@@ -531,6 +531,9 @@ Lexbox is free and [open source](https://github.com/sillsdev/languageforge-lexbo
     "promote_project": {
       "label": "Promote to real project",
     },
+    "join_project": {
+      "label": "Ask to join project",
+    },
     "open_with_viewer": "Browse",
     "open_with_flex": {
       "button": "Open with FLEx",

diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
@@ -56,6 +56,8 @@
   import { getSearchParamValues } from '$lib/util/query-params';
   import FlexModelVersionText from '$lib/components/Projects/FlexModelVersionText.svelte';
   import CrdtSyncButton from './CrdtSyncButton.svelte';
+  import {_askToJoinProject} from '../create/+page'; // TODO: Should we duplicate this function in the project_code/+page.ts file, rather than importing it from elsewhere?
+  import {Duration} from '$lib/util/time';
 
   export let data: PageData;
   $: user = data.user;
@@ -143,6 +145,11 @@
     || projectRole && !project.isConfidential // public by default for members (non-members shouldn't even be here)
     || orgRoles.some(role => role === OrgRole.Admin);
 
+  // Almost mirrors PermissionService.CanAskToJoinProject() in C#, but admins won't be shown the "ask to join" button
+  $: canAskToJoinProject = !user.isAdmin
+    && !projectRole
+    && orgRoles.some((_) => true);
+
   let resetProjectModal: ResetProjectModal;
   async function resetProject(): Promise<void> {
     await resetProjectModal.open(project.code, project.resetStatus);
@@ -271,6 +278,16 @@
     }
   }
 
+  let askLoading = false;
+  async function askToJoinProject(projectId: string, projectName: string): Promise<void> {
+    askLoading = true;
+    const joinResult = await _askToJoinProject(projectId);
+    askLoading = false;
+    if (!joinResult.error) {
+      notifySuccess($t('project.create.join_request_sent', { projectName }), Duration.Persistent);
+    }
+  }
+
   let projectConfidentialityModal: ProjectConfidentialityModal;
   let openInFlexModal: OpenInFlexModal;
   let leaveModal: ConfirmModal;
@@ -316,6 +333,15 @@
         <CrdtSyncButton projectId={project.id} />
         <OpenInFlexModal bind:this={openInFlexModal} {project}/>
         <OpenInFlexButton projectId={project.id} on:click={openInFlexModal.open}/>
+      {:else if canAskToJoinProject}
+        <Button
+          variant="btn-primary"
+          loading={askLoading}
+          on:click={() => askToJoinProject(project.id, project.name)}
+        >
+          <span class="i-mdi-email text-2xl"></span>
+          {$t('project_page.join_project.label')}
+        </Button>
       {:else}
         <Dropdown>
           <button class="btn btn-primary">