Appearance
Overview
The page is divided into two main sections. The first section contains control actions, allowing users to perform various actions and adjustments. The second section is dedicated to displaying a list of contacts, presenting essential information about each contact.
Control actions
The control actions section comprises several functionalities to facilitate user management and administration:
Search Icon button: Users can utilize this button to activate an input field, enabling administrators to search for specific users efficiently.
Role Selector: This feature empowers administrators to filter users based on their assigned roles, streamlining user categorization and management.
Pending Invite Button: Administrators can easily switch between viewing users with pending invites and those who are already active users of the application.
Download Icon button: This convenient button allows administrators to download an Excel sheet template, facilitating bulk uploading of users to the system.
Upload Icon button: Clicking on this button triggers the UploadPanel component, providing administrators with a seamless interface to upload multiple users in bulk.
These control actions enhance the administrators' ability to efficiently handle user management tasks, offering a seamless and user-friendly experience for overseeing and organizing users in the application.
Upload Panel component
The UploadPanel component serves as a container for the FileUpload component, which, in turn, makes use of the Svelte-Filepond component.
In this setup, the FileUpload component acts as an intermediary, allowing seamless integration between the application and the powerful Svelte-Filepond component. The Svelte-Filepond component facilitates smooth file uploading functionality, enhancing the user experience and providing a robust solution for handling file uploads within the application.
Implementation
Below is how the FileUpload component was implemented.
svelte
<!-- FileUpload component-->
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte"
import FilePond from "svelte-filepond"
import { accessToken } from "../../lib/services/keycloak"
import Progress from "../../atoms/Progress.svelte"
import { showError, showInfo } from "../../lib/utils"
export let title = "Click Browse or drop the file to upload"
export let subTitle = ""
export let url
const dispatch = createEventDispatcher ()
let loaded = false
let busy = false
let renderId = 0
let pond
let uploadOk
const uploadServerConfig = {
process: {
url: url,
headers: () => {
return {
"Authorization": `Bearer ${$accessToken}`
}
},
onerror: x => {
try {
const resp = JSON.parse(x)
if (!resp.success) {
showError(resp.message || "Error uploading image")
uploadOk = false
dispatch("uploadFailed", resp)
return
}
else {
showInfo ("File uploaded successfully")
uploadOk = true
dispatch("uploaded")
}
} catch(e){
showError(e.message)
uploadOk = false
} finally {
busy = false
}
},
onload: (x) => {
try {
const resp = JSON.parse(x)
if (!resp.success) {
showError(resp.message || resp.data || "Error uploading image")
uploadOk = false
}
else {
showInfo (resp.message || resp.data || "File uploaded successfully")
uploadOk = true
dispatch("uploaded")
}
} catch(e){
showError(e.message)
uploadOk = false
} finally {
busy = false
}
},
ondata: x => {
busy = true
return x;
}
}
}
function reset(){
renderId++
busy = false
}
onMount(async () => {
loaded = true
})
</script>
<div class="flex flex-col flex-grow my-2">
<div class="alert alert-info mb-5">
<div class="flex-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 mx-2 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<label>
<h4>{title}</h4>
<div>{subTitle}</div>
</label>
</div>
</div>
{#if busy}
<Progress step={1}/>
{/if}
{#key renderId}
<FilePond name="file" required={true} allowReplace={true}
instantUpload={false}
server={uploadServerConfig}
allowMultiple={false} allowRevert={false} bind:this={pond} />
<button class="btn btn-accent btn-sm w-20" on:click={reset}>Reset</button>
{/key}
</div>svelte
<!-- Progress component -->
<script>
import { onMount, onDestroy } from "svelte"
export let max = 100
export let value = 0
export let intermediate = true
export let interval = 50
export let step = 10
export let show = true
export let height = 4
let timerId
onMount(() => {
if (timerId) clearInterval(timerId)
if (intermediate) {
setInterval(() => {
value += step
if (value > max) value = 0
}, interval);
}
})
onDestroy(() => {
if (timerId) clearInterval(timerId)
})
</script>
{#if show}
<progress class="progress progress-accent" style="height: {height}px" value={value} max={max}></progress>
{/if}Active Users
This section presents a grid displaying all the active users within the system. Each user's details are showcased using the ContactBox component, providing a visually appealing and organized view.
For user management, administrators have two options:
Bulk Management: Administrators can select multiple users simultaneously by using the checkboxes provided in the ContactBox component. This enables efficient bulk actions on the selected users.
Single Management: For individual user management, administrators can simply click anywhere on the ContactBox component (except the checkbox). This allows them to manage users one at a time without the need for checkboxes.
Pending Users
Similar to the Active Users grid, the Pending Users section also displays a grid containing all users with pending invites. This grid leverages the ContactBox component to present the pending user details in a consistent and visually appealing manner.
Administrators are presented with two options for managing pending users:
Bulk Management: Administrators can conveniently select multiple pending users simultaneously by using the checkboxes provided in the ContactBox component. This enables them to perform bulk actions on the selected pending users efficiently.
Single Management: For individual pending user management, administrators can simply click anywhere on the ContactBox component (except the checkbox). This allows them to manage pending users one at a time without the need for checkboxes.
Management view
When users are selected, whether they are active or pending, a side modal is triggered. For active users, the side modal displays the SelectedUserPanel component, while for pending users, it shows the SelectedInvitesPanel component. Both components present two tabs for the administrator to interact with:
Info Tab: This tab displays comprehensive information about the selected user or users, allowing administrators to review their details.
Security/Actions Tab: The content of this tab varies based on whether the selected users are active or pending:
For Active Users: In this case, the administrator gains access to various security actions. They can reset passwords, lock or unlock user accounts, delete user accounts, and modify roles for the selected active users.
For Pending Users: In this scenario, the administrator can perform specific security actions for pending users. They can delete the user invitations and modify roles for the selected pending users.
By providing these two distinct tabs, the side modal streamlines user management actions for administrators. They can efficiently access and manage user information and execute relevant security actions based on the users' active or pending status. This approach enhances the overall user management experience, allowing administrators to perform necessary tasks with ease and accuracy.