Moving the date range code into an Angular directive

At the end of last post, we had eliminated some duplication from an Angular controller by using events to make it communicate with some of the widgets it was using. This was the code at that moment:

	"use strict";
	app.controller('TracksIndexPageController', [
	'$scope',
	'Categories',
	'accumulatedStatistics',
	'categoryListWidgetFactory',
	'dateRangeWidgetFactory',
	'Pagination',
	'activitiesWidgetFactory',
	'applicationEvents',
	function ($scope, Categories, accumulatedStatistics, categoryListWidgetFactory, dateRangeWidgetFactory, Pagination, activitiesWidgetFactory, applicationEvents) {
	var updatePageInfo = function () {
	$scope.activities.filterBy($scope.categoryList.getSelectedCategory());
	$scope.updateActivitiesRelatedData();
	$scope.pagination = new Pagination($scope.activities.displayedOnes);
	},
	updateStatistics = function () {
	$scope.displayedStatistics = accumulatedStatistics.getGroupedStatisticsToDisplay(
	$scope.activities.displayedOnes
	);
	};
	$scope.$on(
	applicationEvents.DateRange_Changed,
	function () {
	$scope.activities.load($scope.dateRange, updatePageInfo);
	}
	);
	$scope.$on(
	applicationEvents.CategoryList_NewSelectedCategory,
	updatePageInfo
	);
	$scope.updateActivitiesRelatedData = function () {
	updateStatistics();
	$scope.categoryList.updateNonEmptyCategories(
	$scope.activities.distinctCategories()
	);
	};
	$scope.userHasStatistics = function () {
	return accumulatedStatistics.exists();
	};
	$scope.shouldShowActivities = function () {
	return !resolved() || $scope.activities.thereAreSomeToDisplay();
	function resolved() {
	return _.isUndefined($scope.activities.displayedOnes.$resolved) ||
	$scope.activities.displayedOnes.$resolved;
	}
	};
	$scope.initialize = function () {
	$scope.Categories = Categories;
	$scope.categories = Categories.descriptions;
	$scope.activities = activitiesWidgetFactory.create();
	$scope.displayedStatistics = [];
	$scope.categoryList = categoryListWidgetFactory.create(
	Categories.allCategories,
	$scope.activities.distinctCategories()
	);
	$scope.dateRange = dateRangeWidgetFactory.create();
	$scope.dateRange.today();
	};
	$scope.initialize();
	}
	]);

view raw TracksIndexPageControllerWithAllEvents.js hosted with ❤ by GitHub

Next we got advantage of the decoupling given by using events to move the rest of the code that had to do with the date range widget to an Angular directive.

First we created the directive:

	"use strict";
	app.directive('dateRange', [
	'dateRangeWidgetFactory',
	function(dateRangeWidgetFactory) {
	return {
	restrict: 'AE',
	templateUrl: '/app/components/tracks/list/dateRangeWidget/date-range.html',
	controller: function ($scope) {
	$scope.dateRange = dateRangeWidgetFactory.create();
	$scope.dateRange.today();
	}
	};
	}
	]);

view raw dateRangeDirective.js hosted with ❤ by GitHub

where we moved the code that creates and initializes the date range widget.

Then we moved all the html that was using the date range widget in track-index.html to the date-range.html template:

	<div class="filter-ui__wrapper">
	<div class="filter-ui__box date-nav">
	<button class="is--left filter-arrows svg-arrow-left-bold"
	ng-click="dateRange.previous()">
	<span>&lt;</span>
	</button>
	<button ng-click="dateRange.today()">{{ 'tracks.today' | i18n }}</button>
	<button class="is--right filter-arrows svg-arrow-right-bold"
	ng-click="dateRange.next()">
	<span>&gt;</span>
	</button>
	</div>
	<div class="date-data">
	<span>{{ dateRange.fromDate() | date: 'dd/MM/yyyy' }}</span>
	-
	<span>{{ dateRange.toDate() | date: 'dd/MM/yyyy' }}</span>
	</div>
	<div class="filter-ui__box date-periods">
	<button class="is--left"
	ng-class="{ 'is--active': dateRange.isUsingWeekPeriod() }"
	ng-click="dateRange.useWeekPeriod()">
	{{ 'tracks.week' | i18n }}
	</button>
	<button ng-class="{ 'is--active': dateRange.isUsingMonthPeriod() }"
	ng-click="dateRange.useMonthPeriod()">
	{{ 'tracks.month' | i18n }}
	</button>
	<button class="is--right"
	ng-class="{ 'is--active': dateRange.isUsingYearPeriod() }"
	ng-click="dateRange.useYearPeriod()">
	{{ 'tracks.year' | i18n }}
	</button>
	</div>
	</div>

view raw date-range.html hosted with ❤ by GitHub

In track-index all this code got substituted by:

	<!--...-->
	<!--some more code before-->
	<date-range></date-range>
	<!--some more code after-->
	<!--...-->

view raw date-range-in-track-index.html hosted with ❤ by GitHub

This is how the controller's code looks now:

	"use strict";
	app.controller('TracksIndexPageController', [
	'$scope',
	'Categories',
	'accumulatedStatistics',
	'categoryListWidgetFactory',
	'Pagination',
	'activitiesWidgetFactory',
	'applicationEvents',
	function ($scope, Categories, accumulatedStatistics, categoryListWidgetFactory, Pagination, activitiesWidgetFactory, applicationEvents) {
	var updatePageInfo = function () {
	$scope.activities.filterBy($scope.categoryList.getSelectedCategory());
	$scope.updateActivitiesRelatedData();
	$scope.pagination = new Pagination($scope.activities.displayedOnes);
	},
	updateStatistics = function () {
	$scope.displayedStatistics = accumulatedStatistics.getGroupedStatisticsToDisplay(
	$scope.activities.displayedOnes
	);
	};
	$scope.$on(
	applicationEvents.DateRange_Changed,
	function () {
	$scope.activities.load($scope.dateRange, updatePageInfo);
	}
	);
	$scope.$on(
	applicationEvents.CategoryList_NewSelectedCategory,
	updatePageInfo
	);
	$scope.updateActivitiesRelatedData = function () {
	updateStatistics();
	$scope.categoryList.updateNonEmptyCategories(
	$scope.activities.distinctCategories()
	);
	};
	$scope.userHasStatistics = function () {
	return accumulatedStatistics.exists();
	};
	$scope.shouldShowActivities = function () {
	return !resolved() || $scope.activities.thereAreSomeToDisplay();
	function resolved() {
	return _.isUndefined($scope.activities.displayedOnes.$resolved) ||
	$scope.activities.displayedOnes.$resolved;
	}
	};
	$scope.initialize = function () {
	$scope.Categories = Categories;
	$scope.categories = Categories.descriptions;
	$scope.activities = activitiesWidgetFactory.create();
	$scope.displayedStatistics = [];
	$scope.categoryList = categoryListWidgetFactory.create(
	Categories.allCategories,
	$scope.activities.distinctCategories()
	);
	};
	$scope.initialize();
	}
	]);

view raw TracksIndexPageControllerWithoutDateRange.js hosted with ❤ by GitHub

Notice how the dateRangeWidgetFactory is not being injected into the controller any more and the widget creation and initilization code is gone.

We should have probably used a similar design from the very beginning (with a directive, a widget and communicating through events) but we didn't, because we were in a hurry, still learning how the page design was meant to be and still learning a way to avoid repeating past errors in Angular applications.

Compare the current version of the code with how it looked at the beginning (it was much longer, I'm only showing the date range related code):

	"use strict";
	app.controller('TracksIndexPageController', [
	'$scope',
	'$filter',
	'$http',
	'Track',
	'currentUser',
	'Categories',
	'AccumulatedStatistics',
	'TrackFilteringOptions',
	'CategoryListWidget',
	'CategoriesFilteringOptions',
	function ($scope, $filter, $http, Track, currentUser, Categories, AccumulatedStatistics, TrackFilteringOptions, CategoryListWidget, CategoriesFilteringOptions) {
	$scope.apikey = currentUser.apikey;
	// TODO: Move to constants?
	$scope.WEEKLY_PERIOD = "week";
	$scope.MONTHLY_PERIOD = "month";
	$scope.YEARLY_PERIOD = "year";
	$scope.currentRangeStartDate= new Date();
	$scope.period = $scope.MONTHLY_PERIOD;
	//...
	//some code not shown
	//...
	$scope.updateRange = function(direction) {
	var now = moment($scope.currentRangeStartDate);
	if ($scope.period == $scope.WEEKLY_PERIOD) {
	var newWeek = now.isoWeek() + direction;
	$scope.currentRangeStartDate = moment().isoWeek(newWeek).isoWeekday(1).toDate();
	$scope.displayFromDate = moment().isoWeek(newWeek).isoWeekday(1).toDate();
	$scope.displayToDate = moment().isoWeek(newWeek).isoWeekday(7).toDate();
	}
	if ($scope.period == $scope.MONTHLY_PERIOD) {
	var newMonth = now.month() + direction;
	$scope.currentRangeStartDate = moment().month(newMonth).date(1).toDate();
	$scope.displayFromDate = $scope.currentRangeStartDate;
	$scope.displayToDate = moment().month(newMonth).add('months', 1).date(0).toDate();
	}
	if ($scope.period == $scope.YEARLY_PERIOD) {
	var newYear = now.year() + direction;
	$scope.currentRangeStartDate = moment().year(newYear).dayOfYear(1).toDate();
	$scope.displayFromDate = $scope.currentRangeStartDate;
	$scope.displayToDate = moment().year(newYear).add('year', 1).dayOfYear(0).toDate();
	}
	$scope.filterData();
	};
	//...
	//some code not shown
	//...
	$scope.setRangeSizeTo = function(period) {
	$scope.period = period;
	$scope.updateRange( 0);
	return false;
	};
	$scope.today = function() {
	$scope.currentRangeStartDate = new Date();
	return false;
	};
	$scope.nextRange = function() {
	$scope.updateRange( 1);
	return false;
	};
	$scope.previousRange = function() {
	$scope.updateRange(-1);
	return false;
	};
	//...
	//some code not shown
	//...
	$scope.updateRange(0);
	}
	]);

view raw OriginalTracksIndexPageController.js hosted with ❤ by GitHub

The date range logic in this initial version had no tests at all and in fact it had some bugs...

Then we started working on it by extracting its code to a plain JavaScript object and testing it (as we described for a different case here), eliminating some remaining duplication in the controller making it work with events (described in here) and finally created an Angular directive for it.

I think we did something similar to what Liz Keogh writes in her post If you can’t write tests first, at least write tests second:

• We didn't know how to test first this code and we were under a situation of flux, high uncertainty and time pressure, so we wrote a messy code that mostly worked. Then from there, we put it under a test harness and started improving its design.