diff --git a/src/components/UsersComponents/AllUsersTable.tsx b/src/components/UsersComponents/AllUsersTable.tsx index 641ff2336..7a4b05c48 100644 --- a/src/components/UsersComponents/AllUsersTable.tsx +++ b/src/components/UsersComponents/AllUsersTable.tsx @@ -112,7 +112,7 @@ class AllUsersTable extends React.Component { formatLastAction = (user: Types.User) => { if (!user.lastAction) return 'Never' const date = user.lastAction.toLocaleString([], { dateStyle: 'short', timeStyle: 'short' }) - return user.lastActionType ? `${date} (${user.lastActionType})` : date + return user.lastActionType ? `${user.lastActionType} - ${date}` : date } handleExport = () => { diff --git a/src/views/protected/UsersViews/UsersPage.tsx b/src/views/protected/UsersViews/UsersPage.tsx index df0dfd56f..0b8589b7a 100644 --- a/src/views/protected/UsersViews/UsersPage.tsx +++ b/src/views/protected/UsersViews/UsersPage.tsx @@ -3,6 +3,7 @@ import * as PropTypes from "prop-types"; import { withStyles } from "@material-ui/core/styles"; import AppBar from "../../../components/AppBar"; import Grid from "@material-ui/core/Grid"; +import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Typography } from "@material-ui/core"; import FirebaseContext from "../../../components/Firebase/FirebaseContext"; import { coachLoaded, Role } from '../../../state/actions/coach' import { connect } from 'react-redux'; @@ -112,6 +113,12 @@ interface State { sendToSites: Array allUsers: Types.User[] allUsersLoading: boolean + editDialogOpen: boolean + archiveDialogOpen: boolean + selectedUser: Types.User | null + editFirstName: string + editLastName: string + editEmail: string } function checkCurrent(item: string) { @@ -142,7 +149,13 @@ class UsersPage extends React.Component { propFilter: [], sendToSites: [], allUsers: [], - allUsersLoading: true + allUsersLoading: true, + editDialogOpen: false, + archiveDialogOpen: false, + selectedUser: null, + editFirstName: '', + editLastName: '', + editEmail: '' } } @@ -569,17 +582,53 @@ class UsersPage extends React.Component { } handleAllUserClick = (user: Types.User) => { - // Could open edit dialog - for now just log - console.log('User clicked:', user) + this.setState({ + selectedUser: user, + editFirstName: user.firstName, + editLastName: user.lastName, + editEmail: user.email || '', + editDialogOpen: true + }) + } + + handleEditSave = async () => { + const { selectedUser, editFirstName, editLastName, editEmail } = this.state + if (!selectedUser || !editFirstName.trim() || !editLastName.trim()) { + alert('Name is required') + return + } + + await this.context.editUserName(selectedUser.id, editFirstName, editLastName, editEmail, selectedUser.role) + this.setState(s => ({ + allUsers: s.allUsers.map(u => u.id === selectedUser.id + ? { ...u, firstName: editFirstName, lastName: editLastName, email: editEmail } + : u + ), + editDialogOpen: false, + selectedUser: null + })) } - handleAllUserArchive = async (user: Types.User) => { - await this.context.db.collection('users').doc(user.id).update({ archived: !user.archived }) + handleArchiveFromEdit = () => { + this.setState({ editDialogOpen: false, archiveDialogOpen: true }) + } + + handleArchiveConfirm = async () => { + const { selectedUser } = this.state + if (!selectedUser) return + + await this.context.db.collection('users').doc(selectedUser.id).update({ archived: !selectedUser.archived }) this.setState(s => ({ - allUsers: s.allUsers.map(u => u.id === user.id ? { ...u, archived: !user.archived } : u) + allUsers: s.allUsers.map(u => u.id === selectedUser.id ? { ...u, archived: !selectedUser.archived } : u), + archiveDialogOpen: false, + selectedUser: null })) } + handleAllUserArchive = (user: Types.User) => { + this.setState({ selectedUser: user, archiveDialogOpen: true }) + } + static propTypes = { classes: PropTypes.exact({ root: PropTypes.string, @@ -735,6 +784,73 @@ class UsersPage extends React.Component { + + {/* Edit User Dialog */} + this.setState({ editDialogOpen: false })} maxWidth="sm" fullWidth> + Edit User + + + + this.setState({ editFirstName: e.target.value })} + /> + + + this.setState({ editLastName: e.target.value })} + /> + + + this.setState({ editEmail: e.target.value })} + /> + + + + + +
+ + + +
+ + {/* Archive Confirmation Dialog */} + this.setState({ archiveDialogOpen: false })}> + {this.state.selectedUser?.archived ? 'Unarchive' : 'Archive'} User + + + Are you sure you want to {this.state.selectedUser?.archived ? 'unarchive' : 'archive'} {this.state.selectedUser?.firstName} {this.state.selectedUser?.lastName}? + + + + + + + ); }