Page Builder - Backend

Description

The Page Builder is a library used to create flexible and secure views at the backend side. This approach allows to accurately implement all the views needed in the application in the backend while keeping a light and simple frontend.

Check out the Page Builder - Frontend for the frontend side of the application.

Views

Views are subdivided in different types:

• Forms: standard forms to input data;
• Tables (CRUD): tables to read, filter, search and modify large ammounts of data;
• Tabsets: groups of tabs, usually containing other views;
• Cards: simple and elegant summaries of data.
• Simple Views: flexible and highly customizable html views;
• Dashboards
• Catalougues

Installation

npm i --save @alfercom/be-page-builder

Documentation

In order to properly work The Page Builder needs:

A PermissionService that implements BasePermissionsService

The getUserPermissionsInstance() function is called by getStructure() in the ViewController class to check if the user can access the view.

import { BasePermissionsService } from "@alfercom/be-page-builder";

@Injectable()
export class PermissionsService implements BasePermissionsService{
  constructor() {}

  userHasPermissions(user: any, accessPermissions: string[]){
      //TODO implement
  }
}

A CustomViewController, CustomViewService and CustomViewModel

The CustomViewController must be marked by the @UseGuards(JwtAuthGuard) decorator to implement the security layer of the Page Builder.

import { ViewController } from "@alfercom/be-page-builder";

@UseGuards(JwtAuthGuard)
export class CustomViewController extends ViewController{}

import { ViewElement, ViewManagerService } from "@alfercom/be-page-builder";
import { InjectRepository } from "@nestjs/typeorm";
import { MongoRepository } from "typeorm";

export class CustomViewService extends ViewManagerService {
    constructor(
        @InjectRepository(ViewElement) private viewElement: MongoRepository<ViewElement>
    ) { 
        super(viewElement) 
    }
}

import { ViewBuilderModule, ViewElement } from "@alfercom/be-page-builder";
import { Module } from "@nestjs/common";
import { TypeOrmModule } from "@nestjs/typeorm";
import { CustomViewController } from "./view-builder.controller";
import { CustomViewService } from "./view-builder.service";

@Module(
    {
        imports: [ViewBuilderModule, TypeOrmModule.forFeature([ViewElement])],
        controllers: [CustomViewController],
        providers: [CustomViewService],
        exports: [CustomViewService]
    }
)
export class CustomViewModule { }

The viewScanner in your main.ts

The view scanner loads the views form the database.

import { viewScanner } from '@alfercom/be-page-builder';

async function bootstrap() {
    ...
    viewScanner((app as any).container)
    ...
}

The ViewElement Entity in the entity list

import { ViewElement } from '@alfercom/be-page-builder';

return TypeOrmModule.forRootAsync({
        useFactory: () => ({
            ...
            entities: [
                ...
                ViewElement,
                ...
            ],
        })
    })

View Example

Create a new TestViewModule

@Module(
    {
        imports: [CustomViewModule, PermissionModule],
        controllers: [TestSimpleViewController],
        providers: [],
        exports: []
    }
)
export class TestViewModule { }

Create the TestSimpleViewController

import { Controller } from "@nestjs/common";
import { SimpleViewV1, SimpleViewV1Structure, SIMPLE_VIEW_V1_TYPE, SIMPLE_VIEW_V1_VERSION, ViewInstance } from '@alfercom/be-page-builder';
import _ = require("lodash");
import { ViewGetStructureParams } from '@alfercom/be-page-builder';
import { ViewStructure } from '@alfercom/be-page-builder';
import { PermissionsService } from "src/permission-service/permission.service";

export const TEST_VIEW_SIMPLE = "test-view-simple"

@Controller()
@ViewInstance({
    name: TEST_VIEW_SIMPLE,
    type: SIMPLE_VIEW_V1_TYPE,
    version: SIMPLE_VIEW_V1_VERSION,
})
export class TestSimpleViewController extends SimpleViewV1 {

    constructor(
        protected permissions: PermissionsService,
    ) {
        super(permissions);
    }

    async getStructure(
        params?: ViewGetStructureParams
    ): Promise<ViewStructure<SimpleViewV1Structure>>{
        const { user, parameters } = params

        const html = "Hello World!"

        const response: ViewStructure<SimpleViewV1Structure> = {
            name: this.name,
            description: _.get(this.publicInfo, "description", null),
            icon: _.get(this.publicInfo, "icon", null),
            title: _.get(this.publicInfo, "title", null),
            type: this.type,
            version: this.version,
            viewId: this.viewId,
            structure: {
                head: {
                    breadcrumbs: [
                        {
                            historyBack: true,
                            label: 'Back',
                            icon: 'fa fa-arrow-left'
                        }
                    ],
                    title: {
                        mainTitle: null,
                        position: 'center'
                    }
                },
                body: {
                    helpers: [],
                    content: {
                        html,
                    },
                    buttons: [],
                },
                vigilantOpts: {},
            }
        };
        return response;
    }
}

Add the Document to the View collection in the Database.

{
	"_id" : ObjectId("6183b6eecd2b389caf900f79"),
	"name" : "test-view-simple",
	"description" : null,
	"viewGroup" : null,
	"type" : "SIMPLEVIEW",
	"version" : "1.0",
	"publicInfo" : null,
	"permissions" : {
		"accessPermissions" : [ ],
		"ownPermissions" : null
	},
	"structure" : null,
	"content" : null,
	"domainsAllowed" : [ ],
	"isActive" : true,
	"_compiling_params" : null
},