https://github.com/creativecuriositystudio/cruddle
(DEPRECATED) Simplifying CRUDL screen development using ModelSafe
https://github.com/creativecuriositystudio/cruddle
angular2 crud data html model typescript ui web
Last synced: 3 months ago
JSON representation
(DEPRECATED) Simplifying CRUDL screen development using ModelSafe
- Host: GitHub
- URL: https://github.com/creativecuriositystudio/cruddle
- Owner: creativecuriositystudio
- License: mit
- Created: 2017-02-28T20:23:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-03T06:46:14.000Z (about 9 years ago)
- Last Synced: 2025-07-06T00:33:19.486Z (12 months ago)
- Topics: angular2, crud, data, html, model, typescript, ui, web
- Language: TypeScript
- Homepage:
- Size: 1.16 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Cruddle
## Introduction
Cruddle is an Angular 2 library that provides functionality to generate
generic CRUD(L) screens from [ModelSafe](https://github.com/creativecuriositystudio/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
```sh
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](https://github.com/TypeStrong/typedoc)
is [available online](http://creativecuriositystudio.github.io/cruddle).
To generate API documentation from the code into the `docs` directory, run:
```sh
npm run docs
```
## Testing
To execute the test suite run:
```sh
npm run test
```
## License
This project is licensed under the MIT license. Please see `LICENSE.md` for more details.