List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Join Organization">
    <ion-grid :fixed="true">
      <ion-row>
        <ion-col>
          <h1>Do you want to join {{ orgName }}?</h1>
          <p>
            After joining, you will need to wait for an admin in the
            organization to assign you to a role.
          </p>
          <ion-button @click="joinOrg">Join</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </BaseLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import BaseLayout from "@/components/BaseLayout.vue";
import {
  IonButton,
  IonCard,
  IonContent,
  IonGrid,
  IonRow,
  IonCol,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  alertController,
} from "@ionic/vue";

import { getApi } from "@/dataAccess/getApi";

const route = useRoute();
const router = useRouter();
const orgId = route.params.id;
const orgName = ref("Org Not Found");

async function joinOrg() {
  try {
    const { pb } = await getApi();
    const response = await pb.send("/api/join", {
      method: "POST",
      body: JSON.stringify({
        orgId: orgId,
        userId: pb.authStore.record?.id,
      }),
    });

    // Show appropriate message based on response
    const isAlreadyMember = response.message?.includes("already a member");
    
    const alert = await alertController.create({
      header: isAlreadyMember ? "Already a Member" : "Success",
      message: response.message || "Successfully joined organization",
      buttons: ["OK"],
    });
    await alert.present();

    // Redirect to profile after user dismisses alert
    alert.onDidDismiss().then(() => {
      router.push("/profile");
    });

  } catch (err) {
    console.error("Failed to join organization:", err);
    
    // Show error message
    const alert = await alertController.create({
      header: "Error", 
      message: "Failed to join organization. Please try again.",
      buttons: ["OK"],
    });
    await alert.present();
  }
}

onMounted(async () => {
  const { pb } = await getApi();
  // TODO: fetching a single record by id should work...
  const records = await pb.collection("organizations").getFullList();
  const record = records.find((e) => e.id == orgId);
  if (record) {
    orgName.value = record.name;
  }

  // try {
  //   const record = await pb.collection("organizations").getOne(orgId as string);
  //   if (record) {
  //     orgName.value = record.name;
  //   }
  // } catch (e) {
  //   console.error("Failed to fetch record", e);
  // }
});
</script>