nxus-web

Base theme, template, and MVC support for Nxus applications

Usage no npm install needed!

<script type="module">
  import nxusWeb from 'https://cdn.skypack.dev/nxus-web';
</script>

README

nxus-web

MVCModule

Extends HasModels

A base class for common application module organization

Automatically registers:

  • Templates from ./templates
  • Models from ./models - these files should extend nxus-storage.BaseModel)
  • Controllers from ./controllers - you may want to extend nxus-web.ViewController

Parameters

  • options (optional, default {})

ViewController

Extends HasModels

A base class for CRUD routes and templates for a model

Parameters

You can pass any of the following into the constructor options argument:

  • modelIdentity - defaults to name of class, underscored, e.g. todo_item
  • prefix - defaults to name of class, dashed, e.g. todo-item
  • templatePrefix - defaults to same as prefix
  • routePrefix - defaults to '/'+prefix
  • pageTemplate - the layout to use to render the page
  • populate - relationships to populate on find. Accepts a string, array, or array of [rel, options] arrays.
  • displayName - defaults to class name
  • instanceTitleField - defaults to first attribute
  • paginationOptions - object with sortField, sortDirection, and itemsPerPage keys.
  • ignoreFields - blacklist of fields to ignore in display
  • displayFields - whitelist of fields to display, show in this order if supplied
  • listFields - subset of fields to show on list view
  • searchFields - subset of fields to use for search strings
  • idField - field to use for id in routes

Implement Routes

The default implementation of the routes handles querying for the model instance, pagination, and the template rendering. See the specific method documentation for each public view function.

Overriding templates

Assuming your opts.prefix/opts.templatePrefix is my-module, the following templates are registered with default implementations:

  • my-module-detail
  • my-module-list

Overriding this in your module by registering a template with templater, either by naming it my-module-list.ejs and using templator.templateDir or explicitly:

import {templater} from 'nxus-templater'
 
class MyModule extends ViewController {
  constructor(opts={}) {
    ...
    super(opts)
    templater.replace().template(__dirname+"/path/to/template.ejs", this.pageTemplate, this.templatePrefix+"-detail")
  }
}

Parameters

  • options (optional, default {})

list

Implement the list route. Resolve the passed query and return the context for template templatePrefix-list

Parameters

  • req Request The express request object
  • res Response The express response object
  • query object A query that can be further filtered or populated before resolution

Returns object The context for template rendering. Include pagination: this.paginationOptions by default

detail

Implement the view/detail route. Resolve the passed query and return the context for template templatePrefix-view

Parameters

  • req Request The express request object
  • res Response The express response object
  • query object A query for one object that can be further populated before resolution

Returns object The context for template rendering.

EditController

Extends ViewController

A base class for CRUD routes and templates for a model

Parameters

See Controller docs

You can pass any of the constructor options arguments defined by ViewController, plus the following:

  • redirect - set to false to disable redirect (default is true)
  • redirectAfterCreate - path suffix to routePrefix after route
  • redirectAfterEdit - path suffix to routePrefix after route
  • redirectAfterDelete - path suffix to routePrefix after route

Implement Routes

The default implementation of the routes handles querying for the model instance, pagination, and the template rendering. See the specific method documentation for each public view function.

Overriding templates

See also the ViewController templates documentation. Assuming your opts.prefix/opts.templatePrefix is my-module, the following templates are registered with default implementations:

  • my-module-create
  • my-module-edit

Parameters

  • options (optional, default {})

edit

Implement the edit route. Resolve the passed query and return the context for template templatePrefix-edit

Parameters

  • req Request The express request object
  • res Response The express response object
  • query object A query that can be further filtered or populated before resolution

Returns object The context for template rendering.

create

Implement the create route. Return the context for template templatePrefix-create

Parameters

  • req Request The express request object
  • res Response The express response object
  • object object An empty object for setting defaults for the template

Returns object The context for template rendering.

_doUpdate

Override to perform custom update logic

Parameters

  • id id ID to update
  • values object Fields object

Returns object The updated instance

_doCreate

Override to perform custom create logic

Parameters

Returns object The created instance

_doRelatedUpdate

Override to perform custom related field updates after create or update

Parameters

  • inst object instance to set related fields for
  • related object {related_field: value} object

Returns object The updated instance

_doRemove

Override to perform custom remove logic

Parameters

  • id id ID to remove

Returns object The updated instance

save

Implement object save for create and edit routes.

Parameters

  • req Request The express request object
  • res Response The express response object

replaceRouteParams

Replaces route parameters with values.

Parameters

  • route string route path
  • params Object parameter replacements

Returns string route path, with parameters replaced

DataTablesMixin

A mixin class for ViewController or subclasses to support jQuery DataTables (https://datatables.net)

Supports either client-side data (overriding normal pagination queries) or server-side processing (providing an ajax endpoint compatible with datatables API).

Options:

  • useDataTablesAjax - (false) whether server-side ajax should be used to populate, page, and query the data
  • useDataTablesCSS - (cdn css url, or array of urls) some themes already include datatables support, if so set this to false
  • useDataTablesURL - (cdn script url, or array of urls) to override the default cdn URL
  • useDataTablesEnableScript - (path to js) to override initialization script to include

Client-side processing is the default:

  import {DataTablesMixin, EditController} from 'nxus-web
  class MyView extends DataTablesMixin(EditController) {
     // usual EditController options like model, displayFields
  }

Set the useDataTablesAjax option to true for large datasets or server-side search logic etc.

  import {DataTablesMixin, EditController} from 'nxus-web
  class MyView extends DataTablesMixin(EditController) {
      constructor(options={}) {
         // usual EditController options like model, displayFields
         options.useDataTablesAjax = true
         super(options)
     }
  }

The useDataTablesCSS, useDataTablesURL, and useDataTablesEnableScript are needed for enabling additional extensions, e.g. to use Datatables.select:

  class MyView extends DataTablesMixin(EditController) {
      constructor(options={}) {
         options.useDataTablesURL = [
           "//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js",
           "//cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"
         ]
         options.useDataTablesCSS = [
           "//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css",
           "//cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css"
         ]
         // this file in your project would include `$('.datatable).DataTable({select: true})` etc
         options.useDataTablesEnableScript = __dirname+"/components/my-datatables-enable.js"
         super(options)
     }
  }

Parameters

  • superclass

Nav

Extends NxusModule

import {nav} from 'nxus-web'

add

Register a nav menu item

Parameters

  • menu string Group of nav items
  • label string Text for menu item
  • link string URL of menu item
  • options object Extra context for rendering (icon, css) (optional, default {})

get

Retrieve a menu group

Parameters

  • menu string Group of nav items

Returns Array Menu items

WebActions

Extends NxusModule

import {actions} from 'nxus-web'

Example adding a link button to the template 'template-name': actions.add('template-name', 'Label', '/link' {icon: 'fa fa-plus'})

Retrieving actions for use (normally not needed, automatically added to template context as 'actions) actions.getActions('template-name')

You may additionally group actions together by providing a 'group' key to the options object.

Templates

This module provides four templates that may be overridden:

  • actions-buttons to render an action group as buttons

  • actions-button the default template for each button

  • actions-icons to render an action group as minimal icons

  • actions-icon the default templateMinimal for each icon

    Rather than overriding all buttons/icons, you may provide a custom template for a specific action as the template or templateMinimal option. When rendered with the default actions-buttons or actions-icons templates, these receive an action's object as their only context.

Parameters

  • opts