Tiny but mighty Angular Directive: Record Status Indicator

In posts with similar title, I am planning to show some small Angular Directives that are not huge in terms of code but provide very useful functionality and greatly enhances the user experience.

You may have come across business applications in which records can be soft deleted – means they exists in the system but users are not allowed (or encouraged) to select those records. Such data preservation is helpful especially when historical data is required to be maintained in the system.

So I thought it would be nice to visually indicate if a particular record that user is looking at on screen is active or not. Consider the list of records below. The tiny status indicator just before the indicator clearly shows id record is active or inactive.

Another example in the system, when user is trying to select a Carrier Authority in a dropdown:

The dropdown includes all values but clearly shows that users should not use Inactive records. Like I said, the code for showing such status indicator is very tiny but brings a lot of value for the end users.

The code for the status indicator is provided below, you need to keep two things in mind:

1. It requires an entity with isActive property set to true or false depending in status of the record in the system

2. It uses Font Awesome icons and some color styles. You need to make sure Font Awesome and appropriate styles are included in your project.

app.directive('stStatusIndicator', function () {
    return {
        restrict: 'A',
        scope: {
            entity: '=stStatusIndicator'
        },
        link: function (scope, element, attr, ctrl) {
            scope.$watch('entity', function (newValue, oldValue) {
                if (newValue == undefined || newValue == null) {
                    element.empty();
                }
            })
            scope.$watch('entity.isActive', function (newValue, oldValue) {
                if (newValue == undefined)
                    return;

                element.empty();
                var node = document.createElement("i");
                if (newValue == true) {
                    node.className = "fa fa-circle text-green hidden-print";
                    node.title = "Active";
                }
                else {
                    node.className = "fa fa-ban text-danger hidden-print";
                    node.title = "Inactive";
                }
                element.append(node);
            })
            
           
        }
    };
});

Such visual indications can definitely be extended to other concepts such as indicating status of record in workflow, recently updated record so on and so forth. Hope you enjoyed the technique!