From f99ed4f3c32bb194d04ca1fe66335bf9e350e8bc Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Thu, 23 May 2024 14:34:32 -0700
Subject: [PATCH] Re-organized admin panels, add invite panel, add admin nav,
 and fix up data table's null filter handling.

---
 backend/src/appointment/routes/invite.py      |   4 +-
 frontend/src/components/DataTable.vue         |  25 +-
 frontend/src/elements/ListPagination.vue      |  42 +--
 frontend/src/elements/admin/AdminNav.vue      |  27 ++
 frontend/src/locales/en.json                  |   2 +
 frontend/src/router.js                        |   9 +-
 .../src/views/admin/InviteCodePanelView.vue   | 261 ++++++++++++++++++
 .../views/{ => admin}/SubscriberPanelView.vue |   8 +-
 8 files changed, 339 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/elements/admin/AdminNav.vue
 create mode 100644 frontend/src/views/admin/InviteCodePanelView.vue
 rename frontend/src/views/{ => admin}/SubscriberPanelView.vue (97%)

diff --git a/backend/src/appointment/routes/invite.py b/backend/src/appointment/routes/invite.py
index 2dae4faf7..5a6864bda 100644
--- a/backend/src/appointment/routes/invite.py
+++ b/backend/src/appointment/routes/invite.py
@@ -19,13 +19,13 @@
 
 
 @router.get('/', response_model=list[schemas.Invite])
-def get_all_invites(db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+def get_all_invites(db: Session = Depends(get_db), _admin: Subscriber = Depends(get_admin_subscriber)):
     """List all existing invites, needs admin permissions"""
     return db.query(models.Invite).all()
 
 
 @router.post("/generate/{n}", response_model=list[schemas.Invite])
-def generate_invite_codes(n: int, db: Session = Depends(get_db), admin: Subscriber = Depends(get_admin_subscriber)):
+def generate_invite_codes(n: int, db: Session = Depends(get_db), _admin: Subscriber = Depends(get_admin_subscriber)):
     """endpoint to generate n invite codes, needs admin permissions"""
     return repo.invite.generate_codes(db, n)
 
diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 0438e1db1..37aed77e1 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -13,7 +13,7 @@
         </label>
       </div>
       <list-pagination
-        :list-length="mutableDataList.length > 0 ? mutableDataList.length : dataList.length"
+        :list-length="totalDataLength"
         :page-size="pageSize"
         @update="updatePage"
       />
@@ -41,9 +41,9 @@
                 <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
               </span>
               <span v-else-if="fieldData.type === tableDataType.button">
-                <primary-button v-if="fieldData.buttonType === tableDataButtonType.primary" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</primary-button>
-                <secondary-button v-else-if="fieldData.buttonType === tableDataButtonType.secondary" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</secondary-button>
-                <caution-button v-else-if="fieldData.buttonType === tableDataButtonType.caution" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</caution-button>
+                <primary-button v-if="fieldData.buttonType === tableDataButtonType.primary" :disabled="fieldData.disabled" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</primary-button>
+                <secondary-button v-else-if="fieldData.buttonType === tableDataButtonType.secondary" :disabled="fieldData.disabled" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</secondary-button>
+                <caution-button v-else-if="fieldData.buttonType === tableDataButtonType.caution" :disabled="fieldData.disabled" @click="emit('fieldClick', fieldKey, datum)">{{ fieldData.value }}</caution-button>
               </span>
             </td>
           </tr>
@@ -122,13 +122,13 @@ const updatePage = (index) => {
 const columnSpan = computed(() => (columns.value.length + (allowMultiSelect.value ? 1 : 0)));
 const selectedFields = ref([]);
 
-const mutableDataList = ref([]);
+const mutableDataList = ref(null);
 
 /**
  * Returns either a filtered data list, or the original all nice and paginated
  */
 const paginatedDataList = computed(() => {
-  if (mutableDataList?.value?.length) {
+  if (mutableDataList?.value !== null) {
     return mutableDataList.value.slice(currentPage.value * pageSize, (currentPage.value + 1) * pageSize);
   }
   if (dataList?.value?.length) {
@@ -138,6 +138,16 @@ const paginatedDataList = computed(() => {
   return [];
 });
 
+const totalDataLength = computed(() => {
+  if (mutableDataList?.value !== null) {
+    return mutableDataList.value?.length ?? 0;
+  }
+  if (dataList?.value?.length) {
+    return dataList.value.length;
+  }
+  return 0;
+});
+
 const onFieldSelect = (evt, fieldData) => {
   const isChecked = evt?.target?.checked;
 
@@ -154,8 +164,9 @@ const onFieldSelect = (evt, fieldData) => {
 
 const onColumnFilter = (evt, filter) => {
   mutableDataList.value = filter.fn(evt.target.value, dataList.value);
+  console.log('Data list info: ', mutableDataList.value, ' vs ', dataList.value);
   if (mutableDataList.value === dataList.value) {
-    mutableDataList.value = [];
+    mutableDataList.value = null;
   }
 };
 
diff --git a/frontend/src/elements/ListPagination.vue b/frontend/src/elements/ListPagination.vue
index 313fad212..2fd7f1573 100644
--- a/frontend/src/elements/ListPagination.vue
+++ b/frontend/src/elements/ListPagination.vue
@@ -1,7 +1,7 @@
 <template>
-  <nav class="flex items-center flex-nowrap gap-2" :class="{ 'hidden': !listLength }">
+  <nav class="flex flex-nowrap items-center gap-2">
     <button @click="prev" :disabled="isFirstPage" :class="{ 'text-gray-500': isFirstPage }">
-      <icon-chevron-left class="w-5 h-5 stroke-1.5" />
+      <icon-chevron-left class="stroke-1.5 size-5" />
     </button>
     <div
       v-for="(p, i) in pageCount" :key="i"
@@ -19,7 +19,7 @@
       <div v-show="showLastEllipsis(p)">&hellip;</div>
     </div>
     <button @click="next" :disabled="isLastPage" :class="{ 'text-gray-500': isLastPage }">
-      <icon-chevron-right class="w-5 h-5 stroke-1.5" />
+      <icon-chevron-right class="stroke-1.5 size-5" />
     </button>
   </nav>
 </template>
@@ -39,19 +39,13 @@ const props = defineProps({
   listLength: Number, // number of total items in the displayed list
   pageSize: Number, // number of items per page
 });
-const emit = defineEmits(['update'])
+const emit = defineEmits(['update']);
 
 const currentPage = ref(0); // index of active page
 
-const isFirstPage = computed(() => {
-	return currentPage.value <= 0;
-});
-const pageCount = computed(() => {
-	return Math.ceil(props.listLength/props.pageSize);
-});
-const isLastPage = computed(() => {
-	return currentPage.value >= pageCount.value-1;
-});
+const isFirstPage = computed(() => currentPage.value <= 0);
+const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize) || 1);
+const isLastPage = computed(() => currentPage.value >= pageCount.value - 1);
 
 const prev = () => {
   if (!isFirstPage.value) {
@@ -70,23 +64,15 @@ const goto = (index) => {
   emit('update', currentPage.value);
 };
 
-const showPageItem = (p) => {
-	return pageCount.value < 6 || p == 1 || p == 2 || isVisibleInnerPage(p) || p == pageCount.value-1;
-};
-const showFirstEllipsis = (p) => {
-	return pageCount.value >= 6 && currentPage.value > 2 && p == 2;
-};
-const showPageItemLink = (p) => {
-	return pageCount.value < 6 || p == 1 || isVisibleInnerPage(p);
-};
-const showLastEllipsis = (p) => {
-	return pageCount.value >= 6 && currentPage.value < pageCount.value-3 && p == pageCount.value-1;
-};
+const showPageItem = (p) => pageCount.value < 6 || p == 1 || p == 2 || isVisibleInnerPage(p) || p == pageCount.value - 1;
+const showFirstEllipsis = (p) => pageCount.value >= 6 && currentPage.value > 2 && p == 2;
+const showPageItemLink = (p) => pageCount.value < 6 || p == 1 || isVisibleInnerPage(p);
+const showLastEllipsis = (p) => pageCount.value >= 6 && currentPage.value < pageCount.value - 3 && p == pageCount.value - 1;
 
 const isVisibleInnerPage = (p) => (currentPage.value == 0 && p == 3)
 		|| ((currentPage.value == 0 || currentPage.value == 1) && p == 4)
-		|| (p > currentPage.value-1 && p < currentPage.value+3)
-		|| ((currentPage.value == pageCount.value-1 || currentPage.value == pageCount.value-2) && p == pageCount.value-3)
-		|| (currentPage.value == pageCount.value-1 && p == pageCount.value-2)
+		|| (p > currentPage.value - 1 && p < currentPage.value + 3)
+		|| ((currentPage.value == pageCount.value - 1 || currentPage.value == pageCount.value - 2) && p == pageCount.value - 3)
+		|| (currentPage.value == pageCount.value - 1 && p == pageCount.value - 2)
     || p == pageCount.value;
 </script>
diff --git a/frontend/src/elements/admin/AdminNav.vue b/frontend/src/elements/admin/AdminNav.vue
new file mode 100644
index 000000000..c3eaca730
--- /dev/null
+++ b/frontend/src/elements/admin/AdminNav.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="mb-4 flex h-12 justify-center gap-8">
+    <nav-bar-item
+      v-for="item in navItems"
+      :key="item"
+      :active="route.name == item"
+      :label="t(`label.${item}`)"
+      :link-name="item"
+    />
+  </div>
+</template>
+
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import NavBarItem from '@/elements/NavBarItem.vue';
+
+const { t } = useI18n();
+
+const navItems = [
+  'admin-invite-codes-panel',
+  'admin-subscriber-panel',
+];
+
+const route = useRoute();
+</script>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index a8ebaf2dc..daeaffce1 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -76,6 +76,8 @@
     "slotIsAvailableAgain": "Time slot now available for bookings."
   },
   "label": {
+    "admin-invite-codes-panel": "Invites",
+    "admin-subscriber-panel": "Subscribers",
     "12hAmPm": "12h AM/PM",
     "24h": "24h",
     "DDMMYYYY": "DD/MM/YYYY",
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 713a367b4..7b7afd9fa 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -14,7 +14,8 @@ const AppointmentsView = defineAsyncComponent(() => import('@/views/Appointments
 const SettingsView = defineAsyncComponent(() => import('@/views/SettingsView'));
 const ProfileView = defineAsyncComponent(() => import('@/views/ProfileView'));
 const LegalView = defineAsyncComponent(() => import('@/views/LegalView'));
-const SubscriberPanelView = defineAsyncComponent(() => import('@/views/SubscriberPanelView'));
+const SubscriberPanelView = defineAsyncComponent(() => import('@/views/admin/SubscriberPanelView'));
+const InviteCodePanelView = defineAsyncComponent(() => import('@/views/admin/InviteCodePanelView.vue'));
 
 /**
  * Defined routes for Thunderbird Appointment
@@ -91,11 +92,17 @@ const routes = [
     name: 'terms',
     component: LegalView,
   },
+  // Admin
   {
     path: '/admin/subscribers',
     name: 'admin-subscriber-panel',
     component: SubscriberPanelView,
   },
+  {
+    path: '/admin/invites',
+    name: 'admin-invite-codes-panel',
+    component: InviteCodePanelView,
+  },
 ];
 
 // create router object to export
diff --git a/frontend/src/views/admin/InviteCodePanelView.vue b/frontend/src/views/admin/InviteCodePanelView.vue
new file mode 100644
index 000000000..a222e4054
--- /dev/null
+++ b/frontend/src/views/admin/InviteCodePanelView.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="flex w-full justify-center">
+    <alert-box
+      @close="pageNotification = ''"
+      v-if="pageNotification"
+      :scheme="alertSchemes.success"
+    >
+      {{ pageNotification }}
+    </alert-box>
+    <alert-box
+      @close="pageError = ''"
+      v-if="pageError"
+    >
+      {{ pageError }}
+    </alert-box>
+  </div>
+  <admin-nav>
+
+  </admin-nav>
+  <div v-if="displayPage">
+    <data-table
+      data-name="Invite Codes"
+      :allow-multi-select="false"
+      :data-list="filteredInvites"
+      :columns="columns"
+      :filters="filters"
+      :loading="loading"
+      @field-click="(_key, field) => revokeInvite(field.code.value)"
+    >
+      <template v-slot:footer>
+        <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
+          <label class="flex flex-col gap-4 md:flex-row md:items-center md:gap-0">
+            <span>{{ t('label.enterEmailToInvite') }}</span>
+            <input
+              class="mx-4 w-60 rounded-md text-sm"
+              type="email"
+              placeholder="e.g. test@example.org"
+              v-model="inviteEmail"
+              :disabled="loading"
+              enterkeyhint="send"
+              @keyup.enter="sendInvite"
+            />
+          </label>
+          <primary-button :disabled="loading" @click="sendInvite">
+            <icon-send />
+            {{ t('label.send') }}
+          </primary-button>
+        </div>
+      </template>
+
+    </data-table>
+  </div>
+  <div v-else class="flex size-full min-h-[75vh] items-center justify-center">
+    <loading-spinner/>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed, inject, onMounted, ref,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { alertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
+import DataTable from '@/components/DataTable.vue';
+import { useRouter } from 'vue-router';
+import LoadingSpinner from '@/elements/LoadingSpinner.vue';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import { IconSend } from '@tabler/icons-vue';
+import AlertBox from '@/elements/AlertBox.vue';
+import AdminNav from '@/elements/admin/AdminNav.vue';
+
+const router = useRouter();
+const { t } = useI18n();
+
+const call = inject('call');
+const dj = inject('dayjs');
+
+const invites = ref([]);
+const displayPage = ref(false);
+const inviteEmail = ref('');
+const loading = ref(true);
+const pageError = ref('');
+const pageNotification = ref('');
+
+const filteredInvites = computed(() => invites.value.map((invite) => ({
+  code: {
+    type: tableDataType.text,
+    value: invite.code,
+  },
+  status: {
+    type: tableDataType.text,
+    value: invite.status === 1 ? 'Available' : 'Revoked',
+  },
+  subscriber_id: {
+    type: tableDataType.text,
+    value: invite.subscriber_id ?? 'Unused',
+  },
+  timeCreated: {
+    type: tableDataType.text,
+    value: dj(invite.time_created).format('ll LTS'),
+  },
+  timeUpdated: {
+    type: tableDataType.text,
+    value: dj(invite.time_updated).format('ll LTS'),
+  },
+  revoke: {
+    type: tableDataType.button,
+    buttonType: tableDataButtonType.secondary,
+    value: 'Revoke',
+    disabled: invite.subscriber_id || invite.status === 2,
+  },
+})));
+const columns = [
+  {
+    key: 'code',
+    name: 'Code',
+  },
+  {
+    key: 'status',
+    name: 'Status',
+  },
+  {
+    key: 'subscriber_id',
+    name: 'Invited Subscriber ID',
+  },
+  {
+    key: 'createdAt',
+    name: 'Time Created',
+  },
+  {
+    key: 'updatedAt',
+    name: 'Time Updated',
+  },
+  {
+    key: 'revoke',
+    name: '',
+  },
+];
+const filters = [
+  {
+    name: 'Invite Status',
+    options: [
+      {
+        name: 'All',
+        key: 'all',
+      },
+      {
+        name: 'Used',
+        key: 'used',
+      },
+      {
+        name: 'Unused',
+        key: 'unused',
+      },
+      {
+        name: 'Revoked',
+        key: 'revoked',
+      },
+    ],
+    /**
+     * Callback function, filter the list by selectedKey and return it back to the table
+     * @param selectedKey
+     * @param mutableDataList
+     * @returns {*}
+     */
+    fn: (selectedKey, mutableDataList) => {
+      if (selectedKey === 'all') {
+        return mutableDataList;
+      }
+      if (selectedKey === 'revoked') {
+        return mutableDataList.filter((data) => (data.status.value === 'Revoked'));
+      }
+      return mutableDataList.filter((data) => {
+        if (data.status.value === 'Revoked') {
+          return false;
+        }
+
+        return selectedKey === 'used' && data.subscriber_id.value !== 'Unused';
+      });
+    },
+  },
+];
+const getInvites = async () => {
+  const response = await call('invite/').get().json();
+  const { data } = response;
+
+  invites.value = data.value;
+};
+
+const refresh = async () => {
+  loading.value = true;
+  await getInvites();
+  loading.value = false;
+};
+
+/**
+ * Disables an unused invite
+ * @param code
+ * @returns {Promise<void>}
+ */
+const revokeInvite = async (code) => {
+  if (!code) {
+    return;
+  }
+
+  const response = await call(`invite/revoke/${code}`).put().json();
+  const { data } = response;
+
+  if (data.value) {
+    await refresh();
+  }
+};
+
+const sendInvite = async () => {
+  loading.value = true;
+  pageError.value = '';
+  pageNotification.value = '';
+
+  const response = await call('invite/send').post({
+    email: inviteEmail.value,
+  }).json();
+
+  const { data, error } = response;
+
+  if (error.value) {
+    const errorObj = data.value?.detail;
+
+    if (!errorObj) {
+      pageError.value = t('error.somethingWentWrong');
+    } else if (errorObj instanceof Array) {
+      pageError.value = errorObj.map((err) => err.msg).join('\n');
+    } else {
+      pageError.value = data.value?.detail?.message;
+    }
+  } else {
+    pageNotification.value = t('info.invitationWasSentContext', { email: inviteEmail.value });
+    inviteEmail.value = '';
+    await refresh();
+  }
+
+  loading.value = false;
+};
+
+const amIAdmin = async () => {
+  const response = await call('permission-check').post().json();
+  const { error } = response;
+
+  return !error.value;
+};
+
+onMounted(async () => {
+  const okToContinue = await amIAdmin();
+  if (!okToContinue) {
+    await router.replace('/');
+    return;
+  }
+  displayPage.value = true;
+  await refresh();
+});
+
+</script>
diff --git a/frontend/src/views/SubscriberPanelView.vue b/frontend/src/views/admin/SubscriberPanelView.vue
similarity index 97%
rename from frontend/src/views/SubscriberPanelView.vue
rename to frontend/src/views/admin/SubscriberPanelView.vue
index 2bb1e13fa..b59b9466b 100644
--- a/frontend/src/views/SubscriberPanelView.vue
+++ b/frontend/src/views/admin/SubscriberPanelView.vue
@@ -14,6 +14,9 @@
       {{ pageError }}
     </alert-box>
   </div>
+  <admin-nav>
+
+  </admin-nav>
   <div v-if="displayPage">
     <data-table
       data-name="Subscribers"
@@ -53,7 +56,9 @@
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref } from 'vue';
+import {
+  computed, inject, onMounted, ref,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import { alertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
 import DataTable from '@/components/DataTable.vue';
@@ -62,6 +67,7 @@ import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import { IconSend } from '@tabler/icons-vue';
 import AlertBox from '@/elements/AlertBox.vue';
+import AdminNav from '@/elements/admin/AdminNav.vue';
 
 const router = useRouter();
 const { t } = useI18n();