CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-15 00:38:01 +12:00
Code Issues Projects Releases Wiki Activity

Optimise loading in overview tab and add transition to dash card header

Browse source
This commit is contained in:
Andrew Kingston 2022-08-08 12:25:49 +01:00
parent 50c04c801f
commit e18e941449
2 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/builder/src/components/common/DashCard.svelte
View file

@ -37,6 +37,7 @@
border-bottom: 1px solid var(--spectrum-global-color-gray-300); border-bottom: 1px solid var(--spectrum-global-color-gray-300);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
transition: background-color 130ms ease-out;
} }
.dash-card-body { .dash-card-body {
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2); padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);

48
packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
View file

@ -27,22 +27,26 @@
}, },
}) })
let appEditor, appEditorPromise let appEditor
$: updateAvailable = clientPackage.version !== $store.version $: updateAvailable = clientPackage.version !== $store.version
$: isPublished = app && app?.status === AppStatus.DEPLOYED $: isPublished = app?.status === AppStatus.DEPLOYED
$: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy $: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
$: appEditorText = appEditor?.firstName || appEditor?.email $: appEditorText = appEditor?.firstName || appEditor?.email
$: fetchAppEditor(appEditorId) $: fetchAppEditor(appEditorId)
$: appUsers = $appUsersFetch.rows || [] $: appUsers = $appUsersFetch.rows || []
$: appUsersFetch.update({
query: {
appId: apps.getProdAppID(app.devId),
},
})
const unpublishApp = () => { const unpublishApp = () => {
dispatch("unpublish", app) dispatch("unpublish", app)
} }
async function fetchAppEditor(editorId) { async function fetchAppEditor(editorId) {
appEditorPromise = users.get(editorId) appEditor = await users.get(editorId)
appEditor = await appEditorPromise
} }
const getInitials = user => { const getInitials = user => {
@ -89,11 +93,9 @@
</div> </div>
</div> </div>
</DashCard> </DashCard>
<DashCard title={"Last Edited"} dataCy={"edited-by"}> {#if appEditor}
<div class="last-edited-content"> <DashCard title={"Last Edited"} dataCy={"edited-by"}>
{#await appEditorPromise} <div class="last-edited-content">
<Avatar size="M" initials={"-"} />
{:then _}
<div class="updated-by"> <div class="updated-by">
{#if appEditor} {#if appEditor}
<Avatar size="M" initials={getInitials(appEditor)} /> <Avatar size="M" initials={getInitials(appEditor)} />
@ -102,22 +104,20 @@
</div> </div>
{/if} {/if}
</div> </div>
{:catch error} <div class="last-edit-text">
<p>Could not fetch user: {error.message}</p> {#if app}
{/await} {processStringSync(
<div class="last-edit-text"> "Last edited {{ duration time 'millisecond' }} ago",
{#if app} {
{processStringSync( time:
"Last edited {{ duration time 'millisecond' }} ago", new Date().getTime() - new Date(app?.updatedAt).getTime(),
{ }
time: )}
new Date().getTime() - new Date(app?.updatedAt).getTime(), {/if}
} </div>
)}
{/if}
</div> </div>
</div> </DashCard>
</DashCard> {/if}
<DashCard <DashCard
title={"App Version"} title={"App Version"}
showIcon={true} showIcon={true}