Update user deletion UI

This commit is contained in:
Rory Powell 2022-08-25 23:28:54 +01:00
parent 0d396c326e
commit 5c7869d21d
4 changed files with 90 additions and 5 deletions

View File

@ -0,0 +1,73 @@
<script>
import { Body, ModalContent, Table } from "@budibase/bbui"
import { onMount } from "svelte"
export let userData
export let deleteUsersResponse
let successCount
let failureCount
let title
let unsuccessfulUsers
let message
const setTitle = () => {
if (successCount) {
title = `${successCount} users deleted`
} else {
title = "Oops!"
}
}
const setMessage = () => {
if (successCount) {
message = "However there was a problem deleting some users."
} else {
message = "There was a problem deleting some users."
}
}
const setUsers = () => {
unsuccessfulUsers = deleteUsersResponse.unsuccessful.map(user => {
return {
email: user.email,
reason: user.reason,
}
})
}
onMount(() => {
successCount = deleteUsersResponse.successful.length
failureCount = deleteUsersResponse.unsuccessful.length
setTitle()
setMessage()
setUsers()
})
const schema = {
email: {},
reason: {},
}
</script>
<ModalContent
size="M"
title={title}
confirmText="Close"
showCloseIcon={false}
showCancelButton={false}
>
<Body size="XS">
{message}
</Body>
<Table
schema={schema}
data={unsuccessfulUsers}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
/>
</ModalContent>
<style>
</style>

View File

@ -96,7 +96,7 @@
</script> </script>
<ModalContent <ModalContent
size="S" size="M"
{title} {title}
confirmText="Done" confirmText="Done"
showCancelButton={false} showCancelButton={false}

View File

@ -23,6 +23,7 @@
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import OnboardingTypeModal from "./_components/OnboardingTypeModal.svelte" import OnboardingTypeModal from "./_components/OnboardingTypeModal.svelte"
import PasswordModal from "./_components/PasswordModal.svelte" import PasswordModal from "./_components/PasswordModal.svelte"
import DeletionFailureModal from "./_components/DeletionFailureModal.svelte"
import ImportUsersModal from "./_components/ImportUsersModal.svelte" import ImportUsersModal from "./_components/ImportUsersModal.svelte"
import { createPaginationStore } from "helpers/pagination" import { createPaginationStore } from "helpers/pagination"
import { get } from "svelte/store" import { get } from "svelte/store"
@ -33,7 +34,8 @@
inviteConfirmationModal, inviteConfirmationModal,
onboardingTypeModal, onboardingTypeModal,
passwordModal, passwordModal,
importUsersModal importUsersModal,
deletionFailureModal
let pageInfo = createPaginationStore() let pageInfo = createPaginationStore()
let prevEmail = undefined, let prevEmail = undefined,
searchEmail = undefined searchEmail = undefined
@ -56,6 +58,7 @@
} }
$: userData = [] $: userData = []
$: createUsersResponse = { successful: [], unsuccessful: [] } $: createUsersResponse = { successful: [], unsuccessful: [] }
$: deleteUsersResponse = { successful: [], unsuccessful: [] }
$: page = $pageInfo.page $: page = $pageInfo.page
$: fetchUsers(page, searchEmail) $: fetchUsers(page, searchEmail)
$: { $: {
@ -180,8 +183,13 @@
notifications.error("You cannot delete yourself") notifications.error("You cannot delete yourself")
return return
} }
await users.bulkDelete(ids) deleteUsersResponse = await users.bulkDelete(ids)
notifications.success(`Successfully deleted ${selectedRows.length} rows`) if (deleteUsersResponse.unsuccessful?.length) {
deletionFailureModal.show()
} else {
notifications.success(`Successfully deleted ${selectedRows.length} users`)
}
selectedRows = [] selectedRows = []
await fetchUsers(page, searchEmail) await fetchUsers(page, searchEmail)
} catch (error) { } catch (error) {
@ -291,6 +299,10 @@
<PasswordModal {createUsersResponse} userData={userData.users} /> <PasswordModal {createUsersResponse} userData={userData.users} />
</Modal> </Modal>
<Modal bind:this={deletionFailureModal}>
<DeletionFailureModal {deleteUsersResponse} />
</Modal>
<Modal bind:this={importUsersModal}> <Modal bind:this={importUsersModal}>
<ImportUsersModal {createUsersFromCsv} /> <ImportUsersModal {createUsersFromCsv} />
</Modal> </Modal>

View File

@ -83,7 +83,7 @@ export function createUsersStore() {
} }
async function bulkDelete(userIds) { async function bulkDelete(userIds) {
await API.deleteUsers(userIds) return API.deleteUsers(userIds)
} }
async function save(user) { async function save(user) {