[TECH] Migrer en GJS les composants organization-learners de pixOrga (Pix 15749)

orga/app/components/organization-learner/activity.gjs

@@ -0,0 +1,81 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import PixIndicatorCard from '@1024pix/pix-ui/components/pix-indicator-card';
+import ParticipationList from './activity/participation-list';
+import EmptyState from './activity/empty-state';
+import { t } from 'ember-intl';
+
+export default class Activity extends Component {
+  @tracked statistics = [];
+
+  constructor() {
+    super(...arguments);
+    Promise.resolve(this.args.statistics).then((statistics) => {
+      this.statistics = statistics;
+    });
+  }
+
+  get assessmentStatistics() {
+    return this.statistics.find((stat) => stat.id === 'ASSESSMENT');
+  }
+
+  get profileCollectionsStatistics() {
+    return this.statistics.find((stat) => stat.id === 'PROFILES_COLLECTION');
+  }
+
+  <template>
+    {{#if @participations}}
+      <div class="cards">
+        <div class="cards__content">
+          <h2 class="screen-reader-only">{{t "pages.organization-learner.activity.assessment-summary"}}</h2>
+          <PixIndicatorCard
+            @title={{t "pages.organization-learner.activity.cards.title.assessment"}}
+            @color="purple"
+            @iconName="speed"
+          >
+            <:default>{{this.assessmentStatistics.total}}</:default>
+            <:sub>
+              <ul class="cards__stats">
+                <li>{{t
+                    "pages.organization-learner.activity.cards.started"
+                    count=this.assessmentStatistics.started
+                  }}</li>
+                <li>{{t
+                    "pages.organization-learner.activity.cards.to-share"
+                    count=this.assessmentStatistics.to_share
+                  }}</li>
+                <li>{{t "pages.organization-learner.activity.cards.shared" count=this.assessmentStatistics.shared}}</li>
+              </ul>
+            </:sub>
+          </PixIndicatorCard>
+        </div>
+        <div class="cards__content">
+          <h2 class="screen-reader-only">{{t "pages.organization-learner.activity.profile-collection-summary"}}</h2>
+          <PixIndicatorCard
+            @title={{t "pages.organization-learner.activity.cards.title.profiles-collection"}}
+            @color="blue"
+            @iconName="profileShare"
+          >
+            <:default>{{this.profileCollectionsStatistics.total}}</:default>
+            <:sub>
+              <ul class="cards__stats">
+                <li>{{t
+                    "pages.organization-learner.activity.cards.to-share"
+                    count=this.profileCollectionsStatistics.to_share
+                  }}</li>
+                <li>{{t
+                    "pages.organization-learner.activity.cards.shared"
+                    count=this.profileCollectionsStatistics.shared
+                  }}</li>
+              </ul>
+            </:sub>
+          </PixIndicatorCard>
+        </div>
+      </div>
+      <h2 class="screen-reader-only">{{t "pages.organization-learner.activity.participations-title"}}</h2>
+      <ParticipationList @participations={{@participations}} class="activity__participants-list" />
+    {{else}}
+      <EmptyState @firstName={{@learner.firstName}} @lastName={{@learner.lastName}} />
+    {{/if}}
+  </template>
+}

orga/app/components/organization-learner/activity/empty-state.gjs

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import capitalize from 'lodash/capitalize';
+import { t } from 'ember-intl';
+
+<template>
+  <section class="panel empty-state">
+    <img src="{{this.rootURL}}/images/empty-state-activity.svg" alt="" role="none" />
+
+    <div class="empty-state__text">
+      <p>{{t
+          "pages.organization-learner.activity.empty-state"
+          organizationLearnerFirstName=(capitalize @firstName)
+          organizationLearnerLastName=(capitalize @lastName)
+        }}</p>
+    </div>
+  </section>
+</template>

orga/app/components/organization-learner/activity/participation-list.gjs

@@ -0,0 +1,37 @@
+import ParticipationRow from './participation-row';
+import TableHeader from '../../table/header';
+import { t } from 'ember-intl';
+
+<template>
+  <div class="panel">
+    <table class="table content-text content-text--small participation-list__table">
+      <thead>
+        <tr>
+          <TableHeader @size="wide">{{t
+              "pages.organization-learner.activity.participation-list.table.column.campaign-name"
+            }}</TableHeader>
+          <TableHeader @size="medium" @align="left">{{t
+              "pages.organization-learner.activity.participation-list.table.column.campaign-type"
+            }}</TableHeader>
+          <TableHeader @size="medium" @align="left">
+            {{t "pages.organization-learner.activity.participation-list.table.column.created-at"}}
+          </TableHeader>
+          <TableHeader @size="medium" @align="left">{{t
+              "pages.organization-learner.activity.participation-list.table.column.shared-at"
+            }}</TableHeader>
+          <TableHeader @size="medium" @align="left">{{t
+              "pages.organization-learner.activity.participation-list.table.column.status"
+            }}</TableHeader>
+          <TableHeader @size="medium" @align="left">{{t
+              "pages.organization-learner.activity.participation-list.table.column.participation-count"
+            }}</TableHeader>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each @participations as |participation|}}
+          <ParticipationRow @participation={{participation}} />
+        {{/each}}
+      </tbody>
+    </table>
+  </div>
+</template>

orga/app/components/organization-learner/activity/participation-row.gjs

@@ -0,0 +1,66 @@
+import { action } from '@ember/object';
+import { LinkTo } from '@ember/routing';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import Date from '../../ui/date';
+import ParticipationStatus from '../../ui/participation-status';
+import CampaignType from '../../campaign/detail/type';
+import { t } from 'ember-intl';
+import { on } from '@ember/modifier';
+import { array } from '@ember/helper';
+
+export default class ParticipationRow extends Component {
+  @service router;
+
+  get routeName() {
+    return this.args.participation.campaignType === 'ASSESSMENT'
+      ? 'authenticated.campaigns.participant-assessment'
+      : 'authenticated.campaigns.participant-profile';
+  }
+
+  get labels() {
+    return {
+      ASSESSMENT: 'components.campaign.type.information.ASSESSMENT',
+      PROFILES_COLLECTION: 'components.campaign.type.information.PROFILES_COLLECTION',
+    };
+  }
+
+  @action
+  goToParticipationDetail(event) {
+    event.preventDefault();
+    this.router.transitionTo(
+      this.routeName,
+      this.args.participation.campaignId,
+      this.args.participation.lastCampaignParticipationId,
+    );
+  }
+
+  <template>
+    <tr
+      aria-label={{t "pages.organization-learner.activity.participation-list.table.row-title"}}
+      {{on "click" this.goToParticipationDetail}}
+      class="tr--clickable"
+    >
+      <td class="ellipsis">
+        <LinkTo @route={{this.routeName}} @models={{array @participation.campaignId @participation.id}}>
+          {{@participation.campaignName}}
+        </LinkTo>
+      </td>
+      <td class="ellipsis">
+        <CampaignType @labels={{this.labels}} @campaignType={{@participation.campaignType}} />
+      </td>
+      <td class="table__column--left">
+        <Date @date={{@participation.createdAt}} />
+      </td>
+      <td class="table__column--left">
+        <Date @date={{@participation.sharedAt}} />
+      </td>
+      <td class="table__column--left">
+        <ParticipationStatus @status={{@participation.status}} @campaignType={{@participation.campaignType}} />
+      </td>
+      <td class="table__column--left">
+        {{@participation.participationCount}}
+      </td>
+    </tr>
+  </template>
+}