[FEATURE][ADMIN] Pouvoir changer le rôle d'un membre d'un centre de c…

…ertif depuis la page de l'utilisateur

 #7488

admin/app/components/users/certification-centers/membership-item-actions.hbs

@@ -0,0 +1,43 @@
+<div class="membership-item-actions">
+  {{#if @isEditionMode}}
+    <PixButton
+      aria-label={{t "components.users.certification-centers.memberships.items.actions.save-extra-informations"}}
+      class="member-item-actions__button"
+      @size="small"
+      @triggerAction={{@onSaveRoleButtonClicked}}
+    >
+      {{t "common.actions.save"}}
+    </PixButton>
+
+    <PixButton
+      aria-label={{t "components.users.certification-centers.memberships.items.actions.cancel-extra-informations"}}
+      @backgroundColor="grey"
+      class="member-item-actions__button"
+      @size="small"
+      @triggerAction={{@onCancelButtonClicked}}
+    >
+      {{t "common.actions.cancel"}}
+    </PixButton>
+  {{else}}
+    <PixButton
+      aria-label={{t "components.users.certification-centers.memberships.items.actions.edit-role-extra-informations"}}
+      class="member-item-actions__button"
+      @iconBefore="pen-to-square"
+      @size="small"
+      @triggerAction={{@onEditRoleButtonClicked}}
+    >
+      {{t "components.users.certification-centers.memberships.items.actions.edit-role"}}
+    </PixButton>
+
+    <PixButton
+      aria-label={{t "components.users.certification-centers.memberships.items.actions.deactivate-extra-informations"}}
+      @backgroundColor="red"
+      class="member-item-actions__button"
+      @iconBefore="trash"
+      @size="small"
+      @triggerAction={{@onDeactivateMembershipButtonClicked}}
+    >
+      {{t "common.actions.deactivate"}}
+    </PixButton>
+  {{/if}}
+</div>

admin/app/components/users/certification-centers/membership-item-role.hbs

@@ -0,0 +1,14 @@
+{{#if @isEditionMode}}
+  <PixSelect
+    @onChange={{@onRoleSelected}}
+    @value={{@role}}
+    @label={{t "components.users.certification-centers.memberships.items.role.select-role"}}
+    @screenReaderOnly={{true}}
+    @options={{@certificationCenterRoles}}
+    as |certificationCenterRole|
+  >
+    {{certificationCenterRole.label}}
+  </PixSelect>
+{{else}}
+  {{t @roleLabelKey}}
+{{/if}}

admin/app/components/users/certification-centers/membership-item.hbs

@@ -0,0 +1,32 @@
+<tr aria-label="Informations du Centre de certification {{@certificationCenterMembership.certificationCenter.name}}">
+  <td>{{@certificationCenterMembership.id}}</td>
+  <td class="table__column table__column--id">
+    <LinkTo
+      @route="authenticated.certification-centers.get"
+      @model={{@certificationCenterMembership.certificationCenter.id}}
+    >
+      {{@certificationCenterMembership.certificationCenter.id}}
+    </LinkTo>
+  </td>
+  <td>{{@certificationCenterMembership.certificationCenter.name}}</td>
+  <td>{{@certificationCenterMembership.certificationCenter.type}}</td>
+  <td>{{@certificationCenterMembership.certificationCenter.externalId}}</td>
+  <td>
+    <Users::CertificationCenters::MembershipItemRole
+      @isEditionMode={{this.isEditionMode}}
+      @certificationCenterRoles={{this.certificationCenterRoles}}
+      @role={{@certificationCenterMembership.role}}
+      @roleLabelKey={{@certificationCenterMembership.roleLabelKey}}
+      @onRoleSelected={{this.onRoleSelected}}
+    />
+  </td>
+  <td>
+    <Users::CertificationCenters::MembershipItemActions
+      @isEditionMode={{this.isEditionMode}}
+      @onDeactivateMembershipButtonClicked={{fn @disableCertificationCenterMembership @certificationCenterMembership}}
+      @onEditRoleButtonClicked={{this.editMembershipRole}}
+      @onSaveRoleButtonClicked={{this.saveMembershipRole}}
+      @onCancelButtonClicked={{this.cancelMembershipRoleEditing}}
+    />
+  </td>
+</tr>

admin/app/components/users/certification-centers/membership-item.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class UsersCertificationCentersMembershipItemComponent extends Component {
+  @service notifications;
+  @service store;
+  @service intl;
+
+  @tracked isEditionMode = false;
+
+  certificationCenterRoles = [
+    { value: 'ADMIN', label: this.intl.t('common.roles.admin') },
+    { value: 'MEMBER', label: this.intl.t('common.roles.member') },
+  ];
+
+  @action
+  editMembershipRole() {
+    this.isEditionMode = true;
+  }
+
+  @action
+  onRoleSelected(role) {
+    this.args.certificationCenterMembership.role = role;
+  }
+
+  @action
+  saveMembershipRole() {
+    this.isEditionMode = false;
+    this.args.onCertificationCenterMembershipRoleChange(this.args.certificationCenterMembership);
+  }
+
+  @action
+  cancelMembershipRoleEditing() {
+    this.args.certificationCenterMembership.rollbackAttributes();
+    this.isEditionMode = false;
+  }
+}

admin/app/components/users/certification-centers/memberships.hbs

@@ -0,0 +1,38 @@
+<header class="page-section__header">
+  <h2 class="page-section__title">{{t "components.users.certification-centers.memberships.section-title"}}</h2>
+</header>
+<div class="content-text content-text--small">
+  <div class="table-admin">
+    <table>
+      <thead>
+        <tr>
+          <th class="table__column table__column--id">{{t
+              "components.users.certification-centers.memberships.table-headers.member-id"
+            }}</th>
+          <th>{{t "components.users.certification-centers.memberships.table-headers.center-id"}}</th>
+          <th>{{t "components.users.certification-centers.memberships.table-headers.center-name"}}</th>
+          <th>{{t "components.users.certification-centers.memberships.table-headers.center-type"}}</th>
+          <th>{{t "components.users.certification-centers.memberships.table-headers.center-external-id"}}</th>
+          <th>{{t "components.users.certification-centers.memberships.table-headers.role-label"}}</th>
+          <th>{{t "components.users.certification-centers.memberships.table-headers.actions-label"}}</th>
+        </tr>
+      </thead>
+
+      {{#if this.orderedCertificationCenterMemberships}}
+        <tbody>
+          {{#each this.orderedCertificationCenterMemberships as |certificationCenterMembership|}}
+            <Users::CertificationCenters::MembershipItem
+              @certificationCenterMembership={{certificationCenterMembership}}
+              @onCertificationCenterMembershipRoleChange={{@onCertificationCenterMembershipRoleChange}}
+              @disableCertificationCenterMembership={{@disableCertificationCenterMembership}}
+            />
+          {{/each}}
+        </tbody>
+      {{/if}}
+    </table>
+
+  </div>
+  {{#unless this.orderedCertificationCenterMemberships}}
+    <div class="table__empty">{{t "components.users.certification-centers.memberships.empty-table"}}</div>
+  {{/unless}}
+</div>

admin/app/components/users/certification-centers/memberships.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class Memberships extends Component {
+  get orderedCertificationCenterMemberships() {
+    return this.args.certificationCenterMemberships.sortBy('certificationCenter.name');
+  }
+}

admin/app/controllers/authenticated/users/get/certification-center-memberships.js

@@ -0,0 +1,38 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class UsersCertificationCenterMembershipsController extends Controller {
+  @service notifications;
+  @service store;
+  @service intl;
+
+  @action
+  async updateCertificationCenterMembershipRole(certificationCenterMembership) {
+    try {
+      await certificationCenterMembership.save();
+      this.notifications.success(
+        this.intl.t('pages.user-details.notifications.success.update-certification-center-membership-role'),
+      );
+    } catch (_) {
+      certificationCenterMembership.rollbackAttributes();
+      this.notifications.error(
+        this.intl.t('pages.user-details.notifications.failure.update-certification-center-membership-role'),
+      );
+    }
+  }
+
+  @action
+  async disableCertificationCenterMembership(certificationCenterMembership) {
+    try {
+      await certificationCenterMembership.destroyRecord();
+      this.notifications.success(
+        this.intl.t('pages.user-details.notifications.success.deactivate-certification-center-membership'),
+      );
+    } catch (e) {
+      this.notifications.error(
+        this.intl.t('pages.user-details.notifications.failure.deactivate-certification-center-membership'),
+      );
+    }
+  }
+}

admin/app/styles/app.scss

@@ -69,6 +69,7 @@
 @import 'components/publish-session-button';
 @import 'components/sessions/jury-comment';
 @import 'components/sessions/list-items';
+@import 'components/users/membership-item';
 @import 'components/users/user-profile';
 @import 'components/users/user-overview';
 @import 'components/users/organization-learners-table';

admin/app/styles/components/users/membership-item.scss

@@ -0,0 +1,4 @@
+.membership-item-actions {
+    display: flex;
+    flex-direction: column;
+}

admin/app/templates/authenticated/users/get/certification-center-memberships.hbs

@@ -1,3 +1,7 @@
 <section class="page-section">
-  <Users::CertificationCenterMemberships @certificationCenterMemberships={{@model.certificationCenterMemberships}} />
+  <Users::CertificationCenters::Memberships
+    @certificationCenterMemberships={{@model.certificationCenterMemberships}}
+    @onCertificationCenterMembershipRoleChange={{this.updateCertificationCenterMembershipRole}}
+    @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
+  />
 </section>