Skip to content

Instantly share code, notes, and snippets.

@raffaele-abramini
Last active March 23, 2020 15:08
Show Gist options
  • Save raffaele-abramini/51e945c315e11a3fa063a19d9aaad8b9 to your computer and use it in GitHub Desktop.
Save raffaele-abramini/51e945c315e11a3fa063a19d9aaad8b9 to your computer and use it in GitHub Desktop.
Add a Multiple Checkbox Groups filter
import * as React from 'react'
import * as Flex from '@twilio/flex-ui'
const Title = Flex.styled('h2')`
color: ${p => p.theme.calculated.textColor};
padding: ${p => p.first ? '0' : '12px'} 16px 8px;
font-weight: bold;
`
const MultipleCheckboxGroups = ({ handleChange, currentValue, fieldName, options }) => {
// ⬇️ Creating two subsets of options
const optionsSubsets = [
{
label: 'Online',
// only online statuses
options: options.filter(options => options.custom.online),
},
{
label: 'Offline',
// only offline statuses
options: options.filter(options => !options.custom.online),
},
]
return (
<div>
{
// ⬇️ Creating two sets of checkboxes
optionsSubsets.map((set, i) => (
<div key={set.label}>
<Title first={!i}>{set.label}</Title>
<Flex.CheckboxGroup
field={{
options: set.options,
attributes: { name: fieldName },
}}
handleChange={handleChange}
error={null}
stateData={currentValue || []}
touched={false}
/>
</div>
))
}
</div>
)
}
const groupedStatusesFilter = (appState) => {
const activitiesArray = Array.from(appState.worker.activities.values())
const activities = activitiesArray.map((activity) => {
return {
value: activity.name,
label: activity.name,
default: false,
// ⬇️ Passing custom payload to options
custom: {
online: activity.available,
},
}
})
return {
customStructure: {
field: <MultipleCheckboxGroups/>,
label: <React.Fragment/>,
},
id: 'data.activity_name',
fieldName: 'activity_name',
type: Flex.FiltersListItemType.multiValue,
title: 'Status',
options: activities,
}
}
export const activateFilter = () => {
Flex.TeamsView.defaultProps.filters = [
groupedStatusesFilter,
]
}
// Run `activateFilter` method in main file
import * as React from "react";
import * as Flex from "@twilio/flex-ui";
interface TitleInterface {
first: boolean;
}
const Title = Flex.styled("h2")<TitleInterface>`
color: ${p => p.theme.calculated.textColor};
padding: ${p => p.first ? '0' : '12px' } 16px 8px;
font-weight: bold;
`;
const MultipleCheckboxGroups: React.FC<any> = ({handleChange, currentValue, fieldName, options}) => {
// ⬇️ Creating two subsets of options
const optionsSubsets = [
{
label: "Online",
// only online statuses
options: options.filter(options => options.custom.online)
},
{
label: "Offline",
// only offline statuses
options: options.filter(options => !options.custom.online)
},
];
return <div>{
// ⬇️ Creating two sets of checkboxes
optionsSubsets.map((set, i) => (
<div key={set.label}>
<Title first={!i}>{set.label}</Title>
<Flex.CheckboxGroup
field={{
options: set.options,
attributes: {name: fieldName}
}}
handleChange={handleChange}
error={null}
stateData={currentValue || []}
touched={false}
/>
</div>
))
}</div>;
};
const groupedStatusesFilter = (appState: Flex.AppState): Flex.FilterDefinition => {
const activitiesArray = Array.from(appState.worker.activities.values());
const activities = activitiesArray.map((activity: any) => {
return {
value: activity.name,
label: activity.name,
default: false,
// ⬇️ Passing custom payload to options
custom: {
online: activity.available
}
};
});
return {
customStructure: {
field: <MultipleCheckboxGroups/>,
label: <React.Fragment />,
},
id: "data.activity_name",
fieldName: "activity_name",
type: Flex.FiltersListItemType.multiValue,
title: "Status",
options: activities
} as Flex.FilterDefinition;
};
export const activateFilter = () => {
Flex.TeamsView.defaultProps.filters = [
groupedStatusesFilter,
];
};
// Run `activateFilter` method in main file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment