mirror of https://github.com/Budibase/budibase.git
Conor_Mack
6 years ago
119 changed files with 2778 additions and 1524 deletions
@ -0,0 +1,355 @@ |
|||
import { writable } from "svelte/store" |
|||
import api from "../api" |
|||
import { cloneDeep, sortBy, find, remove } from "lodash/fp" |
|||
import { hierarchy as hierarchyFunctions } from "../../../../core/src" |
|||
import { |
|||
getNode, |
|||
validate, |
|||
constructHierarchy, |
|||
templateApi, |
|||
isIndex, |
|||
canDeleteIndex, |
|||
canDeleteRecord, |
|||
} from "../../common/core" |
|||
|
|||
export const getBackendUiStore = () => { |
|||
const INITIAL_BACKEND_UI_STATE = { |
|||
leftNavItem: "DATABASE", |
|||
selectedView: { |
|||
records: [], |
|||
name: "", |
|||
}, |
|||
breadcrumbs: [], |
|||
selectedDatabase: {}, |
|||
selectedModel: {}, |
|||
} |
|||
|
|||
const store = writable(INITIAL_BACKEND_UI_STATE) |
|||
|
|||
store.actions = { |
|||
navigate: name => store.update(state => ({ ...state, leftNavItem: name })), |
|||
database: { |
|||
select: db => |
|||
store.update(state => { |
|||
state.selectedDatabase = db |
|||
state.breadcrumbs = [db.name] |
|||
return state |
|||
}), |
|||
}, |
|||
records: { |
|||
delete: () => |
|||
store.update(state => { |
|||
state.selectedView = state.selectedView |
|||
return state |
|||
}), |
|||
view: record => |
|||
store.update(state => { |
|||
state.breadcrumbs = [state.selectedDatabase.name, record.id] |
|||
return state |
|||
}), |
|||
select: record => |
|||
store.update(state => { |
|||
state.selectedRecord = record |
|||
return state |
|||
}), |
|||
}, |
|||
views: { |
|||
select: view => |
|||
store.update(state => { |
|||
state.selectedView = view |
|||
return state |
|||
}), |
|||
}, |
|||
modals: { |
|||
show: modal => store.update(state => ({ ...state, visibleModal: modal })), |
|||
hide: () => store.update(state => ({ ...state, visibleModal: null })), |
|||
}, |
|||
users: { |
|||
create: user => |
|||
store.update(state => { |
|||
state.users.push(user) |
|||
state.users = state.users |
|||
return state |
|||
}), |
|||
}, |
|||
} |
|||
|
|||
return store |
|||
} |
|||
|
|||
// Store Actions
|
|||
export const createShadowHierarchy = hierarchy => |
|||
constructHierarchy(JSON.parse(JSON.stringify(hierarchy))) |
|||
|
|||
export const createDatabaseForApp = store => appInstance => { |
|||
store.update(state => { |
|||
state.appInstances.push(appInstance) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const saveBackend = async state => { |
|||
await api.post(`/_builder/api/${state.appname}/backend`, { |
|||
appDefinition: { |
|||
hierarchy: state.hierarchy, |
|||
actions: state.actions, |
|||
triggers: state.triggers, |
|||
}, |
|||
accessLevels: state.accessLevels, |
|||
}) |
|||
|
|||
const instances_currentFirst = state.selectedDatabase |
|||
? [ |
|||
state.appInstances.find(i => i.id === state.selectedDatabase.id), |
|||
...state.appInstances.filter(i => i.id !== state.selectedDatabase.id), |
|||
] |
|||
: state.appInstances |
|||
|
|||
for (let instance of instances_currentFirst) { |
|||
await api.post( |
|||
`/_builder/instance/${state.appname}/${instance.id}/api/upgradeData`, |
|||
{ newHierarchy: state.hierarchy, accessLevels: state.accessLevels } |
|||
) |
|||
} |
|||
} |
|||
|
|||
export const newRecord = (store, useRoot) => () => { |
|||
store.update(state => { |
|||
state.currentNodeIsNew = true |
|||
const shadowHierarchy = createShadowHierarchy(state.hierarchy) |
|||
const parent = useRoot |
|||
? shadowHierarchy |
|||
: getNode(shadowHierarchy, state.currentNode.nodeId) |
|||
state.errors = [] |
|||
state.currentNode = templateApi(shadowHierarchy).getNewRecordTemplate( |
|||
parent, |
|||
"", |
|||
true |
|||
) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const selectExistingNode = store => nodeId => { |
|||
store.update(state => { |
|||
state.currentNode = getNode(state.hierarchy, nodeId) |
|||
state.currentNodeIsNew = false |
|||
state.errors = [] |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const newIndex = (store, useRoot) => () => { |
|||
store.update(state => { |
|||
state.shadowHierarchy = createShadowHierarchy(state.hierarchy) |
|||
state.currentNodeIsNew = true |
|||
state.errors = [] |
|||
const parent = useRoot |
|||
? state.shadowHierarchy |
|||
: getNode(state.shadowHierarchy, state.currentNode.nodeId) |
|||
|
|||
state.currentNode = templateApi(state.shadowHierarchy).getNewIndexTemplate( |
|||
parent |
|||
) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const saveCurrentNode = store => () => { |
|||
store.update(state => { |
|||
const errors = validate.node(state.currentNode) |
|||
state.errors = errors |
|||
if (errors.length > 0) { |
|||
return state |
|||
} |
|||
const parentNode = getNode( |
|||
state.hierarchy, |
|||
state.currentNode.parent().nodeId |
|||
) |
|||
|
|||
const existingNode = getNode(state.hierarchy, state.currentNode.nodeId) |
|||
|
|||
let index = parentNode.children.length |
|||
if (existingNode) { |
|||
// remove existing
|
|||
index = existingNode.parent().children.indexOf(existingNode) |
|||
if (isIndex(existingNode)) { |
|||
parentNode.indexes = parentNode.indexes.filter( |
|||
node => node.nodeId !== existingNode.nodeId |
|||
) |
|||
} else { |
|||
parentNode.children = parentNode.children.filter( |
|||
node => node.nodeId !== existingNode.nodeId |
|||
) |
|||
} |
|||
} |
|||
|
|||
// should add node into existing hierarchy
|
|||
const cloned = cloneDeep(state.currentNode) |
|||
templateApi(state.hierarchy).constructNode(parentNode, cloned) |
|||
|
|||
if (isIndex(existingNode)) { |
|||
parentNode.children = sortBy("name", parentNode.children) |
|||
} else { |
|||
parentNode.indexes = sortBy("name", parentNode.indexes) |
|||
} |
|||
|
|||
if (!existingNode && state.currentNode.type === "record") { |
|||
const defaultIndex = templateApi(state.hierarchy).getNewIndexTemplate( |
|||
cloned.parent() |
|||
) |
|||
defaultIndex.name = `all_${cloned.name}s` |
|||
defaultIndex.allowedRecordNodeIds = [cloned.nodeId] |
|||
} |
|||
|
|||
state.currentNodeIsNew = false |
|||
|
|||
saveBackend(state) |
|||
|
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const deleteCurrentNode = store => () => { |
|||
store.update(state => { |
|||
const nodeToDelete = getNode(state.hierarchy, state.currentNode.nodeId) |
|||
state.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent()) |
|||
? state.hierarchy.children.find(node => node !== state.currentNode) |
|||
: nodeToDelete.parent() |
|||
|
|||
const isRecord = hierarchyFunctions.isRecord(nodeToDelete) |
|||
|
|||
const check = isRecord |
|||
? canDeleteRecord(nodeToDelete) |
|||
: canDeleteIndex(nodeToDelete) |
|||
|
|||
if (!check.canDelete) { |
|||
state.errors = check.errors.map(e => ({ error: e })) |
|||
return state |
|||
} |
|||
|
|||
const recordOrIndexKey = isRecord ? "children" : "indexes" |
|||
|
|||
// remove the selected record or index
|
|||
const newCollection = remove( |
|||
node => node.nodeId === nodeToDelete.nodeId, |
|||
nodeToDelete.parent()[recordOrIndexKey] |
|||
) |
|||
|
|||
nodeToDelete.parent()[recordOrIndexKey] = newCollection |
|||
|
|||
state.errors = [] |
|||
saveBackend(state) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const saveField = store => field => { |
|||
store.update(state => { |
|||
state.currentNode.fields = state.currentNode.fields.filter( |
|||
f => f.id !== field.id |
|||
) |
|||
|
|||
templateApi(state.hierarchy).addField(state.currentNode, field) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const deleteField = store => field => { |
|||
store.update(state => { |
|||
state.currentNode.fields = state.currentNode.fields.filter( |
|||
f => f.name !== field.name |
|||
) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
const incrementAccessLevelsVersion = state => { |
|||
state.accessLevels.version = state.accessLevels.version |
|||
? state.accessLevels.version + 1 |
|||
: 1 |
|||
return state |
|||
} |
|||
|
|||
export const saveLevel = store => (newLevel, isNew, oldLevel = null) => { |
|||
store.update(state => { |
|||
const levels = state.accessLevels.levels |
|||
|
|||
const existingLevel = isNew |
|||
? null |
|||
: find(a => a.name === oldLevel.name)(levels) |
|||
|
|||
if (existingLevel) { |
|||
state.accessLevels.levels = levels.map(level => |
|||
level === existingLevel ? newLevel : level |
|||
) |
|||
} else { |
|||
state.accessLevels.levels.push(newLevel) |
|||
} |
|||
|
|||
incrementAccessLevelsVersion(state) |
|||
|
|||
saveBackend(state) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const deleteLevel = store => level => { |
|||
store.update(state => { |
|||
state.accessLevels.levels = state.accessLevels.levels.filter( |
|||
t => t.name !== level.name |
|||
) |
|||
incrementAccessLevelsVersion(s) |
|||
saveBackend(state) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const saveAction = store => (newAction, isNew, oldAction = null) => { |
|||
store.update(s => { |
|||
const existingAction = isNew |
|||
? null |
|||
: find(a => a.name === oldAction.name)(s.actions) |
|||
|
|||
if (existingAction) { |
|||
s.actions = s.actions.map(action => |
|||
action === existingAction ? newAction : action |
|||
) |
|||
} else { |
|||
s.actions.push(newAction) |
|||
} |
|||
saveBackend(s) |
|||
return s |
|||
}) |
|||
} |
|||
|
|||
export const deleteAction = store => action => { |
|||
store.update(state => { |
|||
state.actions = state.actions.filter(a => a.name !== action.name) |
|||
saveBackend(state) |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
export const saveTrigger = store => (newTrigger, isNew, oldTrigger = null) => { |
|||
store.update(s => { |
|||
const existingTrigger = isNew |
|||
? null |
|||
: s.triggers.find(a => a.name === oldTrigger.name) |
|||
|
|||
if (existingTrigger) { |
|||
s.triggers = s.triggers.map(a => (a === existingTrigger ? newTrigger : a)) |
|||
} else { |
|||
s.triggers.push(newTrigger) |
|||
} |
|||
saveBackend(s) |
|||
return s |
|||
}) |
|||
} |
|||
|
|||
export const deleteTrigger = store => trigger => { |
|||
store.update(s => { |
|||
s.triggers = s.triggers.filter(t => t.name !== trigger.name) |
|||
return s |
|||
}) |
|||
} |
|||
|
Before Width: | Height: | Size: 349 B After Width: | Height: | Size: 362 B |
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 263 B |
@ -1,70 +0,0 @@ |
|||
<script> |
|||
import Button from "../common/Button.svelte" |
|||
import ActionButton from "../common/ActionButton.svelte" |
|||
import ButtonGroup from "../common/ButtonGroup.svelte" |
|||
import { store } from "../builderStore" |
|||
import Modal from "../common/Modal.svelte" |
|||
import ErrorsBox from "../common/ErrorsBox.svelte" |
|||
|
|||
export let left |
|||
let confirmDelete = false |
|||
const openConfirmDelete = () => { |
|||
confirmDelete = true |
|||
} |
|||
|
|||
const deleteCurrentNode = () => { |
|||
confirmDelete = false |
|||
store.deleteCurrentNode() |
|||
} |
|||
</script> |
|||
|
|||
<div class="root" style="left: {left}"> |
|||
<ButtonGroup> |
|||
<ActionButton |
|||
color="secondary" |
|||
grouped |
|||
on:click={store.saveCurrentNode}> |
|||
{#if $store.currentNodeIsNew}Create{:else}Update{/if} |
|||
</ActionButton> |
|||
|
|||
{#if !$store.currentNodeIsNew} |
|||
<ActionButton alert grouped on:click={openConfirmDelete}> |
|||
Delete |
|||
</ActionButton> |
|||
{/if} |
|||
</ButtonGroup> |
|||
|
|||
{#if !!$store.errors && $store.errors.length > 0} |
|||
<div style="width: 500px"> |
|||
<ErrorsBox errors={$store.errors} /> |
|||
</div> |
|||
{/if} |
|||
|
|||
<Modal onClosed={() => (confirmDelete = false)} bind:isOpen={confirmDelete}> |
|||
<span>Are you sure you want to delete {$store.currentNode.name}?</span> |
|||
<div class="uk-modal-footer uk-text-right"> |
|||
<ButtonGroup> |
|||
<ActionButton alert on:click={deleteCurrentNode}>Yes</ActionButton> |
|||
<ActionButton primary on:click={() => (confirmDelete = false)}> |
|||
No |
|||
</ActionButton> |
|||
</ButtonGroup> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
padding: 1.5rem; |
|||
width: 100%; |
|||
align-items: right; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.actions-modal-body { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -1,42 +0,0 @@ |
|||
<script> |
|||
import { store } from "../builderStore" |
|||
import { cloneDeep } from "lodash/fp" |
|||
export let level = 0 |
|||
export let node |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<div |
|||
class="title" |
|||
on:click={() => store.selectExistingNode(node.nodeId)} |
|||
style="padding-left: {20 + level * 20}px"> |
|||
{node.name} |
|||
</div> |
|||
{#if node.children} |
|||
{#each node.children as child} |
|||
<svelte:self node={child} level={level + 1} /> |
|||
{/each} |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
display: block; |
|||
font-size: 0.9rem; |
|||
width: 100%; |
|||
cursor: pointer; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.title { |
|||
font: var(--fontblack); |
|||
padding-top: 10px; |
|||
padding-right: 5px; |
|||
padding-bottom: 10px; |
|||
color: var(--secondary100); |
|||
} |
|||
|
|||
.title:hover { |
|||
background-color: var(--secondary10); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,203 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { store, backendUiStore } from "../../builderStore" |
|||
import { |
|||
tap, |
|||
get, |
|||
find, |
|||
last, |
|||
compose, |
|||
flatten, |
|||
map, |
|||
remove, |
|||
keys, |
|||
} from "lodash/fp" |
|||
import Select from "../../common/Select.svelte" |
|||
import { getIndexSchema } from "../../common/core" |
|||
import ActionButton from "../../common/ActionButton.svelte" |
|||
import TablePagination from "./TablePagination.svelte" |
|||
import { DeleteRecordModal } from "./modals" |
|||
import * as api from "./api" |
|||
|
|||
export let selectRecord |
|||
|
|||
const ITEMS_PER_PAGE = 10 |
|||
// Internal headers we want to hide from the user |
|||
const INTERNAL_HEADERS = ["key", "sortKey", "type", "id", "isNew"] |
|||
|
|||
let modalOpen = false |
|||
let data = [] |
|||
let headers = [] |
|||
let views = [] |
|||
let currentPage = 0 |
|||
|
|||
$: views = $backendUiStore.selectedRecord |
|||
? childViewsForRecord($store.hierarchy) |
|||
: $store.hierarchy.indexes |
|||
|
|||
$: currentAppInfo = { |
|||
appname: $store.appname, |
|||
instanceId: $backendUiStore.selectedDatabase.id, |
|||
} |
|||
|
|||
$: fetchRecordsForView( |
|||
$backendUiStore.selectedView, |
|||
$backendUiStore.selectedDatabase |
|||
).then(records => { |
|||
data = records || [] |
|||
headers = hideInternalHeaders($backendUiStore.selectedView) |
|||
}) |
|||
|
|||
$: paginatedData = data.slice( |
|||
currentPage * ITEMS_PER_PAGE, |
|||
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE |
|||
) |
|||
|
|||
const getSchema = getIndexSchema($store.hierarchy) |
|||
|
|||
const childViewsForRecord = compose(flatten, map("indexes"), get("children")) |
|||
|
|||
const hideInternalHeaders = compose( |
|||
remove(headerName => INTERNAL_HEADERS.includes(headerName)), |
|||
map(get("name")), |
|||
getSchema |
|||
) |
|||
|
|||
async function fetchRecordsForView(view, instance) { |
|||
if (!view || !view.name) return |
|||
|
|||
const viewName = $backendUiStore.selectedRecord |
|||
? `${$backendUiStore.selectedRecord.key}/${view.name}` |
|||
: view.name |
|||
|
|||
return await api.fetchDataForView(viewName, { |
|||
appname: $store.appname, |
|||
instanceId: instance.id, |
|||
}) |
|||
} |
|||
|
|||
function drillIntoRecord(record) { |
|||
backendUiStore.update(state => { |
|||
state.selectedRecord = record |
|||
state.breadcrumbs = [state.selectedDatabase.name, record.id] |
|||
state.selectedView = childViewsForRecord($store.hierarchy)[0] |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
onMount(() => { |
|||
if (views.length) { |
|||
backendUiStore.actions.views.select(views[0]) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<section> |
|||
<div class="table-controls"> |
|||
<h4 class="budibase__title--3">{last($backendUiStore.breadcrumbs)}</h4> |
|||
<Select icon="ri-eye-line" bind:value={$backendUiStore.selectedView}> |
|||
{#each views as view} |
|||
<option value={view}>{view.name}</option> |
|||
{/each} |
|||
</Select> |
|||
</div> |
|||
<table class="uk-table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Edit</th> |
|||
{#each headers as header} |
|||
<th>{header}</th> |
|||
{/each} |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{#if paginatedData.length === 0} |
|||
<div class="no-data">No Data.</div> |
|||
{/if} |
|||
{#each paginatedData as row} |
|||
<tr class="hoverable"> |
|||
<td> |
|||
<div class="uk-inline"> |
|||
<i class="ri-more-line" /> |
|||
<div uk-dropdown="mode: click"> |
|||
<ul class="uk-nav uk-dropdown-nav"> |
|||
<li> |
|||
<div on:click={() => drillIntoRecord(row)}>View</div> |
|||
</li> |
|||
<li |
|||
on:click={() => { |
|||
selectRecord(row) |
|||
backendUiStore.actions.modals.show('RECORD') |
|||
}}> |
|||
<div>Edit</div> |
|||
</li> |
|||
<li> |
|||
<div |
|||
on:click={() => { |
|||
selectRecord(row) |
|||
backendUiStore.actions.modals.show('DELETE_RECORD') |
|||
}}> |
|||
Delete |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</td> |
|||
{#each headers as header} |
|||
<td>{row[header]}</td> |
|||
{/each} |
|||
</tr> |
|||
{/each} |
|||
</tbody> |
|||
</table> |
|||
<TablePagination |
|||
{data} |
|||
bind:currentPage |
|||
pageItemCount={data.length} |
|||
{ITEMS_PER_PAGE} /> |
|||
</section> |
|||
|
|||
<style> |
|||
table { |
|||
border: 1px solid #ccc; |
|||
background: #fff; |
|||
border-radius: 3px; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
thead { |
|||
background: var(--background-button); |
|||
} |
|||
|
|||
thead th { |
|||
color: var(--button-text); |
|||
text-transform: capitalize; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
tbody tr { |
|||
border-bottom: 1px solid #ccc; |
|||
transition: 0.3s background-color; |
|||
color: var(--darkslate); |
|||
} |
|||
|
|||
tbody tr:hover { |
|||
background: #fafafa; |
|||
} |
|||
|
|||
.table-controls { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.ri-more-line:hover, |
|||
.uk-dropdown-nav li:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.no-data { |
|||
padding: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<script> |
|||
import { backendUiStore } from "../../builderStore" |
|||
|
|||
export let data |
|||
export let currentPage |
|||
export let pageItemCount |
|||
export let ITEMS_PER_PAGE |
|||
|
|||
let numPages = 0 |
|||
|
|||
$: numPages = Math.ceil(data.length / ITEMS_PER_PAGE) |
|||
|
|||
const next = () => { |
|||
if (currentPage + 1 === numPages) return |
|||
currentPage = currentPage + 1 |
|||
} |
|||
|
|||
const previous = () => { |
|||
if (currentPage == 0) return |
|||
currentPage = currentPage - 1 |
|||
} |
|||
|
|||
const selectPage = page => { |
|||
currentPage = page |
|||
} |
|||
</script> |
|||
|
|||
<div class="pagination"> |
|||
<div class="pagination__buttons"> |
|||
<button on:click={previous}>Previous</button> |
|||
<button on:click={next}>Next</button> |
|||
{#each Array(numPages) as _, idx} |
|||
<button |
|||
class:selected={idx === currentPage} |
|||
on:click={() => selectPage(idx)}> |
|||
{idx + 1} |
|||
</button> |
|||
{/each} |
|||
</div> |
|||
<p>Showing {pageItemCount} of {data.length} entries</p> |
|||
</div> |
|||
|
|||
<style> |
|||
.pagination { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.pagination__buttons { |
|||
display: flex; |
|||
} |
|||
|
|||
.pagination__buttons button { |
|||
display: inline-block; |
|||
padding: 10px; |
|||
margin: 0; |
|||
background: #fff; |
|||
border: 1px solid #ccc; |
|||
text-transform: capitalize; |
|||
border-radius: 3px; |
|||
font-family: Roboto; |
|||
min-width: 20px; |
|||
transition: 0.3s background-color; |
|||
} |
|||
|
|||
.pagination__buttons button:hover { |
|||
cursor: pointer; |
|||
background-color: #fafafa; |
|||
} |
|||
|
|||
.selected { |
|||
color: var(--button-text); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
import api from "../../builderStore/api" |
|||
import { getNewRecord, getNewInstance } from "../../common/core" |
|||
|
|||
export async function createUser(password, user, { appname, instanceId }) { |
|||
const CREATE_USER_URL = `/_builder/instance/${appname}/${instanceId}/api/createUser` |
|||
const response = await api.post(CREATE_USER_URL, { user, password }) |
|||
return await response.json() |
|||
} |
|||
|
|||
export async function createDatabase(appname, instanceName) { |
|||
const CREATE_DATABASE_URL = `/_builder/instance/_master/0/api/record/` |
|||
const database = getNewInstance(appname, instanceName) |
|||
const response = await api.post(CREATE_DATABASE_URL, database) |
|||
return await response.json() |
|||
} |
|||
|
|||
export async function deleteRecord(record, { appname, instanceId }) { |
|||
const DELETE_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record${record.key}` |
|||
const response = await api.delete(DELETE_RECORDS_URL) |
|||
return response |
|||
} |
|||
|
|||
export async function loadRecord(key, { appname, instanceId }) { |
|||
const LOAD_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record${key}` |
|||
const response = await api.get(LOAD_RECORDS_URL) |
|||
return await response.json() |
|||
} |
|||
|
|||
export async function saveRecord(record, { appname, instanceId }) { |
|||
let recordBase = { ...record } |
|||
|
|||
// brand new record
|
|||
// car-model-id or name/specific-car-id/manus
|
|||
if (record.collectionName) { |
|||
const collectionKey = `/${record.collectionName}` |
|||
recordBase = getNewRecord(recordBase, collectionKey) |
|||
recordBase = overwritePresentProperties(recordBase, record) |
|||
} |
|||
|
|||
const SAVE_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record/` |
|||
const response = await api.post(SAVE_RECORDS_URL, recordBase) |
|||
return await response.json() |
|||
} |
|||
|
|||
export async function fetchDataForView(viewName, { appname, instanceId }) { |
|||
const FETCH_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/listRecords/${viewName}` |
|||
|
|||
const response = await api.get(FETCH_RECORDS_URL) |
|||
return await response.json() |
|||
} |
|||
|
|||
function overwritePresentProperties(baseObj, overwrites) { |
|||
const base = { ...baseObj } |
|||
|
|||
for (let key in base) { |
|||
if (overwrites[key]) base[key] = overwrites[key] |
|||
} |
|||
return base |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export { default } from "./ModelDataTable.svelte" |
|||
@ -0,0 +1,38 @@ |
|||
<script> |
|||
import Modal from "../../../common/Modal.svelte" |
|||
import { store } from "../../../builderStore" |
|||
import ActionButton from "../../../common/ActionButton.svelte" |
|||
import * as api from "../api" |
|||
|
|||
export let onClosed |
|||
|
|||
let databaseName |
|||
|
|||
async function createDatabase() { |
|||
const response = await api.createDatabase($store.appId, databaseName) |
|||
store.createDatabaseForApp(response) |
|||
onClosed() |
|||
} |
|||
</script> |
|||
|
|||
<section> |
|||
Database Name |
|||
<input class="uk-input" type="text" bind:value={databaseName} /> |
|||
<footer> |
|||
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> |
|||
<ActionButton disabled={!databaseName} on:click={createDatabase}> |
|||
Save |
|||
</ActionButton> |
|||
</footer> |
|||
</section> |
|||
|
|||
<style> |
|||
footer { |
|||
position: absolute; |
|||
padding: 20px; |
|||
width: 100%; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #fafafa; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
<script> |
|||
import Modal from "../../../common/Modal.svelte" |
|||
import ActionButton from "../../../common/ActionButton.svelte" |
|||
import { backendUiStore } from "../../../builderStore" |
|||
import ModelView from "../../ModelView.svelte" |
|||
import * as api from "../api" |
|||
</script> |
|||
|
|||
<section> |
|||
<ModelView /> |
|||
</section> |
|||
@ -0,0 +1,107 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { store, backendUiStore } from "../../../builderStore" |
|||
import { compose, map, get, flatten } from "lodash/fp" |
|||
import Modal from "../../../common/Modal.svelte" |
|||
import ActionButton from "../../../common/ActionButton.svelte" |
|||
import Select from "../../../common/Select.svelte" |
|||
import { |
|||
getNewRecord, |
|||
joinKey, |
|||
getExactNodeForKey, |
|||
} from "../../../common/core" |
|||
import RecordFieldControl from "./RecordFieldControl.svelte" |
|||
import * as api from "../api" |
|||
import ErrorsBox from "../../../common/ErrorsBox.svelte" |
|||
|
|||
export let record |
|||
export let onClosed |
|||
|
|||
let errors = [] |
|||
|
|||
const childModelsForModel = compose(flatten, map("children"), get("children")) |
|||
|
|||
$: currentAppInfo = { |
|||
appname: $store.appname, |
|||
instanceId: $backendUiStore.selectedDatabase.id, |
|||
} |
|||
$: models = $backendUiStore.selectedRecord |
|||
? childModelsForModel($store.hierarchy) |
|||
: $store.hierarchy.children |
|||
|
|||
let selectedModel |
|||
$: { |
|||
if (record) { |
|||
selectedModel = getExactNodeForKey($store.hierarchy)(record.key) |
|||
} else { |
|||
selectedModel = selectedModel || models[0] |
|||
} |
|||
} |
|||
|
|||
$: modelFields = selectedModel ? selectedModel.fields : [] |
|||
|
|||
function getCurrentCollectionKey(selectedRecord) { |
|||
return selectedRecord |
|||
? joinKey(selectedRecord.key, selectedModel.collectionName) |
|||
: joinKey(selectedModel.collectionName) |
|||
} |
|||
|
|||
$: editingRecord = |
|||
record || |
|||
editingRecord || |
|||
getNewRecord( |
|||
selectedModel, |
|||
getCurrentCollectionKey($backendUiStore.selectedRecord) |
|||
) |
|||
|
|||
function closed() { |
|||
editingRecord = null |
|||
onClosed() |
|||
} |
|||
|
|||
async function saveRecord() { |
|||
const recordResponse = await api.saveRecord(editingRecord, currentAppInfo) |
|||
backendUiStore.update(state => { |
|||
state.selectedView = state.selectedView |
|||
return state |
|||
}) |
|||
closed() |
|||
} |
|||
</script> |
|||
|
|||
<div> |
|||
<h4 class="budibase__title--4">Create / Edit Record</h4> |
|||
<ErrorsBox {errors} /> |
|||
<div class="actions"> |
|||
<form class="uk-form-stacked"> |
|||
{#if !record} |
|||
<div class="uk-margin"> |
|||
<label class="uk-form-label" for="form-stacked-text">Model</label> |
|||
<Select bind:value={selectedModel}> |
|||
{#each models as model} |
|||
<option value={model}>{model.name}</option> |
|||
{/each} |
|||
</Select> |
|||
</div> |
|||
{/if} |
|||
{#each modelFields || [] as field} |
|||
<RecordFieldControl record={editingRecord} {field} {errors} /> |
|||
{/each} |
|||
</form> |
|||
<footer> |
|||
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> |
|||
<ActionButton on:click={saveRecord}>Save</ActionButton> |
|||
</footer> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
footer { |
|||
position: absolute; |
|||
padding: 20px; |
|||
width: 100%; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #fafafa; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
<script> |
|||
import IndexView from "../../IndexView.svelte" |
|||
import * as api from "../api" |
|||
</script> |
|||
|
|||
<section> |
|||
<IndexView /> |
|||
</section> |
|||
@ -0,0 +1,64 @@ |
|||
<script> |
|||
import Modal from "../../../common/Modal.svelte" |
|||
import { store, backendUiStore } from "../../../builderStore" |
|||
import ActionButton from "../../../common/ActionButton.svelte" |
|||
import * as api from "../api" |
|||
|
|||
export let onClosed |
|||
|
|||
let username |
|||
let password |
|||
let accessLevels = [] |
|||
|
|||
$: valid = username && password && accessLevels.length |
|||
$: currentAppInfo = { |
|||
appname: $store.appname, |
|||
instanceId: $backendUiStore.selectedDatabase.id, |
|||
} |
|||
|
|||
async function createUser() { |
|||
const user = { |
|||
name: username, |
|||
accessLevels, |
|||
enabled: true, |
|||
temporaryAccessId: "", |
|||
} |
|||
const response = await api.createUser(password, user, currentAppInfo) |
|||
backendUiStore.actions.users.save(user) |
|||
onClosed() |
|||
} |
|||
</script> |
|||
|
|||
<form class="uk-form-stacked"> |
|||
<label class="uk-form-label" for="form-stacked-text">Username</label> |
|||
<input class="uk-input" type="text" bind:value={username} /> |
|||
<label class="uk-form-label" for="form-stacked-text">Password</label> |
|||
<input class="uk-input" type="password" bind:value={password} /> |
|||
<label class="uk-form-label" for="form-stacked-text">Access Levels</label> |
|||
<select multiple bind:value={accessLevels}> |
|||
{#each $store.accessLevels.levels as level} |
|||
<option value={level.name}>{level.name}</option> |
|||
{/each} |
|||
</select> |
|||
<footer> |
|||
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> |
|||
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton> |
|||
</footer> |
|||
</form> |
|||
|
|||
<style> |
|||
footer { |
|||
position: absolute; |
|||
padding: 20px; |
|||
width: 100%; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #fafafa; |
|||
} |
|||
select { |
|||
width: 100%; |
|||
} |
|||
option { |
|||
padding: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<script> |
|||
import Modal from "../../../common/Modal.svelte" |
|||
import ActionButton from "../../../common/ActionButton.svelte" |
|||
import { store, backendUiStore } from "../../../builderStore" |
|||
import * as api from "../api" |
|||
|
|||
export let record |
|||
|
|||
$: currentAppInfo = { |
|||
appname: $store.appname, |
|||
instanceId: $backendUiStore.selectedDatabase.id, |
|||
} |
|||
|
|||
function onClosed() { |
|||
backendUiStore.actions.modals.hide() |
|||
} |
|||
</script> |
|||
|
|||
<section> |
|||
<heading> |
|||
<i class="ri-information-line alert" /> |
|||
<h4 class="budibase__title--4">Delete Record</h4> |
|||
</heading> |
|||
<p> |
|||
Are you sure you want to delete this record? All of your data will be |
|||
permanently removed. This action cannot be undone. |
|||
</p> |
|||
<div class="modal-actions"> |
|||
<ActionButton on:click={onClosed}>Cancel</ActionButton> |
|||
<ActionButton |
|||
alert |
|||
on:click={async () => { |
|||
await api.deleteRecord(record, currentAppInfo) |
|||
backendUiStore.actions.records.delete(record) |
|||
onClosed() |
|||
}}> |
|||
Delete |
|||
</ActionButton> |
|||
</div> |
|||
</section> |
|||
|
|||
<style> |
|||
.alert { |
|||
color: rgba(255, 0, 31, 1); |
|||
background: #fafafa; |
|||
padding: 5px; |
|||
} |
|||
|
|||
.modal-actions { |
|||
padding: 10px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #fafafa; |
|||
border-top: 1px solid #ccc; |
|||
width: 100%; |
|||
} |
|||
|
|||
heading { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
h4 { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<script> |
|||
import Select from "../../../common/Select.svelte" |
|||
|
|||
export let record |
|||
export let field |
|||
export let errors |
|||
|
|||
$: isDropdown = |
|||
field.type === "string" && |
|||
field.typeOptions.values && |
|||
field.typeOptions.values.length > 0 |
|||
|
|||
$: isNumber = field.type === "number" |
|||
|
|||
$: isText = field.type === "string" && !isDropdown |
|||
|
|||
$: isCheckbox = field.type === "bool" |
|||
|
|||
$: isError = errors && errors.some(e => e.field && e.field === field.name) |
|||
|
|||
$: isDatetime = field.type === "datetime" |
|||
</script> |
|||
|
|||
<div class="uk-margin"> |
|||
{#if !isCheckbox} |
|||
<label class="uk-form-label" for={field.name}>{field.label}</label> |
|||
{/if} |
|||
<div class="uk-form-controls"> |
|||
{#if isDropdown} |
|||
<Select bind:value={record[field.name]}> |
|||
<option value="" /> |
|||
{#each field.typeOptions.values as val} |
|||
<option value={val}>{val}</option> |
|||
{/each} |
|||
</Select> |
|||
{:else if isText} |
|||
<input |
|||
class="uk-input" |
|||
class:uk-form-danger={isError} |
|||
id={field.name} |
|||
type="text" |
|||
bind:value={record[field.name]} /> |
|||
{:else if isNumber} |
|||
<input |
|||
class="uk-input" |
|||
class:uk-form-danger={isError} |
|||
type="number" |
|||
bind:value={record[field.name]} /> |
|||
{:else if isDatetime} |
|||
<input |
|||
class="uk-input" |
|||
class:uk-form-danger={isError} |
|||
type="date" |
|||
bind:value={record[field.name]} /> |
|||
{:else if isCheckbox} |
|||
<label> |
|||
<input |
|||
class="uk-checkbox" |
|||
class:uk-form-danger={isError} |
|||
type="checkbox" |
|||
bind:checked={record[field.name]} /> |
|||
{field.label} |
|||
</label> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,6 @@ |
|||
export { default as DeleteRecordModal } from "./DeleteRecord.svelte" |
|||
export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte" |
|||
export { default as CreateEditModelModal } from "./CreateEditModel.svelte" |
|||
export { default as CreateEditViewModal } from "./CreateEditView.svelte" |
|||
export { default as CreateDatabaseModal } from "./CreateDatabase.svelte" |
|||
export { default as CreateUserModal } from "./CreateUser.svelte" |
|||
@ -0,0 +1,238 @@ |
|||
<script> |
|||
import { tick } from "svelte" |
|||
import Textbox from "../common/Textbox.svelte" |
|||
import Button from "../common/Button.svelte" |
|||
import Select from "../common/Select.svelte" |
|||
import ActionButton from "../common/ActionButton.svelte" |
|||
import getIcon from "../common/icon" |
|||
import FieldView from "./FieldView.svelte" |
|||
import Modal from "../common/Modal.svelte" |
|||
import { |
|||
get, |
|||
compose, |
|||
map, |
|||
join, |
|||
filter, |
|||
some, |
|||
find, |
|||
keys, |
|||
isDate, |
|||
} from "lodash/fp" |
|||
import { store, backendUiStore } from "../builderStore" |
|||
import { common, hierarchy } from "../../../core/src" |
|||
import { getNode } from "../common/core" |
|||
import { templateApi, pipe, validate } from "../common/core" |
|||
import ErrorsBox from "../common/ErrorsBox.svelte" |
|||
|
|||
let record |
|||
let getIndexAllowedRecords |
|||
let editingField = false |
|||
let fieldToEdit |
|||
let isNewField = false |
|||
let newField |
|||
let editField |
|||
let deleteField |
|||
let onFinishedFieldEdit |
|||
let editIndex |
|||
|
|||
$: models = $store.hierarchy.children |
|||
$: parent = record && record.parent() |
|||
$: isChildModel = parent && parent.name !== "root" |
|||
$: modelExistsInHierarchy = |
|||
$store.currentNode && getNode($store.hierarchy, $store.currentNode.nodeId) |
|||
|
|||
store.subscribe($store => { |
|||
record = $store.currentNode |
|||
const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy) |
|||
|
|||
getIndexAllowedRecords = compose( |
|||
join(", "), |
|||
map(id => flattened.find(n => n.nodeId === id).name), |
|||
filter(id => flattened.some(n => n.nodeId === id)), |
|||
get("allowedRecordNodeIds") |
|||
) |
|||
|
|||
newField = () => { |
|||
isNewField = true |
|||
fieldToEdit = templateApi($store.hierarchy).getNewField("string") |
|||
editingField = true |
|||
} |
|||
|
|||
onFinishedFieldEdit = field => { |
|||
if (field) { |
|||
store.saveField(field) |
|||
} |
|||
editingField = false |
|||
} |
|||
|
|||
editField = field => { |
|||
isNewField = false |
|||
fieldToEdit = field |
|||
editingField = true |
|||
} |
|||
|
|||
deleteField = field => { |
|||
store.deleteField(field) |
|||
} |
|||
|
|||
editIndex = index => { |
|||
store.selectExistingNode(index.nodeId) |
|||
} |
|||
}) |
|||
|
|||
let getTypeOptionsValueText = value => { |
|||
if ( |
|||
value === Number.MAX_SAFE_INTEGER || |
|||
value === Number.MIN_SAFE_INTEGER || |
|||
new Date(value).getTime() === new Date(8640000000000000).getTime() || |
|||
new Date(value).getTime() === new Date(-8640000000000000).getTime() |
|||
) |
|||
return "(any)" |
|||
|
|||
if (value === null) return "(not set)" |
|||
return value |
|||
} |
|||
|
|||
const nameChanged = ev => { |
|||
const pluralName = n => `${n}s` |
|||
if (record.collectionName === "") { |
|||
record.collectionName = pluralName(ev.target.value) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<heading> |
|||
{#if !editingField} |
|||
<i class="ri-list-settings-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit Model</h3> |
|||
{:else} |
|||
<i class="ri-file-list-line button--toggled" /> |
|||
<h3 class="budibase__title--3">Create / Edit Field</h3> |
|||
{/if} |
|||
</heading> |
|||
{#if !editingField} |
|||
<h4 class="budibase__label--big">Settings</h4> |
|||
|
|||
{#if $store.errors && $store.errors.length > 0} |
|||
<ErrorsBox errors={$store.errors} /> |
|||
{/if} |
|||
|
|||
<form class="uk-form-stacked"> |
|||
|
|||
<Textbox label="Name" bind:text={record.name} on:change={nameChanged} /> |
|||
{#if isChildModel} |
|||
<div> |
|||
<label class="uk-form-label">Parent</label> |
|||
<div class="uk-form-controls parent-name">{parent.name}</div> |
|||
</div> |
|||
{/if} |
|||
</form> |
|||
|
|||
<div class="table-controls"> |
|||
<span class="budibase__label--big">Fields</span> |
|||
<h4 class="hoverable new-field" on:click={newField}>Add new field</h4> |
|||
</div> |
|||
|
|||
<table class="uk-table fields-table budibase__table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Edit</th> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Values</th> |
|||
<th /> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{#each record ? record.fields : [] as field} |
|||
<tr> |
|||
<td> |
|||
<i class="ri-more-line" on:click={() => editField(field)} /> |
|||
</td> |
|||
<td> |
|||
<div>{field.name}</div> |
|||
</td> |
|||
<td>{field.type}</td> |
|||
<td>{field.typeOptions.values || ""}</td> |
|||
<td> |
|||
<i |
|||
class="ri-delete-bin-6-line hoverable" |
|||
on:click={() => deleteField(field)} /> |
|||
</td> |
|||
</tr> |
|||
{/each} |
|||
</tbody> |
|||
</table> |
|||
<div class="uk-margin"> |
|||
<ActionButton color="secondary" on:click={store.saveCurrentNode}> |
|||
Save |
|||
</ActionButton> |
|||
{#if modelExistsInHierarchy} |
|||
<ActionButton color="primary" on:click={store.newChildRecord}> |
|||
Create Child Model on {record.name} |
|||
</ActionButton> |
|||
<ActionButton |
|||
color="primary" |
|||
on:click={async () => { |
|||
backendUiStore.actions.modals.show('VIEW') |
|||
await tick() |
|||
store.newChildIndex() |
|||
}}> |
|||
Create Child View on {record.name} |
|||
</ActionButton> |
|||
<ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton> |
|||
{/if} |
|||
</div> |
|||
{:else} |
|||
<FieldView |
|||
field={fieldToEdit} |
|||
onFinished={onFinishedFieldEdit} |
|||
allFields={record.fields} |
|||
store={$store} /> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
height: 100%; |
|||
} |
|||
|
|||
.new-field { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: var(--button-text); |
|||
} |
|||
|
|||
.fields-table { |
|||
margin: 1rem 1rem 0rem 0rem; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
tbody > tr:hover { |
|||
background-color: var(--primary10); |
|||
} |
|||
|
|||
.table-controls { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.ri-more-line:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
heading { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
h3 { |
|||
margin: 0 0 0 10px; |
|||
} |
|||
|
|||
.parent-name { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -1,301 +0,0 @@ |
|||
<script> |
|||
import Textbox from "../common/Textbox.svelte" |
|||
import Button from "../common/Button.svelte" |
|||
import getIcon from "../common/icon" |
|||
import FieldView from "./FieldView.svelte" |
|||
import Modal from "../common/Modal.svelte" |
|||
import { map, join, filter, some, find, keys, isDate } from "lodash/fp" |
|||
import { store } from "../builderStore" |
|||
import { common, hierarchy as h } from "../../../core/src" |
|||
import { templateApi, pipe, validate } from "../common/core" |
|||
|
|||
let record |
|||
let getIndexAllowedRecords |
|||
let editingField = false |
|||
let fieldToEdit |
|||
let isNewField = false |
|||
let newField |
|||
let editField |
|||
let deleteField |
|||
let onFinishedFieldEdit |
|||
let editIndex |
|||
|
|||
store.subscribe($store => { |
|||
record = $store.currentNode |
|||
const flattened = h.getFlattenedHierarchy($store.hierarchy) |
|||
getIndexAllowedRecords = index => |
|||
pipe(index.allowedRecordNodeIds, [ |
|||
filter(id => some(n => n.nodeId === id)(flattened)), |
|||
map(id => find(n => n.nodeId === id)(flattened).name), |
|||
join(", "), |
|||
]) |
|||
|
|||
newField = () => { |
|||
isNewField = true |
|||
fieldToEdit = templateApi($store.hierarchy).getNewField("string") |
|||
editingField = true |
|||
} |
|||
|
|||
onFinishedFieldEdit = field => { |
|||
if (field) { |
|||
store.saveField(field) |
|||
} |
|||
editingField = false |
|||
} |
|||
|
|||
editField = field => { |
|||
isNewField = false |
|||
fieldToEdit = field |
|||
editingField = true |
|||
} |
|||
|
|||
deleteField = field => { |
|||
store.deleteField(field) |
|||
} |
|||
|
|||
editIndex = index => { |
|||
store.selectExistingNode(index.nodeId) |
|||
} |
|||
}) |
|||
|
|||
let getTypeOptionsValueText = value => { |
|||
if ( |
|||
value === Number.MAX_SAFE_INTEGER || |
|||
value === Number.MIN_SAFE_INTEGER || |
|||
new Date(value).getTime() === new Date(8640000000000000).getTime() || |
|||
new Date(value).getTime() === new Date(-8640000000000000).getTime() |
|||
) |
|||
return "(any)" |
|||
|
|||
if (value === null) return "(not set)" |
|||
return value |
|||
} |
|||
|
|||
let getTypeOptions = typeOptions => |
|||
pipe(typeOptions, [ |
|||
keys, |
|||
map( |
|||
k => |
|||
`<span style="color:var(--slate)">${k}: </span>${getTypeOptionsValueText( |
|||
typeOptions[k] |
|||
)}` |
|||
), |
|||
join("<br>"), |
|||
]) |
|||
|
|||
const nameChanged = ev => { |
|||
const pluralName = n => `${n}s` |
|||
if (record.collectionName === "") { |
|||
record.collectionName = pluralName(ev.target.value) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
|
|||
<form class="uk-form-horizontal"> |
|||
<h3 class="budibase__title--3">Settings</h3> |
|||
|
|||
<Textbox label="Name:" bind:text={record.name} on:change={nameChanged} /> |
|||
{#if !record.isSingle} |
|||
<Textbox label="Collection Name:" bind:text={record.collectionName} /> |
|||
<Textbox |
|||
label="Estimated Record Count:" |
|||
bind:text={record.estimatedRecordCount} /> |
|||
{/if} |
|||
<div class="recordkey">{record.nodeKey()}</div> |
|||
|
|||
</form> |
|||
<h3 class="budibase__title--3"> |
|||
Fields |
|||
<span class="add-field-button" on:click={newField}> |
|||
{@html getIcon('plus')} |
|||
</span> |
|||
</h3> |
|||
|
|||
{#if record.fields.length > 0} |
|||
<table class="fields-table uk-table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Type</th> |
|||
<th>Options</th> |
|||
<th /> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{#each record.fields as field} |
|||
<tr> |
|||
<td> |
|||
<div class="field-label">{field.label}</div> |
|||
<div style="font-size: 0.8em; color: var(--slate)"> |
|||
{field.name} |
|||
</div> |
|||
</td> |
|||
<td>{field.type}</td> |
|||
<td> |
|||
{@html getTypeOptions(field.typeOptions)} |
|||
</td> |
|||
<td> |
|||
<span class="edit-button" on:click={() => editField(field)}> |
|||
{@html getIcon('edit')} |
|||
</span> |
|||
<span class="edit-button" on:click={() => deleteField(field)}> |
|||
{@html getIcon('trash')} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
{/each} |
|||
</tbody> |
|||
</table> |
|||
{:else}(no fields added){/if} |
|||
|
|||
{#if editingField} |
|||
<Modal |
|||
title="Manage Index Fields" |
|||
bind:isOpen={editingField} |
|||
onClosed={() => onFinishedFieldEdit(false)}> |
|||
<FieldView |
|||
field={fieldToEdit} |
|||
onFinished={onFinishedFieldEdit} |
|||
allFields={record.fields} |
|||
store={$store} /> |
|||
</Modal> |
|||
{/if} |
|||
|
|||
<h3 class="budibase__title--3">Indexes</h3> |
|||
|
|||
{#each record.indexes as index} |
|||
<div class="index-container"> |
|||
<div class="index-name"> |
|||
{index.name} |
|||
<span style="margin-left: 7px" on:click={() => editIndex(index)}> |
|||
{@html getIcon('edit')} |
|||
</span> |
|||
</div> |
|||
<div class="index-field-row"> |
|||
<span class="index-label">records indexed:</span> |
|||
<span>{getIndexAllowedRecords(index)}</span> |
|||
<span class="index-label" style="margin-left: 15px">type:</span> |
|||
<span>{index.indexType}</span> |
|||
</div> |
|||
<div class="index-field-row"> |
|||
<span class="index-label">map:</span> |
|||
<code class="index-mapfilter">{index.map}</code> |
|||
</div> |
|||
{#if index.filter} |
|||
<div class="index-field-row"> |
|||
<span class="index-label">filter:</span> |
|||
<code class="index-mapfilter">{index.filter}</code> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
{:else} |
|||
<div class="no-indexes">No indexes added.</div> |
|||
{/each} |
|||
|
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
height: 100%; |
|||
padding: 2rem; |
|||
} |
|||
|
|||
.recordkey { |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
color: var(--primary100); |
|||
} |
|||
|
|||
.fields-table { |
|||
margin: 1rem 1rem 0rem 0rem; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
.add-field-button { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.edit-button { |
|||
cursor: pointer; |
|||
color: var(--secondary25); |
|||
} |
|||
|
|||
.edit-button:hover { |
|||
cursor: pointer; |
|||
color: var(--secondary75); |
|||
} |
|||
|
|||
th { |
|||
text-align: left; |
|||
} |
|||
|
|||
td { |
|||
padding: 1rem 5rem 1rem 0rem; |
|||
margin: 0; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.field-label { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
thead > tr { |
|||
border-width: 0px 0px 1px 0px; |
|||
border-style: solid; |
|||
border-color: var(--secondary75); |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
tbody > tr { |
|||
border-width: 0px 0px 1px 0px; |
|||
border-style: solid; |
|||
border-color: var(--primary10); |
|||
} |
|||
|
|||
tbody > tr:hover { |
|||
background-color: var(--primary10); |
|||
} |
|||
|
|||
tbody > tr:hover .edit-button { |
|||
color: var(--secondary75); |
|||
} |
|||
|
|||
.index-container { |
|||
border-style: solid; |
|||
border-width: 0 0 1px 0; |
|||
border-color: var(--secondary25); |
|||
padding: 10px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.index-label { |
|||
color: var(--slate); |
|||
} |
|||
|
|||
.index-name { |
|||
font-weight: bold; |
|||
color: var(--primary100); |
|||
} |
|||
|
|||
.index-container code { |
|||
margin: 0; |
|||
display: inline; |
|||
background-color: var(--primary10); |
|||
color: var(--secondary100); |
|||
padding: 3px; |
|||
} |
|||
|
|||
.index-field-row { |
|||
margin: 1rem 0rem 0rem 0rem; |
|||
} |
|||
|
|||
.no-indexes { |
|||
margin: 1rem 0rem 0rem 0rem; |
|||
font-family: var(--fontnormal); |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<script> |
|||
import { tick } from "svelte" |
|||
import { store, backendUiStore } from "../builderStore" |
|||
import getIcon from "../common/icon" |
|||
import { CheckIcon } from "../common/Icons" |
|||
|
|||
$: instances = $store.appInstances |
|||
$: views = $store.hierarchy.indexes |
|||
|
|||
async function selectDatabase(database) { |
|||
backendUiStore.actions.navigate("DATABASE") |
|||
backendUiStore.actions.records.select(null) |
|||
backendUiStore.actions.views.select(views[0]) |
|||
backendUiStore.actions.database.select(database) |
|||
} |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<ul> |
|||
{#each $store.appInstances as database} |
|||
<li> |
|||
<span class="icon"> |
|||
{#if database.id === $backendUiStore.selectedDatabase.id} |
|||
<CheckIcon /> |
|||
{/if} |
|||
</span> |
|||
|
|||
<button |
|||
class:active={database.id === $backendUiStore.selectedDatabase.id} |
|||
on:click={() => selectDatabase(database)}> |
|||
{database.name} |
|||
</button> |
|||
</li> |
|||
{/each} |
|||
</ul> |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
padding-bottom: 10px; |
|||
font-size: 0.9rem; |
|||
color: var(--secondary50); |
|||
font-weight: bold; |
|||
position: relative; |
|||
padding-left: 1.8rem; |
|||
} |
|||
|
|||
ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
li { |
|||
margin: 0.5rem 0; |
|||
} |
|||
|
|||
button { |
|||
margin: 0 0 0 6px; |
|||
padding: 0; |
|||
border: none; |
|||
font-family: Roboto; |
|||
font-size: 0.8rem; |
|||
outline: none; |
|||
cursor: pointer; |
|||
background: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.active { |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
color: #333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<script> |
|||
import { store, backendUiStore } from "../builderStore" |
|||
import HierarchyRow from "./HierarchyRow.svelte" |
|||
import DropdownButton from "../common/DropdownButton.svelte" |
|||
import { hierarchy as hierarchyFunctions } from "../../../core/src" |
|||
import NavItem from "./NavItem.svelte" |
|||
import getIcon from "../common/icon" |
|||
|
|||
function newModel() { |
|||
if ($store.currentNode) { |
|||
store.newChildRecord() |
|||
} else { |
|||
store.newRootRecord() |
|||
} |
|||
backendUiStore.actions.modals.show("MODEL") |
|||
} |
|||
|
|||
function newView() { |
|||
store.newRootIndex() |
|||
backendUiStore.actions.modals.show("VIEW") |
|||
} |
|||
</script> |
|||
|
|||
<div class="items-root"> |
|||
<div class="hierarchy"> |
|||
<div class="components-list-container"> |
|||
<div class="nav-group-header"> |
|||
<div class="hierarchy-title">Schema</div> |
|||
<div class="uk-inline"> |
|||
<i class="ri-add-line hoverable" /> |
|||
<div uk-dropdown="mode: click;"> |
|||
<ul class="uk-nav uk-dropdown-nav"> |
|||
<li class="hoverable" on:click={newModel}>Model</li> |
|||
<li class="hoverable" on:click={newView}>View</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="hierarchy-items-container"> |
|||
{#each $store.hierarchy.children as record} |
|||
<HierarchyRow node={record} type="record" /> |
|||
{/each} |
|||
|
|||
{#each $store.hierarchy.indexes as index} |
|||
<HierarchyRow node={index} type="index" /> |
|||
{/each} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.items-root { |
|||
display: flex; |
|||
flex-direction: column; |
|||
max-height: 100%; |
|||
height: 100%; |
|||
background-color: var(--secondary5); |
|||
} |
|||
|
|||
.nav-group-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 2rem 1rem 1rem 1rem; |
|||
} |
|||
|
|||
.hierarchy-title { |
|||
align-items: center; |
|||
text-transform: uppercase; |
|||
font-size: 0.85em; |
|||
} |
|||
|
|||
.hierarchy { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.hierarchy-items-container { |
|||
flex: 1 1 auto; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { store, backendUiStore } from "../builderStore" |
|||
import api from "../builderStore/api" |
|||
import getIcon from "../common/icon" |
|||
import { CheckIcon } from "../common/Icons" |
|||
|
|||
const getPage = (s, name) => { |
|||
const props = s.pages[name] |
|||
return { name, props } |
|||
} |
|||
|
|||
let users = [] |
|||
|
|||
$: currentAppInfo = { |
|||
appname: $store.appname, |
|||
instanceId: $backendUiStore.selectedDatabase.id, |
|||
} |
|||
|
|||
async function fetchUsers() { |
|||
const FETCH_USERS_URL = `/_builder/instance/${currentAppInfo.appname}/${currentAppInfo.instanceId}/api/users` |
|||
const response = await api.get(FETCH_USERS_URL) |
|||
users = await response.json() |
|||
backendUiStore.update(state => { |
|||
state.users = users |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
onMount(fetchUsers) |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<ul> |
|||
{#each users as user} |
|||
<li> |
|||
<i class="ri-user-4-line" /> |
|||
<button class:active={user.id === $store.currentUserId}> |
|||
{user.name} |
|||
</button> |
|||
</li> |
|||
{/each} |
|||
</ul> |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
padding-bottom: 10px; |
|||
font-size: 0.9rem; |
|||
color: var(--secondary50); |
|||
font-weight: bold; |
|||
position: relative; |
|||
padding-left: 1.8rem; |
|||
} |
|||
|
|||
ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
li { |
|||
margin: 0.5rem 0; |
|||
} |
|||
|
|||
button { |
|||
margin: 0 0 0 6px; |
|||
padding: 0; |
|||
border: none; |
|||
font-family: Roboto; |
|||
font-size: 0.8rem; |
|||
outline: none; |
|||
cursor: pointer; |
|||
background: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.active { |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
color: #333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
import { |
|||
findRoot, |
|||
getFlattenedHierarchy, |
|||
fieldReversesReferenceToIndex, |
|||
isRecord, |
|||
} from "./hierarchy" |
|||
import { $ } from "../common" |
|||
import { map, filter, reduce } from "lodash/fp" |
|||
|
|||
export const canDeleteIndex = indexNode => { |
|||
const flatHierarchy = $(indexNode, [findRoot, getFlattenedHierarchy]) |
|||
|
|||
const reverseIndexes = $(flatHierarchy, [ |
|||
filter(isRecord), |
|||
reduce((obj, r) => { |
|||
for (let field of r.fields) { |
|||
if (fieldReversesReferenceToIndex(indexNode)(field)) { |
|||
obj.push({ ...field, record: r }) |
|||
} |
|||
} |
|||
return obj |
|||
}, []), |
|||
map( |
|||
f => |
|||
`field "${f.name}" on record "${f.record.name}" uses this index as a reference` |
|||
), |
|||
]) |
|||
|
|||
const lookupIndexes = $(flatHierarchy, [ |
|||
filter(isRecord), |
|||
reduce((obj, r) => { |
|||
for (let field of r.fields) { |
|||
if ( |
|||
field.type === "reference" && |
|||
field.typeOptions.indexNodeKey === indexNode.nodeKey() |
|||
) { |
|||
obj.push({ ...field, record: r }) |
|||
} |
|||
} |
|||
return obj |
|||
}, []), |
|||
map( |
|||
f => |
|||
`field "${f.name}" on record "${f.record.name}" uses this index as a lookup` |
|||
), |
|||
]) |
|||
|
|||
const errors = [...reverseIndexes, ...lookupIndexes] |
|||
|
|||
return { |
|||
canDelete: errors.length === 0, |
|||
errors, |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
import { |
|||
findRoot, |
|||
getFlattenedHierarchy, |
|||
fieldReversesReferenceToIndex, |
|||
isRecord, |
|||
isAncestorIndex, |
|||
isAncestor, |
|||
} from "./hierarchy" |
|||
import { $ } from "../common" |
|||
import { map, filter, includes } from "lodash/fp" |
|||
|
|||
export const canDeleteRecord = recordNode => { |
|||
const flatHierarchy = $(recordNode, [findRoot, getFlattenedHierarchy]) |
|||
|
|||
const ancestors = $(flatHierarchy, [filter(isAncestor(recordNode))]) |
|||
|
|||
const belongsToAncestor = i => ancestors.includes(i.parent()) |
|||
|
|||
const errorsForNode = node => { |
|||
const errorsThisNode = $(flatHierarchy, [ |
|||
filter( |
|||
i => |
|||
isAncestorIndex(i) && |
|||
belongsToAncestor(i) && |
|||
includes(node.nodeId)(i.allowedRecordNodeIds) |
|||
), |
|||
map( |
|||
i => |
|||
`index "${i.name}" indexes this record. Please remove the record from the index, or delete the index` |
|||
), |
|||
]) |
|||
|
|||
for (let child of node.children) { |
|||
for (let err of errorsForNode(child)) { |
|||
errorsThisNode.push(err) |
|||
} |
|||
} |
|||
|
|||
return errorsThisNode |
|||
} |
|||
|
|||
const errors = errorsForNode(recordNode) |
|||
|
|||
return { errors, canDelete: errors.length === 0 } |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
import { |
|||
setupApphierarchy, |
|||
basicAppHierarchyCreator_WithFields, |
|||
stubEventHandler, |
|||
basicAppHierarchyCreator_WithFields_AndIndexes, |
|||
} from "./specHelpers" |
|||
import { canDeleteIndex } from "../src/templateApi/canDeleteIndex" |
|||
import { canDeleteRecord } from "../src/templateApi/canDeleteRecord" |
|||
|
|||
describe("canDeleteIndex", () => { |
|||
it("should return no errors if deltion is valid", async () => { |
|||
const { appHierarchy } = await setupApphierarchy( |
|||
basicAppHierarchyCreator_WithFields |
|||
) |
|||
|
|||
const partnerIndex = appHierarchy.root.indexes.find(i => i.name === "partner_index") |
|||
|
|||
const result = canDeleteIndex(partnerIndex) |
|||
|
|||
expect(result.canDelete).toBe(true) |
|||
expect(result.errors).toEqual([]) |
|||
}) |
|||
|
|||
it("should return errors if index is a lookup for a reference field", async () => { |
|||
const { appHierarchy } = await setupApphierarchy( |
|||
basicAppHierarchyCreator_WithFields |
|||
) |
|||
|
|||
const customerIndex = appHierarchy.root.indexes.find(i => i.name === "customer_index") |
|||
|
|||
const result = canDeleteIndex(customerIndex) |
|||
|
|||
expect(result.canDelete).toBe(false) |
|||
expect(result.errors.length).toBe(1) |
|||
}) |
|||
|
|||
it("should return errors if index is a manyToOne index for a reference field", async () => { |
|||
const { appHierarchy } = await setupApphierarchy( |
|||
basicAppHierarchyCreator_WithFields |
|||
) |
|||
|
|||
const referredToCustomersIndex = appHierarchy.customerRecord.indexes.find(i => i.name === "referredToCustomers") |
|||
|
|||
const result = canDeleteIndex(referredToCustomersIndex) |
|||
|
|||
expect(result.canDelete).toBe(false) |
|||
expect(result.errors.length).toBe(1) |
|||
}) |
|||
}) |
|||
|
|||
|
|||
describe("canDeleteRecord", () => { |
|||
it("should return no errors when deletion is valid", async () => { |
|||
const { appHierarchy } = await setupApphierarchy( |
|||
basicAppHierarchyCreator_WithFields |
|||
) |
|||
|
|||
appHierarchy.root.indexes = appHierarchy.root.indexes.filter(i => !i.allowedRecordNodeIds.includes(appHierarchy.customerRecord.nodeId)) |
|||
const result = canDeleteRecord(appHierarchy.customerRecord) |
|||
|
|||
expect(result.canDelete).toBe(true) |
|||
expect(result.errors).toEqual([]) |
|||
}) |
|||
|
|||
it("should return errors when record is referenced by hierarchal index", async () => { |
|||
const { appHierarchy } = await setupApphierarchy( |
|||
basicAppHierarchyCreator_WithFields |
|||
) |
|||
|
|||
const result = canDeleteRecord(appHierarchy.customerRecord) |
|||
|
|||
expect(result.canDelete).toBe(false) |
|||
expect(result.errors.some(e => e.includes("customer_index"))).toBe(true) |
|||
}) |
|||
|
|||
it("should return errors when record has a child which cannot be deleted", async () => { |
|||
const { appHierarchy } = await setupApphierarchy( |
|||
basicAppHierarchyCreator_WithFields_AndIndexes |
|||
) |
|||
|
|||
const result = canDeleteRecord(appHierarchy.customerRecord) |
|||
|
|||
expect(result.canDelete).toBe(false) |
|||
expect(result.errors.some(e => e.includes("Outstanding Invoices"))).toBe(true) |
|||
}) |
|||
}) |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue