mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -05:00
Wired data to user detail modal in adminX
refs https://github.com/TryGhost/Team/issues/3151 - wires user data in the user detail modal from the api
This commit is contained in:
Rishabh
parent
88f3161903
commit
5c20aa08de
2 changed files with 64 additions and 34 deletions
|
|
@ -8,10 +8,11 @@ import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
|
|||
import TabView from '../../../admin-x-ds/global/TabView';
|
||||
import UserDetailModal from './modals/UserDetailModal';
|
||||
import useStaffUsers from '../../../hooks/useStaffUsers';
|
||||
import {User} from '../../../types/api';
|
||||
|
||||
const Owner: React.FC<any> = ({user}) => {
|
||||
const Owner: React.FC<{user: User}> = ({user}) => {
|
||||
const showDetailModal = () => {
|
||||
NiceModal.show(UserDetailModal);
|
||||
NiceModal.show(UserDetailModal, {user});
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
|
|
@ -25,9 +26,13 @@ const Owner: React.FC<any> = ({user}) => {
|
|||
);
|
||||
};
|
||||
|
||||
const UsersList: React.FC<any> = ({users}) => {
|
||||
const showDetailModal = () => {
|
||||
NiceModal.show(UserDetailModal);
|
||||
interface UsersListProps {
|
||||
users: User[];
|
||||
}
|
||||
|
||||
const UsersList: React.FC<UsersListProps> = ({users}) => {
|
||||
const showDetailModal = (user: User) => {
|
||||
NiceModal.show(UserDetailModal, {user});
|
||||
};
|
||||
|
||||
if (!users || !users.length) {
|
||||
|
|
@ -40,16 +45,16 @@ const UsersList: React.FC<any> = ({users}) => {
|
|||
|
||||
return (
|
||||
<List>
|
||||
{users.map((user: any) => {
|
||||
{users.map((user) => {
|
||||
return (
|
||||
<ListItem
|
||||
key={user.id}
|
||||
action={<Button color='green' label='Edit' link={true} onClick={showDetailModal} />}
|
||||
action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>}
|
||||
detail={user.email}
|
||||
hideActions={true}
|
||||
id={`list-item-${user.id}`}
|
||||
title={user.name}
|
||||
onClick={showDetailModal} />
|
||||
onClick={() => showDetailModal(user)} />
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -8,31 +8,35 @@ import SettingGroup from '../../../../admin-x-ds/settings/SettingGroup';
|
|||
import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
|
||||
import TextField from '../../../../admin-x-ds/global/TextField';
|
||||
import Toggle from '../../../../admin-x-ds/global/Toggle';
|
||||
import {User} from '../../../../types/api';
|
||||
|
||||
interface CustomHeadingProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface UserDetailProps {
|
||||
user: User;
|
||||
}
|
||||
|
||||
const CustomHeader: React.FC<CustomHeadingProps> = ({children}) => {
|
||||
return (
|
||||
<Heading level={4} separator={true}>{children}</Heading>
|
||||
);
|
||||
};
|
||||
|
||||
const Basic: React.FC = () => {
|
||||
const inputs = (
|
||||
const BasicInputs: React.FC<UserDetailProps> = ({user}) => {
|
||||
return (
|
||||
<SettingGroupContent>
|
||||
<TextField
|
||||
hint="Use real name so people can recognize you"
|
||||
title="Full name"
|
||||
value="Martin Culhane"
|
||||
value={user.name}
|
||||
/>
|
||||
<TextField
|
||||
title="Email"
|
||||
value="martin@culhane.com"
|
||||
value={user.email}
|
||||
/>
|
||||
<Radio
|
||||
defaultSelectedOption="administrator"
|
||||
defaultSelectedOption={user.roles[0].name.toLowerCase()}
|
||||
id='role'
|
||||
options={[
|
||||
{
|
||||
|
|
@ -61,83 +65,98 @@ const Basic: React.FC = () => {
|
|||
/>
|
||||
</SettingGroupContent>
|
||||
);
|
||||
};
|
||||
|
||||
const Basic: React.FC<UserDetailProps> = ({user}) => {
|
||||
return (
|
||||
<SettingGroup
|
||||
<SettingGroup
|
||||
border={false}
|
||||
customHeader={<CustomHeader>Basic info</CustomHeader>}
|
||||
title='Basic'
|
||||
>
|
||||
{inputs}
|
||||
<BasicInputs user={user} />
|
||||
</SettingGroup>
|
||||
);
|
||||
};
|
||||
|
||||
const Details: React.FC = () => {
|
||||
const inputs = (
|
||||
const DetailsInputs: React.FC<UserDetailProps> = ({user}) => {
|
||||
return (
|
||||
<SettingGroupContent>
|
||||
<TextField
|
||||
hint="https://example.com/author"
|
||||
title="Slug"
|
||||
value={user.slug}
|
||||
/>
|
||||
<TextField
|
||||
title="Location"
|
||||
value={user.location}
|
||||
/>
|
||||
<TextField
|
||||
title="Website"
|
||||
value={user.website}
|
||||
/>
|
||||
<TextField
|
||||
title="Facebook profile"
|
||||
value={user.facebook}
|
||||
/>
|
||||
<TextField
|
||||
title="Twitter profile"
|
||||
value={user.twitter}
|
||||
/>
|
||||
<TextField
|
||||
hint="Recommended: 200 characters."
|
||||
title="Bio"
|
||||
value={user.bio}
|
||||
/>
|
||||
</SettingGroupContent>
|
||||
);
|
||||
};
|
||||
|
||||
const Details: React.FC<UserDetailProps> = ({user}) => {
|
||||
return (
|
||||
<SettingGroup
|
||||
<SettingGroup
|
||||
border={false}
|
||||
customHeader={<CustomHeader>Details</CustomHeader>}
|
||||
title='Details'
|
||||
>
|
||||
{inputs}
|
||||
<DetailsInputs user={user} />
|
||||
</SettingGroup>
|
||||
);
|
||||
};
|
||||
|
||||
const EmailNotifications: React.FC = () => {
|
||||
const inputs = (
|
||||
const EmailNotificationsInputs: React.FC<UserDetailProps> = ({user}) => {
|
||||
return (
|
||||
<SettingGroupContent>
|
||||
<Toggle
|
||||
checked={user.comment_notifications}
|
||||
direction='rtl'
|
||||
hint='Every time a member comments on one of your posts'
|
||||
id='comments'
|
||||
label='Comments'
|
||||
/>
|
||||
<Toggle
|
||||
checked={user.free_member_signup_notification}
|
||||
direction='rtl'
|
||||
hint='Every time a new free member signs up'
|
||||
id='new-signups'
|
||||
label='New signups'
|
||||
/>
|
||||
<Toggle
|
||||
checked={user.paid_subscription_started_notification}
|
||||
direction='rtl'
|
||||
hint='Every time a member starts a new paid subscription'
|
||||
id='new-paid-members'
|
||||
label='New paid members'
|
||||
/>
|
||||
<Toggle
|
||||
checked={user.paid_subscription_canceled_notification}
|
||||
direction='rtl'
|
||||
hint='Every time a member cancels their paid subscription'
|
||||
id='paid-member-cancellations'
|
||||
label='Paid member cancellations'
|
||||
/>
|
||||
<Toggle
|
||||
checked={user.milestone_notifications}
|
||||
direction='rtl'
|
||||
hint='Occasional summaries of your audience & revenue growth'
|
||||
id='milestones'
|
||||
|
|
@ -145,14 +164,16 @@ const EmailNotifications: React.FC = () => {
|
|||
/>
|
||||
</SettingGroupContent>
|
||||
);
|
||||
};
|
||||
|
||||
const EmailNotifications: React.FC<UserDetailProps> = ({user}) => {
|
||||
return (
|
||||
<SettingGroup
|
||||
<SettingGroup
|
||||
border={false}
|
||||
customHeader={<CustomHeader>Email notifications</CustomHeader>}
|
||||
title='Email notifications'
|
||||
>
|
||||
{inputs}
|
||||
<EmailNotificationsInputs user={user} />
|
||||
</SettingGroup>
|
||||
);
|
||||
};
|
||||
|
|
@ -165,7 +186,7 @@ const Password: React.FC = () => {
|
|||
};
|
||||
|
||||
const view = (
|
||||
<Button
|
||||
<Button
|
||||
color='grey'
|
||||
label='Change password'
|
||||
onClick={showPasswordInputs}
|
||||
|
|
@ -198,32 +219,36 @@ const Password: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const UserDetailModal = NiceModal.create(() => {
|
||||
interface UserDetailModalProps {
|
||||
user: User;
|
||||
}
|
||||
|
||||
const UserDetailModal:React.FC<UserDetailModalProps> = ({user}) => {
|
||||
return (
|
||||
<Modal
|
||||
<Modal
|
||||
okColor='green'
|
||||
okLabel='Save'
|
||||
size='xl'
|
||||
onOk={() => {
|
||||
alert('Clicked OK');
|
||||
alert('Clicked OK');
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12 text-white'>
|
||||
<div className='mt-60'>
|
||||
<Heading styles='text-white'>Martin Culhane</Heading>
|
||||
<Heading styles='text-white'>{user.name}</Heading>
|
||||
<span className='text-md font-semibold'>Administrator</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-10 grid grid-cols-2 gap-x-12 gap-y-20 pb-10'>
|
||||
<Basic />
|
||||
<Details />
|
||||
<EmailNotifications />
|
||||
<Basic user={user} />
|
||||
<Details user={user} />
|
||||
<EmailNotifications user={user} />
|
||||
<Password />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
export default UserDetailModal;
|
||||
export default NiceModal.create(UserDetailModal);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue