MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Soft paywall snippets

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>
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 { EditorModes } from "components/common/CodeEditor"
import SnippetDrawer from "./SnippetDrawer.svelte"
import { licensing } from "stores/portal"
import UpgradeButton from "pages/builder/portal/_components/UpgradeButton.svelte"
export let addSnippet
export let snippets
@ -16,10 +27,11 @@
let snippetDrawer
let editableSnippet
$: filteredSnippets = getFilteredSnippets(snippets, search)
$: enableSnippets = !$licensing.isFreePlan
$: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
const getFilteredSnippets = (snippets, search) => {
if (!snippets?.length) {
const getFilteredSnippets = (enableSnippets, snippets, search) => {
if (!enableSnippets || !snippets?.length) {
return []
}
if (!search?.length) {
@ -81,6 +93,7 @@
<div class="snippet-side-panel">
<Layout noPadding gap="S">
<div class="header">
{#if enableSnippets}
{#if searching}
<div class="search-input">
<Input
@ -114,8 +127,17 @@
on:click={createSnippet}
/>
{/if}
{:else}
<div class="title">
Snippets
<Tags>
<Tag icon="LockClosed">Premium</Tag>
</Tags>
</div>
{/if}
</div>
<div class="snippet-list">
{#if enableSnippets}
{#each filteredSnippets as snippet}
<div
class="snippet"
@ -133,6 +155,15 @@
/>
</div>
{/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>
</Layout>
</div>
@ -191,6 +222,25 @@
.title {
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 */
.snippet-list {