CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 10:08:09 +13:00
Code Issues Projects Releases Wiki Activity

Soft paywall snippets

Browse source
This commit is contained in:
Andrew Kingston 2024-03-14 14:29:13 +00:00
parent 0e94caafcb
commit 049c2b989b
1 changed files with 100 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
View file

@ -1,8 +1,19 @@
<script> <script>
import { Input, Layout, Icon, Popover } from "@budibase/bbui" import {
Input,
Layout,
Icon,
Popover,
Tags,
Tag,
Body,
Button,
} from "@budibase/bbui"
import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte" import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
import { EditorModes } from "components/common/CodeEditor" import { EditorModes } from "components/common/CodeEditor"
import SnippetDrawer from "./SnippetDrawer.svelte" import SnippetDrawer from "./SnippetDrawer.svelte"
import { licensing } from "stores/portal"
import UpgradeButton from "pages/builder/portal/_components/UpgradeButton.svelte"
export let addSnippet export let addSnippet
export let snippets export let snippets
@ -16,10 +27,11 @@
let snippetDrawer let snippetDrawer
let editableSnippet let editableSnippet
$: filteredSnippets = getFilteredSnippets(snippets, search) $: enableSnippets = !$licensing.isFreePlan
$: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
const getFilteredSnippets = (snippets, search) => { const getFilteredSnippets = (enableSnippets, snippets, search) => {
if (!snippets?.length) { if (!enableSnippets || !snippets?.length) {
return [] return []
} }
if (!search?.length) { if (!search?.length) {
@ -81,6 +93,7 @@
<div class="snippet-side-panel"> <div class="snippet-side-panel">
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<div class="header"> <div class="header">
{#if enableSnippets}
{#if searching} {#if searching}
<div class="search-input"> <div class="search-input">
<Input <Input
@ -114,8 +127,17 @@
on:click={createSnippet} on:click={createSnippet}
/> />
{/if} {/if}
{:else}
<div class="title">
Snippets
<Tags>
<Tag icon="LockClosed">Premium</Tag>
</Tags>
</div>
{/if}
</div> </div>
<div class="snippet-list"> <div class="snippet-list">
{#if enableSnippets}
{#each filteredSnippets as snippet} {#each filteredSnippets as snippet}
<div <div
class="snippet" class="snippet"
@ -133,6 +155,15 @@
/> />
</div> </div>
{/each} {/each}
{:else}
<div class="upgrade">
<Body size="S">
Create reusable blocks of JS that can be managed and updated all in
one place with Snippets
</Body>
<UpgradeButton />
</div>
{/if}
</div> </div>
</Layout> </Layout>
</div> </div>
@ -191,6 +222,25 @@
.title { .title {
flex: 1 1 auto; flex: 1 1 auto;
} }
.title {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
/* Upgrade */
.upgrade {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-l);
}
.upgrade :global(p) {
text-align: center;
align-self: center;
}
/* List */ /* List */
.snippet-list { .snippet-list {