add edit and add modals
This commit is contained in:
Peter Clement
parent
7a78a0bf66
commit
a4fd65b495
|
|
@ -53,10 +53,6 @@
|
|||
title: "Plugins",
|
||||
href: "/builder/portal/plugins",
|
||||
},
|
||||
{
|
||||
title: "Environment",
|
||||
href: "/builder/portal/environment",
|
||||
},
|
||||
]
|
||||
|
||||
// Admin only pages
|
||||
|
|
@ -74,6 +70,11 @@
|
|||
title: "Plugins",
|
||||
href: "/builder/portal/plugins",
|
||||
},
|
||||
{
|
||||
title: "Environment",
|
||||
href: "/builder/portal/environment",
|
||||
},
|
||||
|
||||
{
|
||||
title: "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,
|
||||
Divider,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Search,
|
||||
Page,
|
||||
Table,
|
||||
Input,
|
||||
Checkbox,
|
||||
} from "@budibase/bbui"
|
||||
|
||||
import { envVars } from "stores/portal"
|
||||
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 () => {
|
||||
await envVars.load()
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<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" />
|
||||
<Page narrow>
|
||||
<Layout noPadding>
|
||||
{#each $envVars as envVar}
|
||||
<Layout gap="XS" noPadding>
|
||||
<Heading size="S">{envVar}</Heading>
|
||||
</Layout>
|
||||
<Divider size="S" />
|
||||
{/each}
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,15 @@ export function createEnvVarsStore() {
|
|||
const { subscribe, set, update } = writable([])
|
||||
|
||||
async function load() {
|
||||
const envVars = await API.fetchEnvVars()
|
||||
// const envVars = await API.fetchEnvVars()
|
||||
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -11,3 +11,4 @@ export { groups } from "./groups"
|
|||
export { plugins } from "./plugins"
|
||||
export { backups } from "./backups"
|
||||
export { overview } from "./overview"
|
||||
export { envVars } from "./envVars"
|
||||
Loading…
Reference in New Issue