frontend: A JavaScript repository from biqasoft.com - retired - biqasoft.com

This is frontend repository for cloud.biqasoft.com

Architecture overview

AngularJS

Logging

In index.html there is a method processError() which is called in global js error and in angular config decorator error app.js as $exceptionHandler

You should send javascript errors to server with server logentries.com See more at detect errors in js And for logentries API and lib

<script src="/js/le.min.js"></script>
<script>
// You need to replace User-Log-Token with the token from logentries to identify these log events.
LE.init('46f199b1-2ede-4f6d-9811-d5a634bc13e2');
</script>

<script>
// log something
LE.log("Hello, logger!");
</script>

Used libs

Material Design

CSS

Icons

Build

Gulp 4 gulp - result in buildfolder

i18n

Translate text.

angular-translate is used Lang pack files in assets/i18n folder

Usage

In html

<span translate="NAV.CRM"></span>

In JS

Inject service $translate to controller/service and use

Async way

$translate('APP.SET_NEW_LANGUAGE').then(function (translation) {
   logger.logSuccess(translation + key)
});

Sync way $translate.instant('APP.UNSAVED_CHANGES')

UI

Angular tips

Delete button

<md-button class="" data-ng-click="deleteConfirmation(currentCompany)">
	<md-icon md-font-icon="delete">delete</md-icon>
  	<span translate="APP.COMMON.DELETE.BUTTON"></span>
</md-button>

Dynamic change HTML page title You can dynamically change page title in browser in every angularjs controller with $rootScope.title='Some Title'

data-ng-disabled="editMode" disabled button ng-if="!editMode"

This is tooltip directive usage

<span class="" tooltip-placement="right" tooltip="_текст_" tooltip-append-to-body="true">
     some text
</span>

Add button

<md-button data-ng-click="showNewProjectFlag = !showNewProjectFlag " style="opacity: 0.7;">
    <md-icon md-font-icon="add">add</md-icon>
</md-button>

This is label

<span ng-if="project.active" class="label label-success">Активен</span>

When we want to print some in debug (developer) mode

<div ng-if="::debugMode">
    {{webCounter | json}}
</div>

Use class for background color for search elements, filters etc...

background-input-color

If we want to print time ago (such as "one minute ago") {{someDate | timeAgo}}

if we want editable on click field

<a href="#" editable-text="detailedCustomerInfo.firstName">{{ detailedCustomerInfo.firstName || 'enter' }}</a>

Show text when field is empty (print translated message that fields is empty) {{ object.name || printEmptyField() }}

Directives

Custom fields

Custom field creator <custom-fields-selector ng-model="currentCompany.customFields"></custom-fields-selector>

Custom field editor in objects <custom-fields-shower ng-model="detailedCustomerInfo.customFields"></custom-fields-shower>

To show delete button on near every field <custom-fields-shower ng-model="detailedCustomerInfo.customFields" show-delete-button="true"></custom-fields-shower>

Other

Choose date (relative, such as %DAY_START% and absolute, as JS date) <date-selector ng-model="domeModel" ></date-selector>
UserAccount roles (server-side Spring Security roles) <span role-security-selector data-ng-model="account.roles"></span>

Project structure

inspired by

app/
----- templates/   // AngularJS html templates
----- shared/   // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/   // each component is treated as a mini Angular app
---------- ui-framework/ - components for development UI (forms, tables, charts...)
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
---------- main.js   // main angularjs controller, some $rootScope ...
---------- service.api.js   // API calls to back-end (REST)
---------- service.draw.js      // Draw, charts, highcharts...
---------- service.js   some main services (internal) partly, including network
---------- service.widgets.js   // dashboard widgets components
----- app.js        // angular init (providers, configs, modules declare)
----- app.routes.js         // all routes in AngularJS
assets/
----- img/      // Images and icons for your app
----- css/      // All styles and style related files (SCSS or LESS files)
----- js/       // JavaScript files written for your app that are not for angular
----- libs/     // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html
README.md       // some documentation and notes

biqasoft-retired/frontend