CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-03 02:55:14 +12:00
Code Issues Projects Releases Wiki Activity

Adding in pagination to next frontend.

Browse source
This commit is contained in:
mike12345567 2022-03-08 20:17:07 +00:00
parent 493c2ec266
commit 5162a3ee17
5 changed files with 317 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/nextjs-api-sales/definitions/index.ts
View file

@ -1,7 +1,7 @@
import { components } from "./openapi"
export type App = components["schemas"]["applicationOutput"]["data"]
export type AppSearch = {
data: App[]
}
export type Table = components["schemas"]["tableOutput"]["data"]
export type TableSearch = components["schemas"]["tableSearch"]
export type AppSearch = components["schemas"]["applicationSearch"]
export type RowSearch = components["schemas"]["searchOutput"]

206
examples/nextjs-api-sales/definitions/openapi.ts
View file

@ -95,9 +95,7 @@ export interface paths {
/** Returns the applications that were found based on the search parameters. */
200: {
content: {
"application/json": {
data: components["schemas"]["application"][]
}
"application/json": components["schemas"]["applicationSearch"]
}
}
}
@ -149,9 +147,7 @@ export interface paths {
/** Returns the queries found based on the search parameters. */
200: {
content: {
"application/json": {
data: components["schemas"]["query"][]
}
"application/json": components["schemas"]["querySearch"]
}
}
}
@ -449,9 +445,7 @@ export interface paths {
/** Returns the found tables, based on the search parameters. */
200: {
content: {
"application/json": {
data: components["schemas"]["table"][]
}
"application/json": components["schemas"]["tableSearch"]
}
}
}
@ -541,9 +535,7 @@ export interface paths {
/** Returns the found users based on search parameters. */
200: {
content: {
"application/json": {
data: components["schemas"]["user"][]
}
"application/json": components["schemas"]["userSearch"]
}
}
}
@ -589,6 +581,31 @@ export interface components {
lockedBy?: { [key: string]: unknown }
}
}
applicationSearch: {
data: {
/** @description The name of the app. */
name: string
/** @description The URL by which the app is accessed, this must be URL encoded. */
url: string
/** @description The ID of the app. */
_id: string
/**
* @description The status of the app, stating it if is the development or published version.
* @enum {string}
*/
status: "development" | "published"
/** @description States when the app was created, will be constant. Stored in ISO format. */
createdAt: string
/** @description States the last time the app was updated - stored in ISO format. */
updatedAt: string
/** @description States the version of the Budibase client this app is currently based on. */
version: string
/** @description In a multi-tenant environment this will state the tenant this app is within. */
tenantId?: string
/** @description The user this app is currently being built by. */
lockedBy?: { [key: string]: unknown }
}[]
}
/** @description The row to be created/updated, based on the table schema. */
row: { [key: string]: unknown }
searchOutput: {
@ -817,6 +834,113 @@ export interface components {
_id: string
}
}
tableSearch: {
data: {
/** @description The name of the table. */
name: string
/** @description The name of the column which should be used in relationship tags when relating to this table. */
primaryDisplay?: string
schema: {
[key: string]:
| {
/**
* @description A relationship column.
* @enum {string}
*/
type?: "link"
/** @description A constraint can be applied to the column which will be validated against when a row is saved. */
constraints?: {
/** @enum {string} */
type?: "string" | "number" | "object" | "boolean"
/** @description Defines whether the column is required or not. */
presence?: boolean
}
/** @description The name of the column. */
name?: string
/** @description Defines whether the column is automatically generated. */
autocolumn?: boolean
/** @description The name of the column which a relationship column is related to in another table. */
fieldName?: string
/** @description The ID of the table which a relationship column is related to. */
tableId?: string
/**
* @description Defines the type of relationship that this column will be used for.
* @enum {string}
*/
relationshipType?:
| "one-to-many"
| "many-to-one"
| "many-to-many"
/** @description When using a SQL table that contains many to many relationships this defines the table the relationships are linked through. */
through?: string
/** @description When using a SQL table that contains a one to many relationship this defines the foreign key. */
foreignKey?: string
/** @description When using a SQL table that utilises a through table, this defines the primary key in the through table for this table. */
throughFrom?: string
/** @description When using a SQL table that utilises a through table, this defines the primary key in the through table for the related table. */
throughTo?: string
}
| {
/**
* @description A formula column.
* @enum {string}
*/
type?: "formula"
/** @description A constraint can be applied to the column which will be validated against when a row is saved. */
constraints?: {
/** @enum {string} */
type?: "string" | "number" | "object" | "boolean"
/** @description Defines whether the column is required or not. */
presence?: boolean
}
/** @description The name of the column. */
name?: string
/** @description Defines whether the column is automatically generated. */
autocolumn?: boolean
/** @description Defines a Handlebars or JavaScript formula to use, note that Javascript formulas are expected to be provided in the base64 format. */
formula?: string
/**
* @description Defines whether this is a static or dynamic formula.
* @enum {string}
*/
formulaType?: "static" | "dynamic"
}
| {
/**
* @description Defines the type of the column, most explain themselves, a link column is a relationship.
* @enum {string}
*/
type?:
| "string"
| "longform"
| "options"
| "number"
| "boolean"
| "array"
| "datetime"
| "attachment"
| "link"
| "formula"
| "auto"
| "json"
| "internal"
/** @description A constraint can be applied to the column which will be validated against when a row is saved. */
constraints?: {
/** @enum {string} */
type?: "string" | "number" | "object" | "boolean"
/** @description Defines whether the column is required or not. */
presence?: boolean
}
/** @description The name of the column. */
name?: string
/** @description Defines whether the column is automatically generated. */
autocolumn?: boolean
}
}
/** @description The ID of the table. */
_id: string
}[]
}
/** @description The query body must contain the required parameters for the query, this depends on query type, setup and bindings. */
executeQuery: { [key: string]: unknown }
executeQueryOutput: {
@ -855,6 +979,31 @@ export interface components {
/** @description Whether the query has readable data. */
readable?: boolean
}
querySearch: {
data: {
/** @description The ID of the query. */
_id: string
/** @description The ID of the data source the query belongs to. */
datasourceId?: string
/** @description The bindings which are required to perform this query. */
parameters?: string[]
/** @description The fields that are used to perform this query, e.g. the sql statement */
fields?: { [key: string]: unknown }
/**
* @description The verb that describes this query.
* @enum {undefined}
*/
queryVerb?: "create" | "read" | "update" | "delete"
/** @description The name of the query. */
name: string
/** @description The schema of the data returned when the query is executed. */
schema: { [key: string]: unknown }
/** @description The JavaScript transformer function, applied after the query responds with data. */
transformer?: string
/** @description Whether the query has readable data. */
readable?: boolean
}[]
}
user: {
/** @description The email address of the user, this must be unique. */
email: string
@ -917,6 +1066,39 @@ export interface components {
_id: string
}
}
userSearch: {
data: {
/** @description The email address of the user, this must be unique. */
email: string
/** @description The password of the user if using password based login - this will never be returned. This can be left out of subsequent requests (updates) and will be enriched back into the user structure. */
password?: string
/**
* @description The status of the user, if they are active.
* @enum {string}
*/
status?: "active"
/** @description The first name of the user */
firstName?: string
/** @description The last name of the user */
lastName?: string
/** @description If set to true forces the user to reset their password on first login. */
forceResetPassword?: boolean
/** @description Describes if the user is a builder user or not. */
builder?: {
/** @description If set to true the user will be able to build any app in the system. */
global?: boolean
}
/** @description Describes if the user is an admin user or not. */
admin?: {
/** @description If set to true the user will be able to administrate the system. */
global?: boolean
}
/** @description Contains the roles of the user per app (assuming they are not a builder user). */
roles: { [key: string]: string }
/** @description The ID of the user. */
_id: string
}[]
}
nameSearch: {
/** @description The name to be used when searching - this will be used in a case insensitive starts with match. */
name: string

4
examples/nextjs-api-sales/next.config.js
View file

@ -6,8 +6,8 @@ const nextConfig = {
includePaths: [join(__dirname, "styles")]
},
serverRuntimeConfig: {
apiKey: "",
appName: "",
apiKey: "bf4d86af933b5ac0af0fdbe4bf7d89ff-f929752a1eeaafb00f4b5e3325097d51a44fe4b39f22ed857923409cc75414b379323a25ebfb4916",
appName: "sales",
host: "http://localhost:10000"
}
}

83
examples/nextjs-api-sales/pages/api/sales.ts
View file

@ -1,13 +1,15 @@
import getConfig from "next/config"
import fetch from "node-fetch"
import { App, AppSearch, RowSearch } from "../../definitions"
import {App, AppSearch, Table, TableSearch} from "../../definitions"
const { serverRuntimeConfig } = getConfig()
const apiKey = serverRuntimeConfig["apiKey"]
const appName = serverRuntimeConfig["appName"]
const host = serverRuntimeConfig["host"]
async function makeCall(method: string, url: string, opts?: { body?: any, appId?: string } = {}): Promise<any> {
let APP: App | null = null
let TABLES: { [key: string]: Table } = {}
async function makeCall(method: string, url: string, opts?: { body?: any, appId?: string }): Promise<any> {
const fetchOpts: any = {
method,
headers: {
@ -18,49 +20,96 @@ async function makeCall(method: string, url: string, opts?: { body?: any, appId?
fetchOpts.headers["x-budibase-app-id"] = opts.appId
}
if (opts?.body) {
fetchOpts.body = JSON.stringify(opts?.body)
fetchOpts.body = typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
fetchOpts.headers["Content-Type"] = "application/json"
}
const response = await fetch(`${host}/public/v1/${url}`, fetchOpts)
if (response.status === 200) {
const finalUrl = `${host}/api/public/v1/${url}`
const response = await fetch(finalUrl, fetchOpts)
if (response.ok) {
return response.json()
} else {
throw new Error(await response.text())
const error = await response.text()
console.error("Budibase server error - ", error)
throw new Error(error)
}
}
async function getApp(): Promise<App> {
if (APP) {
return APP
}
const apps: AppSearch = await makeCall("post", "applications/search", {
body: {
name: appName,
}
})
if (!Array.isArray(apps?.data)) {
throw new Error("Fatal error, no apps found.")
}
const app = apps.data.find((app: App) => app.name === appName)
if (!app) {
throw new Error("Could not find app, please make sure app name in config is correct.")
}
APP = app
return app
}
async function findTable(appId: string, tableName: string): Promise<Table> {
if (TABLES[tableName]) {
return TABLES[tableName]
}
const tables: TableSearch = await makeCall("post", "tables/search", {
body: {
name: tableName,
},
appId,
})
const table = tables.data.find((table: Table) => table.name === tableName)
if (!table) {
throw new Error("Could not find table, please make sure your app is configured with the Postgres datasource correctly.")
}
TABLES[tableName] = table
return table
}
async function getSales(req: any) {
const { page } = req.query
const { _id: appId } = await getApp()
const table = await findTable(appId, "sales")
return await makeCall("post", `tables/${table._id}/rows/search`, {
appId,
body: {
limit: 10,
sort: {
type: "string",
order: "ascending",
column: "sale_id",
},
paginate: true,
bookmark: parseInt(page),
}
})
}
async function saveSale(req: any) {
const { _id: appId } = await getApp()
const table = await findTable(appId, "sales")
return await makeCall("post", `tables/${table._id}/rows`, {
body: req.body,
appId,
})
}
export default async function handler(req: any, res: any) {
let response: any = {}
if (req.method === "POST") {
response = await saveSale(req)
} else if (req.method === "GET") {
response = await getSales(req)
} else {
res.status(404)
try {
if (req.method === "POST") {
response = await saveSale(req)
} else if (req.method === "GET") {
response = await getSales(req)
} else {
res.status(404)
return
}
res.status(200).json(response)
} catch (err: any) {
res.status(400).send(err)
}
res.status(200).json(response)
}

113
examples/nextjs-api-sales/pages/index.tsx
View file

@ -1,70 +1,61 @@
import type { NextPage } from "next"
import Head from "next/head"
import Image from "next/image"
import styles from "../styles/home.module.css"
import { useState, useEffect } from "react"
const Home: NextPage = () => {
const [sales, setSales] = useState([])
const [currentPage, setCurrentPage] = useState(1)
const getSales = async (page: Number = 1) => {
let url = "/api/sales"
if (page) {
url += `?page=${page}`
}
const response = await fetch(url)
if (!response.ok) {
throw new Error(await response.text())
}
const sales = await response.json()
// @ts-ignore
setCurrentPage(page)
return setSales(sales.data)
}
const saveSale = async () => {
const response = await fetch("/api/sales", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({}),
})
if (!response.ok) {
throw new Error(await response.text())
}
}
const goToNextPage = async () => {
await getSales(currentPage + 1)
}
const goToPrevPage = async () => {
if (currentPage > 1) {
await getSales(currentPage - 1)
}
}
useEffect(() => {
getSales().catch(() => {
setSales([])
})
}, [])
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{" "}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
<h1>Sales</h1>
<div>{sales.map((sale: any) => <p key={sale.sale_id}>{sale.sale_id}</p>)}</div>
<button onClick={goToPrevPage}>Prev Page</button>
<button onClick={goToNextPage}>Next Page</button>
</div>
)
}