Merge branch 'master' of https://github.com/Budibase/budibase into feature/model-view-select

This commit is contained in:
cmack 2020-08-25 13:17:47 +01:00
commit c699aa5998
21 changed files with 551 additions and 184 deletions

View File

@ -1,3 +1,4 @@
context('Create a View', () => {
before(() => {
cy.visit('localhost:4001/_builder')
@ -7,6 +8,7 @@ context('Create a View', () => {
cy.addColumn('data', 'age', 'Number')
cy.addColumn('data', 'rating', 'Number')
// 6 Records
cy.addRecord(["Students", 25, 1])
cy.addRecord(["Students", 20, 3])
cy.addRecord(["Students", 18, 6])
@ -15,11 +17,39 @@ context('Create a View', () => {
cy.addRecord(["Teachers", 36, 3])
})
it('creates a stats view based on age', () => {
it('creates a view', () => {
cy.contains("Create New View").click()
cy.get("[placeholder='View Name']").type("Test View")
cy.contains("Save View").click()
cy.get(".title").contains("Test View")
cy.get("thead th").should(($headers) => {
expect($headers).to.have.length(3)
const headers = $headers.map((i, header) => Cypress.$(header).text())
expect(headers.get()).to.deep.eq([
"group",
"age",
"rating"
])
})
});
it('filters the view by age over 10', () => {
cy.contains("Filter").click()
cy.contains("Add Filter").click()
cy.get(".menu-container").find("select").first().select("age")
cy.get(".menu-container").find("select").eq(1).select("More Than")
cy.get("input[placeholder='age']").type(18)
cy.contains("Save").click()
cy.get("tbody tr").should(($values) => {
expect($values).to.have.length(5)
})
});
it('creates a stats calculation view based on age', () => {
cy.contains("Calculate").click()
cy.get(".menu-container").find("select").first().select("Statistics")
cy.get(".menu-container").find("select").eq(1).select("age")
cy.contains("Save").click()
cy.get("thead th").should(($headers) => {
expect($headers).to.have.length(7)
const headers = $headers.map((i, header) => Cypress.$(header).text())
@ -28,8 +58,8 @@ context('Create a View', () => {
"sum",
"min",
"max",
"sumsqr",
"count",
"sumsqr",
"avg",
])
})
@ -37,17 +67,17 @@ context('Create a View', () => {
const values = $values.map((i, value) => Cypress.$(value).text())
expect(values.get()).to.deep.eq([
"null",
"173",
"18",
"155",
"20",
"49",
"5671",
"6",
"28.833333333333332"
"5",
"5347",
"31"
])
})
})
it('groups the stats view by group', () => {
it('groups the view by group', () => {
cy.contains("Group By").click()
cy.get("select").select("group")
cy.contains("Save").click()
@ -58,12 +88,12 @@ context('Create a View', () => {
const values = $values.map((i, value) => Cypress.$(value).text())
expect(values.get()).to.deep.eq([
"Students",
"88",
"18",
"70",
"20",
"25",
"1974",
"4",
"22"
"3",
"1650",
"23.333333333333332"
])
})
})
@ -77,6 +107,7 @@ context('Create a View', () => {
})
it('deletes a view', () => {
cy.contains("[data-cy=model-nav-item]", "Test View Updated").click()
cy.contains("[data-cy=model-nav-item]", "Test View Updated").find(".ri-more-line").click()
cy.contains("Delete").click()
cy.get(".content").contains("button", "Delete").click()

View File

@ -9,10 +9,6 @@ const INITIAL_BACKEND_UI_STATE = {
selectedDatabase: {},
selectedModel: {},
draftModel: {},
tabs: {
SETUP_PANEL: "SETUP",
NAVIGATION_PANEL: "NAVIGATE",
},
}
export const getBackendUiStore = () => {
@ -127,19 +123,24 @@ export const getBackendUiStore = () => {
await store.actions.models.fetch()
},
save: async view => {
await api.post(`/api/views`, view)
const response = await api.post(`/api/views`, view)
const json = await response.json()
const viewMeta = {
name: view.name,
...json,
}
store.update(state => {
const viewModel = state.models.find(
model => model._id === view.modelId
)
// TODO: Cleaner?
if (!viewModel.views) viewModel.views = {}
if (view.originalName) delete viewModel.views[view.originalName]
viewModel.views[view.name] = view
viewModel.views[view.name] = viewMeta
state.models = state.models
state.selectedView = view
state.selectedView = viewMeta
return state
})
},
@ -156,11 +157,3 @@ export const getBackendUiStore = () => {
return store
}
// Store Actions
export const createDatabaseForApp = store => appInstance => {
store.update(state => {
state.appInstances.push(appInstance)
return state
})
}

View File

@ -1,7 +1,6 @@
import { values, cloneDeep } from "lodash/fp"
import { get_capitalised_name } from "../../helpers"
import { backendUiStore } from "builderStore"
import * as backendStoreActions from "./backend"
import { writable, get } from "svelte/store"
import api from "../api"
import { DEFAULT_PAGES_OBJECT } from "../../constants"
@ -50,8 +49,6 @@ export const getStore = () => {
store.setPackage = setPackage(store, initial)
store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store)
store.saveScreen = saveScreen(store)
store.setCurrentScreen = setCurrentScreen(store)
store.setCurrentPage = setCurrentPage(store)

View File

@ -16,7 +16,7 @@
import EditRowPopover from "./popovers/EditRow.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
export let columns = []
export let schema = []
export let data = []
export let title
@ -24,6 +24,7 @@
let currentPage = 0
$: columns = schema ? Object.keys(schema) : []
$: paginatedData =
data && data.length
? data.slice(
@ -46,7 +47,7 @@
<thead>
<tr>
{#each columns as header}
<th>{header.name}</th>
<th>{header}</th>
{/each}
</tr>
</thead>
@ -57,7 +58,7 @@
{#each paginatedData as row}
<tr>
{#each columns as header}
<td>{getOr(row.default || '', header.key, row)}</td>
<td>{getOr('', header, row)}</td>
{/each}
</tr>
{/each}

View File

@ -17,58 +17,33 @@
import EditRowPopover from "./popovers/EditRow.svelte"
import CalculationPopover from "./popovers/Calculate.svelte"
import GroupByPopover from "./popovers/GroupBy.svelte"
let COLUMNS = [
{
name: "group",
key: "key",
default: "All Records",
},
{
name: "sum",
key: "value.sum",
},
{
name: "min",
key: "value.min",
},
{
name: "max",
key: "value.max",
},
{
name: "sumsqr",
key: "value.sumsqr",
},
{
name: "count",
key: "value.count",
},
{
name: "avg",
key: "value.avg",
},
]
import FilterPopover from "./popovers/Filter.svelte"
export let view = {}
let data = []
$: ({ name, groupBy } = view)
$: !name.startsWith("all_") && fetchViewData(name, groupBy)
$: name = view.name
$: filters = view.filters
$: field = view.field
$: groupBy = view.groupBy
$: !name.startsWith("all_") && filters && fetchViewData(name, field, groupBy)
async function fetchViewData(name, groupBy) {
let QUERY_VIEW_URL = `/api/views/${name}?stats=true`
if (groupBy) {
QUERY_VIEW_URL += `&group=${groupBy}`
}
async function fetchViewData(name, field, groupBy) {
const params = new URLSearchParams()
if (field) params.set("stats", true)
if (groupBy) params.set("group", groupBy)
let QUERY_VIEW_URL = `/api/views/${name}?${params}`
const response = await api.get(QUERY_VIEW_URL)
data = await response.json()
}
</script>
<Table title={decodeURI(view.name)} columns={COLUMNS} {data}>
<Table title={decodeURI(view.name)} schema={view.schema} {data}>
<FilterPopover {view} />
<CalculationPopover {view} />
<GroupByPopover {view} />
</Table>

View File

@ -19,25 +19,6 @@
? Object.entries($backendUiStore.selectedModel.schema)
: []
const isSelect = meta =>
meta.type === "string" &&
meta.constraints &&
meta.constraints.inclusion &&
meta.constraints.inclusion.length > 0
function determineInputType(meta) {
if (meta.type === "datetime") return "date"
if (meta.type === "number") return "number"
if (meta.type === "boolean") return "checkbox"
if (isSelect(meta)) return "select"
return "text"
}
function determineOptions(meta) {
return isSelect(meta) ? meta.constraints.inclusion : []
}
async function saveRecord() {
const recordResponse = await api.saveRecord(
{
@ -73,11 +54,7 @@
linkName={meta.name}
modelId={meta.modelId} />
{:else}
<RecordFieldControl
type={determineInputType(meta)}
options={determineOptions(meta)}
label={meta.name}
bind:value={record[key]} />
<RecordFieldControl {meta} bind:value={record[key]} />
{/if}
</div>
{/each}

View File

@ -1,10 +1,24 @@
<script>
import { Input, Select } from "@budibase/bbui"
export let type = "text"
export let value = type === "checkbox" ? false : ""
export let label
export let options = []
export let meta
export let value = meta.type === "boolean" ? false : ""
let isSelect =
meta.type === "string" &&
meta.constraints &&
meta.constraints.inclusion &&
meta.constraints.inclusion.length > 0
let type = determineInputType(meta)
function determineInputType(meta) {
if (meta.type === "datetime") return "date"
if (meta.type === "number") return "number"
if (meta.type === "boolean") return "checkbox"
if (isSelect) return "select"
return "text"
}
const handleInput = event => {
if (event.target.type === "checkbox") {
@ -22,20 +36,20 @@
</script>
{#if type === 'select'}
<Select thin secondary data-cy="{label}-select" bind:value>
<Select thin secondary data-cy="{meta.name}-select" bind:value>
<option />
{#each options as opt}
{#each meta.constraints.inclusion as opt}
<option value={opt}>{opt}</option>
{/each}
</Select>
{:else}
{#if type === 'checkbox'}
<label>{label}</label>
<label>{meta.name}</label>
{/if}
<Input
thin
placeholder={label}
data-cy="{label}-input"
placeholder={meta.name}
data-cy="{meta.name}-input"
checked={value}
{type}
{value}

View File

@ -50,12 +50,14 @@
<div class="input-group-row">
<p>The</p>
<Select secondary thin bind:value={view.calculation}>
<option value={null} />
{#each CALCULATIONS as calculation}
<option value={calculation.key}>{calculation.name}</option>
{/each}
</Select>
<p>of</p>
<Select secondary thin bind:value={view.field}>
<option value={null} />
{#each fields as field}
<option value={field}>{field}</option>
{/each}

View File

@ -0,0 +1,162 @@
<script>
import {
Popover,
TextButton,
Button,
Icon,
Input,
Select,
} from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import CreateEditRecord from "../modals/CreateEditRecord.svelte"
const CONDITIONS = [
{
name: "Equals",
key: "EQUALS",
},
{
name: "Less Than",
key: "LT",
},
{
name: "Less Than Or Equal",
key: "LTE",
},
{
name: "More Than",
key: "MT",
},
{
name: "More Than Or Equal",
key: "MTE",
},
{
name: "Contains",
key: "CONTAINS",
},
]
const CONJUNCTIONS = [
{
name: "Or",
key: "OR",
},
{
name: "And",
key: "AND",
},
]
export let view = {}
let anchor
let dropdown
let filters = view.filters || []
$: viewModel = $backendUiStore.models.find(
({ _id }) => _id === $backendUiStore.selectedView.modelId
)
$: fields = viewModel && Object.keys(viewModel.schema)
function saveView() {
view.filters = filters
backendUiStore.actions.views.save(view)
notifier.success(`View ${view.name} saved.`)
dropdown.hide()
}
function removeFilter(idx) {
filters.splice(idx, 1)
filters = filters
}
function addFilter() {
filters = [...filters, {}]
}
</script>
<div bind:this={anchor}>
<TextButton
text
small
on:click={dropdown.show}
active={filters && filters.length}>
<Icon name="filter" />
Filter
</TextButton>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<h5>Filter</h5>
<div class="input-group-row">
{#each filters as filter, idx}
{#if idx === 0}
<p>Where</p>
{:else}
<Select secondary thin bind:value={filter.conjunction}>
{#each CONJUNCTIONS as conjunction}
<option value={conjunction.key}>{conjunction.name}</option>
{/each}
</Select>
{/if}
<Select secondary thin bind:value={filter.key}>
{#each fields as field}
<option value={field}>{field}</option>
{/each}
</Select>
<Select secondary thin bind:value={filter.condition}>
{#each CONDITIONS as condition}
<option value={condition.key}>{condition.name}</option>
{/each}
</Select>
<Input
thin
placeholder={filter.key || fields[0]}
bind:value={filter.value} />
<i class="ri-close-circle-fill" on:click={() => removeFilter(idx)} />
{/each}
</div>
<div class="button-group">
<Button text on:click={addFilter}>Add Filter</Button>
<div>
<Button secondary on:click={dropdown.hide}>Cancel</Button>
<Button primary on:click={saveView}>Save</Button>
</div>
</div>
</Popover>
<style>
h5 {
margin-bottom: var(--spacing-l);
font-weight: 500;
}
.button-group {
margin-top: var(--spacing-l);
display: flex;
justify-content: space-between;
align-items: center;
}
:global(.button-group > div > button) {
margin-left: var(--spacing-m);
}
.ri-close-circle-fill {
cursor: pointer;
}
.input-group-row {
display: grid;
grid-template-columns: minmax(50px, auto) 1fr 1fr 1fr 15px;
gap: var(--spacing-s);
margin-bottom: var(--spacing-l);
align-items: center;
}
p {
margin: 0;
font-size: var(--font-size-xs);
}
</style>

View File

@ -73,7 +73,7 @@
.input-group-row {
display: grid;
grid-template-columns: 50px 1fr 20px 1fr;
grid-template-columns: 75px 1fr 20px 1fr;
gap: var(--spacing-s);
margin-bottom: var(--spacing-l);
align-items: center;

View File

@ -51,11 +51,6 @@
<h5>Create View</h5>
<div class="input-group-column">
<Input placeholder="View Name" thin bind:value={name} />
<Select thin secondary bind:value={field}>
{#each fields as field}
<option value={field}>{field}</option>
{/each}
</Select>
</div>
<div class="button-group">
<Button secondary on:click={dropdown.hide}>Cancel</Button>

View File

@ -47,10 +47,10 @@
selected={selectedView === viewName}
title={viewName}
icon="ri-eye-line"
on:click={() => selectView({
on:click={() => (selectedView === viewName ? {} : selectView({
name: viewName,
...model.views[viewName],
})}>
}))}>
<EditViewPopover
view={{ name: viewName, ...model.views[viewName] }} />
</ListItem>

View File

@ -23,8 +23,8 @@
}
},
"scripts": {
"test": "jest routes --runInBand",
"test:integration": "jest workflow --runInBand",
"test": "jest --testPathIgnorePatterns=routes && npm run test:integration",
"test:integration": "jest routes --runInBand",
"test:watch": "jest --watch",
"initialise": "node ../cli/bin/budi init -q",
"run:docker": "node src/index",

View File

@ -87,12 +87,11 @@ exports.fetchView = async function(ctx) {
})
if (stats) {
for (let row of response.rows) {
row.value = {
response.rows = response.rows.map(row => ({
group: row.key,
...row.value,
avg: row.value.sum / row.value.count,
}
}
}))
} else {
response.rows = response.rows.map(row => row.doc)
}

View File

@ -1,5 +1,5 @@
const CouchDB = require("../../../db")
const statsViewTemplate = require("./viewBuilder")
const viewTemplate = require("./viewBuilder")
const controller = {
fetch: async ctx => {
@ -25,15 +25,15 @@ const controller = {
},
save: async ctx => {
const db = new CouchDB(ctx.user.instanceId)
const { originalName, ...newView } = ctx.request.body
const { originalName, ...viewToSave } = ctx.request.body
const designDoc = await db.get("_design/database")
const view = statsViewTemplate(newView)
const view = viewTemplate(viewToSave)
designDoc.views = {
...designDoc.views,
[newView.name]: view,
[viewToSave.name]: view,
}
// view has been renamed
@ -45,10 +45,11 @@ const controller = {
// add views to model document
const model = await db.get(ctx.request.body.modelId)
model.views = {
...(model.views ? model.views : {}),
[newView.name]: view.meta,
if (!model.views) model.views = {}
if (!view.meta.schema) {
view.meta.schema = model.schema
}
model.views[viewToSave.name] = view.meta
if (originalName) {
delete model.views[originalName]
@ -56,8 +57,8 @@ const controller = {
await db.put(model)
ctx.body = view
ctx.message = `View ${newView.name} saved successfully.`
ctx.body = model.views[viewToSave.name]
ctx.message = `View ${viewToSave.name} saved successfully.`
},
destroy: async ctx => {
const db = new CouchDB(ctx.user.instanceId)

View File

@ -0,0 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`viewBuilder Calculate creates a view with the calculation statistics schema 1`] = `
Object {
"map": "function (doc) {
if (doc.modelId === \\"14f1c4e94d6a47b682ce89d35d4c78b0\\" ) {
emit(doc[\\"_id\\"], doc[\\"myField\\"]);
}
}",
"meta": Object {
"calculation": "stats",
"field": "myField",
"filters": Array [],
"groupBy": undefined,
"modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
"schema": Object {
"avg": Object {
"type": "number",
},
"count": Object {
"type": "number",
},
"group": Object {
"type": "string",
},
"max": Object {
"type": "number",
},
"min": Object {
"type": "number",
},
"sum": Object {
"type": "number",
},
"sumsqr": Object {
"type": "number",
},
},
},
"reduce": "_stats",
}
`;
exports[`viewBuilder Filter creates a view with multiple filters and conjunctions 1`] = `
Object {
"map": "function (doc) {
if (doc.modelId === \\"14f1c4e94d6a47b682ce89d35d4c78b0\\" && doc[\\"Name\\"] === \\"Test\\" || doc[\\"Yes\\"] > \\"Value\\") {
emit(doc._id);
}
}",
"meta": Object {
"calculation": undefined,
"field": undefined,
"filters": Array [
Object {
"condition": "EQUALS",
"key": "Name",
"value": "Test",
},
Object {
"condition": "MT",
"conjunction": "OR",
"key": "Yes",
"value": "Value",
},
],
"groupBy": undefined,
"modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
"schema": undefined,
},
}
`;
exports[`viewBuilder Group By creates a view emitting the group by field 1`] = `
Object {
"map": "function (doc) {
if (doc.modelId === \\"14f1c4e94d6a47b682ce89d35d4c78b0\\" ) {
emit(doc[\\"age\\"], doc[\\"score\\"]);
}
}",
"meta": Object {
"calculation": undefined,
"field": "score",
"filters": Array [],
"groupBy": "age",
"modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
"schema": undefined,
},
"reduce": "_stats",
}
`;

View File

@ -0,0 +1,47 @@
const viewTemplate = require("../viewBuilder");
describe("viewBuilder", () => {
describe("Filter", () => {
it("creates a view with multiple filters and conjunctions", () => {
expect(viewTemplate({
"name": "Test View",
"modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
"filters": [{
"value": "Test",
"condition": "EQUALS",
"key": "Name"
}, {
"value": "Value",
"condition": "MT",
"key": "Yes",
"conjunction": "OR"
}]
})).toMatchSnapshot()
})
})
describe("Calculate", () => {
it("creates a view with the calculation statistics schema", () => {
expect(viewTemplate({
"name": "Calculate View",
"field": "myField",
"calculation": "stats",
"modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
"filters": []
})).toMatchSnapshot()
})
})
describe("Group By", () => {
it("creates a view emitting the group by field", () => {
expect(viewTemplate({
"name": "Test Scores Grouped By Age",
"modelId": "14f1c4e94d6a47b682ce89d35d4c78b0",
"groupBy": "age",
"field": "score",
"filters": [],
})).toMatchSnapshot()
})
})
});

View File

@ -1,25 +1,112 @@
function statsViewTemplate({ field, modelId, groupBy }) {
const TOKEN_MAP = {
EQUALS: "===",
LT: "<",
LTE: "<=",
MT: ">",
MTE: ">=",
CONTAINS: "includes",
AND: "&&",
OR: "||",
}
const SCHEMA_MAP = {
stats: {
group: {
type: "string",
},
sum: {
type: "number",
},
min: {
type: "number",
},
max: {
type: "number",
},
count: {
type: "number",
},
sumsqr: {
type: "number",
},
avg: {
type: "number",
},
},
}
/**
* Iterates through the array of filters to create a JS
* expression that gets used in a CouchDB view.
* @param {Array} filters - an array of filter objects
* @returns {String} JS Expression
*/
function parseFilterExpression(filters) {
const expression = []
for (let filter of filters) {
if (filter.conjunction) expression.push(TOKEN_MAP[filter.conjunction])
if (filter.condition === "CONTAINS") {
expression.push(
`doc["${filter.key}"].${TOKEN_MAP[filter.condition]}("${filter.value}")`
)
} else {
expression.push(
`doc["${filter.key}"] ${TOKEN_MAP[filter.condition]} "${filter.value}"`
)
}
}
return expression.join(" ")
}
/**
* Returns a CouchDB compliant emit() expression that is used to emit the
* correct key/value pairs for custom views.
* @param {String?} field - field to use for calculations, if any
* @param {String?} groupBy - field to group calculation results on, if any
*/
function parseEmitExpression(field, groupBy) {
if (field) return `emit(doc["${groupBy || "_id"}"], doc["${field}"]);`
return `emit(doc._id);`
}
/**
* Return a fully parsed CouchDB compliant view definition
* that will be stored in the design document in the database.
*
* @param {Object} viewDefinition - the JSON definition for a custom view.
* field: field that calculations will be performed on
* modelId: modelId of the model this view was created from
* groupBy: field that calculations will be grouped by. Field must be present for this to be useful
* filters: Array of filter objects containing predicates that are parsed into a JS expression
* calculation: an optional calculation to be performed over the view data.
*/
function viewTemplate({ field, modelId, groupBy, filters = [], calculation }) {
const parsedFilters = parseFilterExpression(filters)
const filterExpression = parsedFilters ? `&& ${parsedFilters}` : ""
const emitExpression = parseEmitExpression(field, groupBy)
const reduction = field ? { reduce: "_stats" } : {}
return {
meta: {
field,
modelId,
groupBy,
schema: {
sum: "number",
min: "number",
max: "number",
count: "number",
sumsqr: "number",
avg: "number",
},
filters,
schema: SCHEMA_MAP[calculation],
calculation,
},
map: `function (doc) {
if (doc.modelId === "${modelId}") {
emit(doc["${groupBy || "_id"}"], doc["${field}"]);
if (doc.modelId === "${modelId}" ${filterExpression}) {
${emitExpression}
}
}`,
reduce: "_stats",
...reduction,
}
}
module.exports = statsViewTemplate
module.exports = viewTemplate

View File

@ -3,42 +3,36 @@
exports[`/views query returns data for the created view 1`] = `
Array [
Object {
"key": null,
"value": Object {
"avg": 2333.3333333333335,
"count": 3,
"group": null,
"max": 4000,
"min": 1000,
"sum": 7000,
"sumsqr": 21000000,
},
},
]
`;
exports[`/views query returns data for the created view using a group by 1`] = `
Array [
Object {
"key": "One",
"value": Object {
"avg": 1500,
"count": 2,
"group": "One",
"max": 2000,
"min": 1000,
"sum": 3000,
"sumsqr": 5000000,
},
},
Object {
"key": "Two",
"value": Object {
"avg": 4000,
"count": 1,
"group": "Two",
"max": 4000,
"min": 4000,
"sum": 4000,
"sumsqr": 16000000,
},
},
]
`;

View File

@ -66,13 +66,14 @@ describe("/views", () => {
TestView: {
field: "Price",
modelId: model._id,
filters: [],
schema: {
sum: "number",
min: "number",
max: "number",
count: "number",
sumsqr: "number",
avg: "number"
name: {
type: "text",
constraints: {
type: "string"
}
}
}
}
});

File diff suppressed because one or more lines are too long