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 34a3a5916a
commit ac510e2671
2 changed files with 19 additions and 23 deletions

View File

@ -1,22 +1,30 @@
<script>
import { Body, Input, Select, ModalContent } from "@budibase/bbui"
import { createValidationStore, emailValidator } from "helpers/validation"
import { users } from "stores/portal"
export let options
export let selected
export let onConfirm
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>
<ModalContent
{onConfirm}
onConfirm={createUserFlow}
size="M"
title="Add new user options"
confirmText="Add user"
confirmDisabled={disabled}
cancelText="Cancel"
disabled={!$touched && !$error}
showCloseIcon={false}
>
<Body noPadding
@ -27,13 +35,14 @@
<Select
placeholder={null}
bind:value={selected}
on:change
{options}
label="Add new user via:"
/>
<Input
type="email"
bind:value={$email}
error={$emailError}
error={$touched && $error}
placeholder="john@doe.com"
label="Email"
/>

View File

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