31 | {{>header}}
32 | {{>layout}}
33 |
34 |
35 | {{>breadcrumbs}}
36 |
37 | {{>content}}
38 |
39 |
40 |
41 |
42 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/views/editview.html:
--------------------------------------------------------------------------------
1 |
2 | {{view.name}}
3 | 4 | {{#show.success}} 5 |
6 |
7 | {{string.success}}: {{string.saved}}.
8 |
9 | {{/show.success}}
10 |
11 | {{#show.error}}
12 |
13 |
14 | {{string.error}}: {{string.checkout}}.
15 |
16 | {{/show.error}}
17 |
18 |
38 |
--------------------------------------------------------------------------------
/lib/data/mtm.js:
--------------------------------------------------------------------------------
1 |
2 | var async = require('async')
3 | var qb = require('../qb')()
4 |
5 |
6 | // modifies `rows.columns` with manyToMany columns on select
7 | // modifies `rows` with ids on post
8 |
9 | // return an array of all child ids linked to this record's pk
10 | function getIds (args, column, pk, done) {
11 | var str = qb.mtm.select(args, column, pk)
12 | args.db.client.query(str, (err, rows) => {
13 | if (err) return done(err)
14 | var result = []
15 | for (var i=0; i < rows.length; i++) {
16 | result.push(rows[i][Object.keys(rows[i])[0]])
17 | }
18 | done(err, result)
19 | })
20 | }
21 |
22 | function loopColumns (args, row, done) {
23 | row.ids = {}
24 | async.each(args.config.columns, (column, done) => {
25 | if (!column.manyToMany) return done()
26 |
27 | // after select this column practically doesn't exists
28 | if (row.columns[column.name] === undefined)
29 | row.columns[column.name] = []
30 |
31 | var pk = row.pk || row.columns['__pk']
32 | if (!pk) return done()
33 |
34 | getIds(args, column, pk, (err, ids) => {
35 | if (err) return done(err)
36 | args.post
37 | // save the ids from the database
38 | ? row.ids[column.name] = ids
39 | // selecting
40 | : row.columns[column.name] = ids
41 |
42 | done()
43 | })
44 | }, done)
45 | }
46 |
47 | // loopRecords
48 | exports.get = (args, rows, done) => {
49 | async.each(rows, (row, done) => {
50 | loopColumns(args, row, done)
51 | }, done)
52 | }
53 |
--------------------------------------------------------------------------------
/config/lang/cn.json:
--------------------------------------------------------------------------------
1 | {
2 | "name" : "Chinese/中文",
3 |
4 | "logo" : "Express Admin",
5 |
6 | "layout" : "布局",
7 | "centered" : "居中",
8 | "streched" : "拉伸",
9 | "theme" : "换肤",
10 | "language" : "Language/语言",
11 |
12 | "login" : "登录",
13 | "logout" : "退出",
14 | "username" : "用户名",
15 | "password" : "密 码",
16 | "access-denied" : "登录失败!",
17 | "find-user" : "不存在的用户!",
18 | "invalid-password" : "密码错误!",
19 |
20 | "home" : "Home",
21 | "site-admin" : "站点管理",
22 | "tables" : "数据表",
23 | "views" : "Views",
24 | "others" : "其它",
25 |
26 | "select" : "对",
27 | "to-change" : "进行修改",
28 | "filter" : "按条件过滤",
29 | "clear" : "清除",
30 | "order" : "排序",
31 | "asc" : "升序",
32 | "desc" : "降序",
33 | "or" : "或",
34 | "today" : "今天",
35 |
36 | "add-another" : "载追加",
37 | "remove" : "移除",
38 | "add" : "增加",
39 | "change" : "修改",
40 | "delete" : "删除",
41 | "save" : "保存",
42 | "save-continue" : "保存然后继续修改",
43 | "save-add" : "保存然后增加",
44 |
45 | "success" : "成功",
46 | "error" : "错误",
47 | "saved" : "数据已保存",
48 | "checkout" : "请检查高亮数据项",
49 |
50 | "notfound" : "您请求的页面不存在."
51 | }
52 |
--------------------------------------------------------------------------------
/views/listview.html:
--------------------------------------------------------------------------------
1 |
2 | {{#view}}
3 | 4 | {{#table}}{{string.select}} {{name}} {{string.to-change}}.{{/table}} 5 | {{^table}}{{name}}{{/table}} 6 | 7 | {{#table}} 8 | {{string.add}} {{name}} 9 | {{/table}} 10 |
11 | {{/view}} 12 | 13 | {{#show.success}} 14 |
15 |
16 | {{string.success}}: {{string.saved}}.
17 |
18 | {{/show.success}}
19 |
20 | {{#show.error}}
21 |
22 |
23 | {{string.error}}: {{show.error}}.
24 |
25 | {{/show.error}}
26 |
27 | {{>filter}}
28 |
29 | | {{.}} | 34 | {{/columns}} 35 ||
|---|---|
| {{text}} | 42 | {{/pk}} 43 | {{#values}} 44 |45 | {{^mtm}}{{.}}{{/mtm}} 46 | {{#mtm}}{{.}}{{/mtm}} 47 | | 48 | {{/values}} 49 |
4 |
9 | {{/show.error}}
10 |
11 |
49 |
--------------------------------------------------------------------------------
/views/header.html:
--------------------------------------------------------------------------------
1 |
2 |
53 |
--------------------------------------------------------------------------------
/lib/app/settings.js:
--------------------------------------------------------------------------------
1 |
2 | var slugify = require('slugify')
3 |
4 |
5 | // check for column existence
6 | function exists (columns, name) {
7 | for (var i=0; i < columns.length; i++) {
8 | if (columns[i].name == name) return true
9 | }
10 | return false
11 | }
12 |
13 | // create settings object for a table
14 | function createTable (name, pk, view) {
15 | return {
16 | slug: slugify(name),
17 | table: {
18 | name: name,
19 | pk: pk,
20 | verbose: name,
21 | view: view
22 | },
23 | columns: [],
24 | mainview: {
25 | show: true
26 | },
27 | listview: {
28 | order: {},
29 | page: 25
30 | },
31 | editview: {
32 | readonly: false
33 | }
34 | }
35 | }
36 |
37 | // create a settings object for a column
38 | function createColumn (name, info) {
39 | return {
40 | name: name,
41 | verbose: name,
42 | control: {text: true},
43 | type: info.type,
44 | allowNull: info.allowNull,
45 | defaultValue: info.defaultValue,
46 | listview: {show: true},
47 | editview: {show: true}
48 | }
49 | }
50 |
51 | // get the first found primary key from a given table's columns list
52 | function primaryKey (columns) {
53 | var pk = []
54 | for (var name in columns) {
55 | for (var property in columns[name]) {
56 | if (columns[name][property] === 'pri') {
57 | pk.push(name)
58 | }
59 | }
60 | }
61 | return !pk.length ? '' : (pk.length > 1 ? pk : pk[0])
62 | }
63 |
64 | // insert new tables and columns for a settings object
65 | exports.refresh = (settings, info) => {
66 | for (var table in info) {
67 | var view = info[table].__view
68 | delete info[table].__view
69 |
70 | var columns = info[table]
71 | var pk = primaryKey(columns)
72 |
73 | if (settings[table] === undefined) {
74 | settings[table] = createTable(table, pk, view)
75 | }
76 |
77 | for (var name in columns) {
78 | if (exists(settings[table].columns, name)) continue
79 |
80 | settings[table].columns.push(createColumn(name, columns[name]))
81 | }
82 | }
83 | return settings
84 | }
85 |
--------------------------------------------------------------------------------
/views/listview/filter.html:
--------------------------------------------------------------------------------
1 |
2 |
54 |
--------------------------------------------------------------------------------
/views/mainview.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 | {{show.error}}
7 |
8 | 3 | {{string.site-admin}} 4 | 5 |
6 | 7 | 26 | 27 | {{#tables}} 28 || {{string.tables}} | 32 |
|---|
| 38 | {{name}} 39 | 40 | | 41 |
| {{string.views}} | 52 |
|---|
| 58 | {{name}} 59 | | 60 |
| {{string.others}} | 71 |
|---|
| 77 | {{name}} 78 | | 79 |
4 |
88 |
5 |
6 |
7 |
8 | {{#control}}
9 | {{! data-type-name="type.name" data-allow-null="allowNull" data-default-value="defaultValue"}}
10 |
11 |
87 |
12 |
13 | {{#number}}
14 |
15 | {{/number}}
16 |
17 | {{#text}}
18 |
19 | {{/text}}
20 |
21 | {{#textarea}}
22 |
23 | {{/textarea}}
24 |
25 | {{#select}}
26 |
33 | {{/select}}
34 |
35 | {{#date}}
36 |
37 | {{/date}}
38 | {{#time}}
39 |
40 | {{/time}}
41 | {{#datetime}}
42 |
43 | {{/datetime}}
44 | {{#year}}
45 |
46 | {{/year}}
47 |
48 | {{#file}}
49 | {{^binary}}
50 |
51 | {{/binary}}
52 | {{/file}}
53 | {{#binary}}
54 | 
55 | {{/binary}}
56 |
57 | {{#radio}}
58 | {{#value}}
59 |
62 | {{/value}}
63 | {{/radio}}
64 |
65 | {{#error}}
66 | {{message}}
67 | {{/error}}
68 |
69 | {{#hidden}}
70 |
71 | {{/hidden}}
72 |
73 |
74 | {{#date}}
75 |
76 | {{string.today}}
77 |
78 | {{/date}}
79 | {{#file}}
80 |
81 |
82 |
83 | {{/file}}
84 |
85 | {{/control}}
86 |
8 |
9 | {{#number}}
10 |
11 | {{/number}}
12 |
13 | {{#text}}
14 |
15 | {{/text}}
16 |
17 | {{#textarea}}
18 |
19 | {{/textarea}}
20 |
21 | {{#select}}
22 |
29 | {{/select}}
30 |
31 | {{#date}}
32 |
33 |
34 |
35 | {{/date}}
36 | {{#time}}
37 |
38 |
39 |
40 | {{/time}}
41 | {{#datetime}}
42 |
43 |
44 |
45 | {{/datetime}}
46 | {{#year}}
47 |
48 |
49 |
50 | {{/year}}
51 |
52 | {{#file}}
53 |
54 | {{/file}}
55 |
56 | {{#radio}}
57 | {{#value}}
58 |
61 | {{/value}}
62 | {{/radio}}
63 |
64 | {{#error}}
65 | {{message}}
66 | {{/error}}
67 |
68 | {{#hidden}}
69 |
70 | {{/hidden}}
71 |
72 |
73 |
74 | {{/control}}
75 |
--------------------------------------------------------------------------------
/lib/qb/tbl.js:
--------------------------------------------------------------------------------
1 |
2 | var x = null
3 | var z = require('./partials')()
4 |
5 |
6 | function select (args) {
7 | var table = args.config.table
8 | var columns = args.config.columns
9 |
10 | var names = []
11 | for (var i=0; i < columns.length; i++) {
12 | if (columns[i].oneToMany && columns[i].fk) {
13 | names.push(x.as(
14 | z.concat(columns[i].fk,table.name,z.schema(table),','),
15 | x.name(columns[i].name)
16 | ))
17 | }
18 | else if (!columns[i].manyToMany) {
19 | names.push(x.name(columns[i].name,table.name,z.schema(table)))
20 | }
21 | }
22 | names.unshift(x.as(
23 | z.concat(table.pk,table.name,z.schema(table),','),
24 | x.name('__pk')
25 | ))
26 |
27 | var str = [
28 | x.select(names.join()),
29 | x.from(x.name(table.name,z.schema(table))),
30 | x.where(x.and(z.eq(table, (args.fk? args.fk:table.pk), args.id))),
31 | ';'
32 | ].join(' ')
33 |
34 | args.debug && console.log('tbl', str)
35 | return str
36 | }
37 |
38 | function insert (args, settings, record) {
39 | var data = _kvp(args.name, record.columns, settings.columns)
40 |
41 | var result = [
42 | x.insert(
43 | x.name(settings.table.name,z.schema(settings.table)),
44 | data.keys,
45 | data.values
46 | )
47 | ]
48 |
49 | if (x.dialect == 'pg') {
50 | (settings.table.pk instanceof Array)
51 | ? result.push('returning ' + x.names(settings.table.pk))
52 | : result.push('returning ' + x.name(settings.table.pk))
53 | }
54 | result.push(';')
55 |
56 | var str = result.join(' ')
57 | args.debug && console.log('tbl', str)
58 | return str
59 | }
60 |
61 | function update (args, settings, record) {
62 | var data = _kvp(args.name, record.columns, settings.columns)
63 |
64 | var str = [
65 | x.update(
66 | x.name(settings.table.name,z.schema(settings.table)),
67 | data.keys,
68 | data.values
69 | ),
70 | x.where(x.and(z.eq(settings.table, settings.table.pk, record.pk))),
71 | ';'
72 | ].join(' ')
73 |
74 | args.debug && console.log('tbl', str)
75 | return str
76 | }
77 |
78 | function remove (args, settings, record) {
79 | var pk = settings.table.pk
80 |
81 | var str = [
82 | x.delete(x.name(settings.table.name,z.schema(settings.table))),
83 | x.where(x.and(z.eq(settings.table,pk,record.pk))),
84 | ';'
85 | ].join(' ')
86 |
87 | args.debug && console.log('tbl', str)
88 | return str
89 | }
90 |
91 | function _kvp (table, data, columns) {
92 | var keys = [], values = []
93 |
94 | for (var i=0; i < columns.length; i++) {
95 | if (columns[i].manyToMany) continue
96 |
97 | var name = columns[i].name
98 | if (!{}.hasOwnProperty.call(data, name)) continue
99 |
100 | if (columns[i].oneToMany && columns[i].fk) {
101 | var _values = data[name].split(',')
102 | for (var j=0; j < columns[i].fk.length; j++) {
103 | var _name = columns[i].fk[j]
104 |
105 | keys.push(x.name(_name))
106 | for (var k=0; k < columns.length; k++) {
107 | if (columns[k].name == _name) {
108 | var value = _values[j]
109 | break
110 | }
111 | }
112 | values.push(value || null)
113 | }
114 | continue
115 | }
116 |
117 | keys.push(x.name(name))
118 | var value = _escape(data[name], columns[i].type)
119 |
120 | values.push(value)
121 | }
122 | return {keys, values}
123 | }
124 |
125 | function _escape (value, type) {
126 | if (!value) return null
127 | if (/(?:tiny|medium|long)?blob|(?:var)?binary\(\d+\)/i.test(type)) {
128 | return "X\'"+value+"\'"
129 | }
130 | else if (/bytea/.test(type)) {
131 | return "\'\\x"+value+"\'"
132 | }
133 | else {
134 | return value
135 | }
136 | }
137 |
138 | module.exports = (instance) => {
139 | if (instance) x = instance
140 | return {select, insert, update, remove}
141 | }
142 |
--------------------------------------------------------------------------------
/routes/listview.js:
--------------------------------------------------------------------------------
1 |
2 | var async = require('async')
3 | var dcopy = require('deep-copy')
4 |
5 | var qb = require('../lib/qb')()
6 | var data = require('../lib/data')
7 |
8 | var format = require('../lib/format')
9 | var filter = require('../lib/listview/filter')
10 |
11 |
12 | function getArgs (req, res) {
13 | var args = {
14 | settings : res.locals._admin.settings,
15 | db : res.locals._admin.db,
16 | readonly : res.locals._admin.readonly,
17 | debug : res.locals._admin.debug,
18 | slug : req.params[0],
19 | page : req.query.p || 0,
20 | data : req.body
21 | }
22 | args.name = res.locals._admin.slugs[args.slug]
23 | args.config = dcopy(args.settings[args.name])
24 | return args
25 | }
26 |
27 | exports.get = (req, res, next) => {
28 | _data(req, res, next)
29 | }
30 |
31 | exports.post = (req, res, next) => {
32 | _data(req, res, next)
33 | }
34 |
35 | function _data (req, res, next) {
36 | var args = getArgs(req, res)
37 | var events = res.locals._admin.events
38 |
39 | args.filter = filter.prepareSession(req, args)
40 | qb.lst.select(args)
41 |
42 | var results = {}
43 | async.series([
44 | events.preList.bind(events, req, res, args),
45 | (done) => {
46 | data.list.get(args, (err, result) => {
47 | if (err) return done(err)
48 | results.data = result
49 | done()
50 | })
51 | },
52 | (done) => {
53 | data.pagination.get(args, (err, pager) => {
54 | if (err) return done(err)
55 | // always should be in front of filter.getColumns
56 | // as it may reduce args.config.columns
57 | results.order = filter.getOrderColumns(req, args)
58 | args.config.columns = filter.getColumns(args)
59 | results.pager = pager
60 | done()
61 | })
62 | },
63 | (done) => {
64 | data.otm.get(args, (err) => {
65 | if (err) return done(err)
66 | data.stc.get(args)
67 | done()
68 | })
69 | }
70 | ], (err) => {
71 | if (err) return next(err)
72 | render(
73 | req, res, args,
74 | results.data, results.pager, results.order,
75 | next
76 | )
77 | })
78 | }
79 |
80 | function render (req, res, args, ddata, pager, order, next) {
81 | // set filter active items
82 | for (var i=0; i < args.config.columns.length; i++) {
83 | var column = args.config.columns[i]
84 | var value = args.filter.columns[column.name]
85 | column.defaultValue = null
86 | column.value = format.form.value(column, value)
87 | }
88 |
89 | res.locals.view = {
90 | name: args.config.table.verbose,
91 | slug: args.slug,
92 | error: res.locals.error,
93 | table: !args.config.table.view
94 | }
95 | res.locals.breadcrumbs = {
96 | links: [
97 | {url: '/', text: res.locals.string.home},
98 | {active: true, text: args.config.table.verbose}
99 | ]
100 | }
101 |
102 | // show filter rows in two columns
103 | res.locals.filter = (() => {
104 | var filter = args.config.columns
105 | var rows = []
106 | var size = 2
107 | var total = filter.length / size
108 | for (var i=0; i < total; i++) {
109 | rows.push({row: filter.slice(i*size, (i+1)*size)})
110 | }
111 | return rows
112 | })()
113 | res.locals.have = res.locals.filter.length ? true : false
114 |
115 | res.locals.order = order
116 | // order direction
117 | res.locals.direction = [
118 | {
119 | text: res.locals.string.asc,
120 | value: 'asc',
121 | selected: args.filter.direction == 'asc' ? true : null
122 | },
123 | {
124 | text: res.locals.string.desc,
125 | value: 'desc',
126 | selected: args.filter.direction == 'desc' ? true : null
127 | }
128 | ]
129 | res.locals.collapsed = args.filter.show
130 | res.locals.or = args.filter.or
131 |
132 | res.locals.columns = ddata.columns
133 | res.locals.records = ddata.records
134 | res.locals.pagination = pager
135 |
136 | res.locals.partials = {
137 | content: 'listview',
138 | filter: 'listview/filter',
139 | column: 'listview/column',
140 | pagination: 'pagination'
141 | }
142 |
143 | next()
144 | }
145 |
--------------------------------------------------------------------------------
/routes/editview.js:
--------------------------------------------------------------------------------
1 |
2 | var async = require('async')
3 | var dcopy = require('deep-copy')
4 | var editview = require('../lib/editview/index')
5 | var database = require('../lib/db/update')
6 |
7 |
8 | function getArgs (req, res) {
9 | var args = {
10 | settings : res.locals._admin.settings,
11 | db : res.locals._admin.db,
12 | readonly : res.locals._admin.readonly,
13 | debug : res.locals._admin.debug,
14 | slug : req.params[0],
15 | id : req.params[1] == 'add' ? null : req.params[1].split(','),
16 | data : req.body,
17 | upload : req.files,
18 | upath : res.locals._admin.config.admin.upload
19 | };
20 | args.name = res.locals._admin.slugs[args.slug]
21 | return args
22 | }
23 |
24 | function page (req, args) {
25 | if (!req.session.filter || !req.session.filter[args.name]) return ''
26 | var page = req.session.filter[args.name].page
27 | return page ? '?p='+page : ''
28 | }
29 |
30 | function action (req, name) {
31 | return {}.hasOwnProperty.call(req.body.action, name)
32 | }
33 |
34 | exports.get = (req, res, next) => {
35 | var args = getArgs(req, res);
36 |
37 | editview.getTypes(args, (err, data) => {
38 | if (err) return next(err)
39 | render(req, res, next, data, args)
40 | })
41 | }
42 |
43 | exports.post = (req, res, next) => {
44 | var args = getArgs(req, res)
45 | var events = res.locals._admin.events
46 |
47 | editview.getTypes(args, (err, data) => {
48 | if (err) return next(err)
49 |
50 | var view = req.body.view,
51 | table = Object.keys(view)[0]
52 |
53 | if (action(req, 'remove')) {
54 | // should be based on constraints
55 | args.action = 'remove'
56 |
57 | } else if ({}.hasOwnProperty.call(view[table].records[0], 'insert')) {
58 | if (args.error && !args.readonly)
59 | return render(req, res, next, data, args)
60 | args.action = 'insert'
61 |
62 | } else {
63 | if (args.error && !args.readonly)
64 | return render(req, res, next, data, args)
65 | args.action = 'update'
66 | }
67 |
68 | async.series([
69 | events.preSave.bind(events, req, res, args),
70 |
71 | database.update.bind(database, args),
72 |
73 | events.postSave.bind(events, req, res, args)
74 |
75 | ], (err) => {
76 | if (err) {
77 | req.session.error = err.message
78 | res.redirect(res.locals.root+'/'+args.slug+page(req, args))
79 | return
80 | }
81 |
82 | req.session.success = true
83 |
84 | // based on clicked button
85 | if (action(req, 'remove')) {
86 | // the message should be different for delete
87 | res.redirect(res.locals.root+'/'+args.slug+page(req, args))
88 | }
89 | else if (action(req, 'save')) {
90 | res.redirect(res.locals.root+'/'+args.slug+page(req, args))
91 | }
92 | else if (action(req, 'another')) {
93 | res.redirect(res.locals.root+'/'+args.slug+'/add')
94 | }
95 | else if (action(req, 'continue')) {
96 | if (args.readonly) return render(req, res, next, data, args)
97 | res.redirect(res.locals.root+'/'+args.slug+'/'+args.id.join())
98 | }
99 | })
100 | })
101 | }
102 |
103 | function render (req, res, next, data, args) {
104 | var string = res.locals.string
105 | var view = args.settings[args.name]
106 |
107 | res.locals.view = {
108 | tables: data.view.tables,
109 | name: view.table.verbose,
110 | slug: args.slug,
111 | action: req.url,
112 | readonly: view.editview.readonly,
113 | success: args.success
114 | }
115 | res.locals.breadcrumbs = {
116 | links: [
117 | {url: '/', text: string.home},
118 | {url: '/'+args.slug, text: view.table.verbose},
119 | {active: true, text: req.params[1]}
120 | ]
121 | }
122 | res.locals.show.error = args.error
123 | res.locals.show.delete = !(req.params[1] == 'add')
124 |
125 | data.oneToOne.one = true
126 | data.oneToOne.type = 'one'
127 | data.manyToOne.type = 'many'
128 | res.locals.inline = [data.oneToOne, data.manyToOne]
129 |
130 | res.locals.partials = {
131 | content: 'editview',
132 | view: 'editview/view',
133 | inline: 'editview/inline',
134 | column: 'editview/column'
135 | }
136 |
137 | next()
138 | }
139 |
--------------------------------------------------------------------------------
/lib/db/update.js:
--------------------------------------------------------------------------------
1 |
2 | var async = require('async')
3 | var qb = require('../qb')()
4 |
5 |
6 | exports.update = (args, done) => {
7 | var types = /insert|update/.test(args.action)
8 | ? ['view', 'oneToOne', 'manyToOne']
9 | // remove
10 | : ['oneToOne', 'manyToOne', 'view']
11 |
12 | async.eachSeries(types, (type, done) => {
13 | args.type = type
14 | args.tables = args.data[type]
15 | if (!args.tables) return done()
16 |
17 | async.eachSeries(Object.keys(args.tables), (table, done) => {
18 | var records = args.tables[table].records
19 | if (!records) return done()
20 |
21 | async.eachSeries(records, (record, done) => {
22 | var settings = args.settings[table]
23 | tbl.inline(args, settings, record)
24 |
25 | var data = tbl.query(args, settings, record)
26 | tbl.execute(data.action, args, data.query, record, settings, done)
27 | }, done)
28 | }, done)
29 | }, done)
30 | }
31 |
32 |
33 | var tbl = {
34 | // modifies inline record.columns[fk] with parent [pk]
35 | inline: (args, settings, record) => {
36 | if (args.type == 'view') return
37 |
38 | var fk = args.settings[args.name].editview[args.type][settings.table.name]
39 | fk = fk instanceof Array ? fk : [fk]
40 | for (var i=0; i < fk.length; i++) {
41 | record.columns[fk[i]] = args.id[i]
42 | }
43 | },
44 | // settings - current table settings, record - current record data
45 | query: (args, settings, record) => {
46 | if (record.insert) {
47 | var str = qb.tbl.insert(args, settings, record)
48 | var action = 'insert'
49 |
50 | } else if (record.remove || args.action == 'remove') {
51 | var str = qb.tbl.remove(args, settings, record)
52 | var action = 'remove'
53 |
54 | } else { // update
55 | var str = qb.tbl.update(args, settings, record)
56 | var action = 'update'
57 | }
58 |
59 | return {action:action, query:str}
60 | },
61 | _pks: (args, settings, record, result) => {
62 | var pks = settings.table.pk instanceof Array ? settings.table.pk : [settings.table.pk]
63 | var columns = record.columns
64 | var values = []
65 |
66 | for (var i=0; i < pks.length; i++) {
67 | if (columns[pks[i]] === undefined) {
68 | values.push(result.insertId)
69 | } else {
70 | values.push(columns[pks[i]])
71 | }
72 | }
73 |
74 | record.pk = values
75 | if (args.type == 'view' && args.action == 'insert') args.id = values
76 | },
77 | execute: (action, args, str, record, settings, cb) => {
78 | if (args.readonly) return cb()
79 |
80 | // insert or update
81 | if (action != 'remove') {
82 | args.db.client.query(str, (err, result) => {
83 | if (err) return cb(err)
84 |
85 | if (action == 'insert') {
86 | tbl._pks(args, settings, record, result)
87 | }
88 |
89 | var queries = many.queries(action, args, record, settings.columns)
90 | many.execute(args, queries, (err) => {
91 | if (err) return cb(err)
92 | cb()
93 | })
94 | })
95 | }
96 | // remove
97 | else {
98 | var queries = many.queries(action, args, record, settings.columns)
99 | many.execute(args, queries, (err) => {
100 | if (err) return cb(err)
101 | args.db.client.query(str, (err, result) => {
102 | if (err) return cb(err)
103 | cb()
104 | })
105 | })
106 | }
107 | }
108 | }
109 |
110 |
111 | var many = {
112 | queries: (action, args, record, columns) => {
113 | var queries = []
114 |
115 | for (var i=0; i < columns.length; i++) {
116 | if (!columns[i].manyToMany) continue
117 |
118 | var link = columns[i].manyToMany.link
119 | var dbIds = record.ids[columns[i].name] || []
120 | var postIds = record.columns[columns[i].name] || []
121 |
122 | postIds = (postIds instanceof Array) ? postIds : [postIds]
123 |
124 | var ins, del
125 | if (action === 'insert') {
126 | ins = many._insert(args, postIds, link, record)
127 | }
128 | else if (action === 'remove') {
129 | del = many._delete(args, dbIds, link, record)
130 | }
131 | else if (action === 'update') {
132 | var delIds = many._difference(dbIds, postIds)
133 | var insIds = many._difference(postIds, dbIds)
134 | del = many._delete(args, delIds, link, record)
135 | ins = many._insert(args, insIds, link, record)
136 | }
137 | ins ? queries.push(ins) : null
138 | del ? queries.push(del) : null
139 | }
140 | return queries
141 | },
142 | _insert: (args, ids, link, record) => {
143 | if (!ids.length) return null
144 | return qb.mtm.insert(args, ids, link, record)
145 | },
146 | _delete: (args, ids, link, record) => {
147 | if (!ids.length) return null
148 | return qb.mtm.remove(args, ids, link, record)
149 | },
150 | _difference: (source, target) => {
151 | for (var i=0; i < source.length; i++) {
152 | source[i] = source[i].toString()
153 | }
154 | for (var i=0; i < target.length; i++) {
155 | target[i] = target[i].toString()
156 | }
157 | return source.filter((i) => {
158 | return !(target.indexOf(i) > -1)
159 | })
160 | },
161 | execute: (args, queries, done) => {
162 | async.eachSeries(queries, (query, done) => {
163 | args.db.client.query(query, done)
164 | }, done)
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/lib/qb/partials.js:
--------------------------------------------------------------------------------
1 |
2 | var x = null
3 |
4 |
5 | function schema (table) {
6 | if (x.dialect != 'pg') return
7 | return table.schema || x._schema
8 | }
9 |
10 | function concat (columns, table, schema, sep) {
11 | if (!(columns instanceof Array)) return x.name(columns,table,schema)
12 |
13 | var result = []
14 | if (x.dialect == 'sqlite') {
15 | for (var i=0; i < columns.length; i++) {
16 | result.push(x.func('ifnull',[x.name(columns[i],table),x.wrap('')]))
17 | }
18 | }
19 | else {
20 | // mysql|pg
21 | result = x.names(columns,table,schema)
22 | }
23 | columns = result
24 |
25 | return (/mysql|pg/.test(x.dialect))
26 | ? x.func('concat_ws',[x.wrap(sep),columns])
27 | // sqlite
28 | : columns.join("||'"+sep+"'||")
29 | }
30 |
31 | function group (columns) {
32 | return (/mysql|sqlite/.test(x.dialect))
33 | ? x.func('group_concat',['distinct',columns],' ')
34 | // pg
35 | : x.func('string_agg',['distinct',[columns,x.wrap(',')].join()],' ')
36 | }
37 |
38 | function join (table, fk, ref, pk, alias) {
39 | var tbl = table.name||table.table
40 | var tsch = schema(table)
41 | var rsch = schema(ref)
42 | var ref = ref.table
43 |
44 | var fks = (fk instanceof Array) ? fk : [fk]
45 | var pks = (pk instanceof Array) ? pk : [pk]
46 |
47 | var condition = []
48 | for (var i=0; i < fks.length; i++) {
49 | var pk = pks[i], fk = fks[i]
50 |
51 | condition.push(
52 | x.eq(x.name(fk,tbl,tsch),
53 | alias ? x.name(pk,alias) : x.name(pk,ref,rsch)
54 | )
55 | )
56 | }
57 |
58 | return x.join(
59 | alias ? x.alias(x.name(ref,rsch),x.name(alias)) : x.name(ref,rsch),
60 | condition,
61 | 'left'
62 | )
63 | }
64 |
65 | function eq (table, column, value) {
66 | var columns = column instanceof Array ? column : [column]
67 |
68 | var values =
69 | (value instanceof Array) ? value :
70 | ('string'===typeof value ? value.split(',') :
71 | [value])
72 |
73 | var tbl = table.name||table.table
74 | var sch = schema(table)
75 |
76 | var result = []
77 | for (var i=0; i < columns.length; i++) {
78 | result.push(x.eqv(x.name(columns[i],tbl,sch),values[i]))
79 | }
80 |
81 | return result
82 | }
83 |
84 | // [1,2],[3,4] = [1,3],[2,4]
85 | function zip (columns, values) {
86 | for (var i=0; i < values.length; i++) {
87 | values[i] = values[i].toString().split(',')
88 | }
89 | var result = []
90 | for (var i=0; i < columns.length; i++) {
91 | var val = []
92 | for (var j=0; j < values.length; j++) {
93 | val.push(values[j][i])
94 | }
95 | result.push(val)
96 | }
97 | return result
98 | }
99 | function _in (column, value, alias) {
100 | var columns = column instanceof Array ? column : [column]
101 | var values = value instanceof Array ? value : [value]
102 |
103 | values = zip(columns, values)
104 |
105 | var result = []
106 | for (var i=0; i < columns.length; i++) {
107 | result.push([
108 | x.name(columns[i],alias&&alias.alias),
109 | x.in(values[i])
110 | ].join(' '))
111 | }
112 |
113 | return x.and(result)
114 | }
115 |
116 | function tables (db) {
117 | if (x.dialect == 'mysql') {
118 | return [
119 | 'show tables in',
120 | x.name(db),
121 | ';'
122 | ].join(' ')
123 | }
124 | else if (x.dialect == 'pg') {
125 | return [
126 | x.select('table_name'),
127 | x.from('information_schema.tables'),
128 | x.where(x.eq('table_schema',x.wrap(db))),
129 | ';'
130 | ].join(' ')
131 | }
132 | else if (x.dialect == 'sqlite') {
133 | return [
134 | x.select(x.name('name')),
135 | x.from('sqlite_master'),
136 | x.where(x.eq('type',x.wrap('table'))),
137 | ';'
138 | ].join(' ')
139 | }
140 | }
141 |
142 | function views (db) {
143 | if (x.dialect == 'mysql') {
144 | return [
145 | 'show full tables in',
146 | x.name(db),
147 | x.where(x.name('TABLE_TYPE')),
148 | x.like(x.wrap('VIEW')),
149 | ';'
150 | ].join(' ')
151 | }
152 | else if (x.dialect == 'pg') {
153 | return "select viewname from pg_catalog.pg_views "+
154 | "where schemaname NOT IN ('pg_catalog', 'information_schema') "+
155 | "order by viewname;"
156 | }
157 | else if (x.dialect == 'sqlite') {
158 | return [
159 | x.select(x.name('name')),
160 | x.from('sqlite_master'),
161 | x.where(x.eq('type',x.wrap('view'))),
162 | ';'
163 | ].join(' ')
164 | }
165 | }
166 |
167 | function columns (table, schema) {
168 | if (x.dialect == 'mysql') {
169 | return [
170 | 'show columns in',
171 | x.name(table),
172 | 'in',
173 | x.name(schema),
174 | ';'
175 | ].join(' ')
176 | }
177 | else if (x.dialect == 'sqlite') {
178 | return [
179 | 'pragma',
180 | x.func('table_info', x.wrap(table)),
181 | ';'
182 | ].join(' ')
183 | }
184 | else if (x.dialect == 'pg') {
185 | return 'SELECT cs.column_name AS "Field", cs.data_type AS "Type", '+
186 | 'cs.is_nullable AS "Null", tc.constraint_type AS "Key", '+
187 | 'cs.column_default AS "Default", '+
188 | 'cs.numeric_precision, cs.numeric_precision_radix, cs.numeric_scale, '+
189 | 'cs.character_maximum_length '+
190 | 'FROM "information_schema"."columns" cs '+
191 | 'LEFT JOIN "information_schema"."key_column_usage" kc '+
192 | ' ON cs.column_name = kc.column_name '+
193 | ' AND cs.table_schema = kc.table_schema '+
194 | ' AND cs.table_name = kc.table_name '+
195 | 'LEFT JOIN "information_schema"."table_constraints" tc '+
196 | ' ON kc.constraint_name = tc.constraint_name '+
197 | ' AND kc.table_schema = tc.table_schema '+
198 | ' AND kc.table_name = tc.table_name '+
199 | 'WHERE '+
200 | ' cs.table_name = \''+table+'\' '+
201 | ' AND cs.table_schema = \''+schema+'\' ;'
202 | }
203 | }
204 |
205 | module.exports = (instance) => {
206 | if (instance) x = instance
207 | return {
208 | schema, concat, group, join, eq, in:_in,
209 | tables, views, columns
210 | }
211 | }
212 |
--------------------------------------------------------------------------------
/lib/db/client.js:
--------------------------------------------------------------------------------
1 |
2 | // https://github.com/mysqljs/mysql
3 | function MySql () {
4 | try {
5 | var client = require('mysql')
6 | }
7 | catch (err) {
8 | throw Error('The `mysql` module was not found')
9 | }
10 | var connection = null
11 | var config = {}
12 | var mysql = true
13 | var name = 'mysql'
14 |
15 | var connect = (options, done) => {
16 | connection = client.createConnection(options)
17 | connection.connect((err) => {
18 | if (err) return done(err)
19 | Object.keys(connection.config).forEach((key) => {
20 | config[key] = connection.config[key]
21 | })
22 | config.schema = config.database
23 | done()
24 | })
25 | connection.on('error', (err) => {
26 | if (err.code == 'PROTOCOL_CONNECTION_LOST') {
27 | handleDisconnect(options)
28 | }
29 | else throw err
30 | })
31 | }
32 |
33 | var handleDisconnect = (options) => {
34 | setTimeout(() => {
35 | connect(options, (err) => {
36 | err && handleDisconnect(options)
37 | })
38 | }, 2000)
39 | }
40 |
41 | var query = (sql, done) => {
42 | connection.query(sql, (err, rows) => {
43 | if (err) return done(err)
44 | done(null, rows)
45 | })
46 | }
47 |
48 | var getColumnsInfo = (data) => {
49 | var columns = {}
50 | for (var key in data) {
51 | var column = data[key]
52 | columns[column.Field] = {
53 | type: column.Type,
54 | allowNull: column.Null === 'YES' ? true : false,
55 | key: column.Key.toLowerCase(),
56 | defaultValue: column.Default
57 | // extra: column.Extra
58 | }
59 | }
60 | return columns
61 | }
62 |
63 | return {
64 | config,
65 | name,
66 | connect,
67 | handleDisconnect,
68 | query,
69 | getColumnsInfo,
70 | }
71 | }
72 |
73 | // https://github.com/brianc/node-postgres
74 | function PostgreSQL () {
75 | try {
76 | var client = require('pg')
77 | }
78 | catch (err) {
79 | throw Error('The `pg` module was not found')
80 | }
81 | var connection = null
82 | var config = {}
83 | var pg = true
84 | var name = 'pg'
85 |
86 | var connect = (options, done) => {
87 | connection = new client.Client(options)
88 | connection.connect((err) => {
89 | if (err) return done(err)
90 | Object.keys(connection.connectionParameters).forEach((key) => {
91 | config[key] = connection.connectionParameters[key]
92 | })
93 | config.schema = options.schema || 'public'
94 | done()
95 | })
96 | }
97 |
98 | var query = (sql, done) => {
99 | connection.query(sql, (err, result) => {
100 | if (err) return done(err)
101 | if (result.command == 'INSERT' && result.rows.length) {
102 | var obj = result.rows[0]
103 | var key = Object.keys(obj)[0]
104 | result.insertId = obj[key]
105 | return done(null, result)
106 | }
107 | // select
108 | done(null, result.rows)
109 | })
110 | }
111 |
112 | function getType (column) {
113 | if (/^double precision$/.test(column.Type))
114 | return 'double'
115 |
116 | else if (/^numeric$/.test(column.Type))
117 | return column.numeric_precision
118 | ? 'decimal('+column.numeric_precision+','+column.numeric_scale+')'
119 | : 'decimal'
120 |
121 | else if (/^time\s.*/.test(column.Type))
122 | return 'time'
123 |
124 | else if (/^timestamp\s.*/.test(column.Type))
125 | return 'timestamp'
126 |
127 | else if (/^bit$/.test(column.Type))
128 | return 'bit('+column.character_maximum_length+')'
129 |
130 | else if (/^character$/.test(column.Type))
131 | return 'char('+column.character_maximum_length+')'
132 |
133 | else if (/^character varying$/.test(column.Type))
134 | return 'varchar('+column.character_maximum_length+')'
135 |
136 | else if (/^boolean$/.test(column.Type))
137 | return 'char'
138 |
139 | else return column.Type
140 | }
141 |
142 | var getColumnsInfo = (data) => {
143 | var columns = {}
144 | for (var key in data) {
145 | var column = data[key]
146 | columns[column.Field] = {
147 | type: getType(column),
148 | allowNull: column.Null === 'YES' ? true : false,
149 | key: (column.Key && column.Key.slice(0,3).toLowerCase()) || '',
150 | defaultValue: column.Default && column.Default.indexOf('nextval') == 0 ? null : column.Default
151 | // extra: column.Extra
152 | }
153 | }
154 | return columns
155 | }
156 |
157 | return {
158 | config,
159 | name,
160 | connect,
161 | query,
162 | getColumnsInfo,
163 | }
164 | }
165 |
166 | // https://github.com/TryGhost/node-sqlite3
167 | function SQLite () {
168 | try {
169 | var client = require('sqlite3')
170 | }
171 | catch (err) {
172 | throw new Error('The `sqlite3` module was not found')
173 | }
174 | var connection = null
175 | var config = {}
176 | var sqlite = true
177 | var name = 'sqlite'
178 |
179 | var connect = (options, done) => {
180 | connection = new client.Database(options.database)
181 | config = {schema:''}
182 | done()
183 | }
184 |
185 | var query = (sql, done) => {
186 | if (/^(insert|update|delete)/i.test(sql)) {
187 | connection.run(sql, function (err) {
188 | if (err) return done(err)
189 | done(null, {insertId: this.lastID})
190 | })
191 | }
192 | else {
193 | connection.all(sql, function (err, rows) {
194 | if (err) return done(err)
195 | done(null, rows)
196 | })
197 | }
198 | }
199 |
200 | var getColumnsInfo = (data) => {
201 | var columns = {}
202 | for (var i=0; i < data.length; i++) {
203 | var column = data[i]
204 | columns[column.name] = {
205 | type: column.type,
206 | allowNull: column.notnull === 1 ? false : true,
207 | key: column.pk === 1 ? 'pri' : '',
208 | defaultValue: column.dflt_value
209 | }
210 | }
211 | return columns
212 | }
213 |
214 | return {
215 | config,
216 | name,
217 | connect,
218 | query,
219 | getColumnsInfo,
220 | }
221 | }
222 |
223 | module.exports = (config) =>
224 | config.mysql ? MySql() :
225 | config.pg ? PostgreSQL() :
226 | config.sqlite ? SQLite() :
227 | null
228 |
--------------------------------------------------------------------------------
/lib/qb/lst.js:
--------------------------------------------------------------------------------
1 |
2 | var x = null
3 | var z = require('./partials')()
4 |
5 |
6 | function join (table, column, index) {
7 | if (column.oneToMany) {
8 | var ref = column.oneToMany
9 | var alias = ref.table+index
10 |
11 | var joins = column.fk
12 | ? [z.join(table, column.fk, ref, ref.pk, alias)]
13 | : [z.join(table, column.name, ref, ref.pk, alias)]
14 | }
15 | else if (column.manyToMany) {
16 | var ref = column.manyToMany.ref
17 | var link = column.manyToMany.link
18 | var alias = ref.table+index
19 |
20 | var joins = [
21 | z.join(table, table.pk, link, link.parentPk),
22 | z.join(link, link.childPk, ref, ref.pk, alias)
23 | ]
24 | }
25 |
26 | var concat = z.concat(ref.columns,alias,undefined,' ')
27 | var group = z.group(concat)
28 |
29 | return {
30 | select: x.as(group,x.name(column.name)),
31 | joins: joins
32 | }
33 | }
34 |
35 |
36 | function select (args) {
37 | var view = args.config
38 | var table = view.table
39 | var columns = view.columns
40 |
41 | var names = []
42 | var joins = []
43 | for (var i=0; i < columns.length; i++) {
44 | if (!columns[i].listview.show) continue
45 |
46 | if (columns[i].oneToMany || columns[i].manyToMany) {
47 | var result = join(table, columns[i], i)
48 | joins = joins.concat(result.joins)
49 | names.push(result.select)
50 | }
51 | else {
52 | names.push(x.name(columns[i].name,table.name,z.schema(table)))
53 | }
54 | }
55 | if (!table.view) {
56 | names.unshift(x.as(z.concat(table.pk,table.name,z.schema(table),','),x.name('__pk')))
57 | }
58 |
59 | var where = statement(table, columns, args.filter, joins)
60 |
61 | // always group by pk inside the listview!
62 | var group = (function groupby () {
63 | if (table.view) return
64 | var pk = (table.pk instanceof Array) ? table.pk : [table.pk]
65 | return x.groupby(x.names(pk,table.name))
66 | }())
67 |
68 | var order = ''
69 | if (args.filter.order) {
70 | for (var i=0; i < columns.length; i++) {
71 | if (columns[i].name == args.filter.order) {
72 | var direction = args.filter.direction || 'asc'
73 | var column = (columns[i].oneToMany || columns[i].manyToMany)
74 | ? x.name(args.filter.order)//column as alias
75 | : x.name(args.filter.order,table.name,z.schema(table))
76 | order = [column, direction].join(' ')
77 | break
78 | }
79 | }
80 | }
81 | else if (!Object.keys(view.listview.order).length) {
82 | if (table.view) {
83 | order = names[0] + ' asc'
84 | }
85 | else {
86 | var pk = table.pk instanceof Array ? table.pk[0] : table.pk
87 | order = x.name(pk,table.name,z.schema(table)) + ' asc'
88 | }
89 | }
90 | else {
91 | order = ((table, list) => {
92 | var result = []
93 | for (var column in list) {
94 | var order = list[column]
95 | result.push([x.name(column,table.name,z.schema(table)), order].join(' '))
96 | }
97 | return result.join()
98 | })(table, view.listview.order)
99 | }
100 |
101 | var from = args.page ? (args.page-1)*view.listview.page : 0
102 |
103 | args.statements = {
104 | columns: names.join(), table: x.name(table.name,z.schema(table)),
105 | join: joins.join(' '),
106 | where: where, group: group, order: order,
107 | from: from, to: view.listview.page
108 | }
109 | }
110 |
111 | function create (args) {
112 | var s = args.statements
113 |
114 | var str = [
115 | x.select(s.columns), x.from(s.table), s.join, s.where, s.group,
116 | x.orderby(s.order), x.limit(s.from,s.to), ';'
117 | ].join(' ')
118 |
119 | args.debug && console.log('lst', str)
120 | args.query = str
121 | }
122 |
123 | function statement (table, columns, filter, joins) {
124 | var statements = []
125 | for (var i=0; i < columns.length; i++) {
126 | var column = columns[i]
127 | var value = filter.columns[column.name]
128 | if (!value) continue
129 |
130 | if (column.oneToMany && column.fk) {
131 | if (value == 'NULL') continue
132 | statements.push(x.and(z.eq(table, column.fk, value)))
133 | }
134 | else if (column.manyToMany) {
135 | if (!column.listview.show) {
136 | var result = join(table, columns[i], i)
137 | joins.push(result.joins[0])
138 | joins.push(result.joins[1])
139 | }
140 | var ref = column.manyToMany.ref
141 | var alias = {alias: ref.table+i}
142 | statements.push(z.in(ref.pk, value, alias))
143 | }
144 | else {
145 | var expr = expression(table, column.name, column.control, value)
146 | if (!expr) continue
147 | statements.push(expr)
148 | }
149 | }
150 |
151 | return statements.length
152 | ? x.where(statements,(filter.or?'or':'and'))
153 | : ''
154 | }
155 |
156 | function expression (table, column, control, value) {
157 | var name = x.name(column,table.name,z.schema(table))
158 |
159 | if (control.select && !!control.options) {
160 | if ('string'===typeof value) value = x.string(value)
161 | return x.eq(name,value)
162 | }
163 | else if (control.select) {
164 | return x.eq(name,value)
165 | }
166 | else if (control.date || control.time || control.datetime || control.year) {
167 | if (value[0] == '' && value[1] == '') return null
168 | var from = value[0] || value[1]
169 | var to = value[1] || value[0]
170 | return [name, x.between(x.string(from),x.string(to))].join(' ')
171 | }
172 | else if (control.radio) {
173 | // string 0 or 1 - false|true
174 | if (x.dialect == 'pg') value = (value==0 ? x.wrap('f') : x.wrap('t'))
175 | return x.eq(name,value)
176 | }
177 | else if (control.text || control.file) {
178 | return [name,x.like(x.string(value+'%'))].join(' ')
179 | }
180 | else if (control.textarea) {
181 | return [name,x.like(x.string('%'+value+'%'))].join(' ')
182 | }
183 | else {
184 | return x.eq(name,value)
185 | }
186 | }
187 |
188 | function pagination (args) {
189 | var table = args.config.table
190 | var s = args.statements
191 |
192 | var concat = z.concat(table.pk,table.name,z.schema(table),',')
193 |
194 | var str = [
195 | x.select(
196 | table.view ? '*' : x.as(x.func('count',['distinct',concat],' '),x.name('count'))),
197 | x.from(s.table),
198 | s.join,
199 | s.where,
200 | ';'
201 | ].join(' ')
202 |
203 | args.debug && console.log('pgr', str)
204 | return str
205 | }
206 |
207 | module.exports = (instance) => {
208 | if (instance) x = instance
209 | return {
210 | join, select, create, statement, expression, pagination
211 | }
212 | }
213 |
--------------------------------------------------------------------------------
/public/express-admin.css:
--------------------------------------------------------------------------------
1 |
2 | /*xs*/
3 | @media (max-width: 768px) {
4 | /*all field labels*/
5 | .x-table .control-label { padding-bottom: 5px; }
6 | /*listview buttons*/
7 | .x-filter .panel-footer button { float: none; width: 100% !important; margin-top: 15px; }
8 | /*editview buttons*/
9 | #controls button { float: none; width: 100% !important; margin-bottom: 15px; }
10 | /*login button*/
11 | #login .btn-default { width: 100%; }
12 | }
13 | .container-fluid { width: auto; max-width: none; }
14 |
15 | /*hide chosen select by default*/
16 | .chosen-select { display: none; }
17 |
18 | /*fix table size and content*/
19 | .x-table { table-layout: fixed; }
20 | .x-table thead th,
21 | .x-table tbody td { word-wrap: break-word; }
22 | .x-table tbody td span.label-default { display: inline-block; max-width: 100%; white-space: normal; margin-bottom: 2px; }
23 |
24 | /*editview buttons*/
25 | #controls { text-align: right; }
26 | #controls button { width: auto; }
27 | #controls .btn-danger { float: left; }
28 |
29 | /*fixed header fix*/
30 | #content { padding-top: 70px; }
31 | /*login header*/
32 | #login .label-default { color: #f8f8f2; }
33 |
34 | /*mainview*/
35 | .x-table tbody td .glyphicon-plus { font-size: 8px; position: relative; top: -1px; }
36 |
37 | /*listview add record*/
38 | #express-admin { position: relative; }
39 | #express-admin h2 .btn { font-weight: normal; float: right; }
40 | #express-admin h2 .glyphicon-filter { display: inline-block; font-size: 12px; }
41 | #express-admin h2 .glyphicon-filter:hover { text-decoration: none; }
42 | /*listview mtm labels*/
43 | .x-table tbody td .label { margin-right: 5px; }
44 | .x-table tbody td .label:last-child { margin: 0; }
45 | /*listview search filter*/
46 | .x-filter .panel-heading .checkbox { float: right; margin-top: -18px; }
47 | .x-filter .panel-body { padding: 0; }
48 | .x-filter .panel-body table { margin-bottom: 0; }
49 | .x-filter .panel-body table tr:first-child td { border: 0; }
50 | .x-filter .panel-body .form-group:last-child { margin-bottom: 0; }
51 | .x-filter .panel-footer .form-group { margin-bottom: 0; }
52 | .x-filter .panel-footer .form-group div.col-lg-3:last-child { text-align: right; }
53 | .x-filter .panel-footer button { width: auto; float: right; }
54 | .x-filter .panel-footer button:first-child { margin-left: 10px; }
55 | .x-filter.x-hidden .panel-footer { border-top: 0; }
56 | .x-filter.x-collapsed { display: none; }
57 |
58 |
59 | /*editview*/
60 | .btn-today { line-height: 240%; }
61 | .x-table [type=file] { margin-top: 4px; }
62 |
63 | /*fix for all fields*/
64 | .x-table .form-group { margin-bottom: 0; }
65 | /*inline table headers*/
66 | .x-table .label-default { color: #f8f8f2; }
67 | /*checkbox remove inline*/
68 | .x-table .head td { padding-top: 0; padding-bottom: 0; }
69 | .x-table .head label { float: right; margin-bottom: 0; }
70 | .x-table .head label input { margin-top: 0; }
71 | .x-table .jumbotron { padding-left: 0; padding-right: 0; border-radius: 0; }
72 | .x-table .jumbotron label { font-size: 14px; font-weight: normal; cursor: pointer; margin-right: 8px; }
73 | .x-table .jumbotron label [type=checkbox] { position: relative; top: 3px; cursor: pointer; }
74 | .x-table .remove { margin-right: 2px; }
75 | /*field error message*/
76 | .x-table .form-group .help-block { margin-bottom: 0; }
77 | /*add another link*/
78 | .x-table tfoot > tr > td { text-align: right; padding-top: 0; padding-bottom: 0; }
79 |
80 |
81 | /*dark themes fix*/
82 | .datetimepicker * { background: #fff; color: #555; }
83 |
84 | /*chosen*/
85 | .chosen-container { font-size: inherit; line-height: inherit; }
86 | .chosen-container .chosen-drop { color: #555; }
87 | .chosen-container .chosen-single { line-height: inherit; height: auto; background-color: #fff; padding: 0; }
88 | .chosen-container .chosen-single span { padding: 6px 12px; }
89 |
90 | /*single*/
91 | .chosen-container-single .chosen-single {
92 | background-image: none;
93 | border: 1px solid #ccc;
94 | border-radius: 4px;
95 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
96 | -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;}
97 | .chosen-container-single .chosen-single abbr { top: 12px; }
98 | .chosen-container-single .chosen-single div b { width: 12px; height: 12px; background-position: 0 0; position: relative; top: 7px; }
99 | /*active*/
100 | .chosen-container-active .chosen-single {
101 | border-color: rgba(82, 168, 236, 0.8);
102 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
103 | outline: 0 none;}
104 | .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 0; }
105 | .chosen-container-active .chosen-single-with-drop { border-radius: 4px 4px 0px 0px; }
106 | /*error*/
107 | .has-error .chosen-container .chosen-single span { color: #B94A48; }
108 | .has-error .chosen-container .chosen-single {
109 | border-color: #B94A48;
110 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;}
111 | .has-error .chosen-container-active .chosen-single-with-drop {
112 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #D59392;}
113 |
114 | /*multiple*/
115 | .chosen-container-multi .chosen-choices li.search-field input[type=text] { line-height: inherit; height: auto; }
116 | .chosen-container-multi .chosen-choices {
117 | background-image: none;
118 | border: 1px solid #ccc;
119 | border-radius: 4px;
120 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
121 | -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
122 | padding-top: 2px; padding-bottom: 2px;}
123 | /*default*/
124 | .chosen-container-multi .chosen-choices li.search-field input[type=text] { color: #999; padding-left: 12px; margin: 4px 0 3px; }
125 | /*active*/
126 | .chosen-container-multi.chosen-container-active .chosen-choices {
127 | border-color: rgba(82, 168, 236, 0.8);
128 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
129 | outline: 0 none;}
130 | /*error*/
131 | .has-error .chosen-container-multi .chosen-choices {
132 | border-color: #B94A48;
133 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;}
134 | .has-error .chosen-container-multi.chosen-container-active .chosen-choices {
135 | border-color: #B94A48;
136 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #D59392;}
137 |
138 |
139 | /*sticky footer*/
140 | html, body { height: 100%; }
141 | #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
142 | footer, #footer-push { height: 30px; text-align: center; }
143 | footer p { margin-bottom: 0; }
144 |
145 |
146 | /*custom scrollbars in WebKit*/
147 | ::-webkit-scrollbar {
148 | width: 13px;
149 | }
150 | ::-webkit-scrollbar-track-piece {
151 | background: #333;
152 | -webkit-border-radius: 2px;
153 | }
154 | ::-webkit-scrollbar-thumb {
155 | height: 50px;
156 | background: #bbb;
157 | -webkit-border-radius: 8px;
158 | outline: 2px solid #333;
159 | outline-offset: -2px;
160 | border: 2px solid #333;
161 | }
162 | ::-webkit-scrollbar-thumb:hover {
163 | height: 50px;
164 | background-color: #ddd;
165 | -webkit-border-radius: 8px;
166 | }
167 |
--------------------------------------------------------------------------------
/public/express-admin.js:
--------------------------------------------------------------------------------
1 |
2 | ;(function($) {
3 | 'use strict';
4 |
5 | var chosen = {
6 | allow_single_deselect: true,
7 | no_results_text: 'No results matched!Click to add ', 8 | width: '100%' 9 | }; 10 | function toJSONLocal (date) { 11 | var local = new Date(date); 12 | local.setMinutes(date.getMinutes() - date.getTimezoneOffset()); 13 | return local.toJSON().slice(0, 10); // toJSON is not supported in
brief history
9 | 10 | Express Admin is a tool for creating end user administrative interfaces for relational databases in (literally) _less than 10 minutes_. 11 | 12 | It was initially conceived back in 2012 and it was released officially in 2013. The user interface is built with [Bootstrap] (v3.3.1) and it is fully responsive and it works on any device. It also comes with all [Bootswatch] themes for that version of Bootstrap. 13 | 14 | The entirety of the admin consists of just 3 views: main view, list view, and edit view. The main view lists all tables available inside the database and optionally a list of custom views. The list view lists table records with support for pagination and a powerful filtering widget for filtering and ordering the list. The edit view is responsible for viewing and editing database records and is capable of correctly modeling any table relationship, and it supports rich user input controls, such as date/time pickers and text editors. 15 | 16 | The rendering is done entirely on the backend using [Hogan.js] (a [mustache.js] derivative). The frontend is using [jQuery] (v1.9.1) mainly for initializing the beautiful plugins: [Chosen] (v1.2.0) for rendering select boxes for many-to-one and many-to-many relationships and [Bootstrap Datepicker] for rendering various time and date pickers. 17 | 18 | At the heart of the admin is the `settings.json` file. The `settings.json` file contains a robust data structure responsible for configuring all aspects of the admin, such as: table relationships, table visibility inside the main views, column settings such as: type and input control to use, verbose name, visibility etc., view settings, filter configuration etc. 19 | 20 | Lastly, the admin also comes with various extension points for: custom static files on the frontend, custom views on the backend, and pre/post save hooks to augment the behavior of the admin. 21 | 22 |quick preview
25 | 26 | **How it Looks** 27 | 28 | - Table Relationships 29 | - [One to Many][example-one-to-many] 30 | - [Many to Many][example-many-to-many] 31 | - [Many to One][example-many-to-one] 32 | - [One to One][example-one-to-one] 33 | - [Control Types][example-control-types] 34 | - [Complex Inline][example-complex-inline] 35 | - [Listview Filter][example-listview-filter] _(click on the little funnel icon next to the page header)_ 36 | - [Custom Views][example-custom-views] 37 | 38 | **Examples** 39 | 40 | Get the admin up and running on your localhost in less than 10 minutes and play around with the **[examples]**. 41 | 42 | **Tests** 43 | 44 | Express Admin comes with a comprehensive integration **[tests]** suite: https://vimeo.com/795985128 45 | 46 |295 | **`All auto increment columns should be hidden!`**
296 | **`Foreign keys for inline tables should be hidden!`**
297 | Columns that are not allowed to be `null` inside the database cannot be hidden as this will result in a database error when trying to insert or update the record 298 | - **oneToMany** - configure one to many relationship _(see [one to many](#relationships-one-to-many) documentation)_ 299 | 300 | Additionally a column entry can be added manually inside the `columns` array for configuring [many to many](#relationships-many-to-many) relationships. 301 | 302 | To re-order how the columns appear inside the listview and the editview copy/paste the entire column object and move it to another place inside the `columns` array. 303 | 304 | **[Control Types Example][example-control-types]** 305 | 306 | --- 307 | 308 | ## Configuration: `users` 309 | 310 | The users configuration accepts a list of unique keys identifying the admin users: 311 | 312 | ```json 313 | { 314 | "admin": { 315 | "name": "admin", 316 | "pass": "1234abCD" 317 | } 318 | } 319 | ``` 320 | 321 | - **"unique key name"** 322 | - **name** - user name to login with 323 | - **pass** - user password to login with 324 | 325 | Each user get access to the entirety of your admin instance. There are no roles and different levels of access. 326 | 327 | For increased security you may want to load the user password from external storage dynamically and feed that into the admin middleware on startup. 328 | 329 | --- 330 | 331 | ## Configuration: `custom` 332 | 333 | The custom configuration can be used to extend the admin with additional static files, endpoints on the backend, custom views rendered inside the admin, and pre/post save event hooks. 334 | 335 | You can arrange your custom resources any way you want. The custom config should contain uniquely named objects containing any of the supported custom configuration keys: 336 | 337 | ```json 338 | { 339 | "Unique Name": { 340 | "app": { 341 | "path": "/absolute/path/to/custom/app.js", 342 | "slug": "unique-slug", 343 | "verbose": "Verbose Name", 344 | "mainview": { 345 | "show": true 346 | } 347 | }, 348 | "public": { 349 | "external": { 350 | "css": [ 351 | "https://absolute/url/external.css" 352 | ], 353 | "js": [ 354 | "https://absolute/url/external.js" 355 | ] 356 | }, 357 | "local": { 358 | "path": "/absolute/path/to/custom/public/folder", 359 | "css": [ 360 | "/relative/to/above/global.css" 361 | ], 362 | "js": [ 363 | "/relative/to/above/global.js" 364 | ] 365 | } 366 | }, 367 | "events": "/absolute/path/to/custom/events.js" 368 | } 369 | } 370 | ``` 371 | 372 | - **app** - Epress.js application (middleware) _(see [custom views](#custom-views) documentation)_ 373 | - **path** - absolute path to the file to mount 374 | - **slug** - prefix for all routes in this custom app 375 | - **verbose** - user friendly name to show inside the mainview 376 | - **mainview** - settings about the mainview 377 | - **show** - toggle the custom view visibility inside the mainview (inside the custom views list below the table list) 378 | - **public** - custom static files to include inside the `` tag _(see [custom static files](#custom-static-files) documentation)_ 379 | - **external** - external files 380 | - **css** - list of css files to be included 381 | - **js** - list of js files to be included 382 | - **local** - local files 383 | - **path** - absolute path to the static files location 384 | - **css** - list of css files to be included 385 | - **js** - list of js files to be included 386 | - **events** - path to file containing event hooks _(see [event hooks](#custom-event-hooks) documentation)_ 387 | 388 | **[Custom View Example][example-custom-views]** 389 | 390 | --- 391 | 392 | ## Relationships 393 | 394 | ## Relationships: One to Many 395 | 396 | ![img-one-to-many] 397 | 398 | 1. Find the table that you want to configure inside the `settings.json` file 399 | 2. Find the foreign key column that you want to use for the relation 400 | 3. Copy/paste the following `oneToMany` object into the column settings and configure it 401 | 4. Change the control type of the column to `select` 402 | 403 | ```json 404 | "control": { 405 | "select": true 406 | }, 407 | "oneToMany": { 408 | "table": "user", 409 | "pk": "id", 410 | "columns": [ 411 | "firstname", 412 | "lastname" 413 | ] 414 | } 415 | ``` 416 | 417 | > The `oneToMany` key can contain a `schema` name to use for the relation table (PostgreSQL only) 418 | 419 | - **oneToMany** - configuration about the table that this foreign key references 420 | - **table** - name of the table that is being referenced 421 | - **pk** - name of the referenced table primary key column _(can be array as well, see [compound primary key](#compound-primary-key) documentation)_ 422 | - **columns** - array of columns to select from the referenced table and use that as a label inside the select box _(space delimited)_ 423 | 424 | **[One To Many Example][example-one-to-many]** 425 | 426 | --- 427 | 428 | ## Relationships: Many to Many 429 | 430 | ![img-many-to-many] 431 | 432 | 1. Find the table that you want to configure inside the `settings.json` file 433 | 2. Copy/paste the following object inside the `columns` array and configure it 434 | 435 | ```json 436 | { 437 | "verbose": "Recipe Types", 438 | "name": "recipe_type", 439 | "control": { 440 | "select": true, 441 | "multiple": true 442 | }, 443 | "type": "int(11)", 444 | "allowNull": false, 445 | "listview": { 446 | "show": false 447 | }, 448 | "editview": { 449 | "show": true 450 | }, 451 | "manyToMany": { 452 | "link": { 453 | "table": "recipe_has_recipe_types", 454 | "parentPk": "recipe_id", 455 | "childPk": "recipe_type_id" 456 | }, 457 | "ref": { 458 | "table": "recipe_type", 459 | "pk": "id", 460 | "columns": [ 461 | "title" 462 | ] 463 | } 464 | } 465 | } 466 | ``` 467 | 468 | > The `link` and `ref` keys can contain a `schema` name to use for the relation table (PostgreSQL only) 469 | 470 | - **verbose** - user friendly name to use for this column inside the admin 471 | - **name** - some arbitrary name but it has to be unique among all other columns in this table 472 | - **control** - the control type have to be a multi select 473 | - **type** - leave this as it is 474 | - **allowNull** - allowed to create record in this table without selecting any item from the referenced one, or not 475 | - **listview** - settings about the listview _(where the table records are listed)_ 476 | - **show** - toggle the column visibility inside the listview 477 | - **editview** - settings about the editview _(where the record is being shown and edited)_ 478 | - **show** - toggle the column visibility inside the listview 479 | - **manyToMany** - configuration about the many to many relationship 480 | - **link** - configuration about the table that links this one and the referenced one 481 | - **table** - name of the table that acts as a link 482 | - **parentPk** - name of the primary key of the parent table _(can be array as well)_ 483 | - **childPk** - name of the primary key of the child table _(can be array as well)_ 484 | - **ref** - configuration about the referenced table 485 | - **table** - name of the table that is being referenced 486 | - **pk** - name of the referenced table primary key column _(can be array as well)_ 487 | - **columns** - array of columns to select from the referenced table and use that as a label inside the select box _(space delimited)_ 488 | 489 | > The `parentPk` and `childPk` keys of the `link` table can be array as well.
490 | > The `pk` key of the `ref` table can be array as well.
491 | > See [compound primary key](#compound-primary-key) documentation. 492 | 493 | **[Many To Many Example][example-many-to-many]** 494 | 495 | --- 496 | 497 | ## Relationships: Many to One 498 | 499 | ![img-many-to-one] 500 | 501 | 1. Find the table that you want to configure inside the `settings.json` file 502 | 2. Copy/paste the following object inside the `editview` object and configure it 503 | 504 | ```json 505 | "manyToOne": { 506 | "repair": "car_id", 507 | "driver": "car_id" 508 | } 509 | ``` 510 | 511 | - **manyToOne** - configuration about the tables that will be included and edited as inline record 512 | - **table:fk** - each item in this object is a table name and its foreign key column that is referencing the parent table _(or array of foreign keys, see [compound primary key](#compound-primary-key) documentation)_ 513 | 514 | **[Many To One Example][example-many-to-one]** 515 | 516 | --- 517 | 518 | ## Relationships: One to One 519 | 520 | ![img-one-to-one] 521 | 522 | 1. Find the table that you want to configure inside the `settings.json` file 523 | 2. Copy/paste the following object inside the `editview` object and configure it 524 | 525 | ```json 526 | "oneToOne": { 527 | "address": "user_id", 528 | "phone": "user_id" 529 | } 530 | ``` 531 | 532 | - **oneToOne** - configuration about the tables that will be included and edited as inline record 533 | - **table:fk** - each item in this object is a table name and its foreign key column that is referencing the parent table _(or array of foreign keys, see [compound primary key](#compound-primary-key) documentation)_ 534 | 535 | **[One To One Example][example-one-to-one]** 536 | 537 | --- 538 | 539 | ## Compound Primary Key 540 | 541 | ![img-compound-primary-key] 542 | 543 | Any table in `settings.json` can have multiple primary keys specified: 544 | 545 | ```json 546 | { 547 | "table": { 548 | "name": "tbl", 549 | "pk": [ 550 | "id1", 551 | "id2" 552 | ], 553 | "verbose": "tbl" 554 | } 555 | } 556 | ``` 557 | 558 | ### Compound: One to Many 559 | 560 | ![img-compound-one-to-many] 561 | 562 | In case One to Many table relationship is referenced by multiple foreign keys, the regular [One to Many](#relationships-one-to-many) configuration cannot be used, as it expects to be put inside an existing column inside the `settings.json` file. 563 | 564 | Therefore an additional column entry have to be added to the `columns` array, similar to how [Many to Many](#relationships-many-to-many) relationship is being configured. 565 | 566 | The `fk` key specifies the foreign keys in this table that are referencing the other one: 567 | 568 | ```json 569 | { 570 | "verbose": "otm", 571 | "name": "otm", 572 | "control": { 573 | "select": true 574 | }, 575 | "type": "varchar(45)", 576 | "allowNull": false, 577 | "listview": { 578 | "show": true 579 | }, 580 | "editview": { 581 | "show": true 582 | }, 583 | "fk": [ 584 | "otm_id1", 585 | "otm_id2" 586 | ], 587 | "oneToMany": { 588 | "table": "otm", 589 | "pk": [ 590 | "id1", 591 | "id2" 592 | ], 593 | "columns": [ 594 | "name" 595 | ] 596 | } 597 | } 598 | ``` 599 | 600 | ### Compound: Many to Many 601 | 602 | ![img-compound-many-to-many] 603 | 604 | In case tables with multiple primary keys are part of a Many to Many table relationship, the regular [Many to Many](#relationships-many-to-many) setting is used, but additionally the `parentPk` and `childPk` keys inside the `link` table, and the `pk` key inside the `ref` table, can be set to an array of foreign and primary keys respectively to accommodate that design: 605 | 606 | ```json 607 | { 608 | "verbose": "mtm", 609 | "name": "mtm", 610 | "control": { 611 | "select": true, 612 | "multiple": true 613 | }, 614 | "type": "varchar(45)", 615 | "allowNull": false, 616 | "listview": { 617 | "show": true 618 | }, 619 | "editview": { 620 | "show": true 621 | }, 622 | "manyToMany": { 623 | "link": { 624 | "table": "tbl_has_mtm", 625 | "parentPk": [ 626 | "tbl_id1", 627 | "tbl_id2" 628 | ], 629 | "childPk": [ 630 | "mtm_id1", 631 | "mtm_id2" 632 | ] 633 | }, 634 | "ref": { 635 | "table": "mtm", 636 | "pk": [ 637 | "id1", 638 | "id2" 639 | ], 640 | "columns": [ 641 | "name" 642 | ] 643 | } 644 | } 645 | } 646 | ``` 647 | 648 | ### Compound: Many to One 649 | 650 | ![img-compound-many-to-one] 651 | 652 | Similar to the regular [Many to One](#relationships-many-to-one) configuration, but additionally the value for each table listed there can be set to an array of foreign keys referencing this table. 653 | 654 | ```json 655 | "manyToOne": { 656 | "mto": [ 657 | "tbl_id1", 658 | "tbl_id2" 659 | ] 660 | } 661 | ``` 662 | 663 | ### Compound: One to One 664 | 665 | Similar to the regular [One to One](#relationships-one-to-one) configuration, but additionally the value for each table listed there can be set to an array of foreign keys referencing this table. 666 | 667 | ```json 668 | "oneToOne": { 669 | "oto": [ 670 | "tbl_id1", 671 | "tbl_id2" 672 | ] 673 | } 674 | ``` 675 | 676 | --- 677 | 678 | ## Filter 679 | 680 | Columns can be enabled to be available for filtering inside the listview by listing them inside the `filter` list for that table's `listview` config: 681 | 682 | ```json 683 | "listview": { 684 | "order": {}, 685 | "page": 5, 686 | "filter": [ 687 | "item_id", 688 | "user_id", 689 | "cache", 690 | "date", 691 | "deleted", 692 | "deleted_at" 693 | ] 694 | } 695 | ``` 696 | 697 | All column data types and control types will be picked from the `columns` definition for that table. For example, a foreign key identifier configured as one-to-many relationship will be rendered as select box to allow the user to pick a value from. Similarly a many-to-many column entry can be listed by its `name` key and it will be rendered as multiple select box allowing you to pick multiple values from the referenced table to filter by. Date and time pickers will be rendered as pairs of two controls to allow you to specify date and time ranges if needed. 698 | 699 | **[Listview Filter Example][example-listview-filter]** _(click on the little funnel icon next to the page header)_ 700 | 701 | --- 702 | 703 | ## Customization 704 | 705 | ## Custom: Static Files 706 | 707 | Custom static files can be included at the end of the `` tag of the base template: 708 | 709 | ```json 710 | { 711 | "something": { 712 | "public": { 713 | "external": { 714 | "js": [ 715 | "https://cdn.ckeditor.com/4.4.2/standard/ckeditor.js" 716 | ] 717 | }, 718 | "local": { 719 | "path": "/absolute/path/to/folder", 720 | "css": [ 721 | "/some.css" 722 | ], 723 | "js": [ 724 | "/some.js" 725 | ] 726 | } 727 | } 728 | } 729 | } 730 | ``` 731 | 732 | Take a look at the [examples] repository. 733 | 734 | ### CKEditor 735 | 736 | One good example of the use of custom files could be extending the admin with a rich text editor. 737 | 738 | Find the column that you want to configure in `settings.json` and set its control type to a `textarea` and additionally set a CSS class name to use for the rich text editor: 739 | 740 | ```json 741 | "control": { 742 | "textarea": true, 743 | "editor": "class-name" 744 | } 745 | ``` 746 | 747 | Then inside the `custom.json` file specify the static files to include: 748 | 749 | ```json 750 | { 751 | "Rich Text Editors": { 752 | "public": { 753 | "external": { 754 | "js": [ 755 | "https://cdn.ckeditor.com/4.4.2/standard/ckeditor.js" 756 | ] 757 | }, 758 | "local": { 759 | "path": "/absolute/path/to/folder", 760 | "js": [ 761 | "/relative/path/to/the/above/init.js" 762 | ] 763 | } 764 | } 765 | } 766 | } 767 | ``` 768 | 769 | CKEditor v4.4.2 can be initialized like this: 770 | 771 | ```js 772 | $(function () { 773 | if (typeof CKEDITOR !== 'undefined') { 774 | CKEDITOR.replaceAll(function (textarea, config) { 775 | // exclude textareas that are inside hidden inline rows 776 | if ($(textarea).parents('tr').hasClass('blank')) return false 777 | // textareas with this class name will get the default configuration 778 | if (textarea.className.includes('class-name')) return true 779 | // all other textareas won't be initialized as ckeditors 780 | return false 781 | }) 782 | } 783 | }) 784 | 785 | // executed each time an inline is added 786 | function onAddInline (rows) { 787 | if (typeof CKEDITOR !== 'undefined') { 788 | // for each of the new rows containing textareas 789 | $('textarea', rows).each(function (index) { 790 | // get the DOM instance 791 | var textarea = $(this)[0] 792 | // textareas with this class name will get the default configuration 793 | if (textarea.className.includes('class-name')) return CKEDITOR.replace(textarea) 794 | // all other textareas won't be initialized as ckeditors 795 | return false 796 | }) 797 | } 798 | } 799 | ``` 800 | 801 | Note that jQuery `$` is loaded globally for the entire admin. 802 | 803 | The `class-name` is the same class name that we specified for that column inside the `settings.json` file. 804 | 805 | The `CKEDITOR.replaceAll` method loops throgh all textareas available on the page and filters them out to only those that needs to be initialized as CKEditors. Inline records for Many to One and One to One relationships has a hidden blank row used as a template whenever the user tries to add new inline record to the page. Any textarea inside that `blank` row have to be excluded. 806 | 807 | The hidden textareas are initialized after the user clicks on the link to add a new inline record. The `onAddInline` is an event like global function that is called each time an inline record is appended to the list of inline records. The `rows` parameters contains all table rows that has been added. Again we loop through all of them and initialize only those textareas that have the class we specified in `settings.json` 808 | 809 | **[CKEditor Example][example-complex-inline]** 810 | 811 | --- 812 | 813 | ## Custom: Views 814 | 815 | The custom view config is configured by the `app` key: 816 | 817 | ```json 818 | { 819 | "My Awesome View": { 820 | "app": { 821 | "path": "/absolute/path/to/app.js", 822 | "slug": "hi", 823 | "verbose": "Basic View", 824 | "mainview": { 825 | "show": true 826 | } 827 | } 828 | } 829 | } 830 | ``` 831 | 832 | The `app.js` file contains an Express.js middleware: 833 | 834 | ```js 835 | var express = require('express') 836 | var app = module.exports = express() 837 | var path = require('path') 838 | 839 | app.set('views', __dirname) 840 | 841 | app.get('/hi', (req, res, next) => { 842 | // variable that will be available inside your template 843 | res.locals.hello = 'Hi' 844 | // realtive path from the admin's view folder to your custom folder 845 | var relative = path.relative(res.locals._admin.views, app.get('views')) 846 | // the content partial holds the main content of the page 847 | res.locals.partials = { 848 | // path to your hello.html template 849 | content: path.join(relative, 'hello') 850 | } 851 | // continue so that the admin can render the entire page 852 | next() 853 | }) 854 | ``` 855 | 856 | The `hello.html` template is an HTML file that contains [Hogan.js] ([mustache.js]) variables: 857 | 858 | ```html 859 |
{{hello}}, how are you?
860 | ``` 861 | 862 | The `res.locals` object contains all of the template variables that will be used across various partials to render the entirety of the admin UI. 863 | 864 | One additional variable called `res.locals._admin` exposes the admin internals to your route. The contents of this variable are not meant to be rendered and are there for internal use by your custom routes. 865 | 866 | For example, the `res.locals._admin.db.client` holds a reference to the underlying database client wrapper that the admin uses internally: 867 | 868 | ```js 869 | app.get('/hi', (req, res, next) => { 870 | var client = res.locals._admin.db.client 871 | // do some queries 872 | client.query('... sql ...', (err, result) => { 873 | // do something with result data 874 | }) 875 | } 876 | ``` 877 | 878 | To find more about the available data there you can put a breakpoint inside your custom route handler and inspect it with a debugger. 879 | 880 | Also have a look at the [examples] repository. 881 | 882 | **[Custom View Example][example-custom-views]** 883 | 884 | --- 885 | 886 | ## Custom: Event Hooks 887 | 888 | The supported event hooks are: 889 | 890 | - **[preSave](#custom-presave)** - before a record is saved 891 | - **[postSave](#custom-postsave)** - after a record was saved 892 | - **[preList](#custom-prelist)** - before the listview is rendered 893 | 894 | The event hooks config is configured by the `events` key: 895 | 896 | ```json 897 | { 898 | "My Awesome Event Hooks": { 899 | "events": "/absolute/path/to/event/handlers.js" 900 | } 901 | } 902 | ``` 903 | 904 | The event handlers are similar to Express.js middlewares, but they have one additional `args` parameter: 905 | 906 | ```js 907 | exports.preSave = (req, res, args, next) => { 908 | // do something 909 | next() 910 | } 911 | exports.postSave = (req, res, args, next) => { 912 | // do something 913 | next() 914 | } 915 | exports.postList = (req, res, args, next) => { 916 | // do something 917 | next() 918 | } 919 | ``` 920 | 921 | You can put a breakpoint inside any of your event hook handlers and inspect the available handler parameters with a debugger. 922 | 923 | Also have a look at the [examples] repository. 924 | 925 | ## Custom: `preSave` 926 | 927 | The `args` parameter contains: 928 | 929 | - **action** - query operation: `insert`, `update` or `remove` 930 | - **name** - the table name for which this operation was initiated for 931 | - **slug** - the slug of that table 932 | - **data** - data submitted via POST request or returned from the database 933 | - **view** - this table's data (the one currently shown inside the _editview_) 934 | - **oneToOne | manyToOne** - inline tables data 935 | ```js 936 | "table's name": { 937 | "records": [ 938 | "columns": {"column's name": "column's value", ...}, 939 | "insert|update|remove": "true" // only for inline records 940 | ] 941 | } 942 | ``` 943 | - **upath** - absolute path to the upload folder location 944 | - **upload** - list of files to be uploaded submitted via POST request 945 | - **db** - database connection instance 946 | 947 | ### `preSave` - set created_at and updated_at fields 948 | 949 | In this example we are updating the `created_at` and the `updated_at` fileds for a table called `user`: 950 | 951 | ```js 952 | var moment = require('moment') 953 | 954 | exports.preSave = (req, res, args, next) => { 955 | if (args.name === 'user') { 956 | var now = moment(new Date()).format('YYYY-MM-DD hh:mm:ss') 957 | var record = args.data.view.user.records[0].columns 958 | if (args.action === 'insert') { 959 | record.created_at = now 960 | record.updated_at = now 961 | } 962 | else if (args.action === 'update') { 963 | record.updated_at = now 964 | } 965 | } 966 | next() 967 | } 968 | ``` 969 | 970 | The `created_at` and the `updated_at` columns have to be hidden inside the editview because they will be updated internally by your event hook. Set `show: false` for the `editview` key for those columns inside the `settings.json` file. 971 | 972 | ### `preSave` - generate hash identifier 973 | 974 | In this example we are generating a hash `id` for a table called `cars`. That table view also contains `manyToOne` inline tables to be edited along with it that also needs their `id` generated: 975 | 976 | ```js 977 | var shortid = require('shortid') 978 | 979 | exports.preSave = (req, res, args, next) => { 980 | if (args.name == 'car') { 981 | if (args.action == 'insert') { 982 | var table = args.name 983 | var record = args.data.view[table].records[0].columns 984 | record.id = shortid.generate() 985 | } 986 | for (var table in args.data.manyToOne) { 987 | var inline = args.data.manyToOne[table] 988 | if (!inline.records) continue 989 | for (var i=0; i < inline.records.length; i++) { 990 | if (inline.records[i].insert != 'true') continue 991 | inline.records[i].columns.id = shortid.generate() 992 | } 993 | } 994 | } 995 | next() 996 | } 997 | ``` 998 | 999 | All of the `id` columns have to be hidden inside the editview because they will be generated internally by your event hook. Set `show: false` for the `editview` key for those columns inside the `settings.json` file. 1000 | 1001 | ### `preSave` - soft delete records 1002 | 1003 | In this example we are soft deleting records for a table called `purchase`. That table view also contains `manyToOne` inline tables to be edited along with it that also requires their records to be soft deleted: 1004 | 1005 | ```js 1006 | var moment = require('moment') 1007 | 1008 | exports.preSave = (req, res, args, next) => { 1009 | if (args.name === 'purchase') { 1010 | var now = moment(new Date()).format('YYYY-MM-DD hh:mm:ss') 1011 | // all inline oneToOne and manyToOne records should be marked as deleted 1012 | for (var table in args.data.manyToOne) { 1013 | var inline = args.data.manyToOne[table] 1014 | if (!inline.records) continue 1015 | for (var i=0; i < inline.records.length; i++) { 1016 | if (args.action !== 'remove' && !inline.records[i].remove) continue 1017 | // instead of deleting the record 1018 | delete inline.records[i].remove 1019 | // update it 1020 | inline.records[i].columns.deleted = true 1021 | inline.records[i].columns.deleted_at = now 1022 | } 1023 | } 1024 | // parent record 1025 | if (args.action == 'remove') { 1026 | // instead of deleting the record 1027 | args.action = 'update' 1028 | // update it 1029 | var record = args.data.view.purchase.records[0].columns 1030 | record.deleted = true 1031 | record.deleted_at = now 1032 | } 1033 | } 1034 | next() 1035 | } 1036 | ``` 1037 | 1038 | All of the `deleted` and `deleted_at` columns have to be hidden inside the editview because they will be managed by your event hook. Set `show: false` for the `editview` key for those columns inside the `settings.json` file. 1039 | 1040 | --- 1041 | 1042 | ## Custom: `postSave` 1043 | 1044 | The `args` parameter contains: 1045 | 1046 | - **action** - query operation: `insert`, `update` or `remove` 1047 | - **name** - the table name for which this operation was initiated for 1048 | - **slug** - the slug of that table 1049 | - **data** - data submitted via POST request or returned from the database 1050 | - **view** - this table's data (the one currently shown inside the _editview_) 1051 | - **oneToOne | manyToOne** - inline tables data 1052 | ```js 1053 | "table's name": { 1054 | "records": [ 1055 | "columns": {"column's name": "column's value", ...}, 1056 | "insert|update|remove": "true" // only for inline records 1057 | ] 1058 | } 1059 | ``` 1060 | - **upath** - absolute path to the upload folder location 1061 | - **upload** - list of files to be uploaded submitted via POST request 1062 | - **db** - database connection instance 1063 | 1064 | ### `postSave` - upload files to a third party server 1065 | 1066 | - in this example our table will be called `item` 1067 | - the item's table `image`'s column control type should be set to `file:true` in `settings.json` 1068 | - use the code below to upload the image, after the record is saved 1069 | 1070 | In this example we are uploading an image to a third-party service for a table called `item`: 1071 | 1072 | ```js 1073 | var cloudinary = require('cloudinary') 1074 | var fs = require('fs') 1075 | var path = require('path') 1076 | cloudinary.config({cloud_name: '...', api_key: '...', api_secret: '...'}) 1077 | 1078 | exports.postSave = (req, res, args, next) => { 1079 | if (args.name === 'item') { 1080 | // file upload control data 1081 | var image = args.upload.view.item.records[0].columns.image 1082 | // in case file is chosen through the file input control 1083 | if (image.name) { 1084 | // file name of the image already uploaded to the upload folder 1085 | var fname = args.data.view.item.records[0].columns.image 1086 | // upload 1087 | var fpath = path.join(args.upath, fname) 1088 | cloudinary.uploader.upload(fpath, (result) => { 1089 | console.log(result) 1090 | next() 1091 | }) 1092 | } 1093 | else next() 1094 | } 1095 | else next() 1096 | } 1097 | ``` 1098 | 1099 | The `image` column needs to have its control type set to `file: true` inside the `settings.json` file. 1100 | 1101 | --- 1102 | 1103 | ## Custom: `preList` 1104 | 1105 | The `args` parameter contains: 1106 | 1107 | - **name** - the table name for which this operation was initiated for 1108 | - **slug** - the slug of that table 1109 | - **filter** - filter data submitted via POST request 1110 | - **columns** - list of columns (and their values) to filter by 1111 | - **direction** - sort order direction 1112 | - **order** - column names to order by 1113 | - **or** - `true|false` whether to use logical _or_ or not 1114 | - **statements** - sql query strings partials 1115 | - **columns** - columns to select 1116 | - **table** - table to select from 1117 | - **join** - join statements 1118 | - **where** - where statements 1119 | - **group** - group by statements 1120 | - **order** - order by statements 1121 | - **from** - limit from number 1122 | - **to** - limit to number 1123 | - **db** - database connection instance 1124 | 1125 | ### `preList` - hide soft deleted records by default 1126 | 1127 | Have a look at the `preSave` hook example about soft deleted records. 1128 | 1129 | ```js 1130 | exports.preList = (req, res, args, next) => { 1131 | if (args.name === 'purchase') { 1132 | // check if we are using a listview filter 1133 | // and we want to see soft deleted records 1134 | var filter = args.filter.columns 1135 | if (filter && (filter.deleted == '1' || filter.deleted_at && filter.deleted_at[0])) { 1136 | return next() 1137 | } 1138 | // otherwise hide the soft deleted records by default 1139 | var filter = 1140 | ' `purchase`.`deleted` IS NULL OR `purchase`.`deleted` = 0' + 1141 | ' OR `purchase`.`deleted_at` IS NULL '; 1142 | args.statements.where 1143 | ? args.statements.where += ' AND ' + filter 1144 | : args.statements.where = ' WHERE ' + filter 1145 | } 1146 | next() 1147 | } 1148 | ``` 1149 | 1150 | --- 1151 | 1152 | ## Hosting 1153 | 1154 | By default all of the static assets needed by the admin will be served by the admin middleware itself. A good way to improve the performance of your admin instance is to serve only the dynamic routes with Node.js and leave the static files to be served by a reverse proxy instead. 1155 | 1156 | ## Hosting: Nginx 1157 | 1158 | ```nginx 1159 | # redirect HTTP to HTTPS 1160 | server { 1161 | listen 80; 1162 | server_name mywebsite.com; 1163 | return 301 https://$host$request_uri; 1164 | } 1165 | # HTTPS only 1166 | server { 1167 | listen 443 ssl; 1168 | server_name mywebsite.com; 1169 | 1170 | # (optional) you can put an additional basic auth in front of your admin 1171 | auth_basic 'Restricted'; 1172 | auth_basic_user_file /absolute/path/to/.htpasswd; 1173 | 1174 | access_log /var/log/nginx/mywebsite.com-access.log; 1175 | error_log /var/log/nginx/mywebsite.com-error.log debug; 1176 | 1177 | # certificates for HTTPS 1178 | ssl_certificate /etc/letsencrypt/live/mywebsite.com/fullchain.pem; 1179 | ssl_certificate_key /etc/letsencrypt/live/mywebsite.com/privkey.pem; 1180 | 1181 | # forward all requests to Node.js except for the static files below 1182 | location / { 1183 | # this is where your admin instance is listening to 1184 | proxy_pass http://127.0.0.1:3000/$uri$is_args$args; 1185 | # (optional) hide the fact that your app was built with Express.js 1186 | proxy_hide_header X-Powered-By; 1187 | } 1188 | 1189 | # express-admin - static files bundled with the admin 1190 | location /express-admin.css { 1191 | root /absolute/path/to/express-admin/node_modules/express-admin/public; 1192 | try_files $uri =404; 1193 | } 1194 | location /express-admin.js { 1195 | root /absolute/path/to/express-admin/node_modules/express-admin/public; 1196 | try_files $uri =404; 1197 | } 1198 | location /favicon.ico { 1199 | root /absolute/path/to/express-admin/node_modules/express-admin/public; 1200 | try_files $uri =404; 1201 | } 1202 | 1203 | # express-admin-static - third-party static files bundled with the admin 1204 | location /jslib/ { 1205 | root /absolute/path/to/express-admin/node_modules/express-admin-static; 1206 | try_files $uri =404; 1207 | } 1208 | location /csslib/ { 1209 | root /absolute/path/to/express-admin/node_modules/express-admin-static; 1210 | try_files $uri =404; 1211 | } 1212 | location /font/ { 1213 | root /absolute/path/to/express-admin/node_modules/express-admin-static; 1214 | try_files /csslib/fonts/$uri =404; 1215 | } 1216 | location /bootswatch/ { 1217 | root /absolute/path/to/express-admin/node_modules/express-admin-static; 1218 | try_files $uri =404; 1219 | } 1220 | 1221 | # (optional) any custom static file that you may have 1222 | location /custom.css { 1223 | root /absolute/path/to/custom/static/files; 1224 | try_files $uri =404; 1225 | } 1226 | location /custom.js { 1227 | root /absolute/path/to/custom/static/files; 1228 | try_files $uri =404; 1229 | } 1230 | } 1231 | ``` 1232 | 1233 | ## Hosting: Multiple Admins 1234 | 1235 | Multiple admin instances can be served with a single Node.js server: 1236 | 1237 | ```js 1238 | var express = require('express') 1239 | var admin = require('express-admin') 1240 | 1241 | express() 1242 | .use('/admin1', admin({ 1243 | config: require('/path1/config.json'), 1244 | settings: require('/path1/settings.json'), 1245 | users: require('/path1/users.json'), 1246 | custom: require('/path1/custom.json'), 1247 | })) 1248 | .use('/admin2', admin({ 1249 | config: require('/path2/config.json'), 1250 | settings: require('/path2/settings.json'), 1251 | users: require('/path2/users.json'), 1252 | custom: require('/path2/custom.json'), 1253 | })) 1254 | .use('/admin3', admin({ 1255 | config: require('/path3/config.json'), 1256 | settings: require('/path3/settings.json'), 1257 | users: require('/path3/users.json'), 1258 | custom: require('/path3/custom.json'), 1259 | })) 1260 | .listen(3000) 1261 | ``` 1262 | 1263 | In case you are serving them directly with Node.js then you have to set the `root` prefix for each admin instance inside the `config.json` file. 1264 | 1265 | However, in case you are using Nginx on top of Node.js to route the traffic, you can setup different sub domains for each admin instance and route the traffic to the correct path prefix: 1266 | 1267 | ```nginx 1268 | # map the sub domain being used to the path prefix for that admin instance 1269 | map $http_host $admin_prefix { 1270 | admin1.mywebsite.com admin1; 1271 | admin2.mywebsite.com admin2; 1272 | admin3.mywebsite.com admin3; 1273 | } 1274 | ``` 1275 | 1276 | and then update the above Nginx configuration by prepending the `$admin_prefix` variable to the path: 1277 | 1278 | ```nginx 1279 | location / { 1280 | # route to the appropriate admin prefix based on the sub domain being used 1281 | proxy_pass http://127.0.0.1:3000/$admin_prefix$uri$is_args$args; 1282 | # (optional) hide the fact that your app was built with Express.js 1283 | proxy_hide_header X-Powered-By; 1284 | } 1285 | ``` 1286 | 1287 | In that case there is no need to set the `root` configuration for the admin inside the `config.json` file because the routing will be done in Nginx, and for the Node.js (Express.js) server it will look like as if that was served on the default root `/` path. 1288 | 1289 | --- 1290 | 1291 | [npm-version]: https://img.shields.io/npm/v/express-admin.svg?style=flat-square (NPM Version) 1292 | [snyk-vulnerabilities]: https://img.shields.io/snyk/vulnerabilities/npm/express-admin.svg?style=flat-square (Vulnerabilities) 1293 | [screenshot]: https://i.imgur.com/6wFggqg.png (Express Admin) 1294 | 1295 | [npm]: https://www.npmjs.com/package/express-admin 1296 | [snyk]: https://snyk.io/test/npm/express-admin 1297 | 1298 | [tests]: https://github.com/simov/express-admin-tests 1299 | [examples]: https://github.com/simov/express-admin-examples 1300 | 1301 | [mysql]: https://www.npmjs.com/package/mysql 1302 | [pg]: https://www.npmjs.com/package/pg 1303 | [sqlite3]: https://www.npmjs.com/package/sqlite3 1304 | [mysql-connection]: https://github.com/mysqljs/mysql#connection-options 1305 | [pg-connection]: https://node-postgres.com/apis/client 1306 | 1307 | [bootstrap]: https://getbootstrap.com/docs/3.4/ 1308 | [bootswatch]: https://bootswatch.com/ 1309 | [express.js]: https://expressjs.com/ 1310 | [hogan.js]: https://twitter.github.io/hogan.js/ 1311 | [mustache.js]: https://github.com/janl/mustache.js/ 1312 | [jquery]: https://jquery.com/ 1313 | [chosen]: https://harvesthq.github.io/chosen/ 1314 | [bootstrap datepicker]: https://github.com/uxsolutions/bootstrap-datepicker 1315 | 1316 | [example-one-to-many]: https://simov.github.io/express-admin/examples/one-to-many.html 1317 | [example-many-to-many]: https://simov.github.io/express-admin/examples/many-to-many.html 1318 | [example-many-to-one]: https://simov.github.io/express-admin/examples/many-to-one.html 1319 | [example-one-to-one]: https://simov.github.io/express-admin/examples/one-to-one.html 1320 | [example-control-types]: https://simov.github.io/express-admin/examples/column.html 1321 | [example-complex-inline]: https://simov.github.io/express-admin/examples/controls.html 1322 | [example-listview-filter]: https://simov.github.io/express-admin/examples/filter.html 1323 | [example-custom-views]: https://simov.github.io/express-admin/examples/custom-views-apps.html 1324 | 1325 | [img-one-to-many]: https://simov.github.io/express-admin/images/one-to-many.png 1326 | [img-many-to-many]: https://simov.github.io/express-admin/images/many-to-many.png 1327 | [img-many-to-one]: https://simov.github.io/express-admin/images/many-to-one.png 1328 | [img-one-to-one]: https://simov.github.io/express-admin/images/one-to-one.png 1329 | [img-compound-primary-key]: https://simov.github.io/express-admin/images/compound-primary-key.png 1330 | [img-compound-one-to-many]: https://simov.github.io/express-admin/images/compound-one-to-many.png 1331 | [img-compound-many-to-many]: https://simov.github.io/express-admin/images/compound-many-to-many.png 1332 | [img-compound-many-to-one]: https://simov.github.io/express-admin/images/compound-many-to-one.png 1333 | [img-compound-one-to-one]: https://simov.github.io/express-admin/images/compound-one-to-one.png 1334 | 1335 | [morgan]: https://www.npmjs.com/package/morgan 1336 | [session]: https://www.npmjs.com/package/express-session 1337 | 1338 | [locale]: https://github.com/simov/express-admin/tree/master/config/lang 1339 | --------------------------------------------------------------------------------