List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>User Profile</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Manage Organization - org.name </ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <ion-grid :fixed="true">
          <ion-row>
            <ion-col size="12">
              <ion-card>
                <ion-card-header>
                  <ion-card-title>Members</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  <ion-grid>
                    <ion-row v-for="member in [1,2] //activeMembers">
                      <ion-col size="4">
                         member.email 
                      </ion-col>
                      <ion-col size="4"> member.name  </ion-col>

                      <ion-col size="2"
                        ><ion-button data-user="member.id" click="removeUser"
                          >Remove</ion-button
                        ></ion-col
                      >
                    </ion-row>
                  </ion-grid>
                </ion-card-content>
              </ion-card>
              <ion-card>
                <ion-card-header>
                  <ion-card-title>Owners</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  <ion-grid>
                    <ion-row
                      v-for="member in [1, 2, 3]" // org.expand?.owners
                    >
                      <ion-col size="4">
                        {{ member }}
                         member.email 
                      </ion-col>
                      <ion-col size="4">  member.name  </ion-col>
                    </ion-row>
                  </ion-grid>
                </ion-card-content>
              </ion-card>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import {
  IonButton,
  IonCard,
  IonContent,
  IonGrid,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";

import { useApi } from "@/composables/useApi";

const route = useRoute();
const { pb } = await useApi();
// const orgResponse = await pb
//   .collection("organizations")
//   .getOne(route.params.id, { expand: "members, owners" });
//
// const org = ref(orgResponse);
//
// const activeMembers = computed(() => {
//   const active = [];
//   for (const member of org.value.members) {
//     if (!org.value.owners.includes(member)) {
//       active.push(org.value.expand?.members.find((e) => e.id == member));
//     }
//   }
//   return active;
// });
//
// console.log(org);
//
// async function removeUser(e: Event) {
//   const userId = (e.target as HTMLElement).dataset.user;
//   const userIndex = org.value.members.findIndex((e) => e == userId);
//   org.value.members.splice(userIndex, 1);
//   const data = { members: org.value.members };
//   await pb.collection("organizations").update(route.params.id, data);
// }
</script>