✨admin: use PixTable on complementary certification history table

Author: AndreiaPena

admin/app/components/complementary-certifications/target-profiles/history.gjs

@@ -1,42 +1,47 @@
+import PixTable from '@1024pix/pix-ui/components/pix-table';
+import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
 import { LinkTo } from '@ember/routing';
 import dayjsFormat from 'ember-dayjs/helpers/dayjs-format';
+import { t } from 'ember-intl';
 
 <template>
   <section class="page-section">
-    <div class="content-text content-text--small">
-      <h2 class="complementary-certification-details__history-title">
-        Historique des profils cibles rattachés
-      </h2>
-      <div class="table-admin">
-        <table>
-          <thead>
-            <tr>
-              <th>Nom du profil cible</th>
-              <th>Date de rattachement</th>
-              <th>Date de détachement</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each @targetProfilesHistory as |targetProfileHistory|}}
-              <tr>
-                <td>
-                  <LinkTo
-                    @route="authenticated.target-profiles.target-profile"
-                    @model={{targetProfileHistory.id}}
-                    class="complementary-certification-details-target-profile__link"
-                  >
-                    {{targetProfileHistory.name}}
-                  </LinkTo>
-                </td>
-                <td>{{dayjsFormat targetProfileHistory.attachedAt "DD/MM/YYYY"}}</td>
-                <td>
-                  {{if targetProfileHistory.detachedAt (dayjsFormat targetProfileHistory.detachedAt "DD/MM/YYYY") "-"}}
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <h2 class="complementary-certification-details__history-title">
+      {{t "components.complementary-certifications.target-profiles.history-list.title"}}
+    </h2>
+    <PixTable @data={{@targetProfilesHistory}}>
+      <:columns as |row targetProfileHistory|>
+        <PixTableColumn @context={{targetProfileHistory}}>
+          <:header>
+            {{t "components.complementary-certifications.target-profiles.history-list.headers.name"}}
+          </:header>
+          <:cell>
+            <LinkTo
+              @route="authenticated.target-profiles.target-profile"
+              @model={{row.id}}
+              class="complementary-certification-details-target-profile__link"
+            >
+              {{row.name}}
+            </LinkTo>
+          </:cell>
+        </PixTableColumn>
+        <PixTableColumn @context={{targetProfileHistory}}>
+          <:header>
+            {{t "components.complementary-certifications.target-profiles.history-list.headers.attached-at"}}
+          </:header>
+          <:cell>
+            {{dayjsFormat row.attachedAt "DD/MM/YYYY"}}
+          </:cell>
+        </PixTableColumn>
+        <PixTableColumn @context={{targetProfileHistory}}>
+          <:header>
+            {{t "components.complementary-certifications.target-profiles.history-list.headers.detached-at"}}
+          </:header>
+          <:cell>
+            {{if row.detachedAt (dayjsFormat row.detachedAt "DD/MM/YYYY") "-"}}
+          </:cell>
+        </PixTableColumn>
+      </:columns>
+    </PixTable>
   </section>
 </template>

admin/tests/integration/components/complementary-certifications/target-profiles/history-test.gjs

@@ -1,11 +1,12 @@
 import { render } from '@1024pix/ember-testing-library';
 import dayjs from 'dayjs';
-import { setupRenderingTest } from 'ember-qunit';
 import History from 'pix-admin/components/complementary-certifications/target-profiles/history';
 import { module, test } from 'qunit';
 
+import setupIntlRenderingTest from '../../../../helpers/setup-intl-rendering';
+
 module('Integration | Component | complementary-certifications/target-profiles/history', function (hooks) {
-  setupRenderingTest(hooks);
+  setupIntlRenderingTest(hooks);
 
   test("it should display history for complementary certification's target profiles", async function (assert) {
     // given

admin/translations/en.json

@@ -312,6 +312,14 @@
             "name": "Nom du badge certifié"
           },
           "title": "Badges certifiés du profil cible actuel"
+        },
+        "history-list": {
+          "headers": {
+            "attached-at": "Date de rattachement",
+            "detached-at": "Date de détachement",
+            "name": "Nom du profil cible"
+          },
+          "title": "Historique des profils cibles rattachés"
         }
       },
       "title": "Toutes les certifications complémentaires"

admin/translations/fr.json

@@ -320,6 +320,14 @@
             "name": "Nom du badge certifié"
           },
           "title": "Badges certifiés du profil cible actuel"
+        },
+        "history-list": {
+          "headers": {
+            "attached-at": "Date de rattachement",
+            "detached-at": "Date de détachement",
+            "name": "Nom du profil cible"
+          },
+          "title": "Historique des profils cibles rattachés"
         }
       },
       "title": "Toutes les certifications complémentaires"