Merge pull request #196 from brown-dash/james-azure-image

Azure Image Upload

2 files changed, 52 insertions, 82 deletions

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 5802d5ee0..e406d89e7 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -15,7 +15,7 @@ import { SharingManager, User } from './SharingManager';
 import { listSpec } from '../../fields/Schema';
 import { DateField } from '../../fields/DateField';
 import { Id } from '../../fields/FieldSymbols';
-import { Button, IconButton, Size } from 'browndash-components';
+import { Button, IconButton, Size, Type } from 'browndash-components';
 
 /**
  * Interface for options for the react-select component
@@ -281,7 +281,7 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+            <div className="group-create" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
@@ -297,10 +297,10 @@ export class GroupManager extends React.Component<{}> {
                         />
                     </div>
                 </div>
-                <div className="group-input" style={{border: StrCast(Doc.UserDoc().userColor)}} >
+                <div className="group-input" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                     <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
                 </div>
-                <div style={{border: StrCast(Doc.UserDoc().userColor)}}>
+                <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                     <Select
                         className="select-users"
                         isMulti
@@ -331,8 +331,8 @@ export class GroupManager extends React.Component<{}> {
                         }}
                     />
                 </div>
-                <div className={"create-button"}>
-                    <Button text={"Create"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                <div className={'create-button'}>
+                    <Button text={'Create'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
                 </div>
             </div>
         );
@@ -366,29 +366,25 @@ export class GroupManager extends React.Component<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+            <div className="group-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                 {this.groupCreationModal}
                 {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
                 <div className="group-heading">
                     <p>
                         <b>Manage Groups</b>
                     </p>
-                    <Button icon={<FontAwesomeIcon icon={'plus'}/>} iconPlacement={'left'} text={"Create Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
-                    <div className={'close-button'} >
-                        <Button
-                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
-                            onClick={this.close}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                    <Button icon={<FontAwesomeIcon icon={'plus'} />} iconPlacement={'left'} text={'Create Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
+                    <div className={'close-button'}>
+                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
                 </div>
                 <div className="main-container">
                     <div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
                         Name
-                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
+                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
-                    <div className="group-body" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                    <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                    <div className="group-body" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                         {groups.map(group => (
                             <div className="group-row" key={StrCast(group.title || group.groupName)}>
                                 <div className="group-name">{StrCast(group.title || group.groupName)}</div>
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index f2050dc61..057f94f64 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -1,14 +1,14 @@
-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";
+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, Type } from 'browndash-components';
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -17,44 +17,37 @@ interface GroupMemberViewProps {
 
 @observer
 export class GroupMemberView extends React.Component<GroupMemberViewProps> {
-
-    @observable private memberSort: "ascending" | "descending" | "none" = "none";
+    @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;
+        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)}}>
+        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 }}
+                        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)}
-                        />
+                        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) ?
+                    {GroupManager.Instance.hasEditAccess(this.props.group) ? (
                         <div className="group-buttons">
-                            <div style={{border: StrCast(Doc.UserDoc().userColor)}} >
-                                <Select 
+                            <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"}
+                                    placeholder={'Add members'}
                                     value={null}
                                     styles={{
                                         control: () => ({
@@ -78,52 +71,33 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                                     }}
                                 />
                             </div>
-                            <div className={"delete-button"}>
-                                <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            <div className={'delete-button'}>
+                                <Button text={'Delete Group'} type={Type.TERT} 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>
+                    ) : 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%" }}
-                >
+                <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)}>
+                        <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}
+                            ) : null}
                         </div>
                     ))}
                 </div>
             </div>
         );
-
     }
 
     render() {
-        return <MainViewModal
-            isDisplayed={true}
-            interactive={true}
-            contents={this.editingInterface}
-            dialogueBoxStyle={{ width: 400, height: 250 }}
-            closeOnExternalClick={this.props.onCloseButtonClick}
-        />;
+        return <MainViewModal isDisplayed={true} interactive={true} contents={this.editingInterface} dialogueBoxStyle={{ width: 400, height: 250 }} closeOnExternalClick={this.props.onCloseButtonClick} />;
     }
-
-
-}
\ No newline at end of file
+}