phonenumber formatting and paging for sitemap

countrieslist.js

angular.module('elephone.data.countriesList', []).value('countriesList', [
  {lang: "it-IT", code: 'IT', name: 'ITALY', phoneCode: '+39', host: "elephone.it"},
  {lang: "fr-FR", code: 'FR', name: 'FRANCE', phoneCode: '+33', host: "elephone.fr"},
  {
  	lang: "nl-NL", 
  	code: 'NL', 
  	name: 'NETHERLANDS', 
  	phoneCode: '+31', 
  	host: "elephone.nl", 
  	phoneNumberFormats: [
  		{
  			format: "123-456-789",
  			prefix: 1
  		},
  		{
  			format: "12-3-456-789",
  			prefix: 2
  		}
  	]
  }
]);

main.html

<div class="b-sitemap">
	<ul class="area-codes">

		<li ng-repeat="code in dialingCodes">
			<a ui-sref="main.sitemap-prefix({ area: code.code })">0{{ code.code }}</a> {{ code.name }}
		</li>
	</ul>
</div>

number.controller.js

angular.module('elephone.app.sitemap').controller('NumberController',
  function ($scope, $translate, countriesList, $filter, sitemapApi, areaCode, prefix, $state) {
    $scope.main = {
      from: 0,
      size: 1000,
      total: 0,
      page: 0
    };
    
    var loadPage = function() {
      sitemapApi.queryArea(areaCode.replace('-','') + prefix, {
        size: $scope.main.size, 
        from: $scope.main.from, 
        types: ["number"],
        filter: {
          areaFilter: { 
            countryCode: 31
          }
        }
      }).then(function (res) {
        $scope.numbers = res.data;
        $scope.main.total = res.total;
      });
    };

    $scope.paging = function(page) {
      $scope.main.from = (page-1) * $scope.main.size;
      loadPage();
    };
    loadPage();
    
    $scope.card = function(number) {
      if(number._source._embedded.organization.length) { 
        $state.go('main.organization', { id: number._source._embedded.organization[0].id });
      }

      if(number._source._embedded.card.length) { 
        $state.go('main.personal', { id: number._source._embedded.card[0].id });
      }
    }
  }
);

number.html

<div class="b-sitemap">
	<ul class="area-codes">

		<li ng-repeat="code in dialingCodes">
			<a ui-sref="main.sitemap-prefix({ area: code.code })">0{{ code.code }}</a> {{ code.name }}
		</li>
	</ul>
</div>

phonenumber.service.js

angular.module('elephone.api.phoneNumber', []).factory('phoneNumberService',
  function ($translate, countriesList, $filter) {
    var phoneNumberFormats = $filter('filter')(countriesList, {lang:$translate.use()})[0].phoneNumberFormats;

    return {
      format: function (number, areaCode) {
        var format = this.getFormat(areaCode);
        //remove country code
        number = number.substring(2);
        var phoneNumber = [];

        //format number;
        var formatParts = format.format;
        angular.forEach(formatParts, function(value, key){
          if(number.length) {
            phoneNumber.push(number.substring(0, value.length));
            number = number.substring(value.length);
          }
        });
        return phoneNumber.join('-');
      },
      getFormats: function() {
        return phoneNumberFormats;
      },
      getFormat: function(areaCode) {
        areaCode = areaCode.split('-');
        areaCode = areaCode[0];
        var format;

        for(var i = 0; i < phoneNumberFormats.length; i++) {
          var value = angular.copy(phoneNumberFormats[i]);
          var prefix = value.format.split('-'); 
          if(prefix[0].length == areaCode.length) {
            format = value;
            format.format = format.format.split("-");
            break;
          }
        }
        return format;
      }
    };
  }
);

prefix.controller.js

angular.module('elephone.app.sitemap').controller('PrefixController',
  function ($scope, prefixes, areaCode, phoneNumberService) {
  	$scope.areaCode = areaCode;
    $scope.prefixes = prefixes;
    $scope.number = false;

    var splitAreCode = areaCode.split('-');
    $scope.format = phoneNumberService.getFormat(areaCode);

    if($scope.format.prefix == splitAreCode.length) {
   		$scope.number = true;
  	}

  	$scope.getNumber = function(number) {
  		var phone = phoneNumberService.format(number, areaCode);
  		phone = phone.split('-');
  		return phone[$scope.format.prefix];
  	};

    $scope.formatNumber = function(number) {
    	return phoneNumberService.format(number, areaCode);
    };
  }
);

prefix.html

<div class="b-sitemap">
	<ul class="prefix">
		<li ng-repeat="prefix in prefixes">
			<a ng-show="number" ui-sref="main.sitemap-number({ area: areaCode, prefix: getNumber(prefix.key) })">{{ formatNumber(prefix.key) }}</a>
			<a ng-hide="number" ui-sref="main.sitemap-prefix({ area: formatNumber(prefix.key)})">{{ formatNumber(prefix.key) }}</a>
		</li>
	</ul>
</div>

sitemap.controller.js

angular.module('elephone.app.sitemap').controller('SitemapController',
  function ($scope, areaCodes) {
    $scope.dialingCodes = areaCodes;
  }
);

sitemap.module.js

angular.module('elephone.app.sitemap', [
  'elephone.api.sitemap',
	'elephone.data.dialingCodes',
  'elephone.ui.paging'
], function ($stateProvider) {
  'use strict';

  $stateProvider
    .state('main.sitemap', {
      url: '/sitemap',
      templateUrl: 'app/sitemap/templates/main.html',
      controller: 'SitemapController',
      resolve: {
        areaCodes: function(dialingCodes) {
          return dialingCodes;
        }
      }
    })
    .state('main.sitemap-prefix', {
      url: '/sitemap/:area',
      templateUrl: 'app/sitemap/templates/prefix.html',
      controller: 'PrefixController',
      resolve: /*@ngInject*/ {
        countryCode: function($translate, countriesList, $filter) {
          var code = $filter('filter')(countriesList, {lang:$translate.use()})[0].phoneCode;
          return code.replace('+', '');
        },
        areaCode: function($stateParams) {
          return $stateParams.area;
        },
        prefixes: function(countryCode, areaCode, sitemapApi, phoneNumberService, $state) {
          var format = phoneNumberService.getFormat(areaCode);
          var len = 2;//country code length

          areaCode = areaCode.split('-');

          for(var i = 0; i <= areaCode.length; i++) {
            len += format.format[i].length;
          }
        
          return sitemapApi.queryPrefix(areaCode.join(''), countryCode, 0, len, {size:0, from:0}).then(function(data) {
            return data;
          });
        }
      }
    })
    .state('main.sitemap-number', {
      url: '/sitemap/:area/:prefix',
      templateUrl: 'app/sitemap/templates/numbers.html',
      controller: 'NumberController',
      resolve: /*@ngInject*/ {
        countryCode: function($translate, countriesList, $filter) {
          var code = $filter('filter')(countriesList, {lang:$translate.use()})[0].phoneCode;
          return code.replace('+', '');
        },
        areaCode: function($stateParams) {
          return $stateParams.area;
        },
        prefix: function($stateParams) {
          return $stateParams.prefix;
        }
      }
    });