Update user deletion UI
This commit is contained in:
parent
0d396c326e
commit
5c7869d21d
|
@ -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>
|
|
@ -96,7 +96,7 @@
|
|||
</script>
|
||||
|
||||
<ModalContent
|
||||
size="S"
|
||||
size="M"
|
||||
{title}
|
||||
confirmText="Done"
|
||||
showCancelButton={false}
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
import { goto } from "@roxi/routify"
|
||||
import OnboardingTypeModal from "./_components/OnboardingTypeModal.svelte"
|
||||
import PasswordModal from "./_components/PasswordModal.svelte"
|
||||
import DeletionFailureModal from "./_components/DeletionFailureModal.svelte"
|
||||
import ImportUsersModal from "./_components/ImportUsersModal.svelte"
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import { get } from "svelte/store"
|
||||
|
@ -33,7 +34,8 @@
|
|||
inviteConfirmationModal,
|
||||
onboardingTypeModal,
|
||||
passwordModal,
|
||||
importUsersModal
|
||||
importUsersModal,
|
||||
deletionFailureModal
|
||||
let pageInfo = createPaginationStore()
|
||||
let prevEmail = undefined,
|
||||
searchEmail = undefined
|
||||
|
@ -56,6 +58,7 @@
|
|||
}
|
||||
$: userData = []
|
||||
$: createUsersResponse = { successful: [], unsuccessful: [] }
|
||||
$: deleteUsersResponse = { successful: [], unsuccessful: [] }
|
||||
$: page = $pageInfo.page
|
||||
$: fetchUsers(page, searchEmail)
|
||||
$: {
|
||||
|
@ -180,8 +183,13 @@
|
|||
notifications.error("You cannot delete yourself")
|
||||
return
|
||||
}
|
||||
await users.bulkDelete(ids)
|
||||
notifications.success(`Successfully deleted ${selectedRows.length} rows`)
|
||||
deleteUsersResponse = await users.bulkDelete(ids)
|
||||
if (deleteUsersResponse.unsuccessful?.length) {
|
||||
deletionFailureModal.show()
|
||||
} else {
|
||||
notifications.success(`Successfully deleted ${selectedRows.length} users`)
|
||||
}
|
||||
|
||||
selectedRows = []
|
||||
await fetchUsers(page, searchEmail)
|
||||
} catch (error) {
|
||||
|
@ -291,6 +299,10 @@
|
|||
<PasswordModal {createUsersResponse} userData={userData.users} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={deletionFailureModal}>
|
||||
<DeletionFailureModal {deleteUsersResponse} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={importUsersModal}>
|
||||
<ImportUsersModal {createUsersFromCsv} />
|
||||
</Modal>
|
||||
|
|
|
@ -83,7 +83,7 @@ export function createUsersStore() {
|
|||
}
|
||||
|
||||
async function bulkDelete(userIds) {
|
||||
await API.deleteUsers(userIds)
|
||||
return API.deleteUsers(userIds)
|
||||
}
|
||||
|
||||
async function save(user) {
|
||||
|
|
Loading…
Reference in New Issue