List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Create Organization">
    <ion-grid :fixed="true">
      <ion-row>
        <ion-col>
          <form @submit.prevent="onSubmit">
            <ion-list class="ion-padding">
              <ion-item>
                <ion-input v-model="name" placeholder="Organization Name">
                  <ion-icon slot="start" :icon="create"></ion-icon>
                </ion-input>
              </ion-item>
            </ion-list>
            <ion-button
              id="register"
              type="submit"
              expand="block"
              :disabled="!(name.length > 2)"
              >Create</ion-button
            >
          </form>
        </ion-col>
      </ion-row>
    </ion-grid>
  </BaseLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardTitle,
  IonCol,
  IonGrid,
  IonIcon,
  IonInput,
  IonItem,
  IonList,
  IonRow,
} from "@ionic/vue";
import { create } from "ionicons/icons";
import { getApi } from "@/dataAccess/getApi";
import { useRouter } from "vue-router";
import BaseLayout from "@/components/BaseLayout.vue";

const router = useRouter();
const name = ref("");
let pb: any = null;

onMounted(async () => {
  const api = await getApi();
  pb = api.pb;
});

async function onSubmit() {
  if (!pb) return;

  if (name.value.length > 2) {
    const data = {
      name: name.value,
      owner: pb.authStore.record?.id,
    };
    try {
      const r = await pb.collection("organizations").create(data);
      router.push({ name: "organizations.manage", params: { id: r.id } });
    } catch (e) {
      console.error("Failed to create organization:", e);
      alert(e);
    }
  }
}
</script>