1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, IconButton, Size, Type } from 'browndash-components';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import Select from 'react-select';
import { Doc } from '../../fields/Doc';
import { StrCast } from '../../fields/Types';
import { MainViewModal } from '../views/MainViewModal';
import { GroupManager, UserOptions } from './GroupManager';
import './GroupMemberView.scss';
import { SnappingManager } from './SnappingManager';
interface GroupMemberViewProps {
group: Doc;
onCloseButtonClick: () => void;
}
@observer
export class GroupMemberView extends React.Component<GroupMemberViewProps> {
@observable private memberSort: 'ascending' | 'descending' | 'none' = 'none';
get group() {
return this.props.group;
}
private get editingInterface() {
let members: string[] = this.group ? JSON.parse(StrCast(this.group.members)) : [];
members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members;
const options: UserOptions[] = this.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.group.members)) as string[]).includes(option.value)) : [];
const hasEditAccess = GroupManager.Instance.hasEditAccess(this.group);
return !this.group ? null : (
<div className="editing-interface" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}>
<div className="editing-header">
<input
className="group-title"
style={{ marginLeft: !hasEditAccess ? '-14%' : 0 }}
value={StrCast(this.group.title || this.group.groupName)}
onChange={e => {
this.group.title = e.currentTarget.value;
}}
disabled={!hasEditAccess}
/>
<div className="memberView-closeButton">
<Button icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={action(this.props.onCloseButtonClick)} color={StrCast(Doc.UserDoc().userColor)} />
</div>
{GroupManager.Instance.hasEditAccess(this.group) ? (
<div className="group-buttons">
<div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
<Select
className="add-member-dropdown"
isSearchable
options={options}
onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.group, (selectedOption as UserOptions).value)}
placeholder="Add members"
value={null}
styles={{
control: () => ({
display: 'inline-flex',
width: '100%',
}),
indicatorSeparator: () => ({
display: 'inline-flex',
visibility: 'hidden',
}),
indicatorsContainer: () => ({
display: 'inline-flex',
textDecorationColor: 'black',
}),
valueContainer: () => ({
display: 'inline-flex',
fontStyle: StrCast(Doc.UserDoc().userColor),
color: StrCast(Doc.UserDoc().userColor),
width: '100%',
}),
}}
/>
</div>
<div className="delete-button">
<Button text="Delete Group" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.group)} />
</div>
</div>
) : null}
<div
className="sort-emails"
style={{ paddingTop: hasEditAccess ? 0 : 35 }}
onClick={action(() => {
this.memberSort = this.memberSort === 'ascending' ? 'descending' : this.memberSort === 'descending' ? 'none' : 'ascending';
})}>
Emails {this.memberSort === 'ascending' ? '↑' : this.memberSort === 'descending' ? '↓' : ''} {/* → */}
</div>
</div>
<div className="style-divider" style={{ background: StrCast(Doc.UserDoc().userColor) }} />
<div className="editing-contents" style={{ height: hasEditAccess ? '62%' : '85%' }}>
{members.map(member => (
<div className="editing-row" key={member}>
<div className="user-email">{member}</div>
{hasEditAccess ? (
<div className="remove-button" onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)}>
<IconButton icon={<FontAwesomeIcon icon="trash-alt" />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)} />
</div>
) : null}
</div>
))}
</div>
</div>
);
}
render() {
return <MainViewModal isDisplayed interactive contents={this.editingInterface} dialogueBoxStyle={{ width: 400, height: 250 }} closeOnExternalClick={this.props.onCloseButtonClick} />;
}
}
|
