PortLog Common UI

Install

$ npm i --save marcura

Usage

angular.module('your.app.name', [
    //...
    'ui.marcura'
    //...
]);

Providers

Instruction Config

Set router state names for manager and creator/editor component.

Components relay on provided router state names:

1. instructionAdd
2. instructionCreator

// Setup
import {IInstructionConfigProvider} from 'marcura';
...
app.config((InstructionConfigProvider: IInstructionConfigProvider): void => {
    'ngInject';

    InstructionConfigProvider.config.router.manager = 'app.instruction.manager';
    InstructionConfigProvider.config.router.creator = 'app.instruction.creator';
});

// Usage
import {IInstructionConfig} from 'marcura';
...
class InstructionController implements angular.IComponentController {

    constructor(private InstructionConfig: IInstructionConfig,
                private $state: angular.ui.IStateService) {
        'ngInject';
    }
    ...
    public create(): void {
        this.$state.go(this.InstructionConfig.router.creator);
    }
}

Instruction Filter Assignee

Set default items and state for filters available on instruction list.

// Setup
import {Assignee, IInstructionFilterAssigneeProvider} from 'marcura';
...
app.config((instructionFilterAssigneeProvider: IInstructionFilterAssigneeProvider): void => {
    'ngInject';

    console.log(instructionFilterAssigneeProvider.assignees);
    // >> [{ name: 'Chartering', id: 2 },{ name: 'Operator', id: 3 },{ name: 'Master', id: 0 }]

    //Set default select for 'Chartering'
    // Remember to think in immutable way!
    const assignees: Assignees[] = [].concat(instructionFilterAssigneeProvider.assignees);
    const assignee: Assignee = assignees[0];
    assignee.checked = true;

    /*
    * Or shorter
    * assignees[0].checked = true;
    */
    instructionFilterAssigneeProvider.setAssignees(assignees);
});

// Usage
import {Assignee} from 'marcura'

class InstructionFilterController implment angular.IComponentController {

    constructor(private instructionFilterAssignee: Assignee[]) {
        'ngInject';
    }
}

Developement

PLO or PLC is required to be able to swiftly develop library. Of course any app that imports marcura will work, but portlog apps already have environment that enables some building to be done quicker.

The project is written in AngularJS with Typescript and component approach. Syles are written in sass with Bootstrap and PostCSS for autoprefixing.

Project dependencies

Core

• Angular 1.6.x
• Angular Material
• Typescript
• jQuery
• lodash
• Bootstrap
• animate.css

Additional Libraries

• marcura-ui
• mdi
• moment
• pikaday
• quill
• select2
• tslib

Developement wokflow

library = marcura-common-ui (this repository) app = any app that uses marcura library as depedency

1. Clone git repository.
2. Run npm install && npm link in the main folder of the library.
3. In the local version of PLO or PLC run npm link marcura to link the app to the local version of library.
4. Run that locally linked app (PLO or PLC) in developement mode so you can view marcura library elements inside of this app.
5. Modify marcura-common-ui in any way you need.
6. Run npm link from the root of the library to rebuilt and relink it.
7. Rebuild app you were using locally as the base for library. (In PLO and PLC you can use npm run dev:fresh to rebuild the vendor of both apps uing the new marcura library. The script runs also dev developement for those apps).
8. View the changes you've made in marcura library in the base app.

Deployment

1. Make sure you have the newest version from master.
2. Commit you changes to master. (preferably through PR first)
3. Run npm login.
4. Run npm version patch.
5. Run npm publish.
6. NPM publish creates a commit with updated version in package.json - push it to master.
7. Update the version of marcura library in any apps that uses it to the new one just created and push to repository.
8. Redeploy the apps.

Steps to do a Hotfix for common-ui (1st draft - needs editing):

• So the process is that you create hotfix branches on both apps, make sure it works properly on both applications, then you publish the hotfix branch to npm
• You have to merge the hotfix branch on common-ui after the hotfix is deployed and you have to update the marcura versions in the hot fix branches of both apps
• Then you send a message in the global chat to everyone, telling them that they cannot deploy anything to cuat for plo and plc
• Then, after publishing the hotfix branch of common-ui to npm, you have to deploy the hotfix branches of both apps to cuat
• Then you ask Mayuri to test both applications, specify the feature that you made to her so she knows what to prioritse in her tests
• After she approves both apps, then deploy both apps to production
• Then merge all the hotfix branches into master for all the apps including common-ui
• Publish common-ui again to npm from master this time
• Then update the marcura versions on plo and plc, and then deploy both app to cuat on the master branch