138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
import { CaretDownOutlined, FolderAddOutlined } from '@ant-design/icons';
|
|
import { Button, Dropdown, MenuProps, Space, Typography } from 'antd';
|
|
import cn from 'classnames';
|
|
import React from 'react';
|
|
import { withRouter } from 'react-router-dom';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { hasSiteId, siteChangeAvailable } from 'App/routes';
|
|
import { Icon } from 'UI';
|
|
import { useModal } from 'Components/ModalContext';
|
|
import ProjectForm from 'Components/Client/Projects/ProjectForm';
|
|
import Project from '@/mstore/types/project';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const { Text } = Typography;
|
|
|
|
function ProjectDropdown(props: { location: any }) {
|
|
const mstore = useStore();
|
|
const { t } = useTranslation();
|
|
const { projectsStore, searchStore, searchStoreLive, userStore } = mstore;
|
|
const { account } = userStore;
|
|
const sites = projectsStore.list;
|
|
const { siteId } = projectsStore;
|
|
const { setSiteId } = projectsStore;
|
|
const { initProject } = projectsStore;
|
|
const { location } = props;
|
|
const isAdmin = account.admin || account.superAdmin;
|
|
const activeSite = sites.find((s) => s.id === siteId);
|
|
const showCurrent =
|
|
hasSiteId(location.pathname) || siteChangeAvailable(location.pathname);
|
|
const { openModal, closeModal } = useModal();
|
|
|
|
const handleSiteChange = async (newSiteId: string) => {
|
|
mstore.initClient();
|
|
setSiteId(newSiteId);
|
|
searchStore.clearSearch();
|
|
searchStore.clearList();
|
|
searchStoreLive.clearSearch();
|
|
|
|
// await customFieldStore.fetchList(newSiteId);
|
|
// await searchStore.fetchSavedSearchList()
|
|
};
|
|
|
|
const onClose = (pro: Project) => {
|
|
console.log('onClose', pro);
|
|
closeModal();
|
|
if (pro.projectId) {
|
|
void handleSiteChange(pro.projectId.toString());
|
|
}
|
|
};
|
|
|
|
const addProjectClickHandler = () => {
|
|
initProject({});
|
|
openModal(<ProjectForm onClose={onClose} />, { title: 'New Project' });
|
|
};
|
|
|
|
const menuItems: MenuProps['items'] = sites.map((site) => ({
|
|
key: site.id,
|
|
label: (
|
|
<div key={site.id} className="!py-1 flex items-center gap-2">
|
|
<Icon
|
|
name={site.platform === 'web' ? 'browser/browser' : 'mobile'}
|
|
color={activeSite?.host === site.host ? 'main' : undefined}
|
|
/>
|
|
<Text
|
|
className={cn(
|
|
'capitalize',
|
|
activeSite?.host === site.host ? 'text-main' : '',
|
|
)}
|
|
>
|
|
{site.host}
|
|
</Text>
|
|
</div>
|
|
),
|
|
}));
|
|
if (isAdmin) {
|
|
menuItems?.unshift(
|
|
{
|
|
key: 'add-proj',
|
|
label: (
|
|
<div className="flex items-center gap-2 whitespace-nowrap">
|
|
<FolderAddOutlined rev={undefined} />
|
|
<Text>{t('Add Project')}</Text>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
type: 'divider',
|
|
},
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Dropdown
|
|
menu={{
|
|
items: menuItems,
|
|
selectable: true,
|
|
defaultSelectedKeys: [siteId],
|
|
style: {
|
|
maxHeight: 500,
|
|
overflowY: 'auto',
|
|
},
|
|
onClick: (e) => {
|
|
if (e.key === 'add-proj') {
|
|
addProjectClickHandler();
|
|
} else {
|
|
void handleSiteChange(e.key);
|
|
}
|
|
},
|
|
}}
|
|
placement="bottomLeft"
|
|
>
|
|
<Button data-test-id="project-dropdown" >
|
|
<Space>
|
|
<Text className="font-medium capitalize">
|
|
{showCurrent && activeSite ? (
|
|
<div className="flex items-center gap-2">
|
|
<Icon
|
|
name={
|
|
activeSite?.platform === 'web'
|
|
? 'browser/browser'
|
|
: 'mobile'
|
|
}
|
|
/>
|
|
{activeSite.host}
|
|
</div>
|
|
) : (
|
|
t('All Projects')
|
|
)}
|
|
</Text>
|
|
<CaretDownOutlined rev={undefined} />
|
|
</Space>
|
|
</Button>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
export default withRouter(observer(ProjectDropdown));
|