From b318a9f08c2c850a5aa7b587434ca8f6a98add9a Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Wed, 3 Jul 2024 07:43:48 -0700
Subject: [PATCH] User management - Front-end

---
 frontend/src/components/layout/Navbar.vue     |   1 +
 .../src/components/user/UserCreateModal.vue   | 103 ++++++++++
 .../src/components/user/UserManageModal.vue   |  52 +++++
 frontend/src/components/user/UserTable.vue    | 147 +++++++++++++++
 frontend/src/router/index.ts                  |   5 +
 frontend/src/services/permissionService.ts    |   4 +-
 frontend/src/types/User.ts                    |   2 +
 frontend/src/utils/constants/application.ts   |   4 +-
 frontend/src/utils/enums/application.ts       |   9 +-
 .../src/views/user/UserManagementView.vue     | 178 ++++++++++++++++++
 10 files changed, 502 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/user/UserCreateModal.vue
 create mode 100644 frontend/src/components/user/UserManageModal.vue
 create mode 100644 frontend/src/components/user/UserTable.vue
 create mode 100644 frontend/src/views/user/UserManagementView.vue

diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index 87ac3d61..d5877397 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -64,6 +64,7 @@ onMounted(() => {
     },
     {
       label: 'User Management',
+      route: RouteName.USER_MANAGEMENT,
       access: Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT
     },
     {
diff --git a/frontend/src/components/user/UserCreateModal.vue b/frontend/src/components/user/UserCreateModal.vue
new file mode 100644
index 00000000..1959dd2d
--- /dev/null
+++ b/frontend/src/components/user/UserCreateModal.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, Column, DataTable, Dialog, FilterMatchMode, IconField, InputIcon, InputText } from '@/lib/primevue';
+
+import { Dropdown } from '@/components/form';
+import { ROLES } from '@/utils/constants/application';
+
+import type { Ref } from 'vue';
+import type { User } from '@/types';
+
+// Emits
+const emit = defineEmits(['userCreate:request']);
+
+// State
+const visible = defineModel<boolean>('visible');
+const users: Ref<Array<User>> = ref([]);
+const selection: Ref<User | undefined> = ref(undefined);
+
+// Datatable filter(s)
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+});
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    :draggable="false"
+    :modal="true"
+    class="app-info-dialog w-5"
+  >
+    <template #header>
+      <span class="p-dialog-title">Create new user</span>
+    </template>
+    <IconField
+      icon-position="left"
+      class="mt-1"
+    >
+      <InputIcon class="pi pi-search" />
+      <InputText
+        v-model="filters['global'].value"
+        placeholder="Search by first name, last name, or email"
+        class="col-12 pl-5"
+      />
+    </IconField>
+    <DataTable
+      v-model:selection="selection"
+      v-model:filters="filters"
+      :row-hover="true"
+      class="datatable mt-3 mb-2"
+      :value="users"
+      selection-mode="single"
+      data-key="userId"
+    >
+      <template #empty>
+        <div class="flex justify-content-center">
+          <h5 class="m-0">No users found.</h5>
+        </div>
+      </template>
+      <Column
+        field="username"
+        header="Username"
+        sortable
+      />
+      <Column
+        field="firstName"
+        header="First Name"
+        sortable
+      />
+      <Column
+        field="lastName"
+        header="Last Name"
+        sortable
+      />
+    </DataTable>
+    <Dropdown
+      class="col-12"
+      name="assignRole"
+      label="Assign role"
+      :options="ROLES"
+    />
+    <div class="flex-auto">
+      <Button
+        class="mr-2"
+        label="Request approval"
+        type="submit"
+        icon="pi pi-check"
+        @click="
+          () => {
+            emit('userCreate:request', selection);
+            visible = false;
+          }
+        "
+      />
+      <Button
+        class="p-button-outlined mr-2"
+        label="Cancel"
+        icon="pi pi-times"
+        @click="visible = false"
+      />
+    </div>
+  </Dialog>
+</template>
diff --git a/frontend/src/components/user/UserManageModal.vue b/frontend/src/components/user/UserManageModal.vue
new file mode 100644
index 00000000..bb0fa75b
--- /dev/null
+++ b/frontend/src/components/user/UserManageModal.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Button, Dialog } from '@/lib/primevue';
+
+import { RadioList } from '@/components/form';
+import { ROLES } from '@/utils/constants/application';
+
+// Emits
+const emit = defineEmits(['userManage:save']);
+
+// State
+const visible = defineModel<boolean>('visible');
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    :draggable="false"
+    :modal="true"
+    class="app-info-dialog w-3"
+  >
+    <template #header>
+      <span class="p-dialog-title">Manage user role</span>
+    </template>
+    <div>Select role</div>
+    <RadioList
+      name="role"
+      :bold="false"
+      :options="ROLES"
+      class="mt-3 mb-4"
+    />
+    <div class="flex-auto">
+      <Button
+        class="mr-2"
+        label="Save"
+        type="submit"
+        icon="pi pi-check"
+        @click="
+          () => {
+            emit('userManage:save');
+            visible = false;
+          }
+        "
+      />
+      <Button
+        class="p-button-outlined mr-2"
+        label="Cancel"
+        icon="pi pi-times"
+        @click="visible = false"
+      />
+    </div>
+  </Dialog>
+</template>
diff --git a/frontend/src/components/user/UserTable.vue b/frontend/src/components/user/UserTable.vue
new file mode 100644
index 00000000..fe5da044
--- /dev/null
+++ b/frontend/src/components/user/UserTable.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, Column, DataTable } from '@/lib/primevue';
+
+import PermissionService, { Permissions } from '@/services/permissionService';
+
+import type { Ref } from 'vue';
+import type { User } from '@/types';
+
+// Props
+type Props = {
+  users: Array<User>;
+  revocation?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  users: undefined
+});
+
+// Constants
+const USER_STATUS = {
+  APPROVED: 'Approved'
+};
+
+// Emits
+const emit = defineEmits(['userTable:delete', 'userTable:approve', 'userTable:manage', 'userTable:revoke']);
+
+// State
+const selection: Ref<User | undefined> = ref(undefined);
+
+// Actions
+const permissionService = new PermissionService();
+</script>
+
+<template>
+  <DataTable
+    v-model:selection="selection"
+    :row-hover="true"
+    class="datatable"
+    :value="props.users"
+    selection-mode="single"
+  >
+    <template #empty>
+      <div class="flex justify-content-center">
+        <h5 class="m-0">No users found.</h5>
+      </div>
+    </template>
+    <Column
+      field="username"
+      header="Username"
+      sortable
+    />
+    <Column
+      field="firstName"
+      header="First Name"
+      sortable
+    />
+    <Column
+      field="lastName"
+      header="Last Name"
+      sortable
+    />
+    <Column
+      field="status"
+      header="Status"
+      sortable
+    />
+    <Column
+      field="role"
+      header="Role"
+      sortable
+    />
+    <Column
+      v-if="!revocation"
+      field="manage"
+      header="Manage"
+      header-class="header-right"
+      class="text-right"
+      style="min-width: 150px"
+    >
+      <template #body="{ data }">
+        <Button
+          class="p-button-lg p-button-text p-0 pr-3"
+          aria-label="Manage user"
+          :disabled="revocation || data.status !== USER_STATUS.APPROVED"
+          @click="
+            () => {
+              selection = data;
+              emit('userTable:manage', data);
+            }
+          "
+        >
+          <font-awesome-icon icon="fa-solid fa-pen-to-square" />
+        </Button>
+      </template>
+    </Column>
+    <Column
+      v-if="!revocation && permissionService.can(Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT_ADMIN)"
+      field="approve"
+      header="Approve"
+      header-class="header-right"
+      class="text-right"
+      style="min-width: 150px"
+    >
+      <template #body="{ data }">
+        <Button
+          class="p-button-lg p-button-text p-0 pr-3"
+          aria-label="Approve user"
+          :disabled="revocation || data.status === USER_STATUS.APPROVED"
+          @click="
+            () => {
+              selection = data;
+              emit('userTable:approve', data);
+            }
+          "
+        >
+          <font-awesome-icon icon="fa-solid fa-check-to-slot" />
+        </Button>
+      </template>
+    </Column>
+    <Column
+      field="action"
+      header="Action"
+      header-class="header-right"
+      class="text-right"
+      style="min-width: 150px"
+    >
+      <template #body="{ data }">
+        <Button
+          class="p-button-lg p-button-text p-button-danger p-0 pr-3"
+          aria-label="Delete user"
+          :disabled="data.status !== USER_STATUS.APPROVED"
+          @click="
+            () => {
+              selection = data;
+              permissionService.can(Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT_ADMIN)
+                ? emit('userTable:delete', data)
+                : emit('userTable:revoke', data);
+            }
+          "
+        >
+          <font-awesome-icon icon="fa-solid fa-trash" />
+        </Button>
+      </template>
+    </Column>
+  </DataTable>
+</template>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d2594fee..f712249b 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -138,6 +138,11 @@ const routes: Array<RouteRecordRaw> = [
       }
     ]
   },
+  {
+    path: '/user',
+    name: RouteName.USER_MANAGEMENT,
+    component: () => import('@/views/user/UserManagementView.vue')
+  },
   {
     path: '/:pathMatch(.*)*',
     name: RouteName.NOT_FOUND,
diff --git a/frontend/src/services/permissionService.ts b/frontend/src/services/permissionService.ts
index 441501db..3d9b4866 100644
--- a/frontend/src/services/permissionService.ts
+++ b/frontend/src/services/permissionService.ts
@@ -27,6 +27,7 @@ export enum Permissions {
   NAVIGATION_HOUSING_SUBMISSIONS_SUB = 'housing.submissions.sub',
   NAVIGATION_HOUSING_STATUS_TRACKER = 'housing.status.tracker',
   NAVIGATION_HOUSING_USER_MANAGEMENT = 'housing.usermanagement',
+  NAVIGATION_HOUSING_USER_MANAGEMENT_ADMIN = 'housing.usermanagementadmin',
   NAVIGATION_DEVELOPER = 'developer',
 
   TESTING_ROLE_OVERRIDE = 'testing.role.override'
@@ -46,7 +47,8 @@ const PermissionMap = [
       Permissions.NAVIGATION_HOUSING_STATUS_TRACKER,
       Permissions.NAVIGATION_HOUSING_SUBMISSION,
       Permissions.NAVIGATION_HOUSING_SUBMISSIONS,
-      Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT
+      Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT,
+      Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT_ADMIN
     ]
   },
   {
diff --git a/frontend/src/types/User.ts b/frontend/src/types/User.ts
index c57fc372..48d0bdad 100644
--- a/frontend/src/types/User.ts
+++ b/frontend/src/types/User.ts
@@ -8,6 +8,8 @@ export type User = {
   identityId: string | null;
   idp: string;
   lastName: string;
+  role?: string;
+  status?: string;
   userId: string;
   username: string;
   elevatedRights: boolean;
diff --git a/frontend/src/utils/constants/application.ts b/frontend/src/utils/constants/application.ts
index 09e73932..14469a10 100644
--- a/frontend/src/utils/constants/application.ts
+++ b/frontend/src/utils/constants/application.ts
@@ -3,7 +3,7 @@
  */
 
 import { NIL } from 'uuid';
-import { AccessRole, BasicResponse } from '../enums/application';
+import { AccessRole, BasicResponse, Roles } from '../enums/application';
 
 export const ACCESS_ROLES_LIST = [
   AccessRole.PCNS_ADMIN,
@@ -20,6 +20,8 @@ export const PCNS_CONTACT = {
   subject: 'Reporting an Issue with PCNS'
 };
 
+export const ROLES = [Roles.NAVIGATOR, Roles.READ_ONLY];
+
 export const SYSTEM_USER = NIL;
 
 export const YES_NO_LIST = [BasicResponse.YES, BasicResponse.NO];
diff --git a/frontend/src/utils/enums/application.ts b/frontend/src/utils/enums/application.ts
index 8f01cca9..d0cac319 100644
--- a/frontend/src/utils/enums/application.ts
+++ b/frontend/src/utils/enums/application.ts
@@ -52,7 +52,14 @@ export enum RouteName {
 
   OIDC_CALLBACK = 'oidc_callback',
   OIDC_LOGIN = 'oidc_login',
-  OIDC_LOGOUT = 'oidc_logout'
+  OIDC_LOGOUT = 'oidc_logout',
+
+  USER_MANAGEMENT = 'user_management'
+}
+
+export enum Roles {
+  NAVIGATOR = 'Navigator',
+  READ_ONLY = 'Read-only'
 }
 
 export enum StorageKey {
diff --git a/frontend/src/views/user/UserManagementView.vue b/frontend/src/views/user/UserManagementView.vue
new file mode 100644
index 00000000..ceb2a698
--- /dev/null
+++ b/frontend/src/views/user/UserManagementView.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import {
+  Button,
+  FilterMatchMode,
+  IconField,
+  InputIcon,
+  InputText,
+  TabPanel,
+  TabView,
+  useConfirm
+} from '@/lib/primevue';
+import { ref } from 'vue';
+
+import UserCreateModal from '@/components/user/UserCreateModal.vue';
+import UserManageModal from '@/components/user/UserManageModal.vue';
+import UserTable from '@/components/user/UserTable.vue';
+import PermissionService, { Permissions } from '@/services/permissionService';
+
+import type { Ref } from 'vue';
+import type { User } from '@/types';
+
+//State
+const users: Ref<Array<User>> = ref([]);
+const createUserCreateModalVisible: Ref<boolean> = ref(false);
+const manageUserCreateModalVisible: Ref<boolean> = ref(false);
+const activeTab: Ref<number> = ref(Number(0));
+
+//Actions
+const confirm = useConfirm();
+const permissionService = new PermissionService();
+
+function onDelete(user: User) {
+  // TODO: Implement
+  confirm.require({
+    message: 'The user will now lose all access to the system.',
+    header: 'Revoke user',
+    acceptLabel: 'Confirm',
+    acceptClass: 'p-button-danger',
+    rejectLabel: 'Cancel',
+    accept: () => {}
+  });
+}
+
+function onApprove(user: User) {
+  // TODO: Implement
+  confirm.require({
+    message: 'The user will now be an authorized user.',
+    header: 'Approve user',
+    acceptLabel: 'Approve',
+    acceptClass: 'p-button-accept',
+    rejectLabel: 'Cancel',
+    accept: () => {}
+  });
+}
+
+function onRevoke(user: User) {
+  // TODO: Implement
+  confirm.require({
+    message: 'The user will be revoked from the system upon the approval of an admin.',
+    header: 'Revoke user',
+    acceptLabel: 'Confirm',
+    acceptClass: 'p-button-danger',
+    rejectLabel: 'Cancel',
+    accept: () => {}
+  });
+}
+
+function onManage(user: User) {
+  manageUserCreateModalVisible.value = true;
+}
+
+function onSave() {
+  // TODO: Implement
+}
+
+function onUserCreate() {
+  // TODO: Implement
+}
+
+// Datatable filter(s)
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+});
+</script>
+<template>
+  <h3>User Management</h3>
+  <UserCreateModal
+    v-if="createUserCreateModalVisible"
+    v-model:visible="createUserCreateModalVisible"
+    @user-create:request="onUserCreate"
+  />
+  <UserManageModal
+    v-if="manageUserCreateModalVisible"
+    v-model:visible="manageUserCreateModalVisible"
+    @user-manage:save="onSave"
+  />
+  <TabView
+    v-if="permissionService.can(Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT_ADMIN)"
+    v-model:activeIndex="activeTab"
+  >
+    <TabPanel header="Manage users">
+      <div class="flex justify-content-between">
+        <Button
+          label="Create new user"
+          type="submit"
+          icon="pi pi-plus"
+          @click="createUserCreateModalVisible = true"
+        />
+        <IconField icon-position="left">
+          <InputIcon class="pi pi-search" />
+          <InputText
+            v-model="filters['global'].value"
+            placeholder="Search all"
+            class="width"
+          />
+        </IconField>
+      </div>
+      <UserTable
+        v-model:filters="filters"
+        :users="users"
+        class="mt-4"
+        @user-table:manage="onManage"
+        @user-table:approve="onApprove"
+        @user-table:delete="onDelete"
+      />
+    </TabPanel>
+    <TabPanel header="Revocation requests">
+      <div class="flex justify-content-end">
+        <IconField icon-position="left">
+          <InputIcon class="pi pi-search" />
+          <InputText
+            v-model="filters['global'].value"
+            placeholder="Search all"
+            class="width"
+          />
+        </IconField>
+      </div>
+      <UserTable
+        v-model:filters="filters"
+        :users="users"
+        class="mt-4"
+        :revocation="true"
+        @user-table:delete="onDelete"
+      />
+    </TabPanel>
+  </TabView>
+  <div v-else>
+    <div class="flex justify-content-between">
+      <Button
+        label="Create new user"
+        type="submit"
+        icon="pi pi-plus"
+        @click="createUserCreateModalVisible = true"
+      />
+      <IconField icon-position="left">
+        <InputIcon class="pi pi-search" />
+        <InputText
+          v-model="filters['global'].value"
+          placeholder="Search all"
+          class="width"
+        />
+      </IconField>
+    </div>
+    <UserTable
+      v-model:filters="filters"
+      :users="users"
+      class="mt-4"
+      @user-table:manage="onManage"
+      @user-table:revoke="onRevoke"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.width {
+  width: 20em;
+}
+</style>