feat: save datagrid preferences

Signed-off-by: Cyril Biencourt <[email protected]>

packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js

@@ -10,6 +10,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/cdn/dedicated',
       dataModel: () => 'cdnanycast.Anycast',
+      id: () => 'cdns',
       defaultFilterColumn: () => 'service',
       header: /* @ngInject */ ($translate) => $translate.instant('cdn_title'),
       customizableColumns: () => true,

packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/domains/domains.routes.js

@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
         `/cdn/dedicated/${serviceName}/domains`,
       schema: /* @ngInject */ ($http) =>
         $http.get('/cdn/dedicated.json').then(({ data }) => data),
+      id: () => 'domains',
       dataModel: () => 'cdnanycast.Domain',
       defaultFilterColumn: () => 'domain',
       customizableColumns: () => true,

packages/manager/apps/dedicated/client/app/dedicated/housing/housing.routing.js

@@ -9,6 +9,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/dedicated/housing',
       dataModel: () => 'dedicated.housing.Housing',
+      id: () => 'housing',
       defaultFilterColumn: () => 'name',
       header: /* @ngInject */ ($translate) =>
         $translate.instant('dedicated_housing'),

packages/manager/apps/dedicated/client/app/dedicated/nas/nas.routing.js

@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/dedicated/nas',
       dataModel: () => 'dedicated.nas.Nas',
+      id: () => 'nashas',
       defaultFilterColumn: () => 'serviceName',
       header: () => 'NAS',
       customizableColumns: () => true,

packages/manager/apps/dedicated/client/app/dedicated/server/servers.controller.js

@@ -2,17 +2,22 @@ import get from 'lodash/get';
 import reduce from 'lodash/reduce';
 import set from 'lodash/set';
 import snakeCase from 'lodash/snakeCase';
+import {
+  retrieveColumnsConfig,
+  saveColumnsConfig,
+} from '@ovh-ux/datagrid-preferences';
 
+/* eslint class-methods-use-this: ["error", { "exceptMethods": ["onColumnsParametersChange"] }] */
 export default class ServersCtrl {
   /* @ngInject */
-  constructor($q, $translate, ouiDatagridService, ovhUserPref) {
+  constructor($q, $translate, ouiDatagridService) {
     this.$q = $q;
     this.$translate = $translate;
     this.ouiDatagridService = ouiDatagridService;
-    this.ovhUserPref = ovhUserPref;
   }
 
   $onInit() {
+    this.datagridId = 'dg-servers';
     this.criteria = JSON.parse(this.filter).map((criteria) => ({
       property: get(criteria, 'field') || 'name',
       operator: get(criteria, 'comparator'),
@@ -40,22 +45,15 @@ export default class ServersCtrl {
   }
 
   getColumnsPreferences() {
-    this.ovhUserPref
-      .getValue('DEDICATED_SERVER_DG_CONFIG')
-      .then((columns) => {
+    this.$q.when(retrieveColumnsConfig(this.datagridId)).then((columns) => {
+      if (columns) {
         this.columnsParameters = columns;
-      })
-      .catch(() => {
-        // do nothing (defautl columns will be displayed)
-      });
+      }
+    });
   }
 
   onColumnsParametersChange(id, columns) {
-    // save cols
-    // todo: add debounce
-    this.ovhUserPref.create('DEDICATED_SERVER_DG_CONFIG', columns).catch(() => {
-      // fails to save: do nothing
-    });
+    saveColumnsConfig(id, columns);
   }
 
   static toUpperSnakeCase(str) {

packages/manager/apps/dedicated/client/app/dedicated/server/servers.html

@@ -4,7 +4,7 @@
     ></oui-header>
 
     <oui-datagrid
-        id="dg-servers"
+        id="{{ $ctrl.datagridId }}"
         data-page-size="{{ $ctrl.paginationSize }}"
         data-rows-loader="$ctrl.loadServers()"
         data-criteria="$ctrl.criteria"
@@ -36,7 +36,6 @@
             data-filterable
             data-sortable
             data-type="string"
-            hidden
         >
         </oui-datagrid-column>
         <oui-datagrid-column
@@ -46,7 +45,6 @@
             data-filterable
             data-sortable
             data-type="string"
-            hidden
         >
         </oui-datagrid-column>
         <oui-datagrid-column
@@ -57,7 +55,6 @@
             data-sortable
             data-type="options"
             data-type-options="$ctrl.datacenterEnumFilter"
-            hidden
         >
             <span
                 data-translate="{{:: 'server_datacenter_' + $ctrl.constructor.toUpperSnakeCase($value).split('_')[0] }}"

packages/manager/apps/dedicated/client/app/dedicatedCloud/dedicatedClouds.routing.js

@@ -20,6 +20,7 @@ export default /* @ngInject */ ($stateProvider) => {
       staticResources: () => true,
       apiPath: () => '/dedicatedCloud',
       dataModel: () => 'dedicatedCloud.dedicatedCloud',
+      id: () => 'dedicatedClouds',
       defaultFilterColumn: () => 'serviceName',
       resources: /* @ngInject */ ($http, apiPath) =>
         $http

packages/manager/apps/dedicated/client/app/managedBaremetal/managed-baremetal.routing.js

@@ -12,6 +12,7 @@ export default /* @ngInject */ ($stateProvider) => {
       apiPath: () => '/dedicatedCloud',
       dataModel: () => 'dedicatedCloud.dedicatedCloud',
       defaultFilterColumn: () => 'serviceName',
+      id: () => 'managedBaremetals',
       resources: /* @ngInject */ ($http, apiPath) =>
         $http
           .get(apiPath, {

packages/manager/apps/dedicated/package.json

@@ -116,6 +116,7 @@
     "clipboard": "^2.0.4",
     "components-jqueryui": "^1.12.1",
     "core-js": "^3.6.5",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "es6-shim": "~0.35.3",
     "filesize": "^3.6.1",
     "flag-icon-css": "^3.4.2",

packages/manager/apps/telecom/package.json

@@ -71,6 +71,7 @@
     "@ovh-ux/request-tagger": "^0.1.1",
     "@ovh-ux/shell": "^2.1.0",
     "@ovh-ux/ui-kit": "^6.5.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "@uirouter/angularjs": "^1.0.23",
     "CSV-JS": "^1.0.0",
     "angular": "^1.7.5",

packages/manager/apps/telecom/src/app/telecom/pack/packs.routing.js

@@ -8,6 +8,7 @@ export default /* @ngInject */ ($stateProvider) => {
     resolve: {
       apiPath: () => '/pack/xdsl',
       ...ListLayoutHelper.stateResolves,
+      id: () => 'telecomXdslPacks',
       defaultFilterColumn: () => 'packName',
       dataModel: () => 'pack.xdsl.PackAdsl',
       loadResource: /* @ngInject */ (OvhApiPackXdsl) => (resource) =>

packages/manager/apps/telecom/src/app/telecom/telephony/billingAccount/services/services.routing.js

@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'telephonyBillingAccounts',
       apiPath: /* @ngInject */ (billingAccountId) =>
         `/telephony/${billingAccountId}/service`,
       schema: /* @ngInject */ (OvhApiTelephony) =>

packages/manager/apps/telecom/src/app/telecom/telephony/repayments/repayments.routing.js

@@ -42,6 +42,7 @@ export default /* @ngInject */ ($stateProvider) => {
       },
       resolve: {
         ...ListLayoutHelper.stateResolves,
+        id: () => 'telephonyRepayments',
         apiPath: () => '/me/sva/cdr',
         dataModel: () => 'me.sva.Cdr',
         defaultFilterColumn: () => 'startDate',

packages/manager/apps/telecom/src/app/telecom/telephony/telephony.routing.js

@@ -12,6 +12,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'telephony',
       apiPath: () => '/telephony',
       defaultFilterColumn: () => 'billingAccount',
       dataModel: () => 'telephony.BillingAccount',

packages/manager/apps/web/client/app/dns-zone/zone.routing.js

@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'dnsZones',
       schema: /* @ngInject */ ($http) =>
         $http.get('/domain.json').then(({ data }) => data),
       apiPath: () => '/domain/zone',

packages/manager/apps/web/client/app/domain/domains.routing.js

@@ -23,6 +23,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'domains',
       apiPath: () => '/domain',
       schema: /* @ngInject */ ($http) =>
         $http.get('/domain.json').then(({ data: schema }) => schema),

packages/manager/apps/web/client/app/domain/list/list-domain-layout.controller.js

@@ -1,6 +1,11 @@
 import punycode from 'punycode';
 import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
 
+import {
+  retrieveColumnsConfig,
+  saveColumnsConfig,
+} from '@ovh-ux/datagrid-preferences';
+
 import {
   DOMAIN_STATUS,
   DOMAIN_SUSPENSION_STATE,
@@ -29,10 +34,11 @@ export default class ListDomainLayoutCtrl extends ListLayoutHelper.ListLayoutCtr
   }
 
   $onInit() {
-    super.$onInit();
+    this.id = 'datagridDomain';
     this.datagridId = 'datagridDomain';
     this.defaultFilterColumn = 'domain';
     this.punycode = punycode;
+    super.$onInit();
 
     this.columnsConfig = [
       { name: 'domain', sortable: this.getSorting('domain') },
@@ -92,6 +98,15 @@ export default class ListDomainLayoutCtrl extends ListLayoutHelper.ListLayoutCtr
         {},
       ),
     };
+    this.getColumnsPreferences();
+  }
+
+  getColumnsPreferences() {
+    this.$q.when(retrieveColumnsConfig(this.datagridId)).then((columns) => {
+      if (columns) {
+        this.columnsParameters = columns;
+      }
+    });
   }
 
   linkContactBuilder({ domain, whoisOwner }) {

packages/manager/apps/web/client/app/domain/list/template.html

@@ -16,6 +16,7 @@
     data-on-criteria-change="$ctrl.onCriteriaChange($criteria)"
     data-on-sort-change="$ctrl.onSortChange($sort)"
     data-columns="$ctrl.columnsConfig"
+    data-columns-parameters="$ctrl.columnsParameters"
     data-on-columns-parameters-change="$ctrl.onColumnChange(id, columns)"
     data-page="{{ $ctrl.paginationNumber }}"
     customizable

packages/manager/apps/web/client/app/hosting/hosting.routing.js

@@ -17,6 +17,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'hostings',
       apiPath: () => '/hosting/web',
       dataModel: () => 'hosting.web.Service',
       defaultFilterColumn: () => 'serviceName',

packages/manager/apps/web/client/app/private-database/private-database.routing.js

@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'privateDatabases',
       apiPath: () => '/hosting/privateDatabase',
       dataModel: () => 'hosting.privateDatabase.Service',
       defaultFilterColumn: () => 'serviceName',

packages/manager/apps/web/package.json

@@ -64,6 +64,7 @@
     "@ovh-ux/ng-translate-async-loader": "^2.1.6",
     "@ovh-ux/ng-ui-router-breadcrumb": "^1.1.8",
     "@ovh-ux/ng-ui-router-layout": "^4.1.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "@ovh-ux/request-tagger": "^0.1.1",
     "@ovh-ux/shell": "^2.1.0",
     "@ovh-ux/ui-kit": "^6.5.3",

packages/manager/modules/cda/src/cda.routing.js

@@ -13,6 +13,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ...ListLayoutHelper.stateResolves,
       apiPath: () => '/dedicated/ceph',
       dataModel: () => 'dedicated.ceph.clusterGet.response',
+      id: () => 'cdas',
       defaultFilterColumn: () => 'serviceName',
       columnConfig: /* @ngInject */ () => ({
         data: [

packages/manager/modules/cloud-connect/src/cloud-connect.routing.js

@@ -20,6 +20,7 @@ export default /* @ngInject */ ($stateProvider) => {
       params: ListLayoutHelper.stateParams,
       resolve: {
         ...ListLayoutHelper.stateResolves,
+        id: () => 'cloudConnects',
         apiPath: () => '/ovhCloudConnect',
         dataModel: () => 'ovhcloudconnect.Service',
         defaultFilterColumn: () => 'uuid',

packages/manager/modules/email-domain/src/email.routing.js

@@ -16,6 +16,7 @@ export default /* @ngInject */ ($stateProvider) => {
         ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'emailDomains',
       apiPath: () => '/email/domain',
       dataModel: () => 'email.domain.DomainService',
       defaultFilterColumn: () => 'domain',
@@ -52,6 +53,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'emailDelefates',
       schema: /* @ngInject */ ($http) =>
         $http.get('/email/domain.json').then(({ data }) => data),
       apiPath: () => '/email/domain/delegatedAccount',

packages/manager/modules/iplb/src/iplb.routing.js

@@ -11,6 +11,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'iplbs',
       apiPath: () => '/ipLoadbalancing',
       dataModel: () => 'ipLoadbalancing.Ip',
       defaultFilterColumn: () => 'serviceName',

packages/manager/modules/metrics/src/metrics.routing.js

@@ -11,6 +11,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'metrics',
       apiPath: () => '/metrics',
       dataModel: () => 'metrics.api.Service',
       defaultFilterColumn: () => 'name',

packages/manager/modules/nasha/src/directory/directory.routing.js

@@ -9,6 +9,7 @@ export default /* @ngInject */ ($stateProvider) => {
     params: ListLayoutHelper.stateParams,
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'nashas',
       apiPath: /* @ngInject */ (baseApiUrl) => baseApiUrl,
       dataModel: () => 'dedicated.nasha.Storage',
       defaultFilterColumn: () => 'serviceName',

packages/manager/modules/netapp/src/routing.js

@@ -39,6 +39,7 @@ export default /* @ngInject */ ($stateProvider) => {
       ),
     resolve: {
       ...ListLayoutHelper.stateResolves,
+      id: () => 'netapps',
       apiPath: () => '/storage/netapp',
       dataModel: () => 'storage.NetAppService',
       defaultFilterColumn: () => 'id',

packages/manager/modules/ng-layout-helpers/package.json

@@ -31,6 +31,7 @@
     "@ovh-ux/ng-ovh-api-wrappers": "^5.0.0",
     "@ovh-ux/ng-translate-async-loader": "^2.1.4",
     "@ovh-ux/ui-kit": "^6.5.3",
+    "@ovh-ux/datagrid-preferences": "^0.0.0 || ^1.0.0",
     "angular": "^1.7.9",
     "angular-translate": "^2.18.1",
     "bootstrap4": "^4.0.0"

packages/manager/modules/ng-layout-helpers/src/list/list-layout.controller.js

@@ -1,6 +1,11 @@
 import get from 'lodash/get';
 import map from 'lodash/map';
 
+import {
+  retrieveColumnsConfig,
+  saveColumnsConfig,
+} from '@ovh-ux/datagrid-preferences';
+
 import { NUMBER_COLUMN_OPTIONS, STRING_COLUMN_OPTIONS } from './constants';
 
 export default class ListLayoutCtrl {
@@ -28,6 +33,8 @@ export default class ListLayoutCtrl {
     this.numberColumnOptions = {
       operators: NUMBER_COLUMN_OPTIONS,
     };
+
+    this.getColumnsPreferences();
   }
 
   loadPage() {
@@ -43,6 +50,14 @@ export default class ListLayoutCtrl {
     return this.sort === property ? this.sortOrder.toLowerCase() : '';
   }
 
+  getColumnsPreferences() {
+    this.$q.when(retrieveColumnsConfig(this.datagridId)).then((columns) => {
+      if (columns) {
+        this.columnsParameters = columns;
+      }
+    });
+  }
+
   getDisplayedColumns(columns) {
     this.displayedColumns = columns
       ? JSON.stringify(
@@ -89,6 +104,7 @@ export default class ListLayoutCtrl {
 
   onColumnChange(id, columns) {
     this.getDisplayedColumns(columns);
+    saveColumnsConfig(id, columns);
     return this.onListParamsChange();
   }
 }