Add support for old views in new view nav bar

This commit is contained in:
Andrew Kingston 2024-08-23 13:34:36 +01:00
parent 51decfa58d
commit 0dd432f286
No known key found for this signature in database
6 changed files with 68 additions and 47 deletions

View File

@ -48,12 +48,18 @@
$: datasource = $datasources.list.find(ds => ds._id === table?.sourceId) $: datasource = $datasources.list.find(ds => ds._id === table?.sourceId)
$: tableSelectedBy = $userSelectedResourceMap[table?._id] $: tableSelectedBy = $userSelectedResourceMap[table?._id]
$: tableEditable = table?._id !== TableNames.USERS $: tableEditable = table?._id !== TableNames.USERS
$: activeId = $params.viewId ?? $params.tableId $: activeId = $params.viewName ?? $params.viewId ?? $params.tableId
$: views = Object.values(table?.views || {}) $: views = Object.values(table?.views || {})
.filter(x => x.version === 2) .filter(x => x.version === 2)
.slice() .slice()
.sort(alphabetical) .sort(alphabetical)
$: v1Views = Object.values(table?.views || {})
.filter(x => x.version !== 2)
.slice()
.sort(alphabetical)
$: setUpObserver(views) $: setUpObserver(views)
$: hasViews = v1Views.length || views.length
$: overflowedViews = views.filter(view => !viewVisibiltyMap[view.id]) $: overflowedViews = views.filter(view => !viewVisibiltyMap[view.id])
$: viewHidden = viewVisibiltyMap[activeId] === false $: viewHidden = viewVisibiltyMap[activeId] === false
@ -61,6 +67,10 @@
return $url(`../${$params.tableId}/${encodeURIComponent(viewId)}`) return $url(`../${$params.tableId}/${encodeURIComponent(viewId)}`)
}) })
const viewV1Url = derived([url, params], ([$url, $params]) => viewName => {
return $url(`../${$params.tableId}/v1/${encodeURIComponent(viewName)}`)
})
const tableUrl = derived(url, $url => tableId => $url(`../${tableId}`)) const tableUrl = derived(url, $url => tableId => $url(`../${tableId}`))
const openTableContextMenu = e => { const openTableContextMenu = e => {
@ -176,8 +186,8 @@
<div class="nav"> <div class="nav">
<IntegrationIcon <IntegrationIcon
integrationType={datasource.source} integrationType={datasource?.source}
schema={datasource.schema} schema={datasource?.schema}
size="24" size="24"
/> />
<a <a
@ -202,8 +212,32 @@
/> />
{/if} {/if}
</a> </a>
{#if views.length} {#if hasViews}
<div class="nav__views" bind:this={viewContainer}> <div class="nav__views" bind:this={viewContainer}>
{#each v1Views as view (view.name)}
{@const selectedBy = $userSelectedResourceMap[view.name]}
<a
href={$viewV1Url(view.name)}
class="nav-item"
class:active={view.name === activeId}
on:contextmenu={e => openViewContextMenu(e, view)}
data-id={view.name}
>
<div class="nav-item__title">
{view.name}
</div>
{#if selectedBy}
<UserAvatars size="XS" users={selectedBy} />
{/if}
<Icon
on:click={e => openViewContextMenu(e, view)}
hoverable
name="MoreSmallList"
color="var(--spectrum-global-color-gray-600)"
hoverColor="var(--spectrum-global-color-gray-900)"
/>
</a>
{/each}
{#each views as view (view.id)} {#each views as view (view.id)}
{@const selectedBy = $userSelectedResourceMap[view.id]} {@const selectedBy = $userSelectedResourceMap[view.id]}
<a <a
@ -231,7 +265,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
{#if !views.length && tableEditable} {#if !hasViews && tableEditable}
<Button cta on:click={createViewModal?.show}>Create a view</Button> <Button cta on:click={createViewModal?.show}>Create a view</Button>
<span> <span>
To create subsets of data, control access and more, create a view. To create subsets of data, control access and more, create a view.
@ -274,7 +308,7 @@
{/each} {/each}
</ActionMenu> </ActionMenu>
{/if} {/if}
{#if views.length} {#if hasViews}
<Icon <Icon
name="Add" name="Add"
size="L" size="L"

View File

@ -57,7 +57,8 @@
} }
</script> </script>
{#if view} <div class="view-v1">
{#if view}
<Table <Table
title={decodeURI(name)} title={decodeURI(name)}
{schema} {schema}
@ -77,9 +78,13 @@
<HideAutocolumnButton bind:hideAutocolumns /> <HideAutocolumnButton bind:hideAutocolumns />
<ExportButton view={view.name} formats={supportedFormats} /> <ExportButton view={view.name} formats={supportedFormats} />
</Table> </Table>
{:else}<i>Create your first table to start building</i>{/if} {:else}<i>Create your first table to start building</i>{/if}
</div>
<style> <style>
.view-v1 {
padding: var(--spacing-xl);
}
i { i {
font-size: var(--font-size-m); font-size: var(--font-size-m);
color: var(--grey-4); color: var(--grey-4);

View File

@ -1,19 +0,0 @@
<script>
import { onMount } from "svelte"
import { views, viewsV2 } from "stores/builder"
import { redirect } from "@roxi/routify"
onMount(async () => {
if ($viewsV2.selected) {
$redirect(`./v2/${$viewsV2.selected.id}`)
} else if ($viewsV2.list?.length) {
$redirect(`./v2/${$viewsV2.list[0].id}`)
} else if ($views.selected) {
$redirect(`./${encodeURIComponent($views.selected?.name)}`)
} else if ($views.list?.length) {
$redirect(`./${encodeURIComponent($views.list[0].name)}`)
} else {
$redirect("../")
}
})
</script>

View File

@ -3,7 +3,8 @@ export { FieldType as FieldTypes } from "@budibase/types"
export const ActionTypes = { export const ActionTypes = {
ValidateForm: "ValidateForm", ValidateForm: "ValidateForm",
UpdateFieldValue: "UpdateFieldValue", UpdateFieldValue: "UpdateFieldValue",
RefreshDatasource: "RefreshDatasource", RefreshDatasource:
"RefreshDatasource",
AddDataProviderQueryExtension: "AddDataProviderQueryExtension", AddDataProviderQueryExtension: "AddDataProviderQueryExtension",
RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension", RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension",
SetDataProviderSorting: "SetDataProviderSorting", SetDataProviderSorting: "SetDataProviderSorting",