Cruddle

Introduction

Cruddle is an Angular 2 library that provides functionality to generate
generic CRUD(L) screens from ModelSafe data models.
The huge benefit of this is that screens in a CRUDL-based application can have their fields and validations
automatically provided by ModelSafe, so the actual work you need to do develop Angular components
for CRUDL screens is minimal. Cruddle provides all of the functionality to describe how a screen
should look and perform from a ModelSafe model, and you just need to turn that stateful information
into Angular templates.

For a general run down of how the library works, see the usage section below.

Installation

npm install --save cruddle

Usage

General Concepts

Cruddle separates the concept of a screen into three components:

  • The description of a screen, which might describe the columns to show in a list, what buttons
    to show on the screen and so on. Basically a literal description of how the UI might function.
  • The user interface (UI) which takes the description of a screen and renders it using
    HTML and then creates visual elements that can change the screen state.
  • The state of a screen, which the UI interacts with in order to keep track of certain
    functionality related to the screen. For example, the state of a list might contain
    pagination information

In a sense, the UI can be thought of as visual glue between a screen describer (produces
screen descriptions) and a screen state.

Each different CRUDL action has its own respective describer and state types.
These can be used to write the base components/user interfaces for each CRUDL action.

Create & Update

In most applications, a create or update screen will generally
act the same or extremely similar when it comes to UI. To encourage writing minimal code,
Cruddle's create and update functionality are described by the single FormDescriber class.
In order to generate a FormState, you should extend the FormDescriber with a model-specific
version.

If you have no custom functionality, you can use the AutoFormDescriber provider
included in CruddleModule to generate default form describers for models. You will still
need to provide the save function to use for saving the form data.

Read

In order to generate a ReadState, you should extend the ReadDescriber with a model-specific
version.

If you have no custom functionality, you can use the AutoReadDescriber provider
included in CruddleModule to generate default read describers for models.

Delete

In order to generate a DeleteState, you should extend the DeleteDescriber with a model-specific
version.

If you have no custom functionality, you can use the AutoDeleteDescriber provider
included in CruddleModule to generate default delete describers for models. You will
still need to provide the delete function to use for deleting the model data.

Note that some applications may have the delete screen as a popup
on the list screen rather than a separate screen. If that's the case,
then the delete component can just be ignored and a delete action can be
added to the list component.

List

In order to generate a ListState, you should extend the ListDescriber with a model-specific
version.

If you have no custom functionality, you can use the AutoListDescriber provider
included in CruddleModule to generate default delete describers for models. You will
still need to provide the refresh function to use for refreshing the list screen.

Documentatation

The API documentation generated using TypeDoc
is available online.

To generate API documentation from the code into the docs directory, run:

npm run docs

Testing

To execute the test suite run:

npm run test

License

This project is licensed under the MIT license. Please see LICENSE.md for more details.

results matching ""

    No results matching ""