import * as React from 'react';
import { Autocomplete } from '~/components/autocomplete/autocomplete';
-import { UserResource, User } from '~/models/user';
import { connect, DispatchProp } from 'react-redux';
import { ServiceRepository } from '~/services/services';
import { FilterBuilder } from '../../services/api/filter-builder';
import { debounce } from 'debounce';
-import { ListItemText } from '@material-ui/core';
+import { ListItemText, Typography } from '@material-ui/core';
+import { noop } from 'lodash/fp';
+import { GroupClass } from '~/models/group';
+
+export interface Person {
+ name: string;
+ email: string;
+ uuid: string;
+}
export interface PeopleSelectProps {
+ items: Person[];
+ label?: string;
+ autofocus?: boolean;
+ onlyPeople?: boolean;
+
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+ onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+ onCreate?: (person: Person) => void;
+ onDelete?: (index: number) => void;
+ onSelect?: (person: Person) => void;
+
}
export interface PeopleSelectState {
value: string;
- items: UserResource[];
- suggestions: UserResource[];
+ suggestions: any[];
}
export const PeopleSelect = connect()(
state: PeopleSelectState = {
value: '',
- items: [],
suggestions: []
};
render() {
+ const { label = 'Share' } = this.props;
+
return (
<Autocomplete
- label='Invite people'
+ label={label}
value={this.state.value}
- items={this.state.items}
+ items={this.props.items}
suggestions={this.state.suggestions}
+ autofocus={this.props.autofocus}
onChange={this.handleChange}
+ onCreate={this.handleCreate}
onSelect={this.handleSelect}
+ onDelete={this.handleDelete}
+ onFocus={this.props.onFocus}
+ onBlur={this.props.onBlur}
renderChipValue={this.renderChipValue}
renderSuggestion={this.renderSuggestion} />
);
}
- renderChipValue({ firstName, lastName }: UserResource) {
- return `${firstName} ${lastName}`;
+ renderChipValue({ name, uuid }: Person) {
+ return name ? name : uuid;
}
- renderSuggestion({ firstName, lastName, email }: UserResource) {
+ renderSuggestion({ firstName, lastName, email, name }: any) {
return (
<ListItemText>
- {`${firstName} ${lastName} <<${email}>>`}
+ {name ?
+ <Typography noWrap>{name}</Typography> :
+ <Typography noWrap>{`${firstName} ${lastName} <<${email}>>`}</Typography>}
</ListItemText>
);
}
- handleSelect = (user: UserResource) => {
- const { items } = this.state;
- this.setState({ items: [...items, user], suggestions: [], value: '' });
+ handleDelete = (_: Person, index: number) => {
+ const { onDelete = noop } = this.props;
+ onDelete(index);
+ }
+
+ handleCreate = () => {
+ const { onCreate } = this.props;
+ if (onCreate) {
+ this.setState({ value: '', suggestions: [] });
+ onCreate({
+ email: '',
+ name: '',
+ uuid: this.state.value,
+ });
+ }
+ }
+
+ handleSelect = ({ email, firstName, lastName, uuid, name }: any) => {
+ const { onSelect = noop } = this.props;
+ this.setState({ value: '', suggestions: [] });
+ onSelect({
+ email,
+ name: `${name ? name : `${firstName} ${lastName}`}`,
+ uuid,
+ });
}
handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
getSuggestions = debounce(() => this.props.dispatch<any>(this.requestSuggestions), 500);
- requestSuggestions = async (_: void, __: void, { userService }: ServiceRepository) => {
+ requestSuggestions = async (_: void, __: void, { userService, groupsService }: ServiceRepository) => {
const { value } = this.state;
- const filters = new FilterBuilder()
+ const filterGroups = new FilterBuilder()
+ .addNotIn('groupClass', [GroupClass.PROJECT])
+ .addILike('name', value)
+ .getFilters();
+ const groupItems = await groupsService.list({ filters: filterGroups, limit: 5 });
+ const filterUsers = new FilterBuilder()
.addILike('email', value)
.getFilters();
- const { items } = await userService.list();
- // const { items } = await userService.list({ filters, limit: 5 });
- this.setState({ suggestions: items });
+ const userItems: any = await userService.list({ filters: filterUsers, limit: 5 });
+ const items = groupItems.items.concat(userItems.items);
+ this.setState({ suggestions: this.props.onlyPeople ? userItems.items : items });
}
-
});