Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TECH] Utiliser le PixTable dans la liste des campagnes sur PixOrga (PIX-16745) #11509

Open
wants to merge 17 commits into
base: dev
Choose a base branch
from
Open

[TECH] Utiliser le PixTable dans la liste des campagnes sur PixOrga (PIX-16745) #11509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5ac43eb
tech(orga): use new PixTable on campaign list
xav-car Feb 25, 2025
6dc10af
feat(orga): use PixTable on Participant List
xav-car Feb 27, 2025
5972b90
feat(orga): use PixTable on competences
xav-car Feb 27, 2025
5bfef1b
feat(orga): add PixTable on anaylis assessment page
xav-car Feb 28, 2025
70445c2
feat(orga): use PixTable on profile collection result
xav-car Feb 28, 2025
8a9392d
feat(orga): add PixTable on anaylis assessment page
xav-car Feb 28, 2025
0c6126b
move unavquired badge style somewhere for now
xav-car Feb 28, 2025
3cdeabb
feat(orga): use pix table on organization participant (generic)
xav-car Feb 28, 2025
cd259f3
feat(orga): use PixTable on team page
xav-car Feb 28, 2025
eb7466e
feat(orga): use PixTable on places
xav-car Feb 28, 2025
6d977c7
feat(orga): use PixTable on participant assessment result page
xav-car Feb 28, 2025
e594a9a
feat(orga): use PixTable on participant profile result
xav-car Feb 28, 2025
ef73548
feat(orga): use PixTable on organization learner participation list
xav-car Feb 28, 2025
48a8626
feat(orga): use PixTable on mission list
xav-car Feb 28, 2025
fc9792f
feat(orga): use PixTable on mission activity page
xav-car Feb 28, 2025
e83bd79
feat(orga): use PixTable on statistics page
xav-car Feb 28, 2025
706756e
feat(orga): use PixTable on mission result table components
xav-car Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 111 additions & 116 deletions orga/app/components/campaign/activity/participants-list.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import PixIconButton from '@1024pix/pix-ui/components/pix-icon-button';
import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
import PixTable from '@1024pix/pix-ui/components/pix-table';
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
import { array, fn } from '@ember/helper';
import { on } from '@ember/modifier';
import { action } from '@ember/object';
import { LinkTo } from '@ember/routing';
import { service } from '@ember/service';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { t } from 'ember-intl';

import TableHeader from '../../table/header';
import ParticipationStatus from '../../ui/participation-status';
import ParticipationFilters from '../filter/participation-filters';
import DeleteParticipationModal from './delete-participation-modal';
Expand Down Expand Up @@ -66,119 +66,114 @@ export default class ParticipantsList extends Component {
@onResetFilter={{@onResetFilter}}
/>

<section ...attributes>
<div class="panel">
<table class="table content-text content-text--small">
<colgroup class="table__column">
<col class="table__column--wide" />
<col class="table__column--wide" />
{{#if @campaign.externalIdLabel}}
<col class="table__column--medium" />
{{/if}}
<col class="table__column--wide" />
{{#if @showParticipationCount}}
<col class="table__column--wide" />
{{/if}}
{{#if this.canDeleteParticipation}}
<col class="table__column--small table__column--right hide-on-mobile" />
{{/if}}
</colgroup>
<thead>
<tr>
<TableHeader>{{t "pages.campaign-activity.table.column.last-name"}}</TableHeader>
<TableHeader>{{t "pages.campaign-activity.table.column.first-name"}}</TableHeader>
{{#if @campaign.externalIdLabel}}
<TableHeader>{{@campaign.externalIdLabel}}</TableHeader>
{{/if}}
<TableHeader>{{t "pages.campaign-activity.table.column.status"}}</TableHeader>
{{#if @showParticipationCount}}
<TableHeader @size="wide">
{{t "pages.campaign-activity.table.column.participationCount"}}
</TableHeader>
{{/if}}
{{#if this.canDeleteParticipation}}
<TableHeader class="hide-on-mobile">
<span class="screen-reader-only">
{{t "pages.campaign-activity.table.column.delete"}}
</span>
</TableHeader>
{{/if}}
</tr>
</thead>

{{#if @participations}}
<tbody>
{{#each @participations as |participation|}}
<tr
aria-label={{t "pages.campaign-activity.table.row-title"}}
{{on "click" (fn @onClickParticipant @campaign.id participation.lastCampaignParticipationId)}}
class="tr--clickable"
>
<td>
<LinkTo
@route={{if
@campaign.isTypeAssessment
"authenticated.campaigns.participant-assessment"
"authenticated.campaigns.participant-profile"
}}
@models={{array @campaign.id participation.lastCampaignParticipationId}}
>
<span
aria-label="{{t
'pages.campaign-activity.table.see-results'
firstName=participation.firstName
lastName=participation.lastName
}}"
>
{{participation.lastName}}</span>
</LinkTo>
</td>
<td>{{participation.firstName}}</td>
{{#if @campaign.externalIdLabel}}
<td class="table__column table__column--break-word">{{participation.participantExternalId}}</td>
{{/if}}
<td>
<ParticipationStatus @status={{participation.status}} @campaignType={{@campaign.type}} />
</td>
{{#if @showParticipationCount}}
<td>
{{participation.participationCount}}
</td>
{{/if}}
{{#if this.canDeleteParticipation}}
<td class="hide-on-mobile">
<PixIconButton
@ariaLabel={{t "pages.campaign-activity.table.delete-button-label"}}
@withBackground={{true}}
@iconName="delete"
@triggerAction={{fn this.openModal participation}}
@size="small"
class="campaign-activity-table-actions__button campaign-activity-table-actions__button--delete"
/>
</td>
{{/if}}
</tr>
{{/each}}
</tbody>
{{/if}}
</table>

{{#unless @participations}}
<p class="table__empty content-text">{{t "pages.campaign-activity.table.empty"}}</p>
{{/unless}}
</div>

{{#if @participations}}
<PixPagination @pagination={{@participations.meta}} @locale={{this.getCurrentLocale}} />
{{/if}}

<DeleteParticipationModal
@participation={{this.participationToDelete}}
@campaign={{@campaign}}
@deleteCampaignParticipation={{this.deleteCampaignParticipation}}
@closeModal={{this.closeModal}}
@isModalOpen={{this.isModalOpen}}
/>
</section>
<PixTable
@variant="orga"
@caption={{@caption}}
@data={{@participations}}
class="table"
@onRowClick={{@onClickParticipant}}
>
<:columns as |participation context|>
<PixTableColumn @context={{context}}>
<:header>
{{t "pages.campaign-activity.table.column.last-name"}}
</:header>
<:cell>
<LinkTo
@route={{if
@campaign.isTypeAssessment
"authenticated.campaigns.participant-assessment"
"authenticated.campaigns.participant-profile"
}}
@models={{array @campaign.id participation.lastCampaignParticipationId}}
>
<span
aria-label={{t
"pages.campaign-activity.table.see-results"
firstName=participation.firstName
lastName=participation.lastName
}}
>
{{participation.lastName}}</span>
</LinkTo>
</:cell>
</PixTableColumn>

<PixTableColumn @context={{context}}>
<:header>
{{t "pages.campaign-activity.table.column.first-name"}}
</:header>
<:cell>
{{participation.firstName}}
</:cell>
</PixTableColumn>

{{#if @campaign.externalIdLabel}}
<PixTableColumn @context={{context}}>
<:header>
{{@campaign.externalIdLabel}}
</:header>
<:cell>
{{participation.ownerFullName}}
</:cell>
</PixTableColumn>
{{/if}}

<PixTableColumn @context={{context}}>
<:header>
{{t "pages.campaign-activity.table.column.status"}}
</:header>
<:cell>
<ParticipationStatus @status={{participation.status}} @campaignType={{@campaign.type}} />
</:cell>
</PixTableColumn>

{{#if @showParticipationCount}}
<PixTableColumn @context={{context}} @type="number">
<:header>
{{t "pages.campaign-activity.table.column.participationCount"}}
</:header>
<:cell>
{{participation.participationCount}}
</:cell>
</PixTableColumn>
{{/if}}

{{#if this.canDeleteParticipation}}
<PixTableColumn @context={{context}}>
<:header>
{{t "pages.campaign-activity.table.column.delete"}}
</:header>
<:cell>
<PixIconButton
@ariaLabel={{t "pages.campaign-activity.table.delete-button-label"}}
@withBackground={{true}}
@iconName="delete"
@triggerAction={{fn this.openModal participation}}
@size="small"
class="campaign-activity-table-actions__button campaign-activity-table-actions__button--delete"
/>
</:cell>
</PixTableColumn>
{{/if}}

</:columns>
</PixTable>

{{#unless @participations}}
<p class="table__empty content-text">{{t "pages.campaign-activity.table.empty"}}</p>
{{/unless}}

{{#if @participations}}
<PixPagination @pagination={{@participations.meta}} @locale={{this.getCurrentLocale}} />
{{/if}}

<DeleteParticipationModal
@participation={{this.participationToDelete}}
@campaign={{@campaign}}
@deleteCampaignParticipation={{this.deleteCampaignParticipation}}
@closeModal={{this.closeModal}}
@isModalOpen={{this.isModalOpen}}
/>
</template>
}
80 changes: 42 additions & 38 deletions orga/app/components/campaign/analysis/competences.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,60 @@
import PixProgressBar from '@1024pix/pix-ui/components/pix-progress-bar';
import PixTable from '@1024pix/pix-ui/components/pix-table';
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
import { hash } from '@ember/helper';
import { t } from 'ember-intl';

import TableHeader from '../../table/header';

function getCount(campaignCollectiveResult) {
const competenceCollectiveResultsCount = campaignCollectiveResult.get('campaignCompetenceCollectiveResults').length;
return competenceCollectiveResultsCount ? competenceCollectiveResultsCount : '-';
}

<template>
<section class="competences-section">
<h3 class="campaign-details-analysis campaign-details-analysis__header">
<section>
<h3 class="campaign-details-analysis__header">
{{t "pages.campaign-review.table.competences.title"}}
</h3>
<table
class="panel panel--light-shadow competences-analysis__table content-text content-text--small"
aria-label={{t "pages.campaign-review.table.competences.title"}}

<PixTable
@variant="orga"
@caption={{t "pages.campaign-review.table.competences.title"}}
@data={{@campaignCollectiveResult.campaignCompetenceCollectiveResults}}
class="table"
>
<thead>
<tr>
<TableHeader @size="wide">{{t
<:columns as |competenceResult context|>

<PixTableColumn @context={{context}}>
<:header>
{{t
"pages.campaign-review.table.competences.column.competences"
(hash count=(getCount @campaignCollectiveResult))
htmlSafe=true
}}</TableHeader>
<TableHeader @size="wide">{{t "pages.campaign-review.table.competences.column.results.label"}}</TableHeader>
</tr>
</thead>
<tbody>
{{#each @campaignCollectiveResult.campaignCompetenceCollectiveResults as |competenceResult|}}
<tr aria-label={{t "pages.campaign-review.table.competences.row-title"}}>
<td class="competences-col__name">
<span class="competences-col__border competences-col__border--{{competenceResult.areaColor}}"></span>
<span>
{{competenceResult.competenceName}}
</span>
</td>
<td class="competences-col__gauge">
<PixProgressBar
@value={{competenceResult.validatedSkillsPercentage}}
@tooltipText={{t
"pages.campaign-review.table.competences.column.results.tooltip"
result=competenceResult.validatedSkillsPercentage
competence=competenceResult.competenceName
htmlSafe=true
}}
/>
</td>
</tr>
{{/each}}
</tbody>
</table>
}}
</:header>
<:cell>
<span class="competences-col__border competences-col__border--{{competenceResult.areaColor}}">
{{competenceResult.competenceName}}
</span>
</:cell>
</PixTableColumn>

<PixTableColumn @context={{context}}>
<:header>
{{t "pages.campaign-review.table.competences.column.results.label"}}
</:header>
<:cell>
<PixProgressBar
@value={{competenceResult.validatedSkillsPercentage}}
@tooltipText={{t
"pages.campaign-review.table.competences.column.results.tooltip"
result=competenceResult.validatedSkillsPercentage
competence=competenceResult.competenceName
htmlSafe=true
}}
/>
</:cell>
</PixTableColumn>
</:columns>
</PixTable>
</section>
</template>
Loading