From 54ae7c55d28bfc9e507ce09f8cf097aa75f8451f Mon Sep 17 00:00:00 2001
From: Adam Richie-Halford <richiehalford@gmail.com>
Date: Thu, 4 Apr 2024 10:35:01 -0700
Subject: [PATCH 1/2] WIP: Create invite-users page and route

---
 roar-firebase-functions | 2 +-
 src/router/index.js     | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/roar-firebase-functions b/roar-firebase-functions
index 3186f408d..357301eb3 160000
--- a/roar-firebase-functions
+++ b/roar-firebase-functions
@@ -1 +1 @@
-Subproject commit 3186f408dbba54d2558b9f4df2b4adbc5cf987fb
+Subproject commit 357301eb31225d65f0839f308e11f74826e6054d
diff --git a/src/router/index.js b/src/router/index.js
index 225de7ae1..0e35ec664 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -266,6 +266,13 @@ const routes = [
     component: () => import('../components/ListUsers.vue'),
     meta: { pageTitle: 'List users', requireAdmin: true },
   },
+  {
+    path: '/invite-users/:orgType/:orgId/:orgName',
+    name: 'InviteUsers',
+    props: true,
+    component: () => import('../pages/InviteUsers.vue'),
+    meta: { pageTitle: 'Invite users to an organization', requireSuperAdmin: true },
+  },
   {
     path: '/administration/:administrationId/:orgType/:orgId',
     name: 'ViewAdministration',

From 72bc6398aadef91dcfb79faa7cc0aaaf322453ef Mon Sep 17 00:00:00 2001
From: Adam Richie-Halford <richiehalford@gmail.com>
Date: Sat, 6 Apr 2024 04:26:02 -0700
Subject: [PATCH 2/2] Add src/pages/InviteUsers.vue

---
 src/pages/InviteUsers.vue | 155 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 src/pages/InviteUsers.vue

diff --git a/src/pages/InviteUsers.vue b/src/pages/InviteUsers.vue
new file mode 100644
index 000000000..ac0074094
--- /dev/null
+++ b/src/pages/InviteUsers.vue
@@ -0,0 +1,155 @@
+<template>
+  <main class="container main">
+    <section class="main-body">
+      <PvPanel header="View Users">
+        <div v-if="!(isLoading || isLoadingCount)">
+          <h2>Users in {{ singularizeFirestoreCollection(orgType) }} {{ orgName }}</h2>
+          <RoarDataTable
+            v-if="users"
+            lazy
+            :columns="columns"
+            :data="users"
+            :page-limit="pageLimit"
+            :total-records="totalRecords"
+            :loading="isLoading || isLoadingCount || isFetching || isFetchingCount"
+            :allow-export="false"
+            :allow-filtering="false"
+            @page="onPage($event)"
+            @sort="onSort($event)"
+          />
+        </div>
+        <AppSpinner v-else />
+      </PvPanel>
+    </section>
+  </main>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import _isEmpty from 'lodash/isEmpty';
+import { useQuery } from '@tanstack/vue-query';
+import AppSpinner from './AppSpinner.vue';
+import { storeToRefs } from 'pinia';
+import { countUsersByOrg, fetchUsersByOrg } from '@/helpers/query/users';
+import { singularizeFirestoreCollection } from '@/helpers';
+
+const authStore = useAuthStore();
+
+const { roarfirekit } = storeToRefs(authStore);
+const initialized = ref(false);
+
+const pageLimit = ref(10);
+const page = ref(0);
+const orderBy = ref(null);
+
+const props = defineProps({
+  orgType: {
+    type: String,
+    required: true,
+  },
+  orgId: {
+    type: String,
+    required: true,
+  },
+  orgName: {
+    type: String,
+    required: true,
+  },
+});
+
+const {
+  isLoading: isLoadingCount,
+  isFetching: isFetchingCount,
+  data: totalRecords,
+} = useQuery({
+  queryKey: ['countUsers', props.orgType, props.orgId, orderBy],
+  queryFn: () => countUsersByOrg(props.orgType, props.orgId, orderBy),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const {
+  isLoading,
+  isFetching,
+  data: users,
+} = useQuery({
+  queryKey: ['usersByOrgPage', props.orgType, props.orgId, pageLimit, page, orderBy],
+  queryFn: () => fetchUsersByOrg(props.orgType, props.orgId, pageLimit, page, orderBy),
+  keepPreviousData: true,
+  enabled: initialized,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+});
+
+const columns = ref([
+  {
+    field: 'username',
+    header: 'Username',
+    dataType: 'string',
+    sort: false,
+  },
+  {
+    field: 'name.first',
+    header: 'First Name',
+    dataType: 'string',
+    sort: false,
+  },
+  {
+    field: 'name.last',
+    header: 'Last Name',
+    dataType: 'string',
+    sort: false,
+  },
+  {
+    field: 'studentData.grade',
+    header: 'Grade',
+    dataType: 'string',
+    sort: false,
+  },
+  {
+    field: 'studentData.gender',
+    header: 'Gender',
+    dataType: 'string',
+    sort: false,
+  },
+  {
+    field: 'studentData.dob',
+    header: 'Date of Birth',
+    dataType: 'date',
+    sort: false,
+  },
+  {
+    field: 'userType',
+    header: 'User Type',
+    dataType: 'string',
+    sort: false,
+  },
+]);
+
+const onPage = (event) => {
+  page.value = event.page;
+  pageLimit.value = event.rows;
+};
+
+const onSort = (event) => {
+  const _orderBy = (event.multiSortMeta ?? []).map((item) => ({
+    field: { fieldPath: item.field },
+    direction: item.order === 1 ? 'ASCENDING' : 'DESCENDING',
+  }));
+  orderBy.value = !_isEmpty(_orderBy) ? _orderBy : null;
+};
+
+let unsubscribe;
+const init = () => {
+  if (unsubscribe) unsubscribe();
+  initialized.value = true;
+};
+
+unsubscribe = authStore.$subscribe(async (mutation, state) => {
+  if (state.roarfirekit.restConfig) init();
+});
+
+onMounted(() => {
+  if (roarfirekit.value.restConfig) init();
+});
+</script>