properly reuse files
This commit is contained in:
Peter Clement
parent
1051faef1d
commit
bdb9cbb6ad
|
|
@ -1,20 +1,29 @@
|
|||
<script>
|
||||
import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
|
||||
import DetailPopover from "@/components/common/DetailPopover.svelte"
|
||||
import { screenStore, appStore } from "@/stores/builder"
|
||||
<script lang="ts">
|
||||
import { Button } from "@budibase/bbui"
|
||||
import ScreensPopover from "@/components/common/ScreensPopover.svelte"
|
||||
import { screenStore } from "@/stores/builder"
|
||||
import { getContext, createEventDispatcher } from "svelte"
|
||||
|
||||
const { datasource } = getContext("grid")
|
||||
import type { Screen, ScreenUsage } from "@budibase/types"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let popover
|
||||
const { datasource }: { datasource: any } = getContext("grid")
|
||||
|
||||
let popover: any
|
||||
|
||||
$: ds = $datasource
|
||||
$: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
|
||||
$: 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 JSON.stringify(screen).includes(`"${resourceId}"`)
|
||||
})
|
||||
|
|
@ -26,34 +35,16 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<DetailPopover title="Screens" bind:this={popover}>
|
||||
<svelte:fragment slot="anchor" let:open>
|
||||
<ActionButton
|
||||
icon="WebPage"
|
||||
selected={open || screenCount}
|
||||
quiet
|
||||
accentColor="#364800"
|
||||
>
|
||||
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>
|
||||
<ScreensPopover
|
||||
bind:this={popover}
|
||||
screens={screenUsage}
|
||||
icon="WebPage"
|
||||
accentColor="#364800"
|
||||
showCount
|
||||
>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary icon="WebPage" on:click={generateScreen}>
|
||||
Generate app screen
|
||||
</Button>
|
||||
</div>
|
||||
</DetailPopover>
|
||||
</svelte:fragment>
|
||||
</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">
|
||||
import { onMount } from "svelte"
|
||||
import { List, ListItem, ActionButton } from "@budibase/bbui"
|
||||
import DetailPopover from "@/components/common/DetailPopover.svelte"
|
||||
import { appStore, screenStore } from "@/stores/builder"
|
||||
|
||||
import { screenStore } from "@/stores/builder"
|
||||
import ScreensPopover from "@/components/common/ScreensPopover.svelte"
|
||||
import type { ScreenUsage } from "@budibase/types"
|
||||
import { PopoverAlign } from "@budibase/types"
|
||||
|
||||
export let sourceId: string
|
||||
|
||||
|
|
@ -25,42 +24,10 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<DetailPopover title="Screens" bind:this={popover} align={PopoverAlign.Left}>
|
||||
<svelte:fragment slot="anchor" let:open>
|
||||
<ActionButton icon="DeviceDesktop" quiet selected={open} on:click={show}>
|
||||
Screens
|
||||
</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}
|
||||
</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>
|
||||
<ScreensPopover
|
||||
bind:this={popover}
|
||||
{screens}
|
||||
icon="WebPage"
|
||||
accentColor="#364800"
|
||||
showCount
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue