change(ui) - site dropdown form
This commit is contained in:
Shekar Siri
parent
57435e43f9
commit
762d0fad53
2 changed files with 96 additions and 91 deletions
|
|
@ -3,26 +3,35 @@ import { Icon } from 'UI';
|
|||
import cn from 'classnames';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { useObserver } from 'mobx-react-lite';
|
||||
|
||||
function NewProjectButton({ onClick, isAdmin = false }: any) {
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import NewSiteForm from 'App/components/Client/Sites/NewSiteForm';
|
||||
import { init } from 'Duck/site';
|
||||
import { connect } from 'react-redux';
|
||||
interface Props {
|
||||
isAdmin?: boolean;
|
||||
init?: (data: any) => void;
|
||||
}
|
||||
function NewProjectButton(props: Props) {
|
||||
const { isAdmin = false } = props;
|
||||
const { userStore } = useStore();
|
||||
const limtis = useObserver(() => userStore.limits);
|
||||
const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
|
||||
const { showModal, hideModal } = useModal();
|
||||
|
||||
const onClick = () => {
|
||||
props.init({});
|
||||
showModal(<NewSiteForm onClose={hideModal} />, { right: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { 'disabled' : !canAddProject })}
|
||||
className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { disabled: !canAddProject })}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon
|
||||
name="plus"
|
||||
size={12}
|
||||
className="mr-2"
|
||||
color="teal"
|
||||
/>
|
||||
>
|
||||
<Icon name="plus" size={12} className="mr-2" color="teal" />
|
||||
<span className="color-teal">Add New Project</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewProjectButton;
|
||||
export default connect(null, { init })(NewProjectButton);
|
||||
|
|
|
|||
|
|
@ -2,104 +2,100 @@ import React from 'react';
|
|||
import { connect } from 'react-redux';
|
||||
import { setSiteId } from 'Duck/site';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { hasSiteId, siteChangeAvaliable, isRoute } from 'App/routes';
|
||||
import { hasSiteId, siteChangeAvaliable } from 'App/routes';
|
||||
import { STATUS_COLOR_MAP, GREEN } from 'Types/site';
|
||||
import { Icon, SlideModal } from 'UI';
|
||||
import { pushNewSite } from 'Duck/user'
|
||||
import { Icon } from 'UI';
|
||||
import { pushNewSite } from 'Duck/user';
|
||||
import { init } from 'Duck/site';
|
||||
import styles from './siteDropdown.module.css';
|
||||
import cn from 'classnames';
|
||||
import NewSiteForm from '../Client/Sites/NewSiteForm';
|
||||
import { clearSearch } from 'Duck/search';
|
||||
import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
|
||||
import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
|
||||
import { withStore } from 'App/mstore'
|
||||
import { withStore } from 'App/mstore';
|
||||
import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
|
||||
import NewProjectButton from './NewProjectButton';
|
||||
|
||||
@withStore
|
||||
@withRouter
|
||||
@connect(state => ({
|
||||
sites: state.getIn([ 'site', 'list' ]),
|
||||
siteId: state.getIn([ 'site', 'siteId' ]),
|
||||
account: state.getIn([ 'user', 'account' ]),
|
||||
}), {
|
||||
setSiteId,
|
||||
pushNewSite,
|
||||
init,
|
||||
clearSearch,
|
||||
clearSearchLive,
|
||||
fetchIntegrationVariables,
|
||||
})
|
||||
@connect(
|
||||
(state) => ({
|
||||
sites: state.getIn(['site', 'list']),
|
||||
siteId: state.getIn(['site', 'siteId']),
|
||||
account: state.getIn(['user', 'account']),
|
||||
}),
|
||||
{
|
||||
setSiteId,
|
||||
pushNewSite,
|
||||
init,
|
||||
clearSearch,
|
||||
clearSearchLive,
|
||||
fetchIntegrationVariables,
|
||||
}
|
||||
)
|
||||
export default class SiteDropdown extends React.PureComponent {
|
||||
state = { showProductModal: false }
|
||||
state = { showProductModal: false };
|
||||
|
||||
closeModal = (e, newSite) => {
|
||||
this.setState({ showProductModal: false })
|
||||
};
|
||||
closeModal = (e, newSite) => {
|
||||
this.setState({ showProductModal: false });
|
||||
};
|
||||
|
||||
newSite = () => {
|
||||
this.props.init({})
|
||||
this.setState({showProductModal: true})
|
||||
}
|
||||
newSite = () => {
|
||||
this.props.init({});
|
||||
this.setState({ showProductModal: true });
|
||||
};
|
||||
|
||||
switchSite = (siteId) => {
|
||||
const { mstore, location } = this.props
|
||||
switchSite = (siteId) => {
|
||||
const { mstore, location } = this.props;
|
||||
|
||||
this.props.setSiteId(siteId);
|
||||
this.props.fetchIntegrationVariables();
|
||||
this.props.clearSearch(location.pathname.includes('/sessions'));
|
||||
this.props.clearSearchLive();
|
||||
this.props.setSiteId(siteId);
|
||||
this.props.fetchIntegrationVariables();
|
||||
this.props.clearSearch(location.pathname.includes('/sessions'));
|
||||
this.props.clearSearchLive();
|
||||
|
||||
mstore.initClient();
|
||||
}
|
||||
mstore.initClient();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { sites, siteId, account, location: { pathname } } = this.props;
|
||||
const { showProductModal } = this.state;
|
||||
const isAdmin = account.admin || account.superAdmin;
|
||||
const activeSite = sites.find(s => s.id == siteId);
|
||||
const disabled = !siteChangeAvaliable(pathname);
|
||||
const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
|
||||
// const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
|
||||
render() {
|
||||
const {
|
||||
sites,
|
||||
siteId,
|
||||
account,
|
||||
location: { pathname },
|
||||
} = this.props;
|
||||
const { showProductModal } = this.state;
|
||||
const isAdmin = account.admin || account.superAdmin;
|
||||
const activeSite = sites.find((s) => s.id == siteId);
|
||||
const disabled = !siteChangeAvaliable(pathname);
|
||||
const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
|
||||
// const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
|
||||
|
||||
return (
|
||||
<div className={ styles.wrapper }>
|
||||
{
|
||||
showCurrent ?
|
||||
(activeSite && activeSite.status === GREEN) ? <AnimatedSVG name={ICONS.SIGNAL_GREEN} size="10" /> : <AnimatedSVG name={ICONS.SIGNAL_RED} size="10" /> :
|
||||
<Icon name="window-alt" size="14" marginRight="10" />
|
||||
}
|
||||
<div className={ cn(styles.currentSite, 'ml-2')}>{ showCurrent && activeSite ? activeSite.host : 'All Projects' }</div>
|
||||
<Icon className={ styles.drodownIcon } color="gray-light" name="chevron-down" size="16" />
|
||||
<div className={styles.menu}>
|
||||
<ul data-can-disable={ disabled }>
|
||||
{ !showCurrent && <li>{ 'Does not require domain selection.' }</li>}
|
||||
{
|
||||
sites.map(site => (
|
||||
<li key={ site.id } onClick={() => this.switchSite(site.id)}>
|
||||
<Icon
|
||||
name="circle"
|
||||
size="8"
|
||||
marginRight="10"
|
||||
color={ STATUS_COLOR_MAP[ site.status ] }
|
||||
/>
|
||||
{ site.host }
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
|
||||
</div>
|
||||
|
||||
<SlideModal
|
||||
title="New Project"
|
||||
size="small"
|
||||
isDisplayed={ showProductModal }
|
||||
content={ showProductModal && <NewSiteForm onClose={ this.closeModal } /> }
|
||||
onClose={ this.closeModal }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
{showCurrent ? (
|
||||
activeSite && activeSite.status === GREEN ? (
|
||||
<AnimatedSVG name={ICONS.SIGNAL_GREEN} size="10" />
|
||||
) : (
|
||||
<AnimatedSVG name={ICONS.SIGNAL_RED} size="10" />
|
||||
)
|
||||
) : (
|
||||
<Icon name="window-alt" size="14" marginRight="10" />
|
||||
)}
|
||||
<div className={cn(styles.currentSite, 'ml-2')}>{showCurrent && activeSite ? activeSite.host : 'All Projects'}</div>
|
||||
<Icon className={styles.drodownIcon} color="gray-light" name="chevron-down" size="16" />
|
||||
<div className={styles.menu}>
|
||||
<ul data-can-disable={disabled}>
|
||||
{!showCurrent && <li>{'Does not require domain selection.'}</li>}
|
||||
{sites.map((site) => (
|
||||
<li key={site.id} onClick={() => this.switchSite(site.id)}>
|
||||
<Icon name="circle" size="8" marginRight="10" color={STATUS_COLOR_MAP[site.status]} />
|
||||
{site.host}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue