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

[FEATURE] Ajouter des filtres dans la liste des parcours autonomes (PIX-16065). #11075

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

[FEATURE] Ajouter des filtres dans la liste des parcours autonomes (PIX-16065). #11075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
106 changes: 72 additions & 34 deletions admin/app/components/autonomous-courses/list/index.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,77 @@
import PixInput from '@1024pix/pix-ui/components/pix-input';
import { fn } from '@ember/helper';
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { t } from 'ember-intl';

import ListItem from './item';

<template>
<div class="content-text content-text--small">
<div class="table-admin">
<table>
<caption class="screen-reader-only">{{t "components.autonomous-courses.list.title"}}</caption>
<thead>
<tr>
<th scope="col" class="table__column table__column--id">{{t
"components.autonomous-courses.list.headers.id"
}}</th>
<th scope="col">{{t "components.autonomous-courses.list.headers.name"}}</th>
<th scope="col" class="table__column table__medium">{{t
"components.autonomous-courses.list.headers.createdAt"
}}</th>
<th scope="col" class="table__column table__medium">{{t
"components.autonomous-courses.list.headers.status"
}}</th>
</tr>
</thead>

{{#if @items}}
<tbody>
{{#each @items as |autonomousCourseListItem|}}
<ListItem @item={{autonomousCourseListItem}} />
{{/each}}
</tbody>
{{/if}}
</table>

{{#unless @items}}
<div class="table__empty">{{t "components.autonomous-courses.list.no-result"}}</div>
{{/unless}}
export default class AutonomousCoursesList extends Component {
@tracked items = this.args.items;

@action
triggerFiltering(key, event) {
const normalizeText = (text) =>
text
.toUpperCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.trim();

const valueToSearch = normalizeText(event.target.value);

this.items = this.args.items.filter((item) => !valueToSearch || normalizeText(item[key]).includes(valueToSearch));
}

<template>
<div class="content-text content-text--small">
<div class="table-admin">
<table>
<caption class="screen-reader-only">{{t "components.autonomous-courses.list.title"}}</caption>
<thead>
<tr>
<th scope="col" class="table__column table__column--id">{{t
"components.autonomous-courses.list.headers.id"
}}</th>
<th scope="col">{{t "components.autonomous-courses.list.headers.name"}}</th>
<th scope="col" class="table__column table__medium">{{t
"components.autonomous-courses.list.headers.createdAt"
}}</th>
<th scope="col" class="table__column table__medium">{{t
"components.autonomous-courses.list.headers.status"
}}</th>
</tr>
<tr>
<td>
<PixInput id="id" type="text" oninput={{fn this.triggerFiltering "id"}} placeholder="Filtrer par ID" />
</td>
<td>
<PixInput
id="id"
type="text"
oninput={{fn this.triggerFiltering "name"}}
placeholder="Filtrer par nom"
/>
</td>
<td></td>
<td></td>
</tr>
</thead>

{{#if this.items}}
<tbody>
{{#each this.items as |autonomousCourseListItem|}}
<ListItem @item={{autonomousCourseListItem}} />
{{/each}}
</tbody>
{{/if}}
</table>

{{#unless @items}}
<div class="table__empty">{{t "components.autonomous-courses.list.no-result"}}</div>
{{/unless}}
</div>
</div>
</div>
</template>
</template>
}
53 changes: 53 additions & 0 deletions admin/tests/integration/components/autonomous-courses/list/index-test.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { render } from '@1024pix/ember-testing-library';
import { fillIn } from '@ember/test-helpers';
import List from 'pix-admin/components/autonomous-courses/list';
import { module, test } from 'qunit';

Expand Down Expand Up @@ -59,4 +60,56 @@ module('Integration | Component | AutonomousCourses | List', function (hooks) {
// then
assert.dom(screen.getByText('Archivé')).exists();
});

module('filterable columns', function () {
test('it should be possible to filter ID column', async function (assert) {
// given
const autonomousCoursesList = [
{
id: '1002',
name: 'Parcours autonome qui va être filtré',
createdAt: new Date('2023-01-01'),
},
{
id: '999',
name: 'Parcours autonome avec un 9 dedans',
createdAt: new Date('2023-01-01'),
archivedAt: new Date('2023-02-02'),
},
];

// when
const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
await fillIn(screen.getByPlaceholderText('Filtrer par ID'), 9);

// then
assert.dom(screen.getByText('Parcours autonome avec un 9 dedans')).exists();
assert.dom(screen.queryByText('Parcours autonome qui va être filtré')).doesNotExist();
});

test('it should be possible to filter name column', async function (assert) {
// given
const autonomousCoursesList = [
{
id: '1002',
name: 'Parcours autonome qui va être filtré',
createdAt: new Date('2023-01-01'),
},
{
id: '999',
name: 'Parcours autonome avec un 9 dedans',
createdAt: new Date('2023-01-01'),
archivedAt: new Date('2023-02-02'),
},
];

// when
const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
await fillIn(screen.getByPlaceholderText('Filtrer par nom'), 'qui va être filtré');

// then
assert.dom(screen.getByText('Parcours autonome qui va être filtré')).exists();
assert.dom(screen.queryByText('Parcours autonome avec un 9 dedans')).doesNotExist();
});
});
});
Loading