This is a collection of paginated widgets I built for use with odata-like apis.

setup

npm install au-pajankination

for requirejs cli, add to aurelia.json

  "extend",
  "aurelia-view-manager",
  "keycode",
  {
    "name": "urijs",
    "main": "./src/URI",
    "path": "../node_modules/urijs"
  },
  "punycode",
  {
      "name": "au-pajankination",
      "main": "index",
      "path": "../node_modules/au-pajankination/dist",
      "resources": [
          "**/*.html",
          "**/*.css"
      ]
  }

(urijs and punycode are only used by the odata helper and are kind of optional)

to your main add

    .plugin(PLATFORM.moduleName("au-pajankination"))

this will add all components as global resources. If you don't want that, instead use

    .plugin(PLATFORM.moduleName("au-pajankination"), c => {
      c.noGlobalResources = true;
    })

paj-combobox

This is a combobox meant for use with potentially infinite length odata-like apis. It takes inspiration (and css) from select2.

It implements infinite scrolling, and works best with an index api, e.g. for an item

{
    id: 778,
    name: "Mumphrey",
}

you have access to an api such as

GET /items/778/indexOf

that returns the item's index in the stream.

simple example:

  <paj-combobox data-source.bind="dataSource" selected-id.bind="item" width: "300px">
    <template replace-part="item-template">
      <div>
        <b> ${item.name} </b>
      </div>
    </template>
    <template replace-part="selected-template">
        <i> ${item.name} </i>
    </template>
  </paj-combobox>

dataSource needs to implement IComboboxDataSource

options

• width: string, e.g. "100%"

• disabled: boolean

custom templates

you can replace the html template used by paj-combobox:

in your main:

    import { Config } from "aurelia-view-manager";

    ...

    aurelia.container.get(Config)
    .configureNamespace("ariovistus/au-pajankination", {
      map: {
        "combobox": "my-combobox.html",
      }
    });

paj-grid

this is a simple paginated grid.

simple example:

  <paj-grid data-source.bind="dataSource">
    <template replace-part="header">
      <div class="div-tr">
        <div class="div-th">
          Field 1
        </div>
        <div class="div-th">
          Field 2
        </div>
      </div>
    </template>
    <template replace-part="body">
      <div class="div-tr" repeat.for="row of rows">
        <div class="div-td">
          ${row.field1}
        </div>
        <div class="div-td">
          ${row.field2}
        </div>
      </div>
    </template>
  </paj-grid>

dataSource needs to be an implementation of IGridDataSource. If you are wrapping an odata api, "au-pajankination/grid/odata-data-source" has some minimal additional conveniences.

sort-header

use this to add sorting functionality to a column:

      <paj-grid data-source.bind="dataSource" view-model.ref="grid">
        <template replace-part="header">
          <div class="div-tr">
            <sort-header column="field1" grid.bind="grid">Field 1</sort-header>
          </div>
        </template>
      </paj-grid>

paj-grid has a 3 state sort cycle: sort ascending, sort descending, not sorted (or sorted by default column). Your data source needs to do something with the orderby parameter!

custom template

The default html template for paj-grid uses bootstrap 3 and font-awesome css.

If you don't want that, you can replace the html template used by paj-grid.

In your main:

    import { Config } from "aurelia-view-manager";

    ...

    aurelia.container.get(Config)
    .configureNamespace("ariovistus/au-pajankination", {
      map: {
        "grid": "my-grid.html",
        "grid-sort-icon": "my-grid-sort-icon.html",
      }
    });