Convert plugins page to table and update components and modals
This commit is contained in:
Andrew Kingston
parent
8933bc2be8
commit
f805f6d7f3
|
|
@ -1,8 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
export let value
|
export let value
|
||||||
|
export let schema
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
|
<div class:capitalise={schema?.capitalise}>
|
||||||
|
{typeof value === "object" ? JSON.stringify(value) : value}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
@ -13,4 +16,7 @@
|
||||||
width: 0;
|
width: 0;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
div.capitalise {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,9 @@
|
||||||
|
|
||||||
async function deletePlugin() {
|
async function deletePlugin() {
|
||||||
try {
|
try {
|
||||||
|
const name = plugin.name
|
||||||
await plugins.deletePlugin(plugin._id)
|
await plugins.deletePlugin(plugin._id)
|
||||||
notifications.success(`Plugin ${plugin?.name} deleted`)
|
notifications.success(`Plugin ${name} deleted successfully`)
|
||||||
dispatch("deleted")
|
dispatch("deleted")
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
const msg = error?.message ? error.message : JSON.stringify(error)
|
const msg = error?.message ? error.message : JSON.stringify(error)
|
||||||
|
|
@ -28,6 +29,6 @@
|
||||||
showCloseIcon={false}
|
showCloseIcon={false}
|
||||||
>
|
>
|
||||||
<Body>
|
<Body>
|
||||||
Are you sure you want to delete <strong>{plugin?.name}</strong>
|
Are you sure you want to delete <strong>{plugin?.name}</strong>?
|
||||||
</Body>
|
</Body>
|
||||||
</ModalContent>
|
</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,
|
Modal,
|
||||||
Search,
|
Search,
|
||||||
Page,
|
Page,
|
||||||
|
Table,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import { plugins, admin } from "stores/portal"
|
import { plugins, admin } from "stores/portal"
|
||||||
import PluginRow from "./_components/PluginRow.svelte"
|
|
||||||
import AddPluginModal from "./_components/AddPluginModal.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 modal
|
||||||
let searchTerm = ""
|
let searchTerm = ""
|
||||||
|
|
@ -50,33 +75,34 @@
|
||||||
<Body>Add your own custom datasources and components</Body>
|
<Body>Add your own custom datasources and components</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
<Divider />
|
<Divider />
|
||||||
<Layout noPadding>
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div>
|
<div>
|
||||||
<Button on:click={modal.show} cta>Add plugin</Button>
|
<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>
|
</div>
|
||||||
{#if filteredPlugins?.length}
|
{#if $plugins?.length}
|
||||||
<Layout noPadding gap="S">
|
<div class="filters">
|
||||||
{#each filteredPlugins as plugin (plugin._id)}
|
<div class="select">
|
||||||
<PluginRow {plugin} />
|
<Select
|
||||||
{/each}
|
bind:value={filter}
|
||||||
</Layout>
|
placeholder={null}
|
||||||
|
options={filterOptions}
|
||||||
|
autoWidth
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Search bind:value={searchTerm} placeholder="Search plugins" />
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</Layout>
|
</div>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
{schema}
|
||||||
|
data={filteredPlugins}
|
||||||
|
allowEditColumns={false}
|
||||||
|
allowEditRows={false}
|
||||||
|
allowSelectRows={false}
|
||||||
|
{customRenderers}
|
||||||
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Page>
|
</Page>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue