Add first name and last name to user schema and add modal to update names
This commit is contained in:
Andrew Kingston
parent
f1a7f2a440
commit
c1f1c8d169
|
|
@ -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>
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
Page,
|
Page,
|
||||||
Icon,
|
Icon,
|
||||||
Body,
|
Body,
|
||||||
|
Modal,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import { apps, organisation } from "stores/portal"
|
import { apps, organisation } from "stores/portal"
|
||||||
|
|
@ -17,8 +18,11 @@
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
import { AppStatus } from "constants"
|
import { AppStatus } from "constants"
|
||||||
import { gradient } from "actions"
|
import { gradient } from "actions"
|
||||||
|
import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"
|
||||||
|
|
||||||
let loaded = false
|
let loaded = false
|
||||||
|
let userInfoModal
|
||||||
|
let userPasswordModal
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await organisation.init()
|
await organisation.init()
|
||||||
|
|
@ -35,8 +39,10 @@
|
||||||
<img src={$organisation.logoUrl} />
|
<img src={$organisation.logoUrl} />
|
||||||
<div class="info-title">
|
<div class="info-title">
|
||||||
<Layout noPadding gap="XS">
|
<Layout noPadding gap="XS">
|
||||||
<Heading size="L">Hey {$auth.user.email}</Heading>
|
<Heading size="L">
|
||||||
<Body noPadding>
|
Hey {$auth.user.firstName || $auth.user.email}
|
||||||
|
</Heading>
|
||||||
|
<Body>
|
||||||
Welcome to the {$organisation.company} portal. Below you'll find
|
Welcome to the {$organisation.company} portal. Below you'll find
|
||||||
the list of apps that you have access to, as well as company news
|
the list of apps that you have access to, as well as company news
|
||||||
and the employee handbook.
|
and the employee handbook.
|
||||||
|
|
@ -47,7 +53,9 @@
|
||||||
<Avatar size="M" name="John Doe" />
|
<Avatar size="M" name="John Doe" />
|
||||||
<Icon size="XL" name="ChevronDown" />
|
<Icon size="XL" name="ChevronDown" />
|
||||||
</div>
|
</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="LockClosed">Update password</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
icon="UserDeveloper"
|
icon="UserDeveloper"
|
||||||
|
|
@ -66,7 +74,7 @@
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<Layout gap="S" noPadding>
|
<Layout gap="S" noPadding>
|
||||||
<div class="group-title">
|
<div class="group-title">
|
||||||
<Body weight="500" noPadding size="XS">GROUP</Body>
|
<Body weight="500" size="XS">GROUP</Body>
|
||||||
{#if $auth.user?.builder?.global}
|
{#if $auth.user?.builder?.global}
|
||||||
<Icon name="Settings" hoverable />
|
<Icon name="Settings" hoverable />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -76,7 +84,7 @@
|
||||||
<div class="preview" use:gradient={{ seed: app.name }} />
|
<div class="preview" use:gradient={{ seed: app.name }} />
|
||||||
<div class="app-info">
|
<div class="app-info">
|
||||||
<Heading size="XS">{app.name}</Heading>
|
<Heading size="XS">{app.name}</Heading>
|
||||||
<Body noPadding size="S">
|
<Body size="S">
|
||||||
Edited {Math.round(Math.random() * 10 + 1)} months ago
|
Edited {Math.round(Math.random() * 10 + 1)} months ago
|
||||||
</Body>
|
</Body>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -89,6 +97,9 @@
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
</div>
|
</div>
|
||||||
|
<Modal bind:this={userInfoModal}>
|
||||||
|
<UpdateUserInfoModal />
|
||||||
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -150,7 +161,7 @@
|
||||||
}
|
}
|
||||||
.preview {
|
.preview {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 40px;
|
width: 60px;
|
||||||
border-radius: var(--border-radius-s);
|
border-radius: var(--border-radius-s);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue