107

frontend/pages/initiative/[id]/index.vue

@@ -4,14 +4,18 @@ import { languageToOption } from '@/lib/language'
 const pactaClient = usePACTA()
 const { fromParams } = useURLParams()
 const { humanReadableDateFromStandardString } = useTime()
+const { getMaybeMe } = useSession()
+const { loading: { withLoading } } = useModal()
+
+const { maybeMe } = await getMaybeMe()
 
 const id = presentOrCheckURL(fromParams('id'))
-const prefix = `initiative/${id}/invitations`
+const prefix = `initiative/${id}`
 const [
   { data: initiative },
+  { data: relationships, refresh: refreshRelationships },
 ] = await Promise.all([
   useSimpleAsyncData(`${prefix}.getInitiative`, () => pactaClient.findInitiativeById(id)),
-  useSimpleAsyncData(`${prefix}.getInvitations`, () => pactaClient.listInitiativeInvitations(id)),
   useSimpleAsyncData(`${prefix}.getRelationships`, () => pactaClient.listInitiativeUserRelationshipsByInitiative(id)),
 ])
 
@@ -26,6 +30,26 @@ const status = computed(() => {
     return 'Closed'
   }
 })
+
+const isAMember = computed(() => {
+  const mm = maybeMe.value
+  if (!mm) return false
+  return relationships.value.some((r) => r.userId === mm.id && r.manager)
+})
+const canJoin = computed(() => {
+  const i = initiative.value
+  return maybeMe.value && i.isAcceptingNewMembers && !i.requiresInvitationToJoin && !isAMember.value
+})
+const join = () => {
+  void withLoading(async () => {
+    await pactaClient.updateInitiativeUserRelationship(
+      id,
+      presentOrFileBug(maybeMe.value).id,
+      { member: true },
+    )
+    await refreshRelationships()
+  }, 'initiative/join')
+}
 </script>
 
 <template>
@@ -50,6 +74,25 @@ const status = computed(() => {
       Created At: <b>{{ humanReadableDateFromStandardString(initiative.createdAt) }}</b>
     </div>
     {{ initiative.publicDescription }}
+    <PVButton
+      v-if="isAMember"
+      disabled
+      label="You are a member of this initiative"
+      icon="pi pi-check"
+    />
+    <PVButton
+      v-if="isAMember"
+      label="Leave Initiative"
+      icon="pi pi-arrow-left"
+      class="p-button-danger p-button-outlined"
+    />
+    <PVButton
+      v-if="canJoin"
+      label="Join Initiative"
+      icon="pi pi-arrow-right"
+      icon-pos="right"
+      @click="join"
+    />
     <StandardDebug
       :value="initiative"
       label="Initiative"

frontend/pages/initiative/[id]/relationships.vue

@@ -3,6 +3,7 @@
 const { fromParams } = useURLParams()
 const localePath = useLocalePath()
 const { humanReadableTimeFromStandardString } = useTime()
+const { loading: { withLoading } } = useModal()
 
 const [
   pactaClient,
@@ -16,7 +17,7 @@ const { maybeMe, isAdmin } = await getMaybeMe()
 const id = presentOrCheckURL(fromParams('id'))
 const prefix = `initiative/${id}/relationships`
 const [
-  { data: relationships },
+  { data: relationships, refresh: refreshRelationships },
 ] = await Promise.all([
   useSimpleAsyncData(`${prefix}.getRelationships`, () => pactaClient.listInitiativeUserRelationshipsByInitiative(id)),
 ])
@@ -28,15 +29,19 @@ const canManage = computed(() => {
   return relationships.value.some((r) => r.userId === mm.id && r.manager)
 })
 
-const makeManager = (userId: string) => {
-  alert('make manager not yet implemented')
-}
-const removeFromInitiative = (userId: string) => {
-  alert('remove from initiative not yet implemented')
-}
-const removeManager = (userId: string) => {
-  alert('remove manager not yet implemented')
-}
+const changeMembership = (userId: string, member: boolean | undefined, manager: boolean | undefined) =>
+  withLoading(async () => {
+    await pactaClient.updateInitiativeUserRelationship(
+      id,
+      userId,
+      { member },
+    )
+    await refreshRelationships()
+  }, 'initiative/relationships/changeMembership')
+
+const addManager = (userId: string) => { void changeMembership(userId, undefined, true) }
+const removeManager = (userId: string) => { void changeMembership(userId, undefined, false) }
+const removeMember = (userId: string) => { void changeMembership(userId, false, undefined) }
 </script>
 
 <template>
@@ -91,13 +96,13 @@ const removeManager = (userId: string) => {
               label="Make Manager"
               class="p-button-xs p-button-success p-button-outlined"
               icon="pi pi-user-plus"
-              @click="makeManager(slotProps.data.userId)"
+              @click="addManager(slotProps.data.userId)"
             />
             <PVButton
               label="Remove From Initiative"
               class="p-button-xs p-button-danger p-button-outlined"
               icon="pi pi-trash"
-              @click="removeFromInitiative(slotProps.data.userId)"
+              @click="removeMember(slotProps.data.userId)"
             />
           </template>
         </div>