Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
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
8 changes: 8 additions & 0 deletions .changeset/dull-dancers-hide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@o2s/integrations.mocked': minor
'@o2s/blocks.ticket-list': minor
'@o2s/framework': minor
'@o2s/ui': minor
---

add inline filters variant with expandable sections
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export class TicketListBlock extends ApiModels.Block.Block {
labels!: {
showMore: string;
clickToSelect: string;
showMoreFilters?: string;
hideMoreFilters?: string;
noActiveFilters?: string;
};
initialFilters?: Partial<Tickets.Model.Ticket & { sort?: string }>;
meta?: CMS.Model.TicketListBlock.TicketListBlock['meta'];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@ export class GetTicketListBlockQuery
offset?: number;
limit?: number;
preview?: boolean;
search?: string;
priority?: string;
}
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
id: component.id,
offset: 0,
limit: component.pagination?.limit || 5,
search: '',
priority: '',
};

const initialData = component.tickets.data;
Expand Down Expand Up @@ -203,8 +205,12 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
initialValues={filters}
onSubmit={handleFilter}
onReset={handleReset}
variant="inline"
labels={{
clickToSelect: data.labels.clickToSelect,
showMoreFilters: data.labels.showMoreFilters,
hideMoreFilters: data.labels.hideMoreFilters,
noActiveFilters: data.labels.noActiveFilters,
}}
/>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ export class TicketListBlock extends Block.Block<Meta> {
table!: DataTable.DataTable<Ticket>;
fieldMapping!: Mapping.Mapping<Ticket>;
pagination?: Pagination.Pagination;
filters?: Filters.Filters<Ticket & { sort?: string; viewMode?: 'list' | 'grid' }>;
filters?: Filters.Filters<
Ticket & { sort?: string; viewMode?: 'list' | 'grid'; search?: string; priority?: string }
>;
noResults!: {
title: string;
description?: string;
Expand All @@ -19,6 +21,9 @@ export class TicketListBlock extends Block.Block<Meta> {
yesterday: string;
showMore: string;
clickToSelect: string;
showMoreFilters?: string;
hideMoreFilters?: string;
noActiveFilters?: string;
};
detailsUrl!: string;
forms?: Link[];
Expand All @@ -37,8 +42,6 @@ export class Meta {
subtitle!: string;
table!: DataTable.DataTableMeta;
fieldMapping!: Mapping.MappingMeta<Ticket>;
// pagination!: string;
// filters!: string;
noResults!: {
__id: string;
title: string;
Expand All @@ -50,7 +53,9 @@ export class Meta {
yesterday: string;
showMore: string;
clickToSelect: string;
showMoreFilters?: string;
hideMoreFilters?: string;
noActiveFilters?: string;
};
detailsUrl!: string;
// forms!: string;
}
2 changes: 2 additions & 0 deletions packages/framework/src/modules/tickets/tickets.request.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,7 @@ export class GetTicketListQuery extends PaginationQuery {
dateFrom?: Date;
dateTo?: Date;
sort?: string;
search?: string;
priority?: string;
locale?: string;
}
1 change: 1 addition & 0 deletions packages/framework/src/utils/models/filters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export class FilterSelect<T> extends Filter<T> {
export class FilterToggleGroup<T> extends Filter<T> {
__typename!: 'FilterToggleGroup';
allowMultiple!: boolean;
isLabelHidden?: boolean;
options!: {
value: string;
label: string;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,26 @@ const MOCK_TICKET_LIST_BLOCK_EN: CMS.Model.TicketListBlock.TicketListBlock = {
__typename: 'FilterSelect',
id: 'type',
label: 'Case type',
allowMultiple: false,
allowMultiple: true,
isLeading: false,
options: [
{ label: 'Urgent', value: 'URGENT' },
{ label: 'Standard', value: 'STANDARD' },
{ label: 'Low Priority', value: 'LOW_PRIORITY' },
],
},
{
__typename: 'FilterSelect',
id: 'priority',
label: 'Priority',
allowMultiple: false,
isLeading: false,
options: [
{ label: 'High', value: 'HIGH' },
{ label: 'Medium', value: 'MEDIUM' },
{ label: 'Low', value: 'LOW' },
],
},
{
__typename: 'FilterDateRange',
id: 'updatedAt',
Expand Down Expand Up @@ -158,6 +171,9 @@ const MOCK_TICKET_LIST_BLOCK_EN: CMS.Model.TicketListBlock.TicketListBlock = {
yesterday: 'Yesterday',
showMore: 'Show more',
clickToSelect: 'Click to select',
showMoreFilters: 'Show more filters',
hideMoreFilters: 'Hide more filters',
noActiveFilters: 'No active filters',
},
detailsUrl: '/cases/{id}',
};
Expand Down Expand Up @@ -237,12 +253,24 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
close: 'Filter schließen',
removeFilters: 'Filter entfernen ({active})',
items: [
{
__typename: 'FilterToggleGroup',
id: 'status',
label: 'Status',
allowMultiple: true,
isLeading: true,
options: [
{ label: 'Alle', value: 'ALL' },
{ label: 'In Bearbeitung', value: 'OPEN' },
{ label: 'Gelöst', value: 'CLOSED' },
{ label: 'Neue Antwort', value: 'IN_PROGRESS' },
],
},
{
__typename: 'FilterSelect',
id: 'sort',
label: 'Sortieren nach',
allowMultiple: false,
isLeading: true,
options: [
{ label: 'Thema aufsteigend', value: 'topic_ASC' },
{ label: 'Thema absteigend', value: 'topic_DESC' },
Expand All @@ -254,24 +282,11 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
{ label: 'Aktualisiert absteigend', value: 'updatedAt_DESC' },
],
},
{
__typename: 'FilterToggleGroup',
id: 'status',
label: 'Status',
allowMultiple: false,
isLeading: false,
options: [
{ label: 'Alle', value: 'ALL' },
{ label: 'In Bearbeitung', value: 'OPEN' },
{ label: 'Gelöst', value: 'CLOSED' },
{ label: 'Neue Antwort', value: 'IN_PROGRESS' },
],
},
{
__typename: 'FilterSelect',
id: 'topic',
label: 'Thema',
allowMultiple: true,
allowMultiple: false,
isLeading: false,
options: [
{ label: 'Alle', value: 'ALL' },
Expand All @@ -288,13 +303,26 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
__typename: 'FilterSelect',
id: 'type',
label: 'Falltyp',
allowMultiple: false,
allowMultiple: true,
isLeading: false,
options: [
{ label: 'Dringend', value: 'URGENT' },
{ label: 'Standard', value: 'STANDARD' },
{ label: 'Niedrige Priorität', value: 'LOW_PRIORITY' },
],
},
{
__typename: 'FilterSelect',
id: 'priority',
label: 'Priorität',
allowMultiple: false,
isLeading: false,
options: [
{ label: 'Hoch', value: 'HIGH' },
{ label: 'Mittel', value: 'MEDIUM' },
{ label: 'Niedrig', value: 'LOW' },
],
},
{
__typename: 'FilterDateRange',
id: 'updatedAt',
Expand Down Expand Up @@ -322,6 +350,9 @@ const MOCK_TICKET_LIST_BLOCK_DE: CMS.Model.TicketListBlock.TicketListBlock = {
yesterday: 'Gestern',
showMore: 'Mehr anzeigen',
clickToSelect: 'Klicken Sie, um auszuwählen',
showMoreFilters: 'Mehr Filter anzeigen',
hideMoreFilters: 'Weniger Filter anzeigen',
noActiveFilters: 'Keine aktiven Filter',
},
detailsUrl: '/faelle/{id}',
};
Expand Down Expand Up @@ -403,6 +434,19 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
close: 'Zamknij filtry',
removeFilters: 'Usuń filtry ({active})',
items: [
{
__typename: 'FilterToggleGroup',
id: 'status',
label: 'Status',
allowMultiple: true,
isLeading: true,
options: [
{ label: 'Wszystko', value: 'ALL' },
{ label: 'W rozpatrzeniu', value: 'OPEN' },
{ label: 'Rozwiązane', value: 'CLOSED' },
{ label: 'Nowa odpowiedź', value: 'IN_PROGRESS' },
],
},
{
__typename: 'FilterSelect',
id: 'sort',
Expand All @@ -419,19 +463,6 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
{ label: 'Aktualizacja malejąco', value: 'updatedAt_DESC' },
],
},
{
__typename: 'FilterToggleGroup',
id: 'status',
label: 'Status',
allowMultiple: false,
isLeading: true,
options: [
{ label: 'Wszystko', value: 'ALL' },
{ label: 'W rozpatrzeniu', value: 'OPEN' },
{ label: 'Rozwiązane', value: 'CLOSED' },
{ label: 'Nowa odpowiedź', value: 'IN_PROGRESS' },
],
},
{
__typename: 'FilterSelect',
id: 'topic',
Expand All @@ -453,13 +484,26 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
__typename: 'FilterSelect',
id: 'type',
label: 'Typ zgłoszenia',
allowMultiple: false,
allowMultiple: true,
isLeading: false,
options: [
{ label: 'Pilne', value: 'URGENT' },
{ label: 'Standardowe', value: 'STANDARD' },
{ label: 'Niski priorytet', value: 'LOW_PRIORITY' },
],
},
{
__typename: 'FilterSelect',
id: 'priority',
label: 'Priorytet',
allowMultiple: false,
isLeading: false,
options: [
{ label: 'Wysoki', value: 'HIGH' },
{ label: 'Średni', value: 'MEDIUM' },
{ label: 'Niski', value: 'LOW' },
],
},
{
__typename: 'FilterDateRange',
id: 'updatedAt',
Expand Down Expand Up @@ -487,6 +531,9 @@ const MOCK_TICKET_LIST_BLOCK_PL: CMS.Model.TicketListBlock.TicketListBlock = {
yesterday: 'Wczoraj',
showMore: 'Pokaż więcej',
clickToSelect: 'Kliknij, aby wybrać',
showMoreFilters: 'Pokaż więcej filtrów',
hideMoreFilters: 'Ukryj więcej filtrów',
noActiveFilters: 'Brak aktywnych filtrów',
},
detailsUrl: '/zgloszenia/{id}',
};
Expand Down
Loading
Loading