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
118
119
120
121
122
123
124
125
126
127
128
129
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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 { Button, IconButton, Size } from "browndash-components";
interface GroupMemberViewProps {
group: Doc;
onCloseButtonClick: () => void;
}
@observer
export class GroupMemberView extends React.Component<GroupMemberViewProps> {
@observable private memberSort: "ascending" | "descending" | "none" = "none";
private get editingInterface() {
let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
members = this.memberSort === "ascending" ? members.sort() : this.memberSort === "descending" ? members.sort().reverse() : members;
const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
return (!this.props.group ? null :
<div className="editing-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
<div className="editing-header">
<input
className="group-title"
style={{ marginLeft: !hasEditAccess ? "-14%" : 0 }}
value={StrCast(this.props.group.title || this.props.group.groupName)}
onChange={e => this.props.group.title = e.currentTarget.value}
disabled={!hasEditAccess}
>
</input>
<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.props.group) ?
<div className="group-buttons">
<div style={{border: StrCast(Doc.UserDoc().userColor)}} >
<Select
className="add-member-dropdown"
isSearchable={true}
options={options}
onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.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={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.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.props.group, member)}>
<IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
</div>
: null}
</div>
))}
</div>
</div>
);
}
render() {
return <MainViewModal
isDisplayed={true}
interactive={true}
contents={this.editingInterface}
dialogueBoxStyle={{ width: 400, height: 250 }}
closeOnExternalClick={this.props.onCloseButtonClick}
/>;
}
}
|
