//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
-import { Autocomplete } from '~/components/autocomplete/autocomplete';
+import React from 'react';
+import { Autocomplete } from 'components/autocomplete/autocomplete';
import { connect, DispatchProp } from 'react-redux';
-import { ServiceRepository } from '~/services/services';
+import { ServiceRepository } from 'services/services';
import { FilterBuilder } from '../../services/api/filter-builder';
import { debounce } from 'debounce';
import { ListItemText, Typography } from '@material-ui/core';
import { noop } from 'lodash/fp';
-import { GroupClass, GroupResource } from '~/models/group';
-import { getUserDisplayName, UserResource } from '~/models/user';
-import { ResourceKind } from '~/models/resource';
-import { ListResults } from '~/services/common-service/common-service';
+import { GroupClass, GroupResource } from 'models/group';
+import { getUserDetailsString, getUserDisplayName, UserResource } from 'models/user';
+import { Resource, ResourceKind } from 'models/resource';
+import { ListResults } from 'services/common-service/common-service';
export interface Participant {
name: string;
+ tooltip: string;
uuid: string;
}
-type ParticipantResource = GroupResource & UserResource;
+type ParticipantResource = GroupResource | UserResource;
interface ParticipantSelectProps {
items: Participant[];
+ excludedParticipants?: string[];
label?: string;
autofocus?: boolean;
onlyPeople?: boolean;
+ onlyActive?: boolean;
+ disabled?: boolean;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
suggestions: ParticipantResource[];
}
-const getDisplayName = (item: GroupResource & UserResource) => {
+const getDisplayName = (item: GroupResource | UserResource, detailed: boolean) => {
switch (item.kind) {
case ResourceKind.USER:
- return getUserDisplayName(item, true);
+ return getUserDisplayName(item, detailed, detailed);
case ResourceKind.GROUP:
- return item.name;
+ return item.name + `(${`(${(item as Resource).uuid})`})`;
default:
- return item.uuid;
+ return (item as Resource).uuid;
+ }
+};
+
+const getDisplayTooltip = (item: GroupResource | UserResource) => {
+ switch (item.kind) {
+ case ResourceKind.USER:
+ return getUserDetailsString(item);
+ case ResourceKind.GROUP:
+ return item.name + `(${`(${(item as Resource).uuid})`})`;
+ default:
+ return (item as Resource).uuid;
}
};
onChange={this.handleChange}
onCreate={this.handleCreate}
onSelect={this.handleSelect}
- onDelete={this.handleDelete}
+ onDelete={this.props.onDelete && !this.props.disabled ? this.handleDelete : undefined}
onFocus={this.props.onFocus}
- onBlur={this.props.onBlur}
+ onBlur={this.onBlur}
renderChipValue={this.renderChipValue}
- renderSuggestion={this.renderSuggestion} />
+ renderChipTooltip={this.renderChipTooltip}
+ renderSuggestion={this.renderSuggestion}
+ disabled={this.props.disabled}/>
);
}
+ onBlur = (e) => {
+ if (this.props.onBlur) {
+ this.props.onBlur(e);
+ }
+ setTimeout(() => this.setState({ value: '', suggestions: [] }), 200);
+ }
+
renderChipValue(chipValue: Participant) {
const { name, uuid } = chipValue;
return name || uuid;
}
+ renderChipTooltip(item: Participant) {
+ return item.tooltip;
+ }
+
renderSuggestion(item: ParticipantResource) {
return (
<ListItemText>
- <Typography noWrap>{getDisplayName(item)}</Typography>
+ <Typography noWrap>{getDisplayName(item, true)}</Typography>
</ListItemText>
);
}
this.setState({ value: '', suggestions: [] });
onCreate({
name: '',
+ tooltip: '',
uuid: this.state.value,
});
}
const { onSelect = noop } = this.props;
this.setState({ value: '', suggestions: [] });
onSelect({
- name: getDisplayName(selection),
+ name: getDisplayName(selection, false),
+ tooltip: getDisplayTooltip(selection),
uuid,
});
}
const filterUsers = new FilterBuilder()
.addILike('any', value)
+ .addEqual('is_active', this.props.onlyActive || undefined)
+ .addNotIn('uuid', this.props.excludedParticipants)
.getFilters();
const userItems: ListResults<any> = await userService.list({ filters: filterUsers, limit, count: "none" });
const filterGroups = new FilterBuilder()
- .addNotIn('group_class', [GroupClass.PROJECT])
+ .addNotIn('group_class', [GroupClass.PROJECT, GroupClass.FILTER])
+ .addNotIn('uuid', this.props.excludedParticipants)
.addILike('name', value)
.getFilters();