add edit and add modals
This commit is contained in:
Peter Clement
parent
7a78a0bf66
commit
a4fd65b495
|
|
@ -53,10 +53,6 @@
|
||||||
title: "Plugins",
|
title: "Plugins",
|
||||||
href: "/builder/portal/plugins",
|
href: "/builder/portal/plugins",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "Environment",
|
|
||||||
href: "/builder/portal/environment",
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// Admin only pages
|
// Admin only pages
|
||||||
|
|
@ -74,6 +70,11 @@
|
||||||
title: "Plugins",
|
title: "Plugins",
|
||||||
href: "/builder/portal/plugins",
|
href: "/builder/portal/plugins",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Environment",
|
||||||
|
href: "/builder/portal/environment",
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "Settings",
|
title: "Settings",
|
||||||
href: "/builder/portal/settings",
|
href: "/builder/portal/settings",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
ActionButton,
|
||||||
|
Button,
|
||||||
|
Modal,
|
||||||
|
ModalContent,
|
||||||
|
Input,
|
||||||
|
Heading,
|
||||||
|
Checkbox,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
|
|
||||||
|
export let row
|
||||||
|
|
||||||
|
let editVariableModal
|
||||||
|
let deleteDialog
|
||||||
|
|
||||||
|
let productionTouched = false
|
||||||
|
let developmentTouched = false
|
||||||
|
|
||||||
|
let productionValue = "******"
|
||||||
|
let developmentValue = "******"
|
||||||
|
|
||||||
|
let useProductionValue
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ActionButton size="S" on:click={editVariableModal.show}>Edit</ActionButton>
|
||||||
|
|
||||||
|
<Modal bind:this={editVariableModal}>
|
||||||
|
<ModalContent disabled={!productionTouched && !developmentTouched}>
|
||||||
|
<Input label="Name" value={row.name} />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Heading size="XS">Production</Heading>
|
||||||
|
<Input
|
||||||
|
on:change={() => (productionTouched = true)}
|
||||||
|
label="Value"
|
||||||
|
bind:value={productionValue}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading size="XS">Development</Heading>
|
||||||
|
<Input
|
||||||
|
disabled={useProductionValue}
|
||||||
|
on:change={() => (developmentTouched = true)}
|
||||||
|
label="Value"
|
||||||
|
bind:value={developmentValue}
|
||||||
|
/>
|
||||||
|
<Checkbox bind:value={useProductionValue} text="Use production value" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer" slot="footer">
|
||||||
|
<Button on:click={deleteDialog.show} warning>Delete</Button>
|
||||||
|
</div>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<ConfirmDialog
|
||||||
|
bind:this={deleteDialog}
|
||||||
|
onOk={() => {
|
||||||
|
console.log("delete")
|
||||||
|
}}
|
||||||
|
okText="Delete Environment Variable"
|
||||||
|
title="Confirm Deletion"
|
||||||
|
>
|
||||||
|
Are you sure you wish to delete the environment variable
|
||||||
|
<i>{row.name}?</i>
|
||||||
|
This action cannot be undone.
|
||||||
|
</ConfirmDialog>
|
||||||
|
|
@ -7,33 +7,92 @@
|
||||||
Select,
|
Select,
|
||||||
Divider,
|
Divider,
|
||||||
Modal,
|
Modal,
|
||||||
|
ModalContent,
|
||||||
Search,
|
Search,
|
||||||
|
Page,
|
||||||
|
Table,
|
||||||
|
Input,
|
||||||
|
Checkbox,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
|
import { envVars } from "stores/portal"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
import EditVariableModal from "./_components/editVariableModal.svelte"
|
||||||
|
|
||||||
|
let modal
|
||||||
|
|
||||||
|
let useProductionValue = true
|
||||||
|
|
||||||
|
let developmentValue
|
||||||
|
let productionValue
|
||||||
|
const schema = {
|
||||||
|
name: {
|
||||||
|
width: "2fr",
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
width: "auto",
|
||||||
|
borderLeft: true,
|
||||||
|
displayName: "",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const customRenderers = [{ column: "edit", component: EditVariableModal }]
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await envVars.load()
|
await envVars.load()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout noPadding>
|
<Page narrow>
|
||||||
<Layout gap="XS" noPadding>
|
|
||||||
<Heading size="M">Envrironment Variables</Heading>
|
|
||||||
<Body
|
|
||||||
>Add and manage environment variable for development and production</Body
|
|
||||||
>
|
|
||||||
</Layout>
|
|
||||||
<Divider size="S" />
|
|
||||||
<Layout noPadding>
|
<Layout noPadding>
|
||||||
{#each $envVars as envVar}
|
<Layout gap="XS" noPadding>
|
||||||
<Layout gap="XS" noPadding>
|
<Heading size="M">Envrironment Variables</Heading>
|
||||||
<Heading size="S">{envVar}</Heading>
|
<Body
|
||||||
</Layout>
|
>Add and manage environment variable for development and production</Body
|
||||||
<Divider size="S" />
|
>
|
||||||
{/each}
|
</Layout>
|
||||||
|
<Divider size="S" />
|
||||||
|
<Layout noPadding>
|
||||||
|
<Table
|
||||||
|
{schema}
|
||||||
|
data={$envVars}
|
||||||
|
allowEditColumns={false}
|
||||||
|
allowEditRows={false}
|
||||||
|
allowSelectRows={false}
|
||||||
|
{customRenderers}
|
||||||
|
/>
|
||||||
|
</Layout>
|
||||||
|
<div>
|
||||||
|
<Button on:click={modal.show} cta>Add Variable</Button>
|
||||||
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Layout>
|
</Page>
|
||||||
|
|
||||||
|
<Modal bind:this={modal}>
|
||||||
|
<ModalContent title="Add new environment variable">
|
||||||
|
<Input label="Name" value="" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Heading size="XS">Production</Heading>
|
||||||
|
<Input type="password" label="Value" bind:value={productionValue} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading size="XS">Development</Heading>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
disabled={useProductionValue}
|
||||||
|
label="Value"
|
||||||
|
bind:value={developmentValue}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
on:change={() => {
|
||||||
|
developmentValue = productionValue
|
||||||
|
}}
|
||||||
|
bind:value={useProductionValue}
|
||||||
|
text="Use production value"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,15 @@ export function createEnvVarsStore() {
|
||||||
const { subscribe, set, update } = writable([])
|
const { subscribe, set, update } = writable([])
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const envVars = await API.fetchEnvVars()
|
// const envVars = await API.fetchEnvVars()
|
||||||
|
|
||||||
let testVars = ['blah', 'blah123']
|
let testVars = ['blah', 'blah123']
|
||||||
set(testVars)
|
|
||||||
|
// turn the testVars array in to a map with "name" being the value of each
|
||||||
|
// item in the array
|
||||||
|
const vars = testVars.map((name) => ({ name }))
|
||||||
|
console.log(vars)
|
||||||
|
set(vars)
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -11,3 +11,4 @@ export { groups } from "./groups"
|
||||||
export { plugins } from "./plugins"
|
export { plugins } from "./plugins"
|
||||||
export { backups } from "./backups"
|
export { backups } from "./backups"
|
||||||
export { overview } from "./overview"
|
export { overview } from "./overview"
|
||||||
|
export { envVars } from "./envVars"
|
||||||
Loading…
Reference in New Issue