From ae97fa89e9d5c62fb303c74bc28d3cda04875e38 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Wed, 22 Jan 2025 13:04:26 -0500
Subject: [PATCH] Added missing file.

---
 app/src/views/AdminDashboardView.vue | 131 +++++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 app/src/views/AdminDashboardView.vue

diff --git a/app/src/views/AdminDashboardView.vue b/app/src/views/AdminDashboardView.vue
new file mode 100644
index 0000000..d7c7339
--- /dev/null
+++ b/app/src/views/AdminDashboardView.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { AuthenticationAPIClient, type User, type UserUpdatePayload } from '@/api/auth';
+import ConfirmDialog from '@/components/ConfirmDialog.vue';
+import { useAuthStore } from '@/stores/auth';
+import { onMounted, ref, useTemplateRef, watch, type Ref } from 'vue';
+
+const authStore = useAuthStore()
+const apiClient = new AuthenticationAPIClient(authStore)
+
+interface CreateUserData {
+  username: string
+  password: string
+}
+const createUserFormData: Ref<CreateUserData> = ref({ username: '', password: '' })
+
+const users: Ref<User[]> = ref([])
+const usersPage: Ref<number> = ref(0)
+const usersPageSize: Ref<number> = ref(50)
+
+const deleteUserConfirmDialog = useTemplateRef('deleteUserConfirmDialog')
+
+onMounted(() => {
+  watch([usersPage, usersPageSize], fetchUsers)
+  fetchUsers()
+})
+
+async function fetchUsers() {
+  const result = await apiClient.getUsers(usersPage.value, usersPageSize.value).handleErrorsWithAlert()
+  if (result !== null) {
+    users.value = result
+  }
+}
+
+async function deleteUser(user: User) {
+  const confirm = await deleteUserConfirmDialog.value?.show()
+  if (!confirm) return
+  await apiClient.deleteUser(user.id).handleErrorsWithAlert()
+  fetchUsers() // Refresh the list of users.
+}
+
+async function toggleLocked(user: User) {
+  const payload: UserUpdatePayload = {
+    isLocked: !user.isLocked
+  }
+  await apiClient.updateUser(user.id, payload).handleErrorsWithAlert()
+  fetchUsers()
+}
+
+async function doCreateUser() {
+  const user = await apiClient.createUser(createUserFormData.value.username, createUserFormData.value.password)
+    .handleErrorsWithAlert()
+  if (user !== null) {
+    createUserFormData.value = {
+      username: '',
+      password: ''
+    }
+    fetchUsers();
+  }
+}
+</script>
+<template>
+  <main>
+    <h1>Administrator Dashboard</h1>
+    <p>
+      On this page, you'll find tools for managing users and checking audit information.
+    </p>
+
+    <h3>Users</h3>
+    <div class="button-bar">
+      <button type="button" :disabled="usersPage < 1" @click="usersPage -= 1">Previous Page</button>
+      <span>Page: {{ usersPage }}</span>
+      <button type="button" @click="usersPage += 1">Next Page</button>
+      <select v-model="usersPageSize">
+        <option value="5">5</option>
+        <option value="10">10</option>
+        <option value="50" selected>50</option>
+        <option value="100">100</option>
+      </select>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Username</th>
+          <th>Created At</th>
+          <th>Admin</th>
+          <th>Locked</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="user in users" :key="user.id">
+          <td>{{ user.id }}</td>
+          <td>{{ user.username }}</td>
+          <td>{{ new Date(user.createdAt).toLocaleString() }}</td>
+          <td>{{ user.isAdmin }}</td>
+          <td>{{ user.isLocked }}</td>
+          <td>
+            <div>
+              <button type="button" @click="deleteUser(user)">Delete</button>
+
+              <button type="button" @click="toggleLocked(user)" v-text="user.isLocked ? 'Unlock' : 'Lock'"></button>
+
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <form @submit.prevent="doCreateUser">
+      <h3>Create User</h3>
+      <div>
+        <label for="create-user-username">Username</label>
+        <input id="create-user-username" v-model="createUserFormData.username" type="text" />
+      </div>
+      <div>
+        <label for="create-user-password">Password</label>
+        <input id="create-user-password" v-model="createUserFormData.password" type="password" />
+      </div>
+      <div>
+        <button type="submit">Create</button>
+      </div>
+    </form>
+
+    <ConfirmDialog ref="deleteUserConfirmDialog">
+      <p>
+        Are you sure you want to delete this user?
+      </p>
+    </ConfirmDialog>
+  </main>
+</template>