Untitled
unknown
typescript
2 years ago
39 kB
5
Indexable
import React, { useEffect, useRef, useState } from 'react';
import {
Box,
Button,
Drawer,
FormControl,
FormControlLabel,
IconButton,
Radio,
RadioGroup,
TableBody,
TableCell,
Table,
TableContainer,
TableHead,
TableRow,
Typography,
Checkbox,
TextField,
Tooltip,
MenuList,
MenuItem,
Grid,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { CloseOutlined, CheckBoxOutlined } from '@material-ui/icons';
import { Autocomplete } from '@material-ui/lab';
import { isArray, uniqBy } from 'lodash';
import { useSelector } from 'react-redux';
import {
EpicsIcon,
JiraIcon2,
SettingIcon2,
StoriesIcon,
AzureIcon,
ExcelIcon2,
MondayIcon,
TrelloIcon,
SearchOpp,
CheckCircleIcon,
} from '@/assets';
import { MixTitle } from '@/components';
import { StyledDataSearch, StyledReactiveComponent } from '@/components/Styled';
import { useCustomSearch, useEffectOnlyOnce } from '@/hooks';
import i18n from '@/i18n';
import { IOpportunityEntitiesResponse } from '@/services/opportunity-entities';
import {
getListIssueTypeProjectV1,
getListJiraProjectV1,
IJiraProject,
IJiraType,
syncIssueFromJira,
} from '@/services/project-entities';
import { SelectWorkspaceView } from '@/store/workspace/selectors';
import { ITheme } from '@/theme';
import TableSync from './TableSync';
import TableSyncES from './TableSyncES';
import { Column } from './type';
interface ICreateSyncMultipleToolsDialog {
openSyncMultipleTools: boolean;
setOpenSyncMultipleTools: (value: boolean) => void;
refreshData: () => void;
}
type Suggestion = {
source: IOpportunityEntitiesResponse;
label: JSX.Element;
};
const defaultColumns = [
Column.CHECKBOX,
Column.ISSUE,
Column.HEADLINE,
Column.STATUS,
Column.ASSIGNED_USER,
Column.ACTION,
];
const listHeadFields = {
[Column.CHECKBOX]: { id: 0, fieldName: '' },
[Column.ISSUE]: { id: 1, fieldName: 'ISSUE #' },
[Column.HEADLINE]: { id: 2, fieldName: 'HEADLINE' },
[Column.STATUS]: { id: 3, fieldName: 'STATUS' },
[Column.ASSIGNED_USER]: { id: 4, fieldName: 'ASSIGNEE' },
[Column.ACTION]: { id: 5, fieldName: '' },
};
const DEFAULT_OPTION_ALL = '1';
export const CreateSyncMultipleToolsDialog: React.FC<ICreateSyncMultipleToolsDialog> = ({
openSyncMultipleTools,
setOpenSyncMultipleTools,
refreshData,
}) => {
const drawerRef = useRef<any>(null);
const defaultDrawerWidth = 710;
const [value, setValue] = useState('Sync to Wishlist');
const [valueIssue, setValueIssue] = useState('One-way sync from Jira');
// const [listColumns, setListColumns] = useState<Column[]>(defaultColumns);
const [listDataIssue, setListDataIssue] = useState([]);
const [listSelectedId, setListSelectedId] = useState<string[]>([]);
const [toolSelectedId, setToolSelectedId] = useState(1);
const [listProjectJira, setListProjectJira] = useState<IJiraProject[]>([]);
const [projectSelected, setProjectSelected] = useState<IJiraProject | undefined>();
const [listTypeJira, setListTypeJira] = useState<IJiraType[]>([]);
const [typeJiraSelected, setTypeJiraSelected] = useState<any>([DEFAULT_OPTION_ALL]);
const [isSyncIssue, setIsSyncIssue] = useState(false);
const lastProjectSelected = window.localStorage.getItem('project-selected');
const selectedWorkspace = useSelector(SelectWorkspaceView);
const workspaceLocal = JSON.parse(localStorage.getItem('workspace-id') ?? '');
const classes = useStyles({ defaultDrawerWidth });
const listActionButtons = [
{
id: 1,
icon: <JiraIcon2 />,
class: `${classes.logoJira} ${classes.logoTools}`,
disable: false,
},
{
id: 2,
icon: <TrelloIcon />,
class: `${classes.logoTrello} ${classes.logoTools} `,
disable: true,
},
{
id: 3,
icon: <MondayIcon />,
class: `${classes.logoMonday} ${classes.logoTools}`,
disable: true,
},
{
id: 4,
content: 'Azure DevOps',
icon: <AzureIcon />,
class: `${classes.logoAzure} ${classes.logoTools}`,
disable: true,
},
{
id: 5,
content: 'Excel/CSV',
icon: <ExcelIcon2 />,
class: `${classes.logoExcel} ${classes.logoTools}`,
disable: true,
},
];
const customSearch = useCustomSearch(['jira_issue.summary', 'jira_issue.issue_key'], 'and', [
{
term: {
del_flg: false,
},
},
{
term: {
'workspace.id': selectedWorkspace?.id ?? Number(workspaceLocal) ?? 1,
},
},
]);
useEffect(() => {
if (projectSelected) {
getListTypeJira(projectSelected);
// getListWorkFlowStatus(projectSelected);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectSelected]);
// useEffect(() => {
// if (formik.values?.type_issue) {
// getListWorkFlowStatus(projectSelected);
// // getListJiraConfigRequired(projectSelected, formik.values.type_issue);
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [formik.values?.type_issue, loadingTypeJira]);
const getListTypeJira = async (project: any) => {
// setLoadingTypeJira(true);
try {
const response = await getListIssueTypeProjectV1(project.project_key);
if (response.success) {
// setLoadingTypeJira(false);
const allType = {
issue_id: DEFAULT_OPTION_ALL,
issue_type: 'All',
icon_url:
'https://synchro-apf.atlassian.net/rest/api/2/universal_avatar/view/type/issuetype/avatar/10315?size=medium',
};
const dataType =
response.data?.filter((item: any) => item.issue_type !== 'Subtask' && item.issue_type !== 'Sub-task') ?? [];
const listTypeJiraRes =
dataType?.filter((item: any) => item.issue_type === 'Epic' || item.issue_type === 'Story') ?? [];
listTypeJiraRes.push(allType);
setListTypeJira(listTypeJiraRes);
setTypeJiraSelected(listTypeJiraRes.map((i: any) => i.issue_id));
// formik.setFieldValue('type_issue', listTypeJiraRes?.[0]?.issue_type ?? '');
// setIsShowDescriptionField(false);
// getListJiraConfigRequired(projectSelected, listTypeJiraRes, listTypeJiraRes?.[0]?.issue_type ?? '');
} else {
// setLoadingTypeJira(false);
}
} catch {
// setLoadingTypeJira(false);
}
};
const handleCheckType = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
const checkedValue = event.target.value;
const allValuesId = listTypeJira?.map((i) => i.issue_id);
setTypeJiraSelected((prev: any) => {
if (checked){
if (checkedValue !== DEFAULT_OPTION_ALL) {
const list = [...prev, checkedValue]
if (list.length === allValuesId.length-1){
return [...allValuesId]
}
return list;
}
if (checkedValue === DEFAULT_OPTION_ALL) return [...allValuesId];
}
if (!checked){
if (checkedValue !== DEFAULT_OPTION_ALL) {
const list = prev.filter((item: any) => item !== checkedValue);
if (list.length === allValuesId.length-1){
return list.filter((i: any) => i !== DEFAULT_OPTION_ALL)
}
return list
}
if (checkedValue === DEFAULT_OPTION_ALL) return [];
}
return [];
});
// refreshData?.();
// setTypeJiraSelected((prevValues: any) => {
// // if (Number(checkedValue) === Number(DEFAULT_OPTION_ALL)) return [...allValuesId];
// if (checked && Number(checkedValue) === Number(DEFAULT_OPTION_ALL)) {
// return [...allValuesId];
// }
// if (
// checked &&
// Number(checkedValue) !== Number(DEFAULT_OPTION_ALL) &&
// prevValues.length === allValuesId.length - 1
// ) {
// console.log('bbb checkedValue', {
// checked,
// a: Number(checkedValue) !== Number(DEFAULT_OPTION_ALL),
// c: typeJiraSelected.length === allValuesId.length - 1,
// typeJiraSelected,
// allValuesId,
// });
// return [...allValuesId];
// }
// if (checked) return [...prevValues, checkedValue];
// if (!checked && Number(checkedValue) === Number(DEFAULT_OPTION_ALL)) {
// return [];
// }
// if (!checked && Number(checkedValue) !== Number(DEFAULT_OPTION_ALL))
// return allValuesId.filter(
// (i) => Number(i) !== Number(DEFAULT_OPTION_ALL) && Number(i) !== Number(checkedValue),
// );
// return prevValues.filter((i: any) => i !== checkedValue);
// });
// const checkConditionType = typeJiraSelected.some((item: any) => item === '10014' || item === 'Story');
// if (checked) {
// if (event.target.value === 'All' || checkConditionType) {
// return setTypeJiraSelected(['Story', '10014', 'All']);
// }
// if (event.target.value === 'Story' || event.target.value === '10014') {
// setTypeJiraSelected((prev: any) => {
// return [event.target.value];
// });
// }
// } else {
// if (event.target.value === 'All') {
// return setTypeJiraSelected([]);
// }
// if (event.target.value === 'Story' || event.target.value === '10014') {
// return setTypeJiraSelected((prev: any) => [
// ...prev.filter((id: any) => id !== event.target.value && id !== 'All'),
// ]);
// }
// }
};
console.log('xxx list type & pro jira', listProjectJira, listTypeJira);
// console.log('xxx list jira', listTypeJira);
const handlePostIssue = async () => {
const payload = {
issues: listSelectedId,
};
const { success, data } = await syncIssueFromJira(payload, selectedWorkspace?.id);
if (success) {
setIsSyncIssue(true);
setListSelectedId([]);
setTimeout(() => {
setIsSyncIssue(false);
}, 1000);
console.log('xxx list jira', data);
}
};
useEffect(() => {
setProjectSelected(lastProjectSelected ? JSON.parse(lastProjectSelected) : undefined);
// setLastRefreshSelect(Date.now());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastProjectSelected]);
const getListProjectJira = async () => {
// setIsLoadingProjectJira(true);
try {
const response = await getListJiraProjectV1();
if (response.success) {
// console.log('here', response.data);
if (isArray(response.data) && response.data?.length > 0) {
setListProjectJira(response.data);
} else {
setListProjectJira([]);
}
} else {
setListProjectJira([]);
}
} catch {
setListProjectJira([]);
}
// setIsLoadingProjectJira(false);
};
useEffectOnlyOnce(() => {
getListProjectJira();
});
const handleChangeProject = (event: object, valueCheck: any | null) => {
if (valueCheck) {
setProjectSelected(valueCheck);
} else {
setProjectSelected(undefined);
}
};
const anchorPosition = 'right';
const handleChange = (event: any) => {
setValue(event.target.value);
};
const handleChangeIssue = (event: any) => {
setValueIssue(event.target.value);
};
// console.log('here', listDataIssue);
const renderIconType = (type: string) => {
if (type === 'Epic') {
return <EpicsIcon className={classes.iconIssue} />;
}
if (type === 'Story') {
return <StoriesIcon />;
}
return <></>;
};
return (
<>
<TableSyncES
setListDataIssue={setListDataIssue}
projectSelected={projectSelected}
typeJiraSelected={typeJiraSelected}
refreshData={refreshData}
/>
<Drawer
ref={drawerRef}
anchor={anchorPosition}
open={openSyncMultipleTools}
onClose={() => {
setOpenSyncMultipleTools(false);
}}
className={classes.drawer}
classes={{
paper: classes.paper,
// paperAnchorDockedLeft: classes.paperAnchorDockedLeft,
}}
style={{ zIndex: 1200 }}
>
<Box className={classes.formCreate}>
<Box display="flex" flexDirection="column" height="100%">
<Box style={{ background: '#F8F8F8' }}>
<Box className={classes.boxTopTitle}>
<Typography className={classes.title}>Load/Sync Opportunities</Typography>
<Box display="flex" flexDirection="flex-end" alignItems="center" justifyContent="flex-end" mt="-3px">
<IconButton
onClick={() => {
setOpenSyncMultipleTools(false);
}}
className={classes.moreAction}
>
<CloseOutlined />
</IconButton>
</Box>
</Box>
<Box className={classes.boxTopContainer}>
<Box className={`${classes.styleBox} ${classes.marginTopButton}`}>
<Typography className={classes.subTitle}>Tool</Typography>
<Box>
{listActionButtons.map((item) => {
return (
<Button
key={item.id}
className={item.class}
color={toolSelectedId === item.id ? 'primary' : 'default'}
onClick={() => {
setToolSelectedId(item.id);
}}
variant="outlined"
disabled={item.disable}
>
{item.icon}
{item.content && (
<Typography
style={{
fontSize: '10px',
color: item.disable ? 'rgba(0, 0, 0, 0.26)' : '#0056D8',
fontFamily: 'poppins',
}}
>
{item.content}
</Typography>
)}
</Button>
);
})}
</Box>
</Box>
<Box className={classes.styleBox}>
<FormControl component="fieldset">
<RadioGroup
className={classes.groupRadio}
aria-label="gender"
name="gender1"
value={value}
onChange={handleChange}
>
<FormControlLabel
disabled={true}
value="Two-way sync"
control={<Radio color="primary" />}
label="Two-way sync"
/>
<FormControlLabel
value="One-way sync from Jira"
control={<Radio color="primary" />}
label="One-way sync from Jira"
checked
/>
<FormControlLabel
disabled={true}
value="One-off import"
control={<Radio color="primary" />}
label="One-off import"
/>
</RadioGroup>
</FormControl>
</Box>
<Box className={classes.styleBox}>
<Box display="flex" alignItems="flex-end">
<Box className={classes.marginRight20px} width={220}>
<MixTitle title="Jira Project" />
<Autocomplete
// key={refreshListProject}
disableClearable
id="project_jira"
options={listProjectJira ?? []}
getOptionLabel={(option) => option.project_name ?? ''}
className={classes.autocomplete}
renderInput={(params) => (
<TextField {...params} fullWidth variant="outlined" placeholder="Select Project" />
)}
onChange={(e: object, valueSelect: any | null) => {
if (valueSelect) {
handleChangeProject(e, valueSelect);
} else {
setProjectSelected(undefined);
}
}}
placeholder="Select Project"
value={projectSelected}
/>
</Box>
<Tooltip title="Search" placement="top-start">
<Box className={classes.searchInputField}>
<StyledDataSearch
render={({ loading, error, data, downshiftProps: { isOpen, getItemProps } }) => {
if (!isOpen || !data.length) return;
const suggestions = uniqBy(data as Suggestion[], (suggestion) => suggestion.source.id);
// console.log('here StyledDataSearch', suggestions);
return (
<MenuList className={classes.searchList}>
{suggestions.map((suggestion) => (
<MenuItem onCl key={suggestion.source.id} {...getItemProps({ item: suggestion })}>
{suggestion.label}
</MenuItem>
))}
</MenuList>
);
}}
componentId="SearchOpportunity"
dataField={['jira_issue.summary', 'jira_issue.issue_key']}
queryFormat="or"
placeholder={i18n.t('screens.placeholder.search')}
iconPosition="right"
showIcon={false}
showFilter={false}
innerClass={{
input: 'searchInput',
title: 'titleSearch',
}}
defaultQuery={() => customSearch?.searchQuery}
onChange={customSearch.onChange}
value={customSearch.value}
onValueChange={customSearch.onValueChange}
onValueSelected={customSearch.onValueSelected}
className={classes.searchInput}
parseSuggestion={(suggestion) => {
return {
label: (
<Grid container>
<Grid item xs={12}>
<Box whiteSpace="normal">{suggestion.source.jira_issue[0].summary}</Box>
{suggestion.source.jira_issue && (
<Box style={{ background: '#DEEBFF' }} className={classes.boxOppType}>
<Typography
component="p"
style={{ color: '#333333' }}
className={classes.oppTypeContent}
>
{suggestion.source.jira_issue[0].issue_key}
</Typography>
</Box>
)}
</Grid>
</Grid>
),
value: suggestion.source.headline,
source: suggestion.source,
};
}}
/>
<StyledReactiveComponent
componentId="Search"
filterLabel="Keyword"
showFilter={true}
render={({ setQuery }) => (
<IconButton
color="primary"
onClick={() => {
customSearch.onClickSearch(setQuery);
}}
onMouseDown={() => {
// setShowSearching((s) => !s);
// TODO: wait for element DOM is loaded.
setTimeout(() => {
(document.querySelector(
`.${classes.searchInput} input`,
) as HTMLInputElement)?.focus();
});
}}
ref={customSearch.searchBtnRef}
className={classes.fillColorActionButton}
>
{/* <SearchInputIcon /> */}
<SearchOpp />
{/* <Search /> */}
</IconButton>
)}
/>
</Box>
</Tooltip>
</Box>
</Box>
<Box className={classes.styleBox}>
<Typography className={classes.subTitle}>Issue Types</Typography>
<Box display="flex" style={{ gap: '30px', marginLeft: '-2px' }}>
{listTypeJira?.map((item) => {
return (
<Box
key={item.issue_id}
display="flex"
alignItems="center"
className={classes.paddingRightCheckBox}
>
<Checkbox
checkedIcon={<CheckBoxOutlined color="primary" />}
name="epics"
onChange={handleCheckType}
value={item.issue_id}
checked={typeJiraSelected.includes(item.issue_id)}
/>
{renderIconType(item.issue_type)}
<Typography>{item.issue_type}</Typography>
</Box>
);
})}
</Box>
</Box>
<Box className={classes.styleBox}>
<Box display="flex" gridGap={12} ml="auto" justifyContent="flex-end">
<Box position="relative" minWidth="160px">
<Button
className={classes.searchBtn}
// onClick={handleProcess}
fullWidth
variant="contained"
>
Search...
</Button>
</Box>
</Box>
</Box>
</Box>
</Box>
<Box>
<Box className={classes.boxBottomTitle}>
<Typography className={classes.title}>Choose Jira Issues to Sync</Typography>
</Box>
{isSyncIssue && (
<Box className={classes.notifySyncSuccess}>
<CheckCircleIcon />
<Typography className={classes.textNotify}>
{`${listSelectedId.length} opportunities synchronised!`}
</Typography>
</Box>
)}
<Box className={classes.boxBottomContainer}>
<Box
className={`${classes.paddingBottomBox} ${classes.marginTopButton30px}`}
display="flex"
alignItems="center"
>
<FormControl component="fieldset">
<RadioGroup
className={classes.groupRadio}
aria-label="gender"
name="gender1"
value={valueIssue}
onChange={handleChangeIssue}
>
<FormControlLabel
value="Sync to Wishlist"
control={<Radio color="primary" />}
label="Sync to Wishlist"
/>
<FormControlLabel
value="Map Jira Statuses"
control={<Radio color="primary" />}
label="Map Jira Statuses"
/>
</RadioGroup>
</FormControl>
<IconButton>
<SettingIcon2 />
</IconButton>
</Box>
<Box className={classes.paddingBottomBox}>
<TableContainer className={classes.rootTableContainer} id="sync-multiple-tools">
<Table className={classes.rootTable}>
<TableHead classes={{ root: classes.headTable }}>
<TableRow>
{defaultColumns.map((column) => {
return (
<TableCell key={column} align="inherit" style={{ whiteSpace: 'nowrap' }}>
{listHeadFields[column].fieldName}
</TableCell>
);
})}
</TableRow>
</TableHead>
<TableBody className={classes.body}>
{listDataIssue?.map((record: any) => {
return (
<TableSync
listSelectedId={listSelectedId}
setListSelectedId={setListSelectedId}
listColumns={defaultColumns}
key={record?.id}
record={record}
/>
);
})}
</TableBody>
</Table>
</TableContainer>
</Box>
<Box
className={`${classes.paddingBottomBox} ${classes.marginTopButton}`}
style={{ paddingBottom: '20px' }}
>
<Box display="flex" gridGap={12} ml="auto" justifyContent="flex-end">
<Box position="relative" minWidth="160px">
<Button
disabled={!listSelectedId.length}
className={classes.submitBtn}
onClick={handlePostIssue}
fullWidth
variant="contained"
>
{`Sync ${listSelectedId.length} New Opportunities`}
</Button>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</Box>
</Drawer>
</>
);
};
interface IStyles {
defaultDrawerWidth: number;
}
const useStyles = makeStyles<ITheme, IStyles>((theme: ITheme) => ({
formCreate: {
width: ({ defaultDrawerWidth }) => `${defaultDrawerWidth}px)`,
flexDirection: 'column',
height: '100%',
},
drawer: {
width: '0px',
flexShrink: 0,
top: '64px !important',
'& .MuiBackdrop-root': {
top: '64px',
left: '56px',
backgroundColor: 'transparent',
display: 'none',
},
overflow: 'auto',
'&::-webkit-scrollbar': {
width: 9,
height: 9,
},
'&::-webkit-scrollbar-track': {
background: '#ffffff',
// borderRadius: 12,
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#bdbdbd',
// borderRadius: 12,
'&:hover': {
backgroundColor: '#757575',
},
},
},
paper: {
backgroundColor: '#ffffff',
width: ({ defaultDrawerWidth }) => `${defaultDrawerWidth}px`,
// padding: '0px 15px 0 15px',
top: '80px',
marginLeft: '56px',
borderTop: 'none',
// boxShadow: '-2px 4px 4px rgba(0,0,0,.15)',
borderLeft: '2px solid #A4A4A4',
boxShadow: '4px 4px 4px rgb(0 0 0 / 25%)',
overflowY: 'auto',
'&::-webkit-scrollbar': {
width: '8px',
height: '8px',
},
'&::-webkit-scrollbar-track': {
background: '#f1f1f1',
borderRadius: '8px',
},
'&::-webkit-scrollbar-thumb': {
background: '#888',
borderRadius: '8px',
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#555',
},
},
boxTopTitle: {
display: 'flex',
position: 'sticky',
backgroundColor: '#D9D9D9',
// marginLeft: '-15px',
// marginRight: '-15px',
padding: '12px 20px 12px 20px',
alignItems: 'center',
height: '58px',
},
boxBottomTitle: {
display: 'flex',
position: 'sticky',
backgroundColor: '#D9D9D9',
// marginLeft: '-15px',
// marginRight: '-15px',
padding: '12px 20px 12px 20px',
borderTop: '1px solid #707070',
height: '58px',
},
title: {
fontSize: '16px',
fontWeight: 600,
lineHeight: '33px',
letterSpacing: '-0.015em',
flex: 1,
width: '100%',
},
subTitle: {
fontSize: '14px',
fontWeight: 600,
lineHeight: '20px',
color: '#333333',
marginBottom: '10px',
display: 'block',
},
moreAction: {
width: '31px',
height: '31px',
marginLeft: '2px',
'& .MuiIconButton-label': {
'& svg': {
fontSize: '22px',
},
},
},
groupRadio: {
'& .Mui-disabled': {
color: 'rgba(0, 0, 0, 0.23)',
},
flexDirection: 'row',
},
dialogActions: {
padding: '20px 24px 24px 24px',
display: 'flex',
justifyContent: 'space-between',
gap: 24,
boxShadow: '0 1px 5px rgba(0,0,0,0.06)',
'& button': {
height: '38px',
fontWeight: 500,
fontSize: '14px',
lineHeight: '20px',
padding: '10px 16px',
minWidth: '110px',
},
},
submitBtn: {
height: '38px',
background: '#0056D8',
color: '#fff',
'&:hover': {
background: '#1C48A9',
color: '#fff',
boxShadow: 'none',
},
},
searchBtn: {
height: '38px',
// padding: '0px 12px',
// borderRadius: '5px',
// width: '84px',
color: '#333333',
background: '#E1E6F0',
border: ' 1px solid #E1E6F0',
'&:hover': {
border: ' 1px solid #D1D8E5',
background: '#D1D8E5',
color: '#0056D8',
boxShadow: 'none',
},
},
boxBottomContainer: {
// overflow: 'auto',
height: '100%',
'&::-webkit-scrollbar': {
width: 9,
height: 9,
},
'&::-webkit-scrollbar-track': {
background: '#ffffff',
// borderRadius: 12,
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#bdbdbd',
// borderRadius: 12,
'&:hover': {
backgroundColor: '#757575',
},
},
},
rootTableContainer: {
flex: 1,
maxHeight: '100%',
borderRadius: '0px',
border: '0px solid #DADADA',
// paddingRight: '6px',
// overflow: 'auto',
// maxHeight: (props) => (props.collapse ? 'calc(100vh - 190px)' : 'calc(100vh - 230px)'),
// '&::-webkit-scrollbar': {
// width: 9,
// height: 9,
// },
// '&::-webkit-scrollbar-track': {
// background: '#ffffff',
// // borderRadius: 12,
// },
// '&::-webkit-scrollbar-thumb': {
// backgroundColor: '#bdbdbd',
// // borderRadius: 12,
// '&:hover': {
// backgroundColor: '#757575',
// },
// },
},
rootTable: {
borderSpacing: '0px 10px',
borderCollapse: 'inherit',
// minWidth: 732,
'& .MuiTableHead-root': {
backgroundColor: '#fff',
},
'& .MuiTableCell-root': {
borderRight: '0px',
borderBottom: '0px',
},
'& th': {
// padding: '12px',
fontSize: '12px',
color: '#707070',
padding: '0px 12px',
'&:first-child': {
// paddingLeft: '40px',
},
},
'& td': {
color: '#707070',
fontSize: '14px',
},
},
headTable: {
// minWidth: 732,
position: 'sticky',
top: 0,
left: 0,
// backgroundColor: 'white',
zIndex: 2,
borderBottom: '1px solid #C4C4C4',
},
body: {
overflow: 'auto',
'& tr': {
// backgroundColor: '#F9FBFF',
},
'& td': {
borderTop: '1px solid #C4C4C4',
borderBottom: '1px solid #C4C4C4 !important',
'&:first-child': {
borderRadius: '5px 0 0 5px',
borderLeft: '1px solid #C4C4C4 !important',
paddingLeft: '0px',
paddingRight: '0px',
},
'&:last-child': {
borderRadius: '0 5px 5px 0',
borderRight: '1px solid #C4C4C4 !important',
paddingLeft: '0px',
paddingRight: '0px',
},
},
},
// screenName: {
// border: '1px solid #D9D9D9',
// height: '38px',
// '& .MuiTypography-root': {
// color: '#333333',
// fontSize: '14px',
// lineHeight: '20px',
// fontWeight: 400,
// },
// '& .MuiButton-endIcon': {
// marginRight: '-16px',
// },
// background: '#fff',
// },
// selectedFilterText: {
// fontWeight: 400,
// marginRight: '4px',
// whiteSpace: 'nowrap',
// textOverflow: 'ellipsis',
// overflow: 'hidden',
// // color: (props) => (props.openColumn ? 'rgba(0, 0, 0, 0.26)' : theme.palette.primary.main),
// },
boxSelectedFilter: {
display: 'flex',
flex: '1 1 0%',
overflow: 'hidden',
alignItems: 'center',
marginLeft: '-12px',
'& svg': {
height: '22px ',
// color: '#ffd351',
},
},
fillColorActionButton: {
'&:active': {
backgroundColor: '#EEEEEE',
},
'&:hover': {
'& svg': {
'& path': {
color: '#0056D8',
},
},
},
},
inputAdornment: {
height: '38px',
background: '#fff',
boxSizing: 'border-box',
width: '220px',
paddingLeft: 0,
'& button': {
padding: 0,
marginLeft: '12px',
},
'& svg': {
width: '22px',
height: '22px',
},
'& input::placeholder': {
fontSize: '14px',
fontWeight: 500,
color: '#1e1e1e',
},
'& input': {
fontSize: '14px',
fontWeight: 500,
color: '#A4A4A4 !important',
},
},
logoTools: {
padding: '0',
height: '40px',
width: '120px',
},
activeTool: {},
logoJira: {
'& svg': {
height: '40px',
width: '120px',
transform: 'scale(0.8)',
'& > g': {
transform: 'translateY(-10px)',
},
},
'&:active': {
'& svg': {
color: '#0056D8',
},
},
'&:disabled': {
filter: 'grayscale(100%)',
},
},
logoTrello: {
marginLeft: '7px',
'& svg': {
height: '15px',
width: '120px',
},
'&:disabled': {
filter: 'grayscale(100%)',
},
},
logoMonday: {
marginLeft: '7px',
'& svg': {
height: '26px',
width: '120px',
},
'&:disabled': {
filter: 'grayscale(100%)',
},
},
logoAzure: {
marginLeft: '7px',
'& svg': {
height: '24px',
width: '24px',
marginRight: '5px',
},
'&:disabled': {
filter: 'grayscale(100%)',
},
},
logoExcel: {
marginLeft: '7px',
'& svg': {
height: '32px',
width: '32px',
},
'&:disabled': {
filter: 'grayscale(100%)',
},
},
styleBox: {
padding: '0px 36px 20px',
},
paddingRightCheckBox: {
padding: '0px !important',
display: 'flex',
alignItems: 'center',
'& .MuiButtonBase-root': {
padding: '0px !important',
},
'& .MuiTypography-body1': {
marginLeft: '3px',
color: '#555555',
},
},
marginLeft3px: {
marginLeft: '0px !important',
},
iconIssue: {
height: '14px',
width: '14px',
},
paddingBottomBox: {
padding: '0 36px',
},
marginTopButton: {
marginTop: '20px',
},
marginTopButton30px: {
marginTop: '30px',
},
marginRight20px: {
marginRight: '20px',
},
autocomplete: {
background: '#fff',
'& input': {
padding: '0!important',
},
'& .MuiInputBase-root': {
height: '38px',
'& .MuiChip-root': {
borderRadius: '4px',
height: '24px',
},
},
'& .MuiOutlinedInput-root': {
padding: 0,
},
'& .MuiAutocomplete-inputRoot': {
padding: '0px 12px !important',
},
'& .MuiChip-deleteIcon': {
width: '18px',
height: '18px',
},
},
searchInputField: {
borderRadius: '6px',
position: 'relative',
background: '#fff',
'& .searchInput': {
height: '38px',
},
'& button': {
position: 'absolute',
left: '4px',
top: '3px',
width: '32px',
height: '32px',
padding: 0,
'& svg': {
fontSize: '20px',
width: '22px',
height: '22px',
color: '#707070',
},
},
'& div div input': {
fontFamily: 'Poppins',
paddingLeft: '40px !important',
width: '220px',
transition: 'all 0.3s ease',
height: '38px',
},
'& div div input::placeholder': {
color: '#c3c2c2',
fontSize: '14px',
fontFamily: 'Poppins',
},
},
searchList: {
position: 'absolute',
top: 40,
width: '100%',
border: '1px solid rgba(0,0,0,.1)',
borderRadius: 4,
boxShadow: '0px 0px 30px 0px rgb(82 63 105 / 5%)',
maxHeight: 375,
overflowY: 'auto',
zIndex: 3,
backgroundColor: '#fff',
padding: 0,
'& > li': {
padding: 10,
},
},
boxOppType: {
background: '#DEEBFF',
borderRadius: '4px',
width: 'fit-content',
},
oppTypeContent: {
color: '#333333',
padding: '2px 10px',
textTransform: 'uppercase',
borderRadius: '4px',
fontSize: '9px',
fontWeight: 600,
lineHeight: '16px',
marginTop: '4px',
},
notifySyncSuccess: {
height: '44px',
background: '#FFF6D2',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: '28px 0',
},
textNotify: {
color: '#2BAC47',
fontWeight: 500,
fontSize: '16px',
lineHeight: '20px',
marginLeft: '10px',
},
}));
export default CreateSyncMultipleToolsDialog;
Editor is loading...