move logic from Users page to separate component

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-12 09:13:59 +02:00
parent 6fc910afc3
commit cb0c6bac07
2 changed files with 19 additions and 23 deletions

View File

@ -1,22 +1,30 @@
<script> <script>
import { Body, Input, Select, ModalContent } from "@budibase/bbui" import { Body, Input, Select, ModalContent } from "@budibase/bbui"
import { createValidationStore, emailValidator } from "helpers/validation" import { createValidationStore, emailValidator } from "helpers/validation"
import { users } from "stores/portal"
export let options
export let selected
export let onConfirm
export let disabled export let disabled
const [email, emailError] = createValidationStore("", emailValidator) const options = ["Email onboarding", "Basic onboarding"]
let selected = options[0]
const [email, error, touched] = createValidationStore("", emailValidator)
async function createUserFlow() {
const response = await users.invite(email)
console.log(response)
notifications.success("Email sent.")
}
</script> </script>
<ModalContent <ModalContent
{onConfirm} onConfirm={createUserFlow}
size="M" size="M"
title="Add new user options" title="Add new user options"
confirmText="Add user" confirmText="Add user"
confirmDisabled={disabled} confirmDisabled={disabled}
cancelText="Cancel" cancelText="Cancel"
disabled={!$touched && !$error}
showCloseIcon={false} showCloseIcon={false}
> >
<Body noPadding <Body noPadding
@ -27,13 +35,14 @@
<Select <Select
placeholder={null} placeholder={null}
bind:value={selected} bind:value={selected}
on:change
{options} {options}
label="Add new user via:" label="Add new user via:"
/> />
<Input <Input
type="email" type="email"
bind:value={$email} bind:value={$email}
error={$emailError} error={$touched && $error}
placeholder="john@doe.com" placeholder="john@doe.com"
label="Email" label="Email"
/> />

View File

@ -11,7 +11,6 @@
Label, Label,
Layout, Layout,
Modal, Modal,
notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import AddUserModal from "./_components/AddUserModal.svelte" import AddUserModal from "./_components/AddUserModal.svelte"
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte" import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
@ -26,8 +25,6 @@
// group: {} // group: {}
} }
let onboardingOptions = ["Email onboarding", "Basic onboarding"]
let selectedOnboardingOption = onboardingOptions[0]
let search let search
let email let email
$: filteredUsers = $users.filter(user => user.email.includes(search || "")) $: filteredUsers = $users.filter(user => user.email.includes(search || ""))
@ -35,13 +32,9 @@
let createUserModal let createUserModal
let basicOnboardingModal let basicOnboardingModal
function createUserFlow() { function openBasicOnoboardingModal() {
if (selectedOnboardingOption === onboardingOptions[0]) { createUserModal.hide()
notifications.success("Email sent.") basicOnboardingModal.show()
} else {
createUserModal.hide()
basicOnboardingModal.show()
}
} }
</script> </script>
@ -80,13 +73,7 @@
</Layout> </Layout>
<Modal bind:this={createUserModal} <Modal bind:this={createUserModal}
><AddUserModal ><AddUserModal on:change={openBasicOnoboardingModal} /></Modal
options={onboardingOptions}
onConfirm={createUserFlow}
disabled={!email}
bind:selected={selectedOnboardingOption}
bind:email
/></Modal
> >
<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal> <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>