Convert plugins page to table and update components and modals
This commit is contained in:
Andrew Kingston
parent
8933bc2be8
commit
f805f6d7f3
6 changed files with 185 additions and 29 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,33 +75,34 @@
|
|||
<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>
|
||||
</div>
|
||||
{#if $plugins?.length}
|
||||
<div class="filters">
|
||||
<div class="select">
|
||||
<Select
|
||||
bind:value={filter}
|
||||
placeholder={null}
|
||||
options={filterOptions}
|
||||
autoWidth
|
||||
/>
|
||||
</div>
|
||||
<Search bind:value={searchTerm} placeholder="Search plugins" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="controls">
|
||||
<div>
|
||||
<Button on:click={modal.show} cta>Add plugin</Button>
|
||||
</div>
|
||||
{#if filteredPlugins?.length}
|
||||
<Layout noPadding gap="S">
|
||||
{#each filteredPlugins as plugin (plugin._id)}
|
||||
<PluginRow {plugin} />
|
||||
{/each}
|
||||
</Layout>
|
||||
{#if $plugins?.length}
|
||||
<div class="filters">
|
||||
<div class="select">
|
||||
<Select
|
||||
bind:value={filter}
|
||||
placeholder={null}
|
||||
options={filterOptions}
|
||||
autoWidth
|
||||
/>
|
||||
</div>
|
||||
<Search bind:value={searchTerm} placeholder="Search plugins" />
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
{schema}
|
||||
data={filteredPlugins}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={false}
|
||||
{customRenderers}
|
||||
/>
|
||||
</Layout>
|
||||
</Page>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue