feat(project): user are now able to edit project and define default (#346)

Author: jleveugle

packages/manager/modules/pci/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@ovh-ux/ng-ovh-cloud-universe-components": "^1.1.0-alpha.0",
+    "@ovh-ux/ng-ovh-user-pref": "^1.0.0",
     "d3": "~3.5.13",
     "flag-icon-css": "~0.8.5",
     "jsplumb": "^2.9.2",
@@ -31,7 +32,6 @@
     "@ovh-ux/component-rollup-config": "5.0.1"
   },
   "peerDependencies": {
-    "@ovh-ux/ng-ovh-uirouter-layout": "^0.0.0",
     "@ovh-ux/manager-cloud-styles": "^0.3.0-alpha.0",
     "@ovh-ux/manager-core": "^5.0.0",
     "@ovh-ux/manager-kubernetes": "^0.1.0-alpha.0",
@@ -46,6 +46,7 @@
     "@ovh-ux/ng-ovh-responsive-popover": "^5.0.0-beta.0",
     "@ovh-ux/ng-ovh-swimming-poll": "^4.0.0",
     "@ovh-ux/ng-ovh-toaster": "^1.0.2",
+    "@ovh-ux/ng-ovh-uirouter-layout": "^0.0.0",
     "@ovh-ux/ng-ovh-user-pref": "^1.0.0",
     "@ovh-ux/ng-translate-async-loader": "^2.0.0",
     "@uirouter/angularjs": "^1.0.15",

packages/manager/modules/pci/src/projects/project/edit/edit.constant.js

@@ -0,0 +1,7 @@
+export const DEFAULT_PROJECT_KEY = 'PUBLIC_CLOUD_DEFAULT_PROJECT';
+export const MESSAGES_CONTAINER_NAME = 'pci.projects.project.edit';
+
+export default {
+  DEFAULT_PROJECT_KEY,
+  MESSAGES_CONTAINER_NAME,
+};

packages/manager/modules/pci/src/projects/project/edit/edit.controller.js

@@ -0,0 +1,100 @@
+import pick from 'lodash/pick';
+
+import { DEFAULT_PROJECT_KEY, MESSAGES_CONTAINER_NAME } from './edit.constant';
+
+export default class ProjectEditController {
+  /* @ngInject */
+  constructor($stateParams, $translate, CucCloudMessage, ovhUserPref, OvhApiCloudProject) {
+    this.$stateParams = $stateParams;
+    this.$translate = $translate;
+    this.CucCloudMessage = CucCloudMessage;
+    this.ovhUserPref = ovhUserPref;
+    this.OvhApiCloudProject = OvhApiCloudProject;
+    this.serviceName = this.$stateParams.projectId;
+
+    this.loading = {
+      init: false,
+      submit: false,
+    };
+
+    this.$ngInit();
+  }
+
+  $ngInit() {
+    this.loading.init = true;
+    this.messageHandler = this.CucCloudMessage.subscribe(MESSAGES_CONTAINER_NAME, {
+      onMessage: () => this.refreshMessage(),
+    });
+
+    return this.OvhApiCloudProject
+      .v6()
+      .get({
+        serviceName: this.serviceName,
+      })
+      .$promise
+      .then((project) => {
+        this.project = project;
+      })
+      .then(() => this.ovhUserPref.getValue(DEFAULT_PROJECT_KEY))
+      .then((defaultProject) => {
+        this.defaultProject = defaultProject;
+        this.isDefault = this.serviceName === defaultProject.projectId;
+      })
+      .catch((err) => {
+        if (err.status === 404) {
+          return null;
+        }
+        throw err;
+      })
+      .finally(() => {
+        this.loading.init = false;
+      });
+  }
+
+  refreshMessage() {
+    this.messages = this.messageHandler.getMessages();
+  }
+
+  submit() {
+    this.loading.submit = true;
+
+    return this.OvhApiCloudProject
+      .v6()
+      .put(
+        {
+          serviceName: this.serviceName,
+        },
+        pick(this.project, 'description'),
+      )
+      .$promise
+      .then(() => {
+        // isDefault is true, we want to define this project as default project
+        if (this.isDefault) {
+          return this.ovhUserPref.create(
+            DEFAULT_PROJECT_KEY,
+            { projectId: this.serviceName },
+          );
+        }
+        // isDefault is false, if the default project is this one, we should remove the key
+        if (this.defaultProject.projectId === this.serviceName) {
+          return this.ovhUserPref.remove(DEFAULT_PROJECT_KEY);
+        }
+        return null;
+      })
+      .then(() => {
+        this.CucCloudMessage.success(
+          this.$translate.instant('pci_projects_project_edit_update_success'),
+          MESSAGES_CONTAINER_NAME,
+        );
+      })
+      .catch(({ data }) => {
+        this.CucCloudMessage.error(
+          this.$translate.instant('pci_projects_project_edit_update_error', { error: data.message }),
+          MESSAGES_CONTAINER_NAME,
+        );
+      })
+      .finally(() => {
+        this.loading.submit = false;
+      });
+  }
+}

packages/manager/modules/pci/src/projects/project/edit/edit.html

@@ -0,0 +1,27 @@
+<div class="text-center" data-ng-if="$ctrl.loading.init">
+  <oui-spinner size="l"></oui-spinner>
+ </div>
+<div data-ng-if="!$ctrl.loading.init">
+    <form novalidate name="inputForm" data-ng-submit="$ctrl.submit()">
+        <cui-message-container data-messages="$ctrl.messages"></cui-message-container>
+        <oui-field label="{{ ::'pci_projects_project_edit_project_name' | translate }}" size="xl">
+            <input class="oui-input" type="text" name="description" ng-model="$ctrl.project.description" required>
+        </oui-field>
+        <oui-field>
+            <oui-checkbox
+                name="isDefault"
+                text="{{ ::'pci_projects_project_edit_default_project' | translate }}"
+                description="{{ ::'pci_projects_project_edit_default_project_description' | translate }}"
+                model="$ctrl.isDefault">
+            </oui-checkbox>
+        </oui-field>
+        <oui-button variant="primary" type="submit" disabled="$ctrl.loading.submit">
+            {{ ::'pci_projects_project_edit_update' | translate }}
+        </oui-button>
+    </form>
+    <div class="mt-4 pt-4 border-top">
+        <h2 data-translate="pci_projects_project_edit_remove"></h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet consequat turpis, at accumsan metus. Curabitur pellentesque condimentum mauris id iaculis. Sed id ex tristique, ornare tortor quis, bibendum lacus. Sed ornare elit eu malesuada auctor. Integer tempor nunc non tincidunt suscipit. Aenean faucibus, felis nec aliquet condimentum, est risus dapibus nibh, vel cursus massa mi sed nibh. Vivamus pulvinar arcu arcu, at consequat dui fermentum sed.</p>
+        <oui-button variant="secondary" text="{{ ::'pci_projects_project_edit_remove' | translate }}" disabled="$ctrl.loading.submit"></oui-button>
+    </div>
+</div>

packages/manager/modules/pci/src/projects/project/edit/edit.routing.js

@@ -0,0 +1,20 @@
+import controller from './edit.controller';
+import template from './edit.html';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider
+    .state('pci.projects.project.edit', {
+      url: '/edit',
+      views: {
+        contentTab: {
+          controller,
+          controllerAs: '$ctrl',
+          template,
+        },
+      },
+      translations: {
+        format: 'json',
+        value: ['.'],
+      },
+    });
+};

packages/manager/modules/pci/src/projects/project/edit/index.js

@@ -0,0 +1,24 @@
+import angular from 'angular';
+
+import '@ovh-ux/manager-core';
+import '@ovh-ux/ng-ovh-api-wrappers'; // should be a peer dependency of ovh-api-services
+import '@ovh-ux/ng-ovh-user-pref';
+import 'angular-translate';
+import 'ovh-api-services';
+import 'ovh-ui-angular';
+
+import routing from './edit.routing';
+
+const moduleName = 'ovhManagerPciProjectEdit';
+
+angular
+  .module(moduleName, [
+    'ngOvhUserPref',
+    'oui',
+    'ovhManagerCore',
+    'ovh-api-services',
+    'pascalprecht.translate',
+  ])
+  .config(routing);
+
+export default moduleName;

packages/manager/modules/pci/src/projects/project/edit/translations/Messages_fr_FR.json

@@ -0,0 +1,9 @@
+{
+  "pci_projects_project_edit_project_name": "Nom de projet",
+  "pci_projects_project_edit_remove": "Supprimer le projet",
+  "pci_projects_project_edit_default_project": "Projet par défaut",
+  "pci_projects_project_edit_default_project_description": "Projet par défaut à chaque connexion à l'espace client Public Cloud",
+  "pci_projects_project_edit_update": "Mettre à jour",
+  "pci_projects_project_edit_update_success": "Le projet a été mis à jour.",
+  "pci_projects_project_edit_update_error": "Une erreur est survenue lors de la mise à jour du projet ({{ error }})."
+}

packages/manager/modules/pci/src/projects/project/index.js

@@ -7,6 +7,7 @@ import 'ovh-api-services';
 import 'ovh-ui-angular';
 
 
+import edit from './edit';
 import instances from './instances';
 import kubernetes from './kubernetes';
 import legacy from './legacy';
@@ -17,6 +18,7 @@ const moduleName = 'ovhManagerPciProject';
 
 angular
   .module(moduleName, [
+    edit,
     instances,
     kubernetes,
     legacy,

packages/manager/modules/pci/src/projects/project/project.controller.js

@@ -2,7 +2,8 @@ import { ACTIONS, LINKS } from './project.constants';
 
 export default class ProjectController {
   /* @ngInject */
-  constructor($stateParams, OvhApiCloudProject) {
+  constructor($state, $stateParams, OvhApiCloudProject) {
+    this.$state = $state;
     this.$stateParams = $stateParams;
     this.OvhApiCloudProject = OvhApiCloudProject;
     this.loading = false;

packages/manager/modules/pci/src/projects/project/project.html

@@ -2,24 +2,34 @@
     <div data-ng-if="$ctrl.project">
         <oui-page-header heading="{{ ::$ctrl.project.description }}">
             <oui-header-tabs class="mt-3">
-                <oui-header-tabs-item text="{{ ::'pci_projects_project_home' | translate }}" ui-sref="pci.projects.project({ serviceName: $ctrl.project.project_id })" active></oui-header-tabs-item>
-                <oui-header-tabs-item text="{{ ::'pci_projects_project_parameters' | translate }}" ui-sref="pci.projects.project({ serviceName: $ctrl.project.project_id })" disabled></oui-header-tabs-item>
+                <oui-header-tabs-item
+                    text="{{ ::'pci_projects_project_home' | translate }}"
+                    ui-sref="pci.projects.project({ serviceName: $ctrl.project.project_id })"
+                    active="$ctrl.$state.is('pci.projects.project')">
+                </oui-header-tabs-item>
+                <oui-header-tabs-item
+                    text="{{ ::'pci_projects_project_parameters' | translate }}"
+                    ui-sref="pci.projects.project.edit({ serviceName: $ctrl.project.project_id })"
+                    active="$ctrl.$state.is('pci.projects.project.edit', { serviceName: $ctrl.project.project_id })">
+                </oui-header-tabs-item>
             </oui-header-tabs>
         </oui-page-header>
-        <div class="p-5" data-ui-view>
+        <div class="p-5" data-ui-view="contentTab">
             <div class="container-fluid px-0">
                 <div class="row">
-                    <div class="col-sm-6 col-lg-4 col-xl mb-4 mb-xl-0" data-ng-repeat="action in $ctrl.actions track by $index">
+                    <div class="col-sm-6 col-lg-4 col-xl mb-4" data-ng-repeat="action in $ctrl.actions track by $index">
                         <a class="text-center w-100 d-block oui-tile py-4" href="#">
                             <span class="oui-icon oui-icon-add fa-2x" aria-hidden="true"></span>
                             <div class="mt-3 w-100 text-truncate" data-ng-bind=":: action.translation | translate"></div>
                         </a>
                     </div>
                 </div>
                 <h2 data-translate="pci_projects_project_documentation"></h2>
-                <oui-tile class="mt-xl-4" heading="{{ ::'' | translate }}">
-                    <oui-tile-button external data-ng-repeat="link in $ctrl.links track by $index" href="link.href">{{ ::link.translation | translate }}</oui-tile-button>
-                </oui-tile>
+                <ul>
+                    <li data-ng-repeat="link in $ctrl.links track by $index">
+                        <a data-ng-href="{{ ::link.href }}">{{ ::link.translation | translate }}</a>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>