reuse modal for edit and create and add delete function
This commit is contained in:
Peter Clement
parent
a0dacc9717
commit
f00034544f
|
|
@ -0,0 +1,89 @@
|
|||
<script>
|
||||
import {
|
||||
ModalContent,
|
||||
Button,
|
||||
Input,
|
||||
Checkbox,
|
||||
Heading,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { environment } from "stores/portal"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
|
||||
export let save
|
||||
export let row
|
||||
|
||||
let deleteDialog
|
||||
let name = row?.name || ""
|
||||
let productionValue
|
||||
let developmentValue
|
||||
|
||||
let useProductionValue = true
|
||||
|
||||
const deleteVariable = name => {
|
||||
try {
|
||||
environment.deleteVariable(name)
|
||||
notifications.success("Environment variable deleted")
|
||||
} catch (err) {
|
||||
notifications.error(err.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
onConfirm={() =>
|
||||
save({
|
||||
name,
|
||||
production: productionValue,
|
||||
development: developmentValue,
|
||||
})}
|
||||
title={!row ? "Add new environment variable" : "Edit environment variable"}
|
||||
>
|
||||
<Input disabled={row} label="Name" bind:value={name} />
|
||||
<div>
|
||||
<Heading size="XS">Production</Heading>
|
||||
<Input
|
||||
type="password"
|
||||
label="Value"
|
||||
on:change={e => {
|
||||
productionValue = e.detail
|
||||
if (useProductionValue) {
|
||||
developmentValue = e.detail
|
||||
}
|
||||
}}
|
||||
value={productionValue}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Heading size="XS">Development</Heading>
|
||||
<Input
|
||||
type="password"
|
||||
on:change={e => {
|
||||
developmentValue = e.target.value
|
||||
}}
|
||||
disabled={useProductionValue}
|
||||
label="Value"
|
||||
value={useProductionValue ? productionValue : developmentValue}
|
||||
/>
|
||||
<Checkbox bind:value={useProductionValue} text="Use production value" />
|
||||
</div>
|
||||
|
||||
<div class="footer" slot="footer">
|
||||
{#if row}
|
||||
<Button on:click={deleteDialog.show} warning>Delete</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={deleteDialog}
|
||||
onOk={() => {
|
||||
deleteVariable(row.name)
|
||||
}}
|
||||
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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
import { ActionButton, Modal } from "@budibase/bbui"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import { environment } from "stores/portal"
|
||||
import CreateEditVariableModal from "./CreateEditVariableModal.svelte"
|
||||
|
||||
export let row
|
||||
|
||||
let editVariableModal
|
||||
let deleteDialog
|
||||
|
||||
const save = data => {
|
||||
environment.updateVariable(data)
|
||||
editVariableModal.hide()
|
||||
}
|
||||
</script>
|
||||
|
||||
<ActionButton size="S" on:click={editVariableModal.show}>Edit</ActionButton>
|
||||
|
||||
<Modal bind:this={editVariableModal}>
|
||||
<CreateEditVariableModal {row} {save} />
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={deleteDialog}
|
||||
onOk={() => {
|
||||
environment.deleteVariable(row.name)
|
||||
}}
|
||||
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>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -6,21 +6,15 @@
|
|||
Button,
|
||||
Divider,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Table,
|
||||
Input,
|
||||
Checkbox,
|
||||
} from "@budibase/bbui"
|
||||
import { envVars } from "stores/portal"
|
||||
import { environment } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import EditVariableModal from "./_components/editVariableModal.svelte"
|
||||
import CreateEditVariableModal from "./_components/CreateEditVariableModal.svelte"
|
||||
import EditVariableColumn from "./_components/EditVariableColumn.svelte"
|
||||
|
||||
let modal
|
||||
|
||||
let useProductionValue = true
|
||||
|
||||
let developmentValue
|
||||
let productionValue
|
||||
const schema = {
|
||||
name: {
|
||||
width: "2fr",
|
||||
|
|
@ -32,11 +26,16 @@
|
|||
},
|
||||
}
|
||||
|
||||
const customRenderers = [{ column: "edit", component: EditVariableModal }]
|
||||
const customRenderers = [{ column: "edit", component: EditVariableColumn }]
|
||||
|
||||
onMount(async () => {
|
||||
await envVars.load()
|
||||
await environment.loadVariables()
|
||||
})
|
||||
|
||||
const save = data => {
|
||||
environment.createVariable(data)
|
||||
modal.hide()
|
||||
}
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
<Layout noPadding>
|
||||
<Table
|
||||
{schema}
|
||||
data={$envVars}
|
||||
data={$environment}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={false}
|
||||
|
|
@ -63,30 +62,7 @@
|
|||
</Layout>
|
||||
|
||||
<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>
|
||||
<CreateEditVariableModal {save} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
import { writable } from "svelte/store"
|
||||
import { API } from "api"
|
||||
|
||||
export function createEnvVarsStore() {
|
||||
const { subscribe, set, update } = writable([])
|
||||
|
||||
async function load() {
|
||||
// const envVars = await API.fetchEnvVars()
|
||||
let testVars = ["blah", "blah123"]
|
||||
const vars = testVars.map(name => ({ name }))
|
||||
console.log(vars)
|
||||
set(vars)
|
||||
}
|
||||
|
||||
async function create() {
|
||||
const envVar = await API.createEnvVar()
|
||||
update(envVars => [envVar, ...envVars])
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
load,
|
||||
create,
|
||||
}
|
||||
}
|
||||
|
||||
export const envVars = createEnvVarsStore()
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { writable } from "svelte/store"
|
||||
import { API } from "api"
|
||||
|
||||
export function createEnvironmentStore() {
|
||||
const { subscribe, set, update } = writable([])
|
||||
|
||||
async function loadVariables() {
|
||||
let envVars = []
|
||||
envVars = await API.fetchEnvironmentVariables()
|
||||
const mappedVars = envVars.variables.map(name => ({ name }))
|
||||
set(mappedVars)
|
||||
}
|
||||
|
||||
async function createVariable(data) {
|
||||
console.log(data)
|
||||
await API.createEnvironmentVariable(data)
|
||||
let mappedVar = { name: data.name }
|
||||
update(envVars => [mappedVar, ...envVars])
|
||||
}
|
||||
|
||||
async function deleteVariable(varName) {
|
||||
await API.deleteEnvironmentVariable(varName)
|
||||
update(envVars => envVars.filter(envVar => envVar.name !== varName))
|
||||
}
|
||||
|
||||
async function updateVariable(data) {
|
||||
await API.updateEnvironmentVariable(data)
|
||||
}
|
||||
return {
|
||||
subscribe,
|
||||
loadVariables,
|
||||
createVariable,
|
||||
deleteVariable,
|
||||
updateVariable,
|
||||
}
|
||||
}
|
||||
|
||||
export const environment = createEnvironmentStore()
|
||||
|
|
@ -11,4 +11,4 @@ export { groups } from "./groups"
|
|||
export { plugins } from "./plugins"
|
||||
export { backups } from "./backups"
|
||||
export { overview } from "./overview"
|
||||
export { envVars } from "./envVars"
|
||||
export { environment } from "./environment"
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
export const buildEnvironmentVariableEndpoints = API => ({
|
||||
/**
|
||||
* Fetches a list of environment variables
|
||||
*/
|
||||
fetchVariables: async () => {
|
||||
return await API.get({
|
||||
url: `/api/env/variables`,
|
||||
json: false,
|
||||
})
|
||||
},
|
||||
|
||||
createVariable: async () => {
|
||||
return await API.get({
|
||||
url: `/api/env/variables`,
|
||||
json: false,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
export const buildEnvironmentVariableEndpoints = API => ({
|
||||
/**
|
||||
* Fetches a list of environment variables
|
||||
*/
|
||||
fetchEnvironmentVariables: async () => {
|
||||
return await API.get({
|
||||
url: `/api/env/variables`,
|
||||
json: false,
|
||||
})
|
||||
},
|
||||
|
||||
createEnvironmentVariable: async data => {
|
||||
return await API.post({
|
||||
url: `/api/env/variables`,
|
||||
body: data,
|
||||
})
|
||||
},
|
||||
deleteEnvironmentVariable: async varName => {
|
||||
return await API.delete({
|
||||
url: `/api/env/variables/${varName}`,
|
||||
})
|
||||
},
|
||||
|
||||
updateEnvironmentVariable: async data => {
|
||||
return await API.patch({
|
||||
url: `/api/env/variables/${data.name}`,
|
||||
body: data,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
|
@ -26,7 +26,7 @@ import { buildLicensingEndpoints } from "./licensing"
|
|||
import { buildGroupsEndpoints } from "./groups"
|
||||
import { buildPluginEndpoints } from "./plugins"
|
||||
import { buildBackupsEndpoints } from "./backups"
|
||||
|
||||
import { buildEnvironmentVariableEndpoints } from "./environmentVariables"
|
||||
const defaultAPIClientConfig = {
|
||||
/**
|
||||
* Certain definitions can't change at runtime for client apps, such as the
|
||||
|
|
@ -247,5 +247,6 @@ export const createAPIClient = config => {
|
|||
...buildGroupsEndpoints(API),
|
||||
...buildPluginEndpoints(API),
|
||||
...buildBackupsEndpoints(API),
|
||||
...buildEnvironmentVariableEndpoints(API),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue