Skip to content

Commit eb10cf6

Browse files
AndreiaPenaAndreiaPena
committed
✨ admin: pix table on autonomous courses list
1 parent a804e80 commit eb10cf6

File tree

5 files changed

+70
-67
lines changed

5 files changed

+70
-67
lines changed

‎admin/app/components/autonomous-courses/list/index.gjs

+25-42
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import PixFilterBanner from '@1024pix/pix-ui/components/pix-filter-banner';
12
import PixInput from '@1024pix/pix-ui/components/pix-input';
3+
import PixTable from '@1024pix/pix-ui/components/pix-table';
24
import { fn } from '@ember/helper';
35
import { action } from '@ember/object';
46
import Component from '@glimmer/component';
@@ -29,48 +31,29 @@ export default class AutonomousCoursesList extends Component {
2931
}
3032

3133
<template>
32-
<div class="content-text content-text--small">
33-
<div class="table-admin">
34-
<table>
35-
<caption class="screen-reader-only">{{t "components.autonomous-courses.list.title"}}</caption>
36-
<thead>
37-
<tr>
38-
<th scope="col" class="table__column table__column--id">{{t
39-
"components.autonomous-courses.list.headers.id"
40-
}}</th>
41-
<th scope="col">{{t "components.autonomous-courses.list.headers.name"}}</th>
42-
<th scope="col" class="table__column table__medium">{{t
43-
"components.autonomous-courses.list.headers.createdAt"
44-
}}</th>
45-
<th scope="col" class="table__column table__medium">{{t
46-
"components.autonomous-courses.list.headers.status"
47-
}}</th>
48-
</tr>
49-
<tr>
50-
<td>
51-
<PixInput type="text" oninput={{fn this.triggerFiltering "id"}} placeholder="Filtrer par ID" />
52-
</td>
53-
<td>
54-
<PixInput type="text" oninput={{fn this.triggerFiltering "name"}} placeholder="Filtrer par nom" />
55-
</td>
56-
<td></td>
57-
<td></td>
58-
</tr>
59-
</thead>
60-
61-
{{#if this.filteredItems}}
62-
<tbody>
63-
{{#each this.filteredItems as |autonomousCourseListItem|}}
64-
<ListItem @item={{autonomousCourseListItem}} />
65-
{{/each}}
66-
</tbody>
67-
{{/if}}
68-
</table>
69-
70-
{{#unless @items}}
71-
<div class="table__empty">{{t "components.autonomous-courses.list.no-result"}}</div>
72-
{{/unless}}
73-
</div>
34+
<div class="page-with-table">
35+
<PixFilterBanner @title={{t "common.filters.title"}}>
36+
<PixInput oninput={{fn this.triggerFiltering "id"}} aria-label="Filtrer par ID">
37+
<:label>{{t "components.autonomous-courses.list.headers.id"}}</:label>
38+
</PixInput>
39+
<PixInput oninput={{fn this.triggerFiltering "name"}} aria-label="Filtrer par nom">
40+
<:label>{{t "components.autonomous-courses.list.headers.name"}}</:label>
41+
</PixInput>
42+
</PixFilterBanner>
43+
44+
{{#if @items}}
45+
<PixTable
46+
@variant="admin"
47+
@data={{this.filteredItems}}
48+
@caption={{t "components.autonomous-courses.list.title"}}
49+
>
50+
<:columns as |autonomousCourseListItem context|>
51+
<ListItem @item={{autonomousCourseListItem}} @context={{context}} />
52+
</:columns>
53+
</PixTable>
54+
{{else}}
55+
<div class="table__empty">{{t "components.autonomous-courses.list.no-result"}}</div>
56+
{{/if}}
7457
</div>
7558
</template>
7659
}

‎admin/app/components/autonomous-courses/list/item.gjs

+29-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
12
import PixTag from '@1024pix/pix-ui/components/pix-tag';
23
import { LinkTo } from '@ember/routing';
34
import { t } from 'ember-intl';
45

56
import formatDate from '../../../helpers/format-date';
67

78
<template>
8-
<tr>
9-
<td>
9+
<PixTableColumn @context={{@context}}>
10+
<:header>
11+
{{t "components.autonomous-courses.list.headers.id"}}
12+
</:header>
13+
<:cell>
1014
{{@item.id}}
11-
</td>
12-
<td>
15+
</:cell>
16+
</PixTableColumn>
17+
<PixTableColumn @context={{@context}}>
18+
<:header>
19+
{{t "components.autonomous-courses.list.headers.name"}}
20+
</:header>
21+
<:cell>
1322
<LinkTo @route="authenticated.autonomous-courses.details" @model={{@item.id}}>
1423
{{@item.name}}
1524
</LinkTo>
16-
</td>
17-
<td>
25+
</:cell>
26+
</PixTableColumn>
27+
<PixTableColumn @context={{@context}}>
28+
<:header>
29+
{{t "components.autonomous-courses.list.headers.createdAt"}}
30+
</:header>
31+
<:cell>
1832
{{formatDate @item.createdAt}}
19-
</td>
20-
<td>
33+
</:cell>
34+
</PixTableColumn>
35+
<PixTableColumn @context={{@context}}>
36+
<:header>
37+
{{t "components.autonomous-courses.list.headers.status"}}
38+
</:header>
39+
<:cell>
2140
{{#if @item.archivedAt}}
2241
<PixTag @color="grey-light">
2342
{{t "components.autonomous-courses.list.status.archived"}}
@@ -27,6 +46,6 @@ import formatDate from '../../../helpers/format-date';
2746
{{t "components.autonomous-courses.list.status.active"}}
2847
</PixTag>
2948
{{/if}}
30-
</td>
31-
</tr>
49+
</:cell>
50+
</PixTableColumn>
3251
</template>

‎admin/app/components/team/list.gjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default class List extends Component {
9595

9696
<template>
9797
{{#if @members}}
98-
<PixTable @variant="primary" @data={{@members}} @caption={{t "pages.team.table.caption"}}>
98+
<PixTable @variant="admin" @data={{@members}} @caption={{t "pages.team.table.caption"}}>
9999
<:columns as |member context|>
100100
<PixTableColumn @context={{context}}>
101101
<:header>

‎admin/app/templates/authenticated/certifications/certification/neutralization.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
{{#if this.model.answers}}
44
<PixTable
5-
@variant="primary"
5+
@variant="admin"
66
@data={{this.model.answers}}
77
@caption={{t "pages.certifications.certification.neutralization.table.caption"}}
88
>

‎admin/tests/integration/components/autonomous-courses/list/index-test.gjs

+14-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { render } from '@1024pix/ember-testing-library';
1+
import { render, within } from '@1024pix/ember-testing-library';
22
import { fillIn } from '@ember/test-helpers';
33
import List from 'pix-admin/components/autonomous-courses/list';
44
import { module, test } from 'qunit';
55

6-
import setupIntlRenderingTest from '../../../../helpers/setup-intl-rendering';
6+
import setupIntlRenderingTest, { t } from '../../../../helpers/setup-intl-rendering';
77

88
module('Integration | Component | AutonomousCourses | List', function (hooks) {
99
setupIntlRenderingTest(hooks);
@@ -27,20 +27,21 @@ module('Integration | Component | AutonomousCourses | List', function (hooks) {
2727
const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
2828

2929
// then
30-
assert.dom(screen.getByText('Id')).exists();
31-
assert.dom(screen.getByText('1002')).exists();
32-
assert.dom(screen.getByText('1001')).exists();
30+
const table = screen.getByRole('table', { name: t('components.autonomous-courses.list.title') });
31+
assert.dom(within(table).getByRole('columnheader', { name: 'Id' })).exists();
32+
assert.dom(within(table).getByRole('cell', { name: '1002' })).exists();
33+
assert.dom(within(table).getByRole('cell', { name: '1001' })).exists();
3334

34-
assert.dom(screen.getByText('Nom')).exists();
35+
assert.dom(within(table).getByRole('columnheader', { name: 'Nom' })).exists();
3536
assert.dom(screen.getByRole('link', { name: 'Parcours autonome 2023' })).exists();
3637
assert.dom(screen.getByRole('link', { name: 'Parcours autonome 2020' })).exists();
3738

38-
assert.dom(screen.getByText('Date de création')).exists();
39-
assert.dom(screen.getByText('01/01/2023')).exists();
40-
assert.dom(screen.getByText('01/01/2020')).exists();
39+
assert.dom(within(table).getByRole('columnheader', { name: 'Date de création' })).exists();
40+
assert.dom(within(table).getByRole('cell', { name: '01/01/2023' })).exists();
41+
assert.dom(within(table).getByRole('cell', { name: '01/01/2020' })).exists();
4142

42-
assert.dom(screen.getByText('Statut')).exists();
43-
assert.strictEqual(screen.getAllByText('Actif').length, 2);
43+
assert.dom(within(table).getByRole('columnheader', { name: 'Statut' })).exists();
44+
assert.strictEqual(within(table).getAllByText('Actif').length, 2);
4445
});
4546

4647
test('it should display a autonomous course with archived tag', async function (assert) {
@@ -80,7 +81,7 @@ module('Integration | Component | AutonomousCourses | List', function (hooks) {
8081

8182
// when
8283
const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
83-
await fillIn(screen.getByPlaceholderText('Filtrer par ID'), 9);
84+
await fillIn(screen.getByRole('textbox', { name: 'Filtrer par ID' }), 9);
8485

8586
// then
8687
assert.dom(screen.getByText('Parcours autonome avec un 9 dedans')).exists();
@@ -105,7 +106,7 @@ module('Integration | Component | AutonomousCourses | List', function (hooks) {
105106

106107
// when
107108
const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
108-
await fillIn(screen.getByPlaceholderText('Filtrer par nom'), 'qui va être filtré');
109+
await fillIn(screen.getByRole('textbox', { name: 'Filtrer par nom' }), 'qui va être filtré');
109110

110111
// then
111112
assert.dom(screen.getByText('Parcours autonome qui va être filtré')).exists();

0 commit comments

Comments
 (0)