MSBase

Angular.js, Desktop app, Web app
Contractor: Kiandra IT
Client: MSBase
Close X

Developed and designed UI for MSBase, a medical application built on AngularJS 1.5 utilising the latest web technologies and modern workflows such as Gulp automation and Git version control. Backed by an API built by an excellent team of developers in .NET and wrapped into a Window Shell for desktop distribution.

The project involved an heavy use of forms and data validation, animated charts based on the open-source library Highcharts and nested routing with bidirectional data sharing between components.

Syntax and conventions following the directions of Angular 1 Style Guide by John Papa.

Only few lines of code down below, can’t show too much or sensitive code for obvious reasons.


(function(){
'use strict';

var userBasicInfo = {
    bindings: {
        basicInfo: '=',
        form: '=',
        disabled: '=',
        fieldsRestriction: '@',
        readonly: '='
    },
    controller: 'UserBasicInfoController as vm',
    templateUrl: 'app/user/user-basic-info/user-basic-info.html'
};

angular
    .module('app.core')
    .component('userBasicInfo', userBasicInfo)
    .controller('UserBasicInfoController', UserBasicInfoController);

/* @ngInject */
function UserBasicInfoController(refDataService, userContext) {
    var vm = this;
    vm.isAdmin = userContext.getRole() === 'Registry Admin';
    vm.shouldBeDisplayed = shouldBeDisplayed;

    activate();

    vm.basicInfo = vm.basicInfo || {};

    vm.titleOptions = [
        'Mr',
        'Ms',
        'Dr',
        'Prof'
    ];

    vm.professionRoleOptions = [
        'Neurologist',
        'Registrar/Resident',
        'Nurse',
        'Researcher/Scientist',
        'Admin',
        'Other'
    ];

    function activate() {
        refDataService.getCountries()
            .then(function(response) {
                vm.countries = response;
            });

        if (vm.fieldsRestriction) {
            vm.fieldsRestriction = vm.fieldsRestriction.split(',');
            angular.forEach(vm.fieldsRestriction, function(value, key) {
                vm.fieldsRestriction[key] = value.trim();
            });
        }
    }

    function shouldBeDisplayed(fieldName) {
        return !vm.fieldsRestriction || vm.fieldsRestriction.indexOf(fieldName) > -1 ? true : false;
    }

}

}());


(function() {
'use strict';

angular
    .module('app.statistics')
    .run(appRun);

/* @ngInject */
function appRun(routerHelper) {
    routerHelper.configureStates(getStates());
}

function getStates() {
    return [
        {
            state: 'statistics',
            config: {
                url: '/statistics',
                templateUrl: 'app/statistics/statistics.html',
                controller: 'StatisticsController',
                controllerAs: 'vm',
                title: 'Statistics',
                params: {
                    'navItem': 'statistics'
                },
                resolve: {
                    patients: ['searchService', 'statisticsApi', function (searchService, statisticsApi) {
                        return statisticsApi.patients(searchService.getCurrentSearch().rule).$promise;
                    }]
                }
            }
        }
    ];
}
})();


(function () {
'use strict';

angular
    .module('app.core')
    .factory('spinnerService', spinnerService);

/* @ngInject */
function spinnerService($timeout, $rootScope) {
    var service = {
        show: show,
        hide: hide
    };

    var timeout;

    return service;

    function hasSidebar() {
        return $rootScope.restricted;
    }

    function show() {
        $timeout.cancel(timeout);
        timeout = $timeout(function(){
            if (!angular.element('#spinner').length) {
                var addedClass = '';
                if (!hasSidebar()) {
                    addedClass = 'center-spinner';
                }
                angular.element('body').append('
'); } }, 400); } function hide() { $timeout.cancel(timeout); if (angular.element('#spinner').length) { angular.element('#spinner').remove(); } } } })();