Skip to content

Commit 79b7c87

Browse files
tomaszpaciortomaszpacior
authored
feat: add inline filters variant with expandable sections (#496)
* feat: add inline filters variant with expandable sections * fix: code review fix * fix: code review fix * fix: code review fix * fix: code review fix * fix: code review fix
1 parent c8b8952 commit 79b7c87

File tree

13 files changed

+575
-180
lines changed

13 files changed

+575
-180
lines changed

‎.changeset/dull-dancers-hide.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@o2s/integrations.mocked': minor
3+
'@o2s/blocks.ticket-list': minor
4+
'@o2s/framework': minor
5+
'@o2s/ui': minor
6+
---
7+
8+
add inline filters variant with expandable sections

‎packages/blocks/ticket-list/src/api-harmonization/ticket-list.model.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export class TicketListBlock extends ApiModels.Block.Block {
2323
labels!: {
2424
showMore: string;
2525
clickToSelect: string;
26+
showMoreFilters?: string;
27+
hideMoreFilters?: string;
28+
noActiveFilters?: string;
2629
};
2730
initialFilters?: Partial<Tickets.Model.Ticket & { sort?: string }>;
2831
meta?: CMS.Model.TicketListBlock.TicketListBlock['meta'];

‎packages/blocks/ticket-list/src/api-harmonization/ticket-list.request.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@ export class GetTicketListBlockQuery
77
offset?: number;
88
limit?: number;
99
preview?: boolean;
10+
search?: string;
11+
priority?: string;
1012
}

‎packages/blocks/ticket-list/src/frontend/TicketList.client.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
3838
id: component.id,
3939
offset: 0,
4040
limit: component.pagination?.limit || 5,
41+
search: '',
42+
priority: '',
4143
};
4244

4345
const initialData = component.tickets.data;
@@ -203,8 +205,12 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
203205
initialValues={filters}
204206
onSubmit={handleFilter}
205207
onReset={handleReset}
208+
variant="inline"
206209
labels={{
207210
clickToSelect: data.labels.clickToSelect,
211+
showMoreFilters: data.labels.showMoreFilters,
212+
hideMoreFilters: data.labels.hideMoreFilters,
213+
noActiveFilters: data.labels.noActiveFilters,
208214
}}
209215
/>
210216

‎packages/framework/src/modules/cms/models/blocks/ticket-list.model.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export class TicketListBlock extends Block.Block<Meta> {
99
table!: DataTable.DataTable<Ticket>;
1010
fieldMapping!: Mapping.Mapping<Ticket>;
1111
pagination?: Pagination.Pagination;
12-
filters?: Filters.Filters<Ticket & { sort?: string; viewMode?: 'list' | 'grid' }>;
12+
filters?: Filters.Filters<
13+
Ticket & { sort?: string; viewMode?: 'list' | 'grid'; search?: string; priority?: string }
14+
>;
1315
noResults!: {
1416
title: string;
1517
description?: string;
@@ -19,6 +21,9 @@ export class TicketListBlock extends Block.Block<Meta> {
1921
yesterday: string;
2022
showMore: string;
2123
clickToSelect: string;
24+
showMoreFilters?: string;
25+
hideMoreFilters?: string;
26+
noActiveFilters?: string;
2227
};
2328
detailsUrl!: string;
2429
forms?: Link[];
@@ -37,8 +42,6 @@ export class Meta {
3742
subtitle!: string;
3843
table!: DataTable.DataTableMeta;
3944
fieldMapping!: Mapping.MappingMeta<Ticket>;
40-
// pagination!: string;
41-
// filters!: string;
4245
noResults!: {
4346
__id: string;
4447
title: string;
@@ -50,7 +53,9 @@ export class Meta {
5053
yesterday: string;
5154
showMore: string;
5255
clickToSelect: string;
56+
showMoreFilters?: string;
57+
hideMoreFilters?: string;
58+
noActiveFilters?: string;
5359
};
5460
detailsUrl!: string;
55-
// forms!: string;
5661
}

‎packages/framework/src/modules/tickets/tickets.request.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,7 @@ export class GetTicketListQuery extends PaginationQuery {
1818
dateFrom?: Date;
1919
dateTo?: Date;
2020
sort?: string;
21+
search?: string;
22+
priority?: string;
2123
locale?: string;
2224
}

‎packages/framework/src/utils/models/filters.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class FilterSelect<T> extends Filter<T> {
3434
export class FilterToggleGroup<T> extends Filter<T> {
3535
__typename!: 'FilterToggleGroup';
3636
allowMultiple!: boolean;
37+
isLabelHidden?: boolean;
3738
options!: {
3839
value: string;
3940
label: string;

‎packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.ticket-list.mapper.ts‎

Lines changed: 78 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -124,13 +124,26 @@ const MOCK_TICKET_LIST_BLOCK_EN: CMS.Model.TicketListBlock.TicketListBlock = {
124124
__typename: 'FilterSelect',
125125
id: 'type',
126126
label: 'Case type',
127-
allowMultiple: false,
127+
allowMultiple: true,
128+
isLeading: false,
128129
options: [
129130
{ label: 'Urgent', value: 'URGENT' },
130131
{ label: 'Standard', value: 'STANDARD' },
131132
{ label: 'Low Priority', value: 'LOW_PRIORITY' },
132133
],
133134
},
135+
{
136+
__typename: 'FilterSelect',
137+
id: 'priority',
138+
label: 'Priority',
139+
allowMultiple: false,
140+
isLeading: false,
141+
options: [
142+
{ label: 'High', value: 'HIGH' },
143+
{ label: 'Medium', value: 'MEDIUM' },
144+
{ label: 'Low', value: 'LOW' },
145+
],
146+
},
134147
{
135148
__typename: 'FilterDateRange',
136149
id: 'updatedAt',
@@ -158,6 +171,9 @@ const MOCK_TICKET_LIST_BLOCK_EN: CMS.Model.TicketListBlock.TicketListBlock = {
158171
yesterday: 'Yesterday',
159172
showMore: 'Show more',
160173
clickToSelect: 'Click to select',
174+
showMoreFilters: 'Show more filters',
175+
hideMoreFilters: 'Hide more filters',
176+
noActiveFilters: 'No active filters',
161177
},
162178
detailsUrl: '/cases/{id}',
163179
};
@@ -237,12 +253,24 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
237253
close: 'Filter schließen',
238254
removeFilters: 'Filter entfernen ({active})',
239255
items: [
256+
{
257+
__typename: 'FilterToggleGroup',
258+
id: 'status',
259+
label: 'Status',
260+
allowMultiple: true,
261+
isLeading: true,
262+
options: [
263+
{ label: 'Alle', value: 'ALL' },
264+
{ label: 'In Bearbeitung', value: 'OPEN' },
265+
{ label: 'Gelöst', value: 'CLOSED' },
266+
{ label: 'Neue Antwort', value: 'IN_PROGRESS' },
267+
],
268+
},
240269
{
241270
__typename: 'FilterSelect',
242271
id: 'sort',
243272
label: 'Sortieren nach',
244273
allowMultiple: false,
245-
isLeading: true,
246274
options: [
247275
{ label: 'Thema aufsteigend', value: 'topic_ASC' },
248276
{ label: 'Thema absteigend', value: 'topic_DESC' },
@@ -254,24 +282,11 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
254282
{ label: 'Aktualisiert absteigend', value: 'updatedAt_DESC' },
255283
],
256284
},
257-
{
258-
__typename: 'FilterToggleGroup',
259-
id: 'status',
260-
label: 'Status',
261-
allowMultiple: false,
262-
isLeading: false,
263-
options: [
264-
{ label: 'Alle', value: 'ALL' },
265-
{ label: 'In Bearbeitung', value: 'OPEN' },
266-
{ label: 'Gelöst', value: 'CLOSED' },
267-
{ label: 'Neue Antwort', value: 'IN_PROGRESS' },
268-
],
269-
},
270285
{
271286
__typename: 'FilterSelect',
272287
id: 'topic',
273288
label: 'Thema',
274-
allowMultiple: true,
289+
allowMultiple: false,
275290
isLeading: false,
276291
options: [
277292
{ label: 'Alle', value: 'ALL' },
@@ -288,13 +303,26 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
288303
__typename: 'FilterSelect',
289304
id: 'type',
290305
label: 'Falltyp',
291-
allowMultiple: false,
306+
allowMultiple: true,
307+
isLeading: false,
292308
options: [
293309
{ label: 'Dringend', value: 'URGENT' },
294310
{ label: 'Standard', value: 'STANDARD' },
295311
{ label: 'Niedrige Priorität', value: 'LOW_PRIORITY' },
296312
],
297313
},
314+
{
315+
__typename: 'FilterSelect',
316+
id: 'priority',
317+
label: 'Priorität',
318+
allowMultiple: false,
319+
isLeading: false,
320+
options: [
321+
{ label: 'Hoch', value: 'HIGH' },
322+
{ label: 'Mittel', value: 'MEDIUM' },
323+
{ label: 'Niedrig', value: 'LOW' },
324+
],
325+
},
298326
{
299327
__typename: 'FilterDateRange',
300328
id: 'updatedAt',
@@ -322,6 +350,9 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
322350
yesterday: 'Gestern',
323351
showMore: 'Mehr anzeigen',
324352
clickToSelect: 'Klicken Sie, um auszuwählen',
353+
showMoreFilters: 'Mehr Filter anzeigen',
354+
hideMoreFilters: 'Weniger Filter anzeigen',
355+
noActiveFilters: 'Keine aktiven Filter',
325356
},
326357
detailsUrl: '/faelle/{id}',
327358
};
@@ -403,6 +434,19 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
403434
close: 'Zamknij filtry',
404435
removeFilters: 'Usuń filtry ({active})',
405436
items: [
437+
{
438+
__typename: 'FilterToggleGroup',
439+
id: 'status',
440+
label: 'Status',
441+
allowMultiple: true,
442+
isLeading: true,
443+
options: [
444+
{ label: 'Wszystko', value: 'ALL' },
445+
{ label: 'W rozpatrzeniu', value: 'OPEN' },
446+
{ label: 'Rozwiązane', value: 'CLOSED' },
447+
{ label: 'Nowa odpowiedź', value: 'IN_PROGRESS' },
448+
],
449+
},
406450
{
407451
__typename: 'FilterSelect',
408452
id: 'sort',
@@ -419,19 +463,6 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
419463
{ label: 'Aktualizacja malejąco', value: 'updatedAt_DESC' },
420464
],
421465
},
422-
{
423-
__typename: 'FilterToggleGroup',
424-
id: 'status',
425-
label: 'Status',
426-
allowMultiple: false,
427-
isLeading: true,
428-
options: [
429-
{ label: 'Wszystko', value: 'ALL' },
430-
{ label: 'W rozpatrzeniu', value: 'OPEN' },
431-
{ label: 'Rozwiązane', value: 'CLOSED' },
432-
{ label: 'Nowa odpowiedź', value: 'IN_PROGRESS' },
433-
],
434-
},
435466
{
436467
__typename: 'FilterSelect',
437468
id: 'topic',
@@ -453,13 +484,26 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
453484
__typename: 'FilterSelect',
454485
id: 'type',
455486
label: 'Typ zgłoszenia',
456-
allowMultiple: false,
487+
allowMultiple: true,
488+
isLeading: false,
457489
options: [
458490
{ label: 'Pilne', value: 'URGENT' },
459491
{ label: 'Standardowe', value: 'STANDARD' },
460492
{ label: 'Niski priorytet', value: 'LOW_PRIORITY' },
461493
],
462494
},
495+
{
496+
__typename: 'FilterSelect',
497+
id: 'priority',
498+
label: 'Priorytet',
499+
allowMultiple: false,
500+
isLeading: false,
501+
options: [
502+
{ label: 'Wysoki', value: 'HIGH' },
503+
{ label: 'Średni', value: 'MEDIUM' },
504+
{ label: 'Niski', value: 'LOW' },
505+
],
506+
},
463507
{
464508
__typename: 'FilterDateRange',
465509
id: 'updatedAt',
@@ -487,6 +531,9 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
487531
yesterday: 'Wczoraj',
488532
showMore: 'Pokaż więcej',
489533
clickToSelect: 'Kliknij, aby wybrać',
534+
showMoreFilters: 'Pokaż więcej filtrów',
535+
hideMoreFilters: 'Ukryj więcej filtrów',
536+
noActiveFilters: 'Brak aktywnych filtrów',
490537
},
491538
detailsUrl: '/zgloszenia/{id}',
492539
};

0 commit comments

Comments
 (0)