[BUGFIX] Corrige la réactivité des boutons de publication dans Pix Ad…

…min (PIX-15736).

 #10820

admin/app/components/sessions/certifications/header.gjs

@@ -0,0 +1,80 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { not } from 'ember-truth-helpers';
+
+import ConfirmPopup from '../../confirm-popup';
+
+export default class CertificationsHeader extends Component {
+  @service accessControl;
+
+  @tracked isModalDisplayed = false;
+  @tracked confirmMessage = null;
+
+  get canPublish() {
+    return (
+      !this.args.juryCertificationSummaries.some(
+        (certification) => certification.status === 'error' && !certification.isCancelled,
+      ) && this.args.session.isFinalized
+    );
+  }
+
+  @action
+  displayConfirmationModal() {
+    this.confirmMessage = this.args.session.isPublished
+      ? 'Souhaitez-vous dépublier la session ?'
+      : 'Souhaitez-vous publier la session ?';
+    this.isModalDisplayed = true;
+  }
+
+  @action
+  onModalCancel() {
+    this.isModalDisplayed = false;
+  }
+
+  @action
+  async toggleSessionPublication() {
+    if (this.args.session.isPublished) {
+      await this.args.unpublishSession();
+    } else {
+      await this.args.publishSession();
+    }
+    this.isModalDisplayed = false;
+  }
+
+  <template>
+    <header class="certification-list-page__header">
+      <h2>Certifications</h2>
+      {{#if this.accessControl.hasAccessToCertificationActionsScope}}
+        <div class="btn-group" role="group">
+
+          {{#if @session.isPublished}}
+            <PixButton @triggerAction={{this.displayConfirmationModal}}>Dépublier la session</PixButton>
+          {{else}}
+            <PixTooltip @position="left" @isWide={{true}} @hide={{this.canPublish}}>
+              <:triggerElement>
+                <PixButton @triggerAction={{this.displayConfirmationModal}} @isDisabled={{not this.canPublish}}>
+                  Publier la session
+                </PixButton>
+              </:triggerElement>
+              <:tooltip>
+                Vous ne pouvez pas publier la session tant qu'elle n'est pas finalisée ou qu'il reste des certifications
+                en erreur.
+              </:tooltip>
+            </PixTooltip>
+          {{/if}}
+        </div>
+      {{/if}}
+    </header>
+
+    <ConfirmPopup
+      @message={{this.confirmMessage}}
+      @confirm={{this.toggleSessionPublication}}
+      @cancel={{this.onModalCancel}}
+      @show={{this.isModalDisplayed}}
+    />
+  </template>
+}

admin/app/components/sessions/certifications/list.gjs

@@ -0,0 +1,72 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+
+import CertificationInfoPublished from './info-published';
+import CertificationStatus from './status';
+
+export default class CertificationsHeader extends Component {
+  get sortedCertificationJurySummaries() {
+    return this.args.juryCertificationSummaries.sortBy('numberOfCertificationIssueReportsWithRequiredAction').reverse();
+  }
+
+  <template>
+    <div class="table-admin">
+      <table>
+        <thead>
+          <tr>
+            <th class="table__column table__column--id">ID</th>
+            <th>Prénom</th>
+            <th>Nom</th>
+            <th>Statut</th>
+            <th>Signalements impactants non résolus</th>
+            {{#if @displayHasSeenEndTestScreenColumn}}
+              <th>Ecran de fin de test vu</th>
+            {{/if}}
+            <th>Autre certification</th>
+            <th>Score</th>
+            <th>Début</th>
+            <th>Fin</th>
+            <th>Publiée</th>
+          </tr>
+        </thead>
+
+        {{#if @juryCertificationSummaries}}
+          <tbody>
+            {{#each this.sortedCertificationJurySummaries as |certification|}}
+              <tr aria-label="Certifications de {{certification.firstName certification.LastName}}">
+                <td class="table__column table__column--id">
+                  <LinkTo @route="authenticated.certifications.certification.informations" @model={{certification.id}}>
+                    {{certification.id}}
+                  </LinkTo>
+                </td>
+                <td>{{certification.firstName}}</td>
+                <td>{{certification.lastName}}</td>
+                <td>
+                  <CertificationStatus @record={{certification}} />
+                </td>
+                <td
+                  class="certification-list-page__cell--important"
+                >{{certification.numberOfCertificationIssueReportsWithRequiredActionLabel}}</td>
+                {{#if @displayHasSeenEndTestScreenColumn}}
+                  <td class="certification-list-page__cell--important">{{certification.hasSeenEndTestScreenLabel}}</td>
+                {{/if}}
+                <td>{{certification.complementaryCertificationTakenLabel}}</td>
+                <td>{{certification.pixScore}}</td>
+                <td>{{certification.creationDate}}</td>
+                <td>{{certification.completionDate}}</td>
+                <td>
+                  <CertificationInfoPublished @record={{certification}} />
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        {{/if}}
+      </table>
+    </div>
+
+    {{#if @juryCertificationSummaries}}
+      <PixPagination @pagination={{@pagination}} />
+    {{/if}}
+  </template>
+}

admin/app/controllers/authenticated/sessions/session/certifications.js

@@ -1,85 +1,38 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 
-const DEFAULT_PAGE_NUMBER = 1;
 export default class ListController extends Controller {
   @service pixToast;
   @service store;
-  @service accessControl;
-
-  @tracked pageNumber = DEFAULT_PAGE_NUMBER;
-  @tracked pageSize = 10;
-
-  @tracked displayConfirm = false;
-  @tracked confirmMessage = null;
-
-  get canPublish() {
-    const juryCertificationSummaries = this.model.juryCertificationSummaries;
-    const { session } = this.model;
-
-    return (
-      !juryCertificationSummaries.some(
-        (certification) => certification.status === 'error' && !certification.isCancelled,
-      ) && session.isFinalized
-    );
-  }
-
-  get sortedCertificationJurySummaries() {
-    return this.model.juryCertificationSummaries
-      .sortBy('numberOfCertificationIssueReportsWithRequiredAction')
-      .reverse();
-  }
-
-  @action
-  displayCertificationStatusUpdateConfirmationModal() {
-    const sessionIsPublished = this.model.session.isPublished;
-
-    if (!this.canPublish && !sessionIsPublished) return;
-
-    this.confirmMessage = sessionIsPublished
-      ? 'Souhaitez-vous dépublier la session ?'
-      : 'Souhaitez-vous publier la session ?';
-    this.displayConfirm = true;
-  }
 
   @action
-  async toggleSessionPublication() {
-    const isPublished = this.model.session.isPublished;
-    if (isPublished) {
-      await this.unpublishSession();
-    } else {
-      await this.publishSession();
-    }
-  }
-
-  async unpublishSession() {
+  async publishSession() {
     try {
-      await this.model.session.save({ adapterOptions: { updatePublishedCertifications: true, toPublish: false } });
+      await this.model.session.save({ adapterOptions: { updatePublishedCertifications: true, toPublish: true } });
       await this.model.juryCertificationSummaries.reload();
-      this.pixToast.sendSuccessNotification({ message: 'Les certifications ont été correctement dépubliées.' });
+      this.pixToast.sendSuccessNotification({ message: 'Les certifications ont été correctement publiées.' });
     } catch (e) {
       this.notifyError(e);
+    } finally {
+      await this.forceRefreshModelFromBackend();
     }
-    this.hideConfirmationModal();
   }
 
-  async publishSession() {
+  @action
+  async unpublishSession() {
     try {
-      await this.model.session.save({ adapterOptions: { updatePublishedCertifications: true, toPublish: true } });
+      await this.model.session.save({ adapterOptions: { updatePublishedCertifications: true, toPublish: false } });
+      await this.model.juryCertificationSummaries.reload();
+      this.pixToast.sendSuccessNotification({ message: 'Les certifications ont été correctement dépubliées.' });
     } catch (e) {
       this.notifyError(e);
+    } finally {
       await this.forceRefreshModelFromBackend();
     }
-
-    await this.model.juryCertificationSummaries.reload();
-    if (this.model.session.isPublished) {
-      this.pixToast.sendSuccessNotification({ message: 'Les certifications ont été correctement publiées.' });
-    }
-    this.hideConfirmationModal();
   }
 
+  @action
   notifyError(error) {
     if (error.errors && error.errors[0] && error.errors[0].detail) {
       this.pixToast.sendErrorNotification({ message: error.errors[0].detail });
@@ -88,16 +41,8 @@ export default class ListController extends Controller {
     }
   }
 
+  @action
   async forceRefreshModelFromBackend() {
     await this.store.findRecord('session', this.model.session.id, { reload: true });
   }
-
-  hideConfirmationModal() {
-    this.displayConfirm = false;
-  }
-
-  @action
-  onCancelConfirm() {
-    this.displayConfirm = false;
-  }
 }

admin/app/models/session.js

@@ -64,9 +64,9 @@ export default class Session extends Model {
     return Boolean(this.hasIncident || this.hasJoiningIssue);
   }
 
-  @computed('status')
+  @computed('publishedAt')
   get isPublished() {
-    return this.status === PROCESSED;
+    return this.publishedAt !== null;
   }
 
   @computed('juryCertificationSummaries.[]')