feat(telecom-dashboard): add ftth eligibilities list

ref: UXCT-549

Signed-off-by: Stephanie Moallic <stephanie.moallic@corp.ovh.com>

packages/manager/apps/telecom/src/app/app.module.js

@@ -107,6 +107,7 @@ import ovhManagerAtInternetConfiguration from '@ovh-ux/manager-at-internet-confi
 import uiRouter, { RejectType } from '@uirouter/angularjs';
 import TelecomAppCtrl from './app.controller';
 import pack from './telecom/pack';
+import accessList from './telecom/pack/access-list';
 import telephony from './telecom/telephony';
 import telephonyComponents from '../components/telecom/telephony';
 import popoverUtils from '../components/popover';
@@ -231,6 +232,7 @@ export default async (containerEl, shellClient) => {
         telephonyComponents,
         searchPage,
         ngOvhFeatureFlipping,
+        accessList,
         ...get(__NG_APP_INJECTIONS__, environment.getRegion(), []),
       ].filter(isString),
     )

packages/manager/apps/telecom/src/app/telecom/pack/access-list/index.js

@@ -0,0 +1,20 @@
+import angular from 'angular';
+
+import ngTranslateAsyncLoader from '@ovh-ux/ng-translate-async-loader';
+import uiRouter from '@uirouter/angularjs';
+import angularTranslate from 'angular-translate';
+
+import component from './xdsl-access-list.component';
+import routing from './xdsl-access-list.routing';
+import service from './xdsl-access-list.service';
+
+const moduleName = 'ovhManagerTelecomXdslAccessList';
+
+angular
+  .module(moduleName, [ngTranslateAsyncLoader, uiRouter, angularTranslate])
+  .component('xdslAccessList', component)
+  .service('XdslAccessListService', service)
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/apps/telecom/src/app/telecom/pack/access-list/translations/Messages_fr_FR.json

@@ -0,0 +1,17 @@
+{
+  "xdsl_access_list_title": "Mes services",
+  "xlds_access_list_copper_closure_info": "En savoir plus sur la fermeture du cuivre.",
+  "xdsl_access_list_service_name": "Nom du service",
+  "xdsl_access_list_service": "Service",
+  "xdsl_access_list_migration": "Migration fibre",
+  "xdsl_access_list_copper_closure_date": "Date de fermeture du cuivre",
+  "xdsl_access_list_actions": "Actions",
+  "xdsl_access_list_copper": "Ligne xDSL",
+  "xdsl_access_list_fiber": "Ligne FTTH",
+  "xdsl_access_list_not_eligible": "Non éligible",
+  "xdsl_access_list_no_building": "Pas de bâtiment",
+  "xdsl_access_list_eligible": "Eligible",
+  "xdsl_access_list_not_concerned": "Non concerné",
+  "xdsl_access_list_not_available": "Non disponible",
+  "xdsl_access_list_migrate": "Migrer vers la fibre"
+}

packages/manager/apps/telecom/src/app/telecom/pack/access-list/xdsl-access-list.component.js

@@ -0,0 +1,7 @@
+import controller from './xdsl-access-list.controller';
+import template from './xdsl-access-list.html';
+
+export default {
+  controller,
+  template,
+};

packages/manager/apps/telecom/src/app/telecom/pack/access-list/xdsl-access-list.constant.js

@@ -0,0 +1,19 @@
+export const ELIGIBILITY = {
+  not_eligible: 'not_eligible',
+  eligible: 'eligible',
+  not_concerned: 'not_concerned',
+};
+
+export const PAGE_SIZE = 10;
+
+export const ACCESS_TYPE = {
+  adsl: 'adsl',
+  sdsl: 'sdsl',
+  vdsl: 'vdsl',
+  ftth: 'ftth',
+};
+
+export const URL_CLOSURE_INFO =
+  'https://www.ovhcloud.com/fr/lp/fermeture-reseau-cuivre/';
+
+export default { ELIGIBILITY, PAGE_SIZE, ACCESS_TYPE, URL_CLOSURE_INFO };

packages/manager/apps/telecom/src/app/telecom/pack/access-list/xdsl-access-list.controller.js

@@ -0,0 +1,80 @@
+import {
+  ELIGIBILITY,
+  PAGE_SIZE,
+  ACCESS_TYPE,
+  URL_CLOSURE_INFO,
+} from './xdsl-access-list.constant';
+
+export default class XdslAccessListCtrl {
+  /* @ngInject */
+  constructor(coreURLBuilder, XdslAccessListService, TucToastError) {
+    this.coreURLBuilder = coreURLBuilder;
+    this.XdslAccessListService = XdslAccessListService;
+    this.TucToastError = TucToastError;
+  }
+
+  $onInit() {
+    this.ELIGIBILITY = ELIGIBILITY;
+    this.pageSize = PAGE_SIZE;
+    this.ACCESS_TYPE = ACCESS_TYPE;
+
+    this.links = {
+      copperClosureMore: URL_CLOSURE_INFO,
+    };
+
+    this.getServices();
+  }
+
+  getServices() {
+    this.services = [];
+    this.XdslAccessListService.getServices()
+      .then((data) => this.buildServicesList(data || []))
+      .catch(({ data }) => {
+        this.TucToastError(data.message);
+      });
+  }
+
+  buildServicesList(services) {
+    // Retrieve service info for each service
+    services.forEach((service) => {
+      if (service.accessType !== this.ACCESS_TYPE.ftth) {
+        this.getListFiberEligibilities(service.accessName).then((data) => {
+          this.createService(
+            service,
+            data[0].status,
+            data[0].copperGridClosureTrajectory,
+          );
+        });
+      } else {
+        this.createService(service, this.ELIGIBILITY.not_concerned);
+      }
+    });
+  }
+
+  getListFiberEligibilities(serviceName) {
+    return this.XdslAccessListService.getFiberEligibilityList(serviceName);
+  }
+
+  createService(service, migrationAvailable, copperGridClosureTrajectory) {
+    const { accessName, accessType, description, packName } = service;
+    const newService = {
+      accessName,
+      accessType,
+      description,
+      packName,
+      migrationAvailable: migrationAvailable || this.ELIGIBILITY.not_eligible,
+      accessLink: this.coreURLBuilder.buildURL(
+        'telecom',
+        `#/pack/${packName}/xdsl/${accessName}`,
+      ),
+      migrationLink: this.coreURLBuilder.buildURL(
+        'telecom',
+        `#/pack/${packName}/migration`,
+      ),
+    };
+    if (copperGridClosureTrajectory) {
+      newService.copperGridClosureTrajectory = copperGridClosureTrajectory;
+    }
+    this.services.push(newService);
+  }
+}

packages/manager/apps/telecom/src/app/telecom/pack/access-list/xdsl-access-list.html

@@ -0,0 +1,96 @@
+<div class="m-4">
+    <header class="widget-presentation-header">
+        <h2
+            class="widget-presentation-title"
+            data-translate="xdsl_access_list_title"
+        ></h2>
+    </header>
+
+    <tuc-toast-message></tuc-toast-message>
+
+    <oui-message data-type="info">
+        <a
+            data-ng-href="{{ $ctrl.links.copperClosureMore }}"
+            data-translate-attr="{ 'title': 'xlds_access_list_copper_closure_info' }"
+            target="_blank"
+            rel="noopener"
+        >
+            <span data-translate="xlds_access_list_copper_closure_info"></span>
+            <span
+                class="oui-icon oui-icon-external-link"
+                aria-hidden="true"
+            ></span>
+        </a>
+    </oui-message>
+
+    <oui-datagrid
+        data-rows="$ctrl.services"
+        data-page-size="{{$ctrl.pageSize}}"
+    >
+        <oui-datagrid-column
+            data-title="'xdsl_access_list_service_name' | translate"
+            data-property="accessName"
+            data-sortable="desc"
+        >
+            <div>
+                <a data-ng-href="{{ $row.accessLink }}">
+                    <span data-ng-bind="$row.accessName"></span>
+                </a>
+            </div>
+            <div data-ng-bind="$row.description"></div>
+        </oui-datagrid-column>
+        <oui-datagrid-column
+            data-title="'xdsl_access_list_service' | translate"
+            data-property="accessType"
+            data-sortable
+        >
+            <span
+                data-translate="{{$row.accessType ===  $ctrl.ACCESS_TYPE.ftth ? 'xdsl_access_list_fiber' : 'xdsl_access_list_copper'}}"
+            ></span>
+        </oui-datagrid-column>
+        <oui-datagrid-column
+            data-title="'xdsl_access_list_migration' | translate"
+            data-property="migrationAvailable"
+            data-sortable
+        >
+            <span
+                class="oui-badge oui-badge_success"
+                data-translate="{{'xdsl_access_list_' + $row.migrationAvailable}}"
+                data-ng-if="$row.migrationAvailable === $ctrl.ELIGIBILITY.eligible"
+            ></span>
+            <span
+                data-translate="{{'xdsl_access_list_' + $row.migrationAvailable}}"
+                data-ng-if="$row.migrationAvailable != $ctrl.ELIGIBILITY.eligible"
+            ></span>
+        </oui-datagrid-column>
+        <oui-datagrid-column
+            data-title="'xdsl_access_list_copper_closure_date' | translate"
+        >
+            <span
+                data-ng-if="$row.migrationAvailable === $ctrl.ELIGIBILITY.eligible && $row.copperGridClosureTrajectory.technicalClosureDate"
+                data-ng-bind="$row.copperGridClosureTrajectory.technicalClosureDate | date:'shortDate'"
+            >
+            </span>
+            <span
+                data-ng-if="$row.migrationAvailable === $ctrl.ELIGIBILITY.eligible && !$row.copperGridClosureTrajectory.technicalClosureDate"
+                data-translate="xdsl_access_list_not_available"
+            ></span>
+            <span
+                data-ng-if="$row.migrationAvailable != $ctrl.ELIGIBILITY.eligible"
+                data-translate="xdsl_access_list_not_concerned"
+            ></span>
+        </oui-datagrid-column>
+        <oui-datagrid-column
+            data-title="'xdsl_access_list_actions' | translate"
+        >
+            <a
+                class="oui-button oui-button_secondary"
+                data-ng-href="{{$row.migrationLink}}"
+                data-ng-if="$row.migrationAvailable === $ctrl.ELIGIBILITY.eligible && $row.accessType !== $ctrl.ACCESS_TYPE.sdsl"
+                data-translate-attr="{'title': 'xdsl_access_list_migrate'}"
+            >
+                <span data-translate="xdsl_access_list_migrate"></span>
+            </a>
+        </oui-datagrid-column>
+    </oui-datagrid>
+</div>

packages/manager/apps/telecom/src/app/telecom/pack/access-list/xdsl-access-list.routing.js

@@ -0,0 +1,11 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('telecom.xdsl-access-list', {
+    url: '/xdsl-access-list',
+    views: {
+      'telecomView@telecom': 'xdslAccessList',
+    },
+    resolve: {
+      hideBreadcrumb: () => true,
+    },
+  });
+};

packages/manager/apps/telecom/src/app/telecom/pack/access-list/xdsl-access-list.service.js

@@ -0,0 +1,22 @@
+export default class XdslAccessListService {
+  /* @ngInject */
+  constructor(iceberg) {
+    this.iceberg = iceberg;
+  }
+
+  getServices() {
+    return this.iceberg('/xdsl')
+      .query()
+      .expand('CachedObjectList-Pages')
+      .execute()
+      .$promise.then(({ data: result }) => result);
+  }
+
+  getFiberEligibilityList(serviceName) {
+    return this.iceberg(`/xdsl/${serviceName}/fiberEligibilities`)
+      .query()
+      .expand('CachedObjectList-Pages')
+      .execute()
+      .$promise.then(({ data: result }) => result);
+  }
+}

packages/manager/apps/telecom/src/app/telecom/pack/index.js

@@ -63,6 +63,17 @@ angular.module(moduleName, ['ui.router', 'oc.lazyLoad', meetings]).config(
         );
       },
     });
+
+    $stateProvider.state('telecom.xdsl-access-list.**', {
+      url: '/xdsl-access-list',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+        return import('./access-list/index').then((mod) =>
+          $ocLazyLoad.inject(mod.default || mod),
+        );
+      },
+    });
   },
 );
 

packages/manager/modules/telecom-dashboard/src/ftth-eligibility/telecom-dashboard-ftth-eligibility.constant.js

@@ -0,0 +1,17 @@
+export const ELIGIBILITY = {
+  not_eligible: 'not_eligible',
+  eligible: 'eligible',
+  not_concerned: 'not_concerned',
+};
+
+export const ACCESS_TYPE = {
+  adsl: 'adsl',
+  sdsl: 'sdsl',
+  vdsl: 'vdsl',
+  ftth: 'ftth',
+};
+
+export const CLOSURE_DETAIL_URL =
+  'https://www.ovhcloud.com/fr/lp/fermeture-reseau-cuivre/';
+
+export default { ELIGIBILITY, ACCESS_TYPE, CLOSURE_DETAIL_URL };