User management - Front-end

frontend/src/components/layout/Navbar.vue

@@ -64,6 +64,7 @@ onMounted(() => {
     },
     {
       label: 'User Management',
+      route: RouteName.USER_MANAGEMENT,
       access: Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT
     },
     {

frontend/src/components/user/UserCreateModal.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { onMounted, 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 }
+});
+
+onMounted(() => {
+  users.value = [
+    {
+      active: true,
+      email: '[email protected]',
+      firstName: 'Mark',
+      fullName: 'Mark Johnson',
+      identityId: null,
+      idp: 'example',
+      lastName: 'Johnson',
+      role: 'Navigator',
+      status: 'Awaiting approval',
+      userId: '789',
+      username: 'markjohnson',
+      elevatedRights: false
+    },
+    {
+      active: true,
+      email: '[email protected]',
+      firstName: 'Sarah',
+      fullName: 'Sarah Williams',
+      identityId: null,
+      idp: 'example',
+      lastName: 'Williams',
+      role: 'Navigator',
+      status: 'Approved',
+      userId: '101112',
+      username: 'sarahwilliams',
+      elevatedRights: false
+    },
+    {
+      active: true,
+      email: '[email protected]',
+      firstName: 'Michael',
+      fullName: 'Michael Brown',
+      identityId: null,
+      idp: 'example',
+      lastName: 'Brown',
+      role: 'Navigator',
+      status: 'Approved',
+      userId: '131415',
+      username: 'michaelbrown',
+      elevatedRights: false
+    }
+  ];
+});
+</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 IDIR"
+        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>

frontend/src/components/user/UserManageModal.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Button, Dialog } from '@/lib/primevue';
+import { onMounted, ref } from 'vue';
+
+import { RadioList } from '@/components/form';
+import { ROLES } from '@/utils/constants/application';
+
+import type { Ref } from 'vue';
+import type { User } from '@/types';
+
+// Emits
+const emit = defineEmits(['userManage:save']);
+
+// State
+const visible = defineModel<boolean>('visible');
+const users: Ref<Array<User>> = ref([]);
+
+// Actions
+onMounted(() => {
+  users.value = [
+    {
+      active: true,
+      email: '[email protected]',
+      firstName: 'Mark',
+      fullName: 'Mark Johnson',
+      identityId: null,
+      idp: 'example',
+      lastName: 'Johnson',
+      role: 'Navigator',
+      status: 'Awaiting approval',
+      userId: '789',
+      username: 'markjohnson',
+      elevatedRights: false
+    },
+    {
+      active: true,
+      email: '[email protected]',
+      firstName: 'Sarah',
+      fullName: 'Sarah Williams',
+      identityId: null,
+      idp: 'example',
+      lastName: 'Williams',
+      role: 'Navigator',
+      status: 'Approved',
+      userId: '101112',
+      username: 'sarahwilliams',
+      elevatedRights: false
+    },
+    {
+      active: true,
+      email: '[email protected]',
+      firstName: 'Michael',
+      fullName: 'Michael Brown',
+      identityId: null,
+      idp: 'example',
+      lastName: 'Brown',
+      role: 'Navigator',
+      status: 'Approved',
+      userId: '131415',
+      username: 'michaelbrown',
+      elevatedRights: false
+    }
+  ];
+});
+</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"
+    />
+    <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>