Add first name and last name to user schema and add modal to update names

5 years ago · 9575020b1e
2 changed files with 57 additions and 6 deletions
--- a/packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte
+++ b/packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte
@ -0,0 +1,40 @@
+<script>
+  import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
+  import { writable } from "svelte/store"
+  import { auth } from "stores/backend"
+  import { saveRow } from "components/backend/DataTable/api"
+  import { TableNames } from "constants"
+
+  const values = writable({
+    firstName: $auth.user.firstName,
+    lastName: $auth.user.lastName,
+  })
+
+  const updateInfo = async () => {
+    const newUser = {
+      ...$auth.user,
+      firstName: $values.firstName,
+      lastName: $values.lastName,
+    }
+    console.log(newUser)
+    const response = await saveRow(newUser, TableNames.USERS)
+    if (response.ok) {
+      await auth.checkAuth()
+      notifications.success("Information updated successfully")
+    } else {
+      notifications.error("Failed to update information")
+    }
+  }
+</script>
+
+<ModalContent
+  title="Update user information"
+  confirmText="Update information"
+  onConfirm={updateInfo}
+>
+  <Body size="S">
+    Personalise the platform by adding your first name and last name.
+  </Body>
+  <Input bind:value={$values.firstName} label="First name" />
+  <Input bind:value={$values.lastName} label="Last name" />
+</ModalContent>
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -10,6 +10,7 @@
    Page,
    Icon,
    Body,
+    Modal,
  } from "@budibase/bbui"
  import { onMount } from "svelte"
  import { apps, organisation } from "stores/portal"
@ -17,8 +18,11 @@
  import { goto } from "@roxi/routify"
  import { AppStatus } from "constants"
  import { gradient } from "actions"
+  import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"

  let loaded = false
+  let userInfoModal
+  let userPasswordModal

  onMount(async () => {
    await organisation.init()
@ -35,8 +39,10 @@
          <img src={$organisation.logoUrl} />
          <div class="info-title">
            <Layout noPadding gap="XS">
-              <Heading size="L">Hey {$auth.user.email}</Heading>
-              <Body noPadding>
+              <Heading size="L">
+                Hey {$auth.user.firstName || $auth.user.email}
+              </Heading>
+              <Body>
                Welcome to the {$organisation.company} portal. Below you'll find
                the list of apps that you have access to, as well as company news
                and the employee handbook.
@ -47,7 +53,9 @@
                <Avatar size="M" name="John Doe" />
                <Icon size="XL" name="ChevronDown" />
              </div>
-              <MenuItem icon="UserEdit">Update user information</MenuItem>
+              <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
+                Update user information
+              </MenuItem>
              <MenuItem icon="LockClosed">Update password</MenuItem>
              <MenuItem
                icon="UserDeveloper"
@ -66,7 +74,7 @@
          <div class="group">
            <Layout gap="S" noPadding>
              <div class="group-title">
-                <Body weight="500" noPadding size="XS">GROUP</Body>
+                <Body weight="500" size="XS">GROUP</Body>
                {#if $auth.user?.builder?.global}
                  <Icon name="Settings" hoverable />
                {/if}
@ -76,7 +84,7 @@
                  <div class="preview" use:gradient={{ seed: app.name }} />
                  <div class="app-info">
                    <Heading size="XS">{app.name}</Heading>
-                    <Body noPadding size="S">
+                    <Body size="S">
                      Edited {Math.round(Math.random() * 10 + 1)} months ago
                    </Body>
                  </div>
@ -89,6 +97,9 @@
      </div>
    </Page>
  </div>
+  <Modal bind:this={userInfoModal}>
+    <UpdateUserInfoModal />
+  </Modal>
 {/if}

 <style>
@ -150,7 +161,7 @@
  }
  .preview {
    height: 40px;
-    width: 40px;
+    width: 60px;
    border-radius: var(--border-radius-s);
  }
 </style>