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

Convert plugins page to table and update components and modals

This commit is contained in:
Andrew Kingston 2023-01-09 11:12:54 +00:00
parent 8933bc2be8
commit f805f6d7f3
6 changed files with 185 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bbui/src/Table/StringRenderer.svelte
View File

@ -1,8 +1,11 @@
<script>
export let value
export let schema
</script>
<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
<div class:capitalise={schema?.capitalise}>
{typeof value === "object" ? JSON.stringify(value) : value}
</div>
<style>
div {
@ -13,4 +16,7 @@
width: 0;
flex: 1 1 auto;
}
div.capitalise {
text-transform: capitalize;
}
</style>

5
packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte
View File

@ -9,8 +9,9 @@
async function deletePlugin() {
try {
const name = plugin.name
await plugins.deletePlugin(plugin._id)
notifications.success(`Plugin ${plugin?.name} deleted`)
notifications.success(`Plugin ${name} deleted successfully`)
dispatch("deleted")
} catch (error) {
const msg = error?.message ? error.message : JSON.stringify(error)
@ -28,6 +29,6 @@
showCloseIcon={false}
>
<Body>
Are you sure you want to delete <strong>{plugin?.name}</strong>
Are you sure you want to delete <strong>{plugin?.name}</strong>?
</Body>
</ModalContent>

83
packages/builder/src/pages/builder/portal/plugins/_components/EditPluginModal.svelte Normal file
View File

@ -0,0 +1,83 @@
<script>
import {
Modal,
ModalContent,
Button,
Label,
Input,
Context,
} from "@budibase/bbui"
import { getContext } from "svelte"
import DeletePluginModal from "./DeletePluginModal.svelte"
export let plugin
const modalContext = getContext(Context.Modal)
let deleteModal
$: friendlyName = plugin?.schema?.schema?.friendlyName
</script>
<ModalContent
size="M"
title="Plugin details"
showConfirmButton={false}
showCancelButton={false}
>
<div class="details-row">
<Label size="M">Name</Label>
<Input disabled value={plugin.name} />
</div>
<div class="details-row">
<Label size="M">Friendly name</Label>
<Input disabled value={friendlyName} />
</div>
<div class="details-row">
<Label size="M">Type</Label>
<Input
disabled
value={plugin.schema.type.charAt(0).toUpperCase() +
plugin.schema.type.slice(1)}
/>
</div>
<div class="details-row">
<Label size="M">Source</Label>
<Input disabled value={plugin.source || "N/A"} />
</div>
<div class="details-row">
<Label size="M">Version</Label>
<Input disabled value={plugin.version} />
</div>
<div class="details-row">
<Label size="M">License</Label>
<Input disabled value={plugin.package.license} />
</div>
<div class="details-row">
<Label size="M">Author</Label>
<Input disabled value={plugin.package.author || "N/A"} />
</div>
<div class="footer" slot="footer">
<Button on:click={deleteModal.show} warning>Delete</Button>
</div>
</ModalContent>
<Modal bind:this={deleteModal}>
<DeletePluginModal {plugin} on:deleted={modalContext.hide} />
</Modal>
<style>
.details-row {
display: grid;
grid-template-columns: 70px 1fr;
grid-gap: var(--spacing-l) var(--spacing-l);
align-items: center;
}
.footer {
display: flex;
gap: var(--spacing-l);
}
</style>

14
packages/builder/src/pages/builder/portal/plugins/_components/EditPluginRenderer.svelte Normal file
View File

@ -0,0 +1,14 @@
<script>
import { ActionButton, Modal } from "@budibase/bbui"
import EditPluginModal from "./EditPluginModal.svelte"
export let row
let editPluginModal
</script>
<ActionButton size="S" on:click={editPluginModal.show}>Edit</ActionButton>
<Modal bind:this={editPluginModal}>
<EditPluginModal plugin={row} />
</Modal>

26
packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import { Icon } from "@budibase/bbui"
export let value
export let row
$: icon = row?.schema?.schema?.icon
$: friendlyName = row?.schema?.schema?.friendlyName
</script>
<div title={value}>
{#if icon}
<Icon name={icon} />
{/if}
{friendlyName || value}
</div>
<style>
div {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
</style>

46
packages/builder/src/pages/builder/portal/plugins/index.svelte
View File

@ -9,11 +9,36 @@
Modal,
Search,
Page,
Table,
} from "@budibase/bbui"
import { onMount } from "svelte"
import { plugins, admin } from "stores/portal"
import PluginRow from "./_components/PluginRow.svelte"
import AddPluginModal from "./_components/AddPluginModal.svelte"
import PluginNameRenderer from "./_components/PluginNameRenderer.svelte"
import EditPluginRenderer from "./_components/EditPluginRenderer.svelte"
const schema = {
name: {
width: "2fr",
},
version: {
width: "1fr",
},
"schema.type": {
width: "1fr",
displayName: "Type",
capitalise: true,
},
edit: {
width: "auto",
borderLeft: true,
displayName: "",
},
}
const customRenderers = [
{ column: "name", component: PluginNameRenderer },
{ column: "edit", component: EditPluginRenderer },
]
let modal
let searchTerm = ""
@ -50,7 +75,7 @@
<Body>Add your own custom datasources and components</Body>
</Layout>
<Divider />
<Layout noPadding>
<div class="controls">
<div>
<Button on:click={modal.show} cta>Add plugin</Button>
@ -69,14 +94,15 @@
</div>
{/if}
</div>
{#if filteredPlugins?.length}
<Layout noPadding gap="S">
{#each filteredPlugins as plugin (plugin._id)}
<PluginRow {plugin} />
{/each}
</Layout>
{/if}
</Layout>
<Table
{schema}
data={filteredPlugins}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
{customRenderers}
/>
</Layout>
</Page>