Frontend Architecture

Introduction

Application Architecture

Deployment

Permissions

Depends on user roles some UI controls can be disabled or hidden. To control UI control access permission directive can be applied:

 

<button permission=”submitRequest” permission-properties=”requestForm” permission-action=”disable”> Submit Request </button>

• The “permission” property defines actionName from rules list.
  The “permission-properties” contains object that defines current application state. It can be different for all actions.
• The “permission-action” defines action that should be applied to disabled control. Now it can takes 2 values: “hide” or “disable”.

 

Module

Application consist of modules. Every module is responsible for one functionality. For example, Queues management, Order Creation, Administration etc.

 

Module Structure

All modules have similar structure:

• module-name
  • [config]
  • module-name.client.config.js
  • module-name.client.routers.js
  • [controllers]
  • [components]
  • module-name.client.controller.js
  • [filters]
  • [module_config]
  • [resources]
    • en.json
  • config.json
  • [services]
  • [views]
  • [components]
  • module-name.view.html
  • module-name.client.module.js

To generate proper module structre, next tool can be used: arkcase-generator.

 

File naming convention

There few types of files in the module. All types of file should follow next templates:

 

File Type	File name template	Examples
Controllers	*.client.controller.js	admin.client.controller.js
Configuration	*.client.config.js	create-queue.client.config.js
Directive	*.client.directive.js	permission.client.directive.js
Filters	*.client.filter.js	date.client.filter.js
Module configuration	config.json	config.json
Resources	en.json	en.js
Routes	*.client.routes.js	admin.client.routes.js
Services	*.client.service.js	edit-dashboard.client.service.js
Views	*.client.view.html	order.client.view.html

 

Use dashes to separate words in file names.

These file names are incorrect:

File name	What is wrong
AmdinDashboard.client.controller.js	CamelCase notation was used
admin_dashboard.client.controller.js	Underscore is used instead of dash
admin-dashboard.js	“client.controller” suffix missed
admin.dashboard.client.controller.js	Dot was used instead of dash

 

This file name is correct: admin-dashboard.client.controller.js

 

Module configuration file config.json

This file is located in module_config folder and defines all module’s settings, that can be easy changed without source code modifications. For example: grid’s column width, pagination size, position in Navigation menu etc. There are only few settings that required and have predefined format.

Property name	Description
id	Unique Module Identifier.
title	Module’s title. Is visible only in administration panel
menus	Defines menus items if required.
components	Array of module’s components

 

Menus Settings

There are few predefined menus in the system:

• topbar – Typically used for new items creation
• leftnav – Defines native way to get access to module from left navigation panel
• usermenu – Menu that opens on user profile click.

All of these menus have same items format:

 

{ “menuId”: “leftnav”, “menuItemURL”: “custom-module”, “menuItemTitle”: “Custom module”, “iconClass”: “glyphicon glyphicon-asterisk”, “position”: 100 },

 

Property	Description
menuId	Menu identifier. One of these values: topbar, leftnav, usermenu
menuItemURL	Module state URL, that will be opened on menu item click.
iconClass	Class of icon that can be added to item menu. Typically this is icon from bootstrap glyphicon or font-awesome collections
position	Number of position in menu. Less number means first position