properly reuse files
This commit is contained in:
Peter Clement
parent
1051faef1d
commit
bdb9cbb6ad
|
|
@ -1,20 +1,29 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
|
import { Button } from "@budibase/bbui"
|
||||||
import DetailPopover from "@/components/common/DetailPopover.svelte"
|
import ScreensPopover from "@/components/common/ScreensPopover.svelte"
|
||||||
import { screenStore, appStore } from "@/stores/builder"
|
import { screenStore } from "@/stores/builder"
|
||||||
import { getContext, createEventDispatcher } from "svelte"
|
import { getContext, createEventDispatcher } from "svelte"
|
||||||
|
import type { Screen, ScreenUsage } from "@budibase/types"
|
||||||
const { datasource } = getContext("grid")
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
let popover
|
const { datasource }: { datasource: any } = getContext("grid")
|
||||||
|
|
||||||
|
let popover: any
|
||||||
|
|
||||||
$: ds = $datasource
|
$: ds = $datasource
|
||||||
$: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
|
$: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
|
||||||
$: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
|
$: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
|
||||||
$: screenCount = connectedScreens.length
|
$: screenUsage = connectedScreens.map(
|
||||||
|
(screen: Screen): ScreenUsage => ({
|
||||||
|
url: screen.routing?.route,
|
||||||
|
_id: screen._id!,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
const findConnectedScreens = (screens, resourceId) => {
|
const findConnectedScreens = (
|
||||||
|
screens: Screen[],
|
||||||
|
resourceId: string
|
||||||
|
): Screen[] => {
|
||||||
return screens.filter(screen => {
|
return screens.filter(screen => {
|
||||||
return JSON.stringify(screen).includes(`"${resourceId}"`)
|
return JSON.stringify(screen).includes(`"${resourceId}"`)
|
||||||
})
|
})
|
||||||
|
|
@ -26,34 +35,16 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DetailPopover title="Screens" bind:this={popover}>
|
<ScreensPopover
|
||||||
<svelte:fragment slot="anchor" let:open>
|
bind:this={popover}
|
||||||
<ActionButton
|
screens={screenUsage}
|
||||||
icon="WebPage"
|
icon="WebPage"
|
||||||
selected={open || screenCount}
|
accentColor="#364800"
|
||||||
quiet
|
showCount
|
||||||
accentColor="#364800"
|
>
|
||||||
>
|
<svelte:fragment slot="footer">
|
||||||
Screens{screenCount ? `: ${screenCount}` : ""}
|
|
||||||
</ActionButton>
|
|
||||||
</svelte:fragment>
|
|
||||||
{#if !connectedScreens.length}
|
|
||||||
There aren't any screens connected to this data.
|
|
||||||
{:else}
|
|
||||||
The following screens are connected to this data.
|
|
||||||
<List>
|
|
||||||
{#each connectedScreens as screen}
|
|
||||||
<ListItem
|
|
||||||
title={screen.routing.route}
|
|
||||||
url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
|
|
||||||
showArrow
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</List>
|
|
||||||
{/if}
|
|
||||||
<div>
|
|
||||||
<Button secondary icon="WebPage" on:click={generateScreen}>
|
<Button secondary icon="WebPage" on:click={generateScreen}>
|
||||||
Generate app screen
|
Generate app screen
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</svelte:fragment>
|
||||||
</DetailPopover>
|
</ScreensPopover>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { List, ListItem, ActionButton } from "@budibase/bbui"
|
||||||
|
import DetailPopover from "@/components/common/DetailPopover.svelte"
|
||||||
|
import { appStore } from "@/stores/builder"
|
||||||
|
import type { ScreenUsage } from "@budibase/types"
|
||||||
|
import { PopoverAlign } from "@budibase/types"
|
||||||
|
|
||||||
|
export let screens: ScreenUsage[] = []
|
||||||
|
export let icon = "DeviceDesktop"
|
||||||
|
export let accentColor: string | undefined = undefined
|
||||||
|
export let showCount = false
|
||||||
|
export let align = PopoverAlign.Left
|
||||||
|
|
||||||
|
let popover: any
|
||||||
|
|
||||||
|
export function show() {
|
||||||
|
popover?.show()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hide() {
|
||||||
|
popover?.hide()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DetailPopover title="Screens" bind:this={popover} {align}>
|
||||||
|
<svelte:fragment slot="anchor" let:open>
|
||||||
|
<ActionButton
|
||||||
|
{icon}
|
||||||
|
quiet
|
||||||
|
selected={open || (showCount && screens.length)}
|
||||||
|
{accentColor}
|
||||||
|
on:click={show}
|
||||||
|
>
|
||||||
|
Screens{showCount && screens.length ? `: ${screens.length}` : ""}
|
||||||
|
</ActionButton>
|
||||||
|
</svelte:fragment>
|
||||||
|
|
||||||
|
{#if !screens.length}
|
||||||
|
<div class="empty-state">
|
||||||
|
<p>No screens are using this data.</p>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="description">The following screens are connected to this data.</p>
|
||||||
|
<List>
|
||||||
|
{#each screens as screen}
|
||||||
|
<ListItem
|
||||||
|
title={screen.url}
|
||||||
|
url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
|
||||||
|
showArrow
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</List>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<slot name="footer" />
|
||||||
|
</DetailPopover>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.description {
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
margin: 0 0 var(--spacing-xs) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: var(--spacing-m);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--grey-5);
|
||||||
|
font-size: var(--font-size-s);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import { List, ListItem, ActionButton } from "@budibase/bbui"
|
|
||||||
import DetailPopover from "@/components/common/DetailPopover.svelte"
|
import { screenStore } from "@/stores/builder"
|
||||||
import { appStore, screenStore } from "@/stores/builder"
|
import ScreensPopover from "@/components/common/ScreensPopover.svelte"
|
||||||
import type { ScreenUsage } from "@budibase/types"
|
import type { ScreenUsage } from "@budibase/types"
|
||||||
import { PopoverAlign } from "@budibase/types"
|
|
||||||
|
|
||||||
export let sourceId: string
|
export let sourceId: string
|
||||||
|
|
||||||
|
|
@ -25,42 +24,10 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DetailPopover title="Screens" bind:this={popover} align={PopoverAlign.Left}>
|
<ScreensPopover
|
||||||
<svelte:fragment slot="anchor" let:open>
|
bind:this={popover}
|
||||||
<ActionButton icon="DeviceDesktop" quiet selected={open} on:click={show}>
|
{screens}
|
||||||
Screens
|
icon="WebPage"
|
||||||
</ActionButton>
|
accentColor="#364800"
|
||||||
</svelte:fragment>
|
showCount
|
||||||
|
/>
|
||||||
{#if !screens.length}
|
|
||||||
<div class="empty-state">
|
|
||||||
<p>No screens are using this data.</p>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="description">The following screens are connected to this data.</p>
|
|
||||||
|
|
||||||
<List>
|
|
||||||
{#each screens as screen}
|
|
||||||
<ListItem
|
|
||||||
title={screen.url}
|
|
||||||
url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
|
|
||||||
showArrow
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</List>
|
|
||||||
{/if}
|
|
||||||
</DetailPopover>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.description {
|
|
||||||
font-size: var(--font-size-s);
|
|
||||||
margin: 0 0 var(--spacing-xs) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
padding: var(--spacing-m);
|
|
||||||
text-align: center;
|
|
||||||
color: var(--grey-5);
|
|
||||||
font-size: var(--font-size-s);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue