Add support for old views in new view nav bar
This commit is contained in:
parent
51decfa58d
commit
0dd432f286
|
@ -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"
|
||||||
|
|
|
@ -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);
|
|
@ -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>
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue