crud-pack

The it.rocks default CRUD pack.

Installation

npm i @itrocks/crud-pack

Adding this single dependency pulls in a coherent set of packages that implement the typical CRUD flows, with default implementations for the most common actions on your domain objects:

• @itrocks/delete: Deletion action handling the button, user confirmation, data source deletion, and visual feedback,
• @itrocks/edit: Generic action-based object edit form in HTML and JSON,
• @itrocks/list: Generic action-based object list navigation in HTML and JSON,
• @itrocks/new: Generic action-based new object form in HTML and JSON,
• @itrocks/output: Generic action-based object output in HTML and JSON,
• @itrocks/save: Persist object data, processing input from HTML or JSON sources,
• @itrocks/summary: Generic action-based object summary in JSON.

@itrocks/crud-pack itself does not expose extra runtime APIs. It is primarily a convenience bundle that:

• groups these packages under a single, versioned dependency,
• provides a standard baseline for building CRUD screens and APIs.

Usage

You typically use @itrocks/crud-pack in applications or libraries defining CRUD actions and views for business objects.

Instead of depending on each CRUD package individually, simply install @itrocks/crud-pack and import the building blocks you need from their respective packages.

Typical use cases

1. Use the default CRUD pack: If your app needs default CRUD actions, this pack provides them. It is the standard pack you can use in it.rocks applications, but you may replace it with any alternative CRUD implementation pack.
2. Local override of default CRUD behaviour for a specific entity directly inside your package.
3. Global override of default CRUD behaviour for all entities by inheriting and overriding components.

Examples

Example 1: Apply the default CRUD pack to your it.rocks application

Declare it as a dependency, and the it.rocks framework will automatically apply the default actions:

package.json

{
  "dependencies": {
    "@itrocks/crud-pack": "latest",
    "@itrocks/framework": "latest"
  }
}

Then, for this simple Movie entity:

app/movie.ts

import { Route } from '@itrocks/route'
import { Store } from '@itrocks/storage'

@Route('/movie')
@Store()
export class Movie
{
  title = ''
  year?: number
}

You then automatically get all default CRUD routes, actions, and views:

• /movie: alias for /movie/list,
• /movie/list: HTML or JSON data for a list of movies,
• /movie/new: form or JSON structure for creating a movie,
• /movie/1/output: HTML or JSON output for movie #1,
• /movie/1/summary: HTML or JSON summary,
• /movie/1/edit: edit form,
• /movie/1/save: persist data for an existing or new entity,
• /movie/1/delete: delete request with confirmation and feedback.

Output format depends on the Accept request header:

• application/json → JSON response
• text/html → HTML response

Example 2: Override CRUD for a simple Movie entity

package.json

{
  "dependencies": {
    "@itrocks/action-pack": "latest",
    "@itrocks/crud-pack": "latest"
  }
}

Define the exposed domain object:

app/movie.ts

import { Route } from '@itrocks/route'
import { Store } from '@itrocks/storage'

@Route('/movie')
@Store()
export class Movie
{
  title = ''
  year?: number
}

Override only the new action:

app/movie/new.ts

import { Request } from '@itrocks/action-request'
import { New }     from '@itrocks/new'
import { Movie }   from '../movie.js'

@Route('/movie/new')
export class NewMovie extends New<Movie>
{

  async getObject(request: Request<Movie>)
  {
    const newMovie = await super.getObject(request)
    if (newMovie.title === '') {
      newMovie.title = 'New movie ' + (Math.floor(Math.random() * 90000) + 10000)
    }  
    return newMovie
  }

}

Example 3: Override CRUD behaviour globally

To customise the default CRUD actions application-wide:

package.json

{
  "dependencies": {
    "@itrocks/crud-pack": "latest"
  }
}

Then override some default CRUD components using inheritance through @itrocks/compose.

app/custom-crud.ts

import { Request }             from '@itrocks/action-request'
import { Edit as DefaultEdit } from '@itrocks/edit'
import { New  as DefaultNew }  from '@itrocks/new'

export class Edit<T extends object = object> extends DefaultEdit<T>
{
  async html(request: Request<T>)
  {
    console.log('override all behaviour for edit action')
    return super.html(request)
  }
}

export class New<T extends object = object> extends DefaultNew<T>
{
  async html(request: Request<T>)
  {
    console.log('override all behaviour for new action')
    return super.html(request)
  }
}

Finally, apply this mapping in your configuration file:

config.yaml

compose:
  '@itrocks/edit': '/app/custom-crud:Edit'
  '@itrocks/new': '/app/custom-crud:New'