1
0
Fork 0
mirror of synced 2024-10-04 03:54:37 +13:00

table enhancements

This commit is contained in:
Martin McKeaveney 2020-03-22 09:21:18 +00:00
parent 9756574e6f
commit b474f8a600
12 changed files with 274 additions and 261 deletions

View file

@ -103,7 +103,9 @@ const lodash_fp_exports = [
"toNumber",
"takeRight",
"toPairs",
"remove"
"remove",
"findIndex",
"compose"
]
const lodash_exports = [

View file

@ -107,7 +107,7 @@
}
.budibase__table thead {
background: var(--background-button);
background: #fafafa;
}
.budibase__table th {
@ -119,3 +119,9 @@
.budibase__table tr {
border-bottom: 1px solid #ccc;
}
.button--toggled {
background: #fafafa;
color: var(--button-text);
padding: 10px;
}

View file

@ -38,7 +38,7 @@ export const getBackendUiStore = () => {
},
records: {
delete: record => store.update(state => {
state.selectedView.records = remove(state.selectedView.records, { key: record.key });
state.selectedView.records = remove(state.selectedView.records, { id: record.id });
return state
}),
},
@ -125,7 +125,6 @@ export const saveCurrentNode = store => () => {
if (errors.length > 0) {
return state
}
const parentNode = getNode(state.hierarchy, state.currentNode.parent().nodeId)
const existingNode = getNode(state.hierarchy, state.currentNode.nodeId)
@ -134,10 +133,7 @@ export const saveCurrentNode = store => () => {
if (existingNode) {
// remove existing
index = existingNode.parent().children.indexOf(existingNode)
existingNode.parent().children = existingNode.parent().children.filter(c => c.nodeId !== existingNode.nodeId);
// existingNode.parent().children = pipe(existingNode.parent().children, [
// filter(c => c.nodeId !== existingNode.nodeId),
// ])
existingNode.parent().children = existingNode.parent().children.filter(node => node.nodeId !== existingNode.nodeId);
}
// should add node into existing hierarchy
@ -172,7 +168,7 @@ export const deleteCurrentNode = store => () => {
store.update(state => {
const nodeToDelete = getNode(state.hierarchy, state.currentNode.nodeId)
state.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent())
? find(n => n !== state.currentNode)(state.hierarchy.children)
? state.hierarchy.children.find(node => node !== state.currentNode)
: nodeToDelete.parent()
const recordOrIndexKey = hierarchyFunctions.isRecord(nodeToDelete) ? "children" : "indexes";
@ -212,10 +208,7 @@ export const saveField = databaseStore => field => {
export const deleteField = databaseStore => field => {
databaseStore.update(db => {
db.currentNode.fields = filter(f => f.name !== field.name)(
db.currentNode.fields
)
db.currentNode.fields = db.currentNode.fields.filter(f => f.name !== field.name)
return db
})
}

View file

@ -31,8 +31,6 @@
$: viewOpen = $backendUiStore.visibleModal === "VIEW"
$: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
$: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
// $: recordOpen = $store.currentNode && $store.currentNode.type === 'record'
// $: viewOpen = $store.currentNode && $store.currentNode.type === 'index'
</script>
<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>

View file

@ -10,19 +10,23 @@
export let selectRecord
let pages = [1, 2, 3]
const ITEMS_PER_PAGE = 2
let selectedView = ""
let modalOpen = false
let headers = []
let selectedRecord
let currentPage = 0
$: views = $store.hierarchy.indexes
$: currentAppInfo = {
appname: $store.appname,
instanceId: $store.currentInstanceId
instanceId: $store.currentInstanceId,
}
$: data = $backendUiStore.selectedView.records
$: deleteRecordModal = $backendUiStore.visibleModal === "DELETE_RECORD"
$: data = $backendUiStore.selectedView.records.slice(
currentPage * ITEMS_PER_PAGE,
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
)
const getSchema = getIndexSchema($store.hierarchy)
@ -44,9 +48,10 @@
})
</script>
<section>
{#if views.length > 0}
<section>
<div class="table-controls">
<h4 class="budibase__title--3">Shoe database</h4>
<h4 class="budibase__title--3">{$backendUiStore.selectedDatabase.name || ""}</h4>
<Select
icon="ri-eye-line"
on:change={e => fetchRecordsForView(e.target.value)}>
@ -65,6 +70,9 @@
</tr>
</thead>
<tbody>
{#if data.length === 0}
<div class="no-data">No Data.</div>
{/if}
{#each data as row}
<tr class="hoverable">
<td>
@ -72,13 +80,10 @@
<i class="ri-more-line" />
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav">
<li>
<div>View</div>
</li>
<li
on:click={() => {
selectRecord(row)
backendUiStore.actions.modals.show("RECORD")
backendUiStore.actions.modals.show('RECORD')
}}>
<div>Edit</div>
</li>
@ -86,13 +91,18 @@
<div
on:click={() => {
selectRecord(row)
backendUiStore.actions.modals.show("DELETE_RECORD")
backendUiStore.actions.modals.show('DELETE_RECORD')
}}>
Delete
</div>
</li>
<li>
<div>Duplicate</div>
<div
on:click={() => {
console.log("DUPLICATION")
}}>
Duplicate
</div>
</li>
</ul>
</div>
@ -105,15 +115,19 @@
{/each}
</tbody>
</table>
<TablePagination />
</section>
<TablePagination bind:currentPage pageItemCount={data.length} {ITEMS_PER_PAGE} />
</section>
{:else}
Please create a model to get started.
{/if}
<style>
table {
border: 1px solid #ccc;
background: #fff;
border-radius: 3px;
border-collapse: separate;
border-collapse: collapse;
}
thead {
@ -146,4 +160,8 @@
.uk-dropdown-nav li:hover {
cursor: pointer;
}
.no-data {
padding: 20px;
}
</style>

View file

@ -1,18 +1,43 @@
<script>
import { backendUiStore } from "../../builderStore"
export let currentPage
export let pageItemCount
export let ITEMS_PER_PAGE
let numPages = 0
$: data = $backendUiStore.selectedView.records
$: 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>Previous</button>
<button>Next</button>
{#each data as page, idx}
<button>{idx + 1}</button>
<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 10 (hardcoded, update this) of {data.length} entries</p>
<p>Showing {pageItemCount} of {data.length} entries</p>
</div>
<style>
@ -24,6 +49,10 @@
justify-content: center;
}
.pagination__buttons {
display: flex;
}
.pagination__buttons button {
display: inline-block;
padding: 10px;
@ -31,16 +60,18 @@
background: #fff;
border: 1px solid #ccc;
text-transform: capitalize;
border-radius: 5px;
border-radius: 3px;
font-family: Roboto;
min-width: 20px;
transition: 0.3s background-color;
}
.pagination__buttons button:hover {
cursor: pointer;
background-color: #fafafa;
}
.ri-more-line:hover {
cursor: pointer;
.selected {
color: var(--button-text);
}
</style>

View file

@ -4,6 +4,8 @@
import ActionButton from "../../../common/ActionButton.svelte"
import * as api from "../api"
export let onClosed
let databaseName
async function createDatabase() {
@ -14,8 +16,8 @@
</script>
<section>
CREATE A NEW DATABASE FROM HERE
<input type="text" bind:value={databaseName} />
Database Name
<input class="uk-input" type="text" bind:value={databaseName} />
<div class="actions">
<ActionButton alert on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!databaseName} on:click={createDatabase}>Save</ActionButton>

View file

@ -8,12 +8,5 @@
</script>
<section>
<h4 class="budibase__title--4">
<i class="ri-list-settings-line" />
Create / Edit Model
</h4>
<div class="actions">
<ModelView />
<ActionsHeader />
</div>
</section>

View file

@ -1,6 +1,7 @@
<script>
import { onMount } from "svelte"
import { store, backendUiStore } from "../../../builderStore"
import { findIndex } from "lodash/fp"
import Modal from "../../../common/Modal.svelte"
import ActionButton from "../../../common/ActionButton.svelte"
import Select from "../../../common/Select.svelte"
@ -69,7 +70,10 @@
on:click={async () => {
const recordResponse = await api.saveRecord(record || selectedModel, currentAppInfo)
backendUiStore.update(state => {
state.selectedView.records.push(recordResponse)
const idx = findIndex(state.selectedView.records, {
id: recordResponse.id
})
state.selectedView.records.splice(idx, 1, recordResponse)
return state
})
onClosed()

View file

@ -4,7 +4,6 @@
import { store, backendUiStore } from "../../../builderStore"
import * as api from "../api"
export let modalOpen = false
export let record
$: currentAppInfo = {
@ -18,9 +17,14 @@
</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
@ -34,3 +38,28 @@
</ActionButton>
</div>
</section>
<style>
.alert {
color: rgba(255, 0, 31, 1);
background: #fafafa;
padding: 5px;
}
.modal-actions {
position: absolute;
bottom: 0;
background: #fafafa;
border-top: 1px solid #ccc;
width: 100%;
}
heading {
display: flex;
align-items: center;
}
h4 {
margin: 0 0 0 10px;
}
</style>

View file

@ -7,8 +7,9 @@
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 { common, hierarchy } from "../../../core/src"
import { templateApi, pipe, validate } from "../common/core"
import ActionsHeader from "./ActionsHeader.svelte"
let record
let getIndexAllowedRecords
@ -26,7 +27,7 @@
store.subscribe($store => {
record = $store.currentNode
const flattened = h.getFlattenedHierarchy($store.hierarchy)
const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy)
getIndexAllowedRecords = index =>
pipe(
index.allowedRecordNodeIds,
@ -78,21 +79,6 @@
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 === "") {
@ -102,42 +88,54 @@
</script>
<div class="root">
<heading>
{#if !editingField}
<i class="ri-list-settings-line button--toggled" />
<h4 class="budibase__title--3">Create / Edit Model</h4>
{:else}
<i class="ri-file-list-line button--toggled" />
<h4 class="budibase__title--3">Create / Edit Field</h4>
{/if}
</heading>
{#if !editingField}
<form class="uk-form-stacked">
<h3 class="budibase__label--big">Settings</h3>
<Textbox label="Name" bind:text={record.name} on:change={nameChanged} />
<div class="horizontal-stack">
{#if !record.isSingle}
<Textbox label="Collection Name" bind:text={record.collectionName} />
{/if}
<div>
<label class="uk-form-label">Parent</label>
<div class="uk-form-controls">
<Select
value={parentRecord}
on:change={e => store.newChildRecord()}>
on:change={e => {
store.selectExistingNode(record)
store.newChildRecord()
}}>
{#each models as model}
<option value={model}>{model.name}</option>
{/each}
</Select>
</div>
{#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>
</div>
</form>
<div class="table-controls">
<span class="budibase__label--big">Fields</span>
<h4 class="hoverable" on:click={newField}>Add new field</h4>
<h4 class="hoverable new-field" on:click={newField}>Add new field</h4>
</div>
<table class="fields-table uk-table budibase__table">
<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>
@ -151,64 +149,18 @@
</td>
<td>{field.type}</td>
<td>{field.typeOptions.values}</td>
<td>
<span class="edit-button" on:click={() => deleteField(field)}>
{@html getIcon('trash')}
</span>
</td>
</tr>
{/each}
</tbody>
</table>
{#if editingField}
<Modal
bind:isOpen={editingField}
onClosed={() => onFinishedFieldEdit(false)}>
<h3 class="budibase__title--3">
<i class="ri-file-list-line" />
Create / Edit Field
</h3>
<ActionsHeader />
{:else}
<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>
@ -217,10 +169,15 @@
padding: 2rem;
}
.recordkey {
font-size: 14px;
font-weight: 600;
color: var(--primary100);
.horizontal-stack {
display: flex;
justify-content: space-between
}
.new-field {
font-size: 16px;
font-weight: bold;
color: var(--button-text);
}
.fields-table {
@ -228,24 +185,10 @@
border-collapse: collapse;
}
.edit-button {
cursor: pointer;
color: var(--secondary25);
}
.edit-button:hover {
cursor: pointer;
color: var(--secondary75);
}
tbody > tr:hover {
background-color: var(--primary10);
}
tbody > tr:hover .edit-button {
color: var(--secondary75);
}
.table-controls {
display: flex;
justify-content: space-between;
@ -256,7 +199,12 @@
cursor: pointer;
}
heading {
display: flex;
align-items: center;
}
h4 {
margin: 0;
margin: 0 0 0 10px;
}
</style>

View file

@ -9,9 +9,6 @@
export let type
let navActive = ""
let expanded = false
$: hasChildren = (node.children || node.indexes) && (node.children.length || node.indexes.length)
const ICON_MAP = {
index: "ri-eye-line",
@ -38,16 +35,9 @@
class:capitalized={type === 'record'}
style="padding-left: {20 + level * 20}px"
class:selected={navActive}>
{#if hasChildren}
<i
class={`ri-arrow-${expanded ? "down" : "right"}-s-line`}
on:click={() => expanded = !expanded}
/>
{/if}
<i class={ICON_MAP[type]} />
<span style="margin-left: 1rem">{node.name}</span>
</div>
{#if expanded}
{#if node.children}
{#each node.children as child}
<svelte:self node={child} level={level + 1} type="record" />
@ -58,7 +48,6 @@
<svelte:self node={index} level={level + 1} type="index" />
{/each}
{/if}
{/if}
</div>
<style>