MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
budibase/packages/client/src/components/ClientApp.svelte

188 lines
5.3 KiB
Svelte
Raw Normal View History

Add initial new routing and svelte client app generation
2020-11-13 16:42:32 +01:00
<script>
Add button actions, simplify contexts and tidy up
2020-11-25 10:50:51 +01:00
import { writable } from "svelte/store"
Fetch app definition and routes from the server
2020-11-19 19:39:22 +01:00
import { setContext, onMount } from "svelte"
Add initial new routing and svelte client app generation
2020-11-13 16:42:32 +01:00
import Component from "./Component.svelte"
Update builder preview to be interactive and improve builder preview experience
2021-01-27 16:52:12 +01:00
import NotificationDisplay from "./NotificationDisplay.svelte"
Add support for confirmable action handling by client library
2021-06-21 10:56:46 +02:00
import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
Add initial work on peeking screens, only show one notification at a time, use spectrum notifications
2021-07-30 15:01:01 +02:00
import PeekScreenDisplay from "./PeekScreenDisplay.svelte"
Change how client provides the current user so that the whole app is actually wrapped in a provider which provides the current user
2021-02-05 12:44:33 +01:00
import Provider from "./Provider.svelte"
Refactor entire SDK into client lib and enable svelte context sharing between client and components
2020-11-18 20:18:18 +01:00
import SDK from "../sdk"
Add custom component actions. Simplify client context. Add form validation action
2021-02-01 19:51:22 +01:00
import {
createContextStore,
initialise,
screenStore,
authStore,
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
routeStore,
builderStore,
Fetch and use app theme in real client apps
2021-06-30 21:35:02 +02:00
appStore,
Add custom component actions. Simplify client context. Add form validation action
2021-02-01 19:51:22 +01:00
} from "../store"
Make user data source refreshable in client apps
2021-02-26 15:04:31 +01:00
import { TableNames, ActionTypes } from "../constants"
Refactor client component structure, fix select bar z index, add titles to container bar settings
2021-06-10 19:42:41 +02:00
import SettingsBar from "./preview/SettingsBar.svelte"
import SelectionIndicator from "./preview/SelectionIndicator.svelte"
import HoverIndicator from "./preview/HoverIndicator.svelte"
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
import { Layout, Heading, Body } from "@budibase/bbui"
import ErrorSVG from "../../../builder/assets/error.svg"
Add initial new routing and svelte client app generation
2020-11-13 16:42:32 +01:00
Add support for full depth data binding
2020-11-20 10:50:10 +01:00
// Provide contexts
setContext("sdk", SDK)
Add button actions, simplify contexts and tidy up
2020-11-25 10:50:51 +01:00
setContext("component", writable({}))
Add custom component actions. Simplify client context. Add form validation action
2021-02-01 19:51:22 +01:00
setContext("context", createContextStore())
Add initial new routing and svelte client app generation
2020-11-13 16:42:32 +01:00
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
let dataLoaded = false
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
let permissionError = false
Fetch app definition and routes from the server
2020-11-19 19:39:22 +01:00
// Load app config
onMount(async () => {
Improve navigation when logging in and out, remove need to hard reload the page and replace with smooth transitions
2020-12-11 15:24:19 +01:00
await initialise()
Add current user bindings, and current user relationships as data sources
2021-01-28 15:29:35 +01:00
await authStore.actions.fetchUser()
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
dataLoaded = true
Add error handling to builder preview and loading indicator
2021-06-30 20:37:03 +02:00
if ($builderStore.inBuilder) {
builderStore.actions.notifyLoaded()
}
Fetch app definition and routes from the server
2020-11-19 19:39:22 +01:00
})
Make user data source refreshable in client apps
2021-02-26 15:04:31 +01:00
// Register this as a refreshable datasource so that user changes cause
// the user object to be refreshed
$: actions = [
{
type: ActionTypes.RefreshDatasource,
callback: () => authStore.actions.fetchUser(),
Add data provider component and refactor component setting types
2021-03-16 14:54:34 +01:00
metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
Make user data source refreshable in client apps
2021-02-26 15:04:31 +01:00
},
]
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
// Handle no matching route - this is likely a permission error
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
$: {
if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
if ($authStore) {
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
// There is a logged in user, so handle them
if ($screenStore.screens.length) {
// Screens exist so navigate back to the home screen
const firstRoute = $screenStore.screens[0].routing?.route ?? "/"
routeStore.actions.navigate(firstRoute)
} else {
// No screens likely means the user has no permissions to view this app
permissionError = true
}
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
} else {
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
// The user is not logged in, redirect them to login
Redirect to login from client apps when required
2021-05-20 15:47:17 +02:00
const returnUrl = `${window.location.pathname}${window.location.hash}`
const encodedUrl = encodeURIComponent(returnUrl)
window.location = `/builder/auth/login?returnUrl=${encodedUrl}`
}
}
}
Add global app theme picker and use it in client preview
2021-06-28 13:55:11 +02:00
Fetch and use app theme in real client apps
2021-06-30 21:35:02 +02:00
$: themeClass =
$builderStore.theme || $appStore.application?.theme || "spectrum--light"
Add initial new routing and svelte client app generation
2020-11-13 16:42:32 +01:00
</script>
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
{#if dataLoaded}
Move settings bar into client library and allow configuration from manifest.json
2021-06-08 09:00:54 +02:00
<div
id="spectrum-root"
lang="en"
dir="ltr"
Add global app theme picker and use it in client preview
2021-06-28 13:55:11 +02:00
class="spectrum spectrum--medium {themeClass}"
Move settings bar into client library and allow configuration from manifest.json
2021-06-08 09:00:54 +02:00
>
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
{#if permissionError}
<div class="error">
<Layout justifyItems="center" gap="S">
{@html ErrorSVG}
<Heading size="L">You don't have permission to use this app</Heading>
<Body size="S">Ask your administrator to grant you access</Body>
</Layout>
Improve client app overflow and selection indicators
2021-06-08 16:16:37 +02:00
</div>
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
{:else if $screenStore.activeLayout}
<Provider key="user" data={$authStore} {actions}>
Add back in client app border only when inside builder preview
2021-07-30 11:06:16 +02:00
<div id="app-root" class:preview={$builderStore.inBuilder}>
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
{#key $screenStore.activeLayout._id}
<Component instance={$screenStore.activeLayout.props} />
{/key}
</div>
<NotificationDisplay />
<ConfirmationDisplay />
Add initial work on peeking screens, only show one notification at a time, use spectrum notifications
2021-07-30 15:01:01 +02:00
<PeekScreenDisplay />
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
<!-- Key block needs to be outside the if statement or it breaks -->
{#key $builderStore.selectedComponentId}
{#if $builderStore.inBuilder}
<SettingsBar />
{/if}
{/key}
<!--
We don't want to key these by componentID as they control their own
re-mounting to avoid flashes.
-->
Use IntersectionObservers to determine visibility of selected and hovered components
2021-06-10 16:13:51 +02:00
{#if $builderStore.inBuilder}
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
<SelectionIndicator />
<HoverIndicator />
Render builder preview selection indicators via top level component instead of via styleable healper. Add indiciator on hover and add name to indicator
2021-06-08 15:19:03 +02:00
{/if}
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
</Provider>
{/if}
Wrap whole client app in spectrum classes to reduce dependency on spectrum wrapper around any spectrum components in client app
2021-05-13 17:32:52 +02:00
</div>
adds notification toast capability to the client
2021-01-22 12:31:56 +01:00
{/if}
Wrap whole client app in spectrum classes to reduce dependency on spectrum wrapper around any spectrum components in client app
2021-05-13 17:32:52 +02:00
<style>
Be more explicit about hiding overflow at the top levels of an app
2021-06-24 13:14:19 +02:00
#spectrum-root,
#app-root {
Wrap whole client app in spectrum classes to reduce dependency on spectrum wrapper around any spectrum components in client app
2021-05-13 17:32:52 +02:00
height: 100%;
Improve client app overflow and selection indicators
2021-06-08 16:16:37 +02:00
width: 100%;
Be more explicit about hiding overflow at the top levels of an app
2021-06-24 13:14:19 +02:00
padding: 0;
margin: 0;
Improve client app overflow and selection indicators
2021-06-08 16:16:37 +02:00
overflow: hidden;
}
#app-root {
Wrap whole client app in spectrum classes to reduce dependency on spectrum wrapper around any spectrum components in client app
2021-05-13 17:32:52 +02:00
position: relative;
}
Add back in client app border only when inside builder preview
2021-07-30 11:06:16 +02:00
#app-root.preview {
border: 1px solid var(--spectrum-global-color-gray-300);
}
Add custom scrollbars to client apps
2021-06-30 20:57:31 +02:00
/* Custom scrollbars */
:global(::-webkit-scrollbar) {
width: 8px;
height: 8px;
}
:global(::-webkit-scrollbar-track) {
background: var(--spectrum-alias-background-color-default);
}
:global(::-webkit-scrollbar-thumb) {
background-color: var(--spectrum-global-color-gray-400);
border-radius: 4px;
}
:global(::-webkit-scrollbar-corner) {
background: var(--spectrum-alias-background-color-default);
}
:global(*) {
scrollbar-width: thin;
scrollbar-color: var(--spectrum-global-color-gray-400)
var(--spectrum-alias-background-color-default);
}
Improve handling of permission issues and routing issues, and add an error fallback message
2021-07-07 12:29:35 +02:00
.error {
position: absolute;
width: 100%;
height: 100%;
display: grid;
place-items: center;
z-index: 1;
text-align: center;
padding: 20px;
}
.error :global(svg) {
fill: var(--spectrum-global-color-gray-500);
width: 80px;
height: 80px;
}
.error :global(h1),
.error :global(p) {
color: var(--spectrum-global-color-gray-800);
}
.error :global(p) {
font-style: italic;
margin-top: -0.5em;
}
.error :global(h1) {
font-weight: 400;
}
Wrap whole client app in spectrum classes to reduce dependency on spectrum wrapper around any spectrum components in client app
2021-05-13 17:32:52 +02:00
</style>