feat(admin): add user role management

apps/ui/pages/admin.vue

@@ -3,6 +3,11 @@
   <Container class="flex flex-col items-center">
     <ContentBlock class="w-full mt-3" title="User management">
       <h2>User List ({{ userCount }})</h2>
+      <Pagination
+        :currentPage="currentPage"
+        :totalPages="totalPages"
+        @update="updateCurrentPage"
+      />
       <Table>
         <template #head>
           <TableHeadRow>
@@ -36,26 +41,50 @@ definePageMeta({
   middleware: "admin-only",
 });
 
-const { data, error } = await useFetch<IAdminResponse>("/api/graphql", {
-  method: "post",
-  body: {
-    query: `{ _admin { users { email, settings, {key, value} } userCount } }`,
-  },
+const LIMIT = 20;
+const currentPage = ref(1);
+const offset = computed(() => {
+  return currentPage.value > 1 ? `, offset: ${currentPage.value * LIMIT}` : "";
 });
-if (error.value) {
-  console.log("Error loading users: ", error.value);
-  // todo handle error see catalogue error page
+
+const users = ref<IUser[]>([]);
+const userCount = ref(0);
+const totalPages = ref(0);
+getUsers();
+
+function updateCurrentPage(newPage: number) {
+  currentPage.value = newPage;
+  getUsers();
 }
 
-const users = computed(() => data.value?.data._admin.users || []);
-const userCount = computed(() => data.value?.data._admin.userCount ?? 0);
+async function getUsers() {
+  const { data, error } = await useFetch<IAdminResponse>("/api/graphql", {
+    method: "post",
+    body: {
+      query: `{ _admin { users(limit: ${LIMIT}${offset.value}) { email, settings, {key, value} } userCount } }`,
+    },
+  });
+  if (error.value) {
+    console.log("Error loading users: ", error.value);
+    // todo handle error see catalogue error page
+  }
+  users.value = data.value?.data._admin.users || [];
+  userCount.value = data.value?.data._admin.userCount ?? 0;
+  const divided = userCount.value / LIMIT;
+  totalPages.value =
+    userCount.value % LIMIT > 0 ? Math.floor(divided) + 1 : divided;
+}
 
 interface IAdminResponse {
   data: {
     _admin: {
-      users: { email: string; settings: ISetting[] }[];
+      users: IUser[];
       userCount: number;
     };
   };
 }
+interface IUser {
+  email: string;
+  settings: ISetting[];
+}
 </script>