move logic from Users page to separate component

5 years ago · cb0c6bac07
2 changed files with 19 additions and 23 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
@ -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"
  />
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -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>