User Management Page¶

The User Management page allows administrators to manage users.

Overview¶

This page provides functionality to add and delete users. All users are administrators and have full access to the application.

HTML Structure¶

<template>
  <div>
    <!-- Page Title -->
    <h2>User Management</h2>

    <!-- Add User Button -->
    <b-button>Add User</b-button>

    <!-- User Table -->
    <widget>
      <b-pagination></b-pagination>
      <b-table>
        <!-- Table Columns -->
        <template v-slot:cell(name)>
          <span>User Name</span>
        </template>
        <template v-slot:cell(username)>
          <span>Email</span>
        </template>
        <template v-slot:cell(actions)>
          <b-button>Delete</b-button>
        </template>
      </b-table>
    </widget>

    <!-- Modals -->
    <b-modal id="create-user-modal">
      <!-- Add User Form -->
      <b-form-group label="Name">
        <b-input v-model="newUser.name"></b-input>
      </b-form-group>
      <b-form-group label="Email">
        <b-input v-model="newUser.username"></b-input>
      </b-form-group>
      <b-form-group label="Password">
        <b-input type="password" v-model="newUser.password"></b-input>
      </b-form-group>
    </b-modal>

    <b-modal id="delete-modal">
      <!-- Delete Confirmation -->
      <p>Are you sure you want to delete this user?</p>
    </b-modal>

    <b-modal id="info-modal">
      <!-- Info Message -->
      <p>Information Message</p>
    </b-modal>

    <LoadingModal />
  </div>
</template>

Main Variables¶

`dataset`¶

Stores the list of users fetched from the backend.

`newUser`¶

Represents the user being created. It includes: - name: The name of the user. - username: The email of the user. - password: The password for the user.

`selectedUser`¶

Stores the user selected for deletion.

`fields`¶

Defines the columns of the user table. It includes: - name: The name of the user. - username: The email of the user. - actions: Actions available for the user (e.g., delete).

`loading`¶

Indicates whether the page is loading data.

`infoMsg`¶

Stores informational messages to display in the modal.

Functions¶

void loadUsers()¶

Fetches the list of users from the backend.

Input Parameters: - None.

Output Parameters: - None. Updates the dataset variable.

How It Works: 1. Sends a request to fetch the list of users. 2. Updates the dataset variable with the response data.

void createUser()¶

Adds a new user with the specified details.

Input Parameters: - None. Uses newUser.

Output Parameters: - None. Sends the user data to the backend.

How It Works: 1. Prepares the user data from newUser. 2. Sends a request to create the user. 3. Refreshes the user list on success.

void selectUserToDelete(user)¶

Prepares the selected user for deletion.

Input Parameters: - user (Object): The user to be deleted.

Output Parameters: - None. Updates the selectedUser variable.

How It Works: 1. Sets selectedUser to the provided user. 2. Opens the delete confirmation modal.

void deleteUser()¶

Deletes the selected user.

Input Parameters: - None. Uses selectedUser.

Output Parameters: - None. Sends a request to delete the user.

How It Works: 1. Sends a request to delete the user. 2. Refreshes the user list on success.

void createUserModal()¶

Opens the modal to create a new user.

Input Parameters: - None.

Output Parameters: - None. Opens the create-user-modal.

void showInfoModal(message)¶

Displays an informational message in the modal.

Input Parameters: - message (String): The message to display.

Output Parameters: - None. Updates infoMsg and opens the info-modal.

Notes¶

All users are administrators and have full access to the application.
The page provides a simple interface for managing users.
Informational messages are displayed in a modal for better user feedback.

References¶

Users API: Provides details on the backend API used to fetch, create, and delete users.