Front-end Code Organization

Adopting fastCode enables developers to create a full-fledged Angular / Angular Material single page application (SPA) quickly, with a consistent widget, markup, styles, and behavior. Developers can easily customize the application using existing reusable components. Since the application provides base classes and components, developers can add new pages without writing much code.

The generated front-end application has following folder structure:

1. Account: Contains the code of account module.

2. Admin: Contains the code of admin module..

3. Core: Contains the code for core module and some other core application
   files.

4. Common: This directory contains the following sub-directories/files..

   (i) General: This module contains the general components for CRUD screens and are used in
   CRUD screens of each entity.

   (ii) Shared: This is a shared library that comprises all reusable base components and classes on
   which the main application depends.

   (iii) Material.module.ts: This file contains a module which exports all the material modules and is
   used in other modules.

5. Entities: Contains all entity modules..

6. Error-page: Contains 404 error page.

7. Extended: Contains the extended files for each module and is used for side by side
   development. It has following sub-directories:

   (i) Account

   (ii) Admin

   (iii) Core

   (iv) Entities

8. Swagger: Contains swagger component.

The generated front-end application has following modules::

Account: This module consists of.all the components of user account management. Depending upon the configuration selected while generation following components could be part of this module.

1. Register

2. Confirm registration

3. Confirm email

4. Update profile

5. Update password

6. Forgot password

7. Reset password

Admin: This module contains the components for administration like user-management and entity audit. Entity audit displays history of each component’s crud operations and provides different options to filter it.

User management allows you to manage users, roles, and permissions defined for CRUD operations on entities and for accessing different sections/operations in other add-on modules.

Core: This module contains core components which are part of every application including navigation, dashboard and login components. It also contains the core classes for security including Auth-guard and GlobalPermissionService.

Navigation/layout

Navigation of the application is implemented mainly in MainNavComponent. The navigation and layout adapt to a device size, whether it’s mobile, tablet, or desktop. A developer can add or remove menu items by editing templates of this component.

The layout of the application has been implemented in MainNavComponent using mat-sidenav-container, mat-sidenav, and mat-sidenav-content of the Angular Material library. Mat-sidenav-container is a root container of the side navigation and the main content area.

Fig 2) Layout

General: This module contains the general components for CRUD screens and are used in CRUD screens of each entity. We have the following four general components:

1. General List Component: It is a component that displays a list of items. It just has the UI part and does not contain functionality implementation, instead it depends on inputs and in case of any action it just emits output.

2. General Details Component: It is a component that displays details of an item. Like the general list component, it depends on inputs and in case of any action emits output.

3. General Details Component: It is a component that displays a form to create a new entry for an entity. It also depends on inputs and in case of any action emits output.

4. Fields Component: This component takes a list of fields and renders appropriate UI control for them in a form. It is used in general details and general new components.

Shared: This is a shared library that comprises all reusable base components and classes on which the main application depends.

In the generated front-end, an entity is represented with a TypeScript class/interface that contains a list of fields that correspond to the columns in the data source table. The application generator produces a list, a detail, and a create page, and a TypeScript service component for the entity. Since the UI requirements for CRUD operations on all entities are similar, all the common functionality and the UI elements are implemented in the Shared module.

The implementation of the main application depends on the shared module. As an example, for an order entity, the main classes in the Shared module are depicted below in the blue region. These classes are generic classes whose placeholder types are replaced in the child with a specific TypeScript class or interface. For example, for the order entity, the generic type E is replaced with IOrder interface.

Fig 1) Shared module classes

Now, let's describe the base and derived components for each entity.

1. BaseListComponent: It is a component that fetches and displays a list of items. It also implements adding and deleting an item, enabling/disabling UI features based on the user permissions, sorting and filtering the list, as well as fetching while scrolling.

2. BaseNewComponent: it is a component that consists of functionality to create a new item

3. BaseDetailsComponent: it is a component where you can edit an existing item.

4. GenericApiService: It is a generic service that is being used by UI components to fetch data from the REST API.

In addition to the main base classes, the shared module provides reusable components such as Picker, Filter, CustomToolTip and ConfirmDialog..

Material: This module exports all the material modules and is used in other modules.

Entities modules: These modules are directly dependent on the data model. There is a module for each entity and it contains crud components. These components are list, details and new and they extend the functionality of base components.

Theming

The generated application uses an Angular Material theme. Angular Material comes prepackaged with several pre-built theme SCSS files. Developers can include their theme files under src/styles and modify the src/styles/theme-main.scss and src/app/core/main-nav/main-nav.component.ts to import the new theme.

fastCode has also added its own global style variables in the src/styles/base.scss. The base.scss serves as the base theme for all fastCode components.

The relationship between Angular Material and fastCode themes is described in Fig 4 below. If you want to add a custom theme to your component, you need to add a theme that inherits from the base.css, as indicated in the grey area of the figure.

Fig 3) Theming

Internationalization

The generated application has Internationalization & Localization support. A developer can support a new language by adding a new language file under src/assets/i18n folder and adding its entry in the src/app/app.component.ts file.

Each application, by default has an en.json in src/assets/i18n if you want to support other languages like french. You’ll need to follow below steps:

1. Create a new file named fr.json.

2. Copy the contents of en.json into it.

3. Update the value of each key in french.

4. Add a key named “fr” at main level in both en.json and fr.json. En.json already has such an entry for English language i.e. “en”

5. Add “fr” in the list of languages in src/app/app.component.ts file.

UI Security

fastCode supports UI Security at a high level of granularity. Developers can define permissions at a button level. Most of the infrastructure for permission-based authorization on the UI is provided in the base classes. Therefore, to incorporate authorization or to enable or disable features of the pages based on a user’s permissions, it is just a matter of adding globalPermissionService to the constructor of your component and adding entityName as a field of the class. Then the base class will make available to your component the following flags based on the role(s) / permission(s) assigned to the authenticated user.

IsReadPermission

IsCreatePermission

IsUpdatePermission

IsDeletePermission

The menu items in the navigation and buttons in the pages are enabled/disabled
based on these permissions.