fix(ui) - create issue - popup closing
This commit is contained in:
Shekar Siri
parent
7502ad76df
commit
ff39d4d7f6
2 changed files with 65 additions and 55 deletions
|
|
@ -3,17 +3,17 @@ import { connect } from 'react-redux';
|
|||
import { Form, Input, Button, CircularLoader } from 'UI';
|
||||
//import { } from 'Duck/issues';
|
||||
import { addActivity, init, edit, fetchAssignments, fetchMeta } from 'Duck/assignments';
|
||||
import Select from 'Shared/Select'
|
||||
import Select from 'Shared/Select';
|
||||
|
||||
const SelectedValue = ({ icon, text }) => {
|
||||
return(
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{/* <img className="mr-2" src={ icon } width="13" height="13" /> */}
|
||||
{ icon }
|
||||
<span>{ text }</span>
|
||||
{icon}
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
class IssueForm extends React.PureComponent {
|
||||
componentDidMount() {
|
||||
|
|
@ -21,7 +21,7 @@ class IssueForm extends React.PureComponent {
|
|||
|
||||
this.props.init({
|
||||
projectId: projects[0] ? projects[0].id : '',
|
||||
issueType: issueTypes[0] ? issueTypes[0].id : ''
|
||||
issueType: issueTypes[0] ? issueTypes[0].id : '',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -41,43 +41,46 @@ class IssueForm extends React.PureComponent {
|
|||
addActivity(sessionId, instance.toJS()).then(() => {
|
||||
const { errors } = this.props;
|
||||
if (!errors || errors.length === 0) {
|
||||
this.props.init({projectId: instance.projectId});
|
||||
this.props.init({ projectId: instance.projectId });
|
||||
this.props.fetchAssignments(sessionId);
|
||||
this.props.closeHandler();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
write = (e) => {
|
||||
const { target: { name, value } } = e;
|
||||
this.props.edit({ [ name ]: value })
|
||||
const {
|
||||
target: { name, value },
|
||||
} = e;
|
||||
this.props.edit({ [name]: value });
|
||||
};
|
||||
writeOption = ({ name, value }) => this.props.edit({ [ name ]: value });
|
||||
writeOption = ({ name, value }) => this.props.edit({ [name]: value.value });
|
||||
|
||||
render() {
|
||||
const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } = this.props;
|
||||
const projectOptions = projects.map(({name, id}) => ({label: name, value: id })).toArray();
|
||||
const userOptions = users.map(({name, id}) => ({label: name, value: id })).toArray();
|
||||
const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } =
|
||||
this.props;
|
||||
const projectOptions = projects.map(({ name, id }) => ({ label: name, value: id })).toArray();
|
||||
const userOptions = users.map(({ name, id }) => ({ label: name, value: id })).toArray();
|
||||
|
||||
const issueTypeOptions = issueTypes.map(({name, id, iconUrl, color }) => {
|
||||
return { label: name, value: id, iconUrl, color }
|
||||
const issueTypeOptions = issueTypes.map(({ name, id, iconUrl, color }) => {
|
||||
return { label: name, value: id, iconUrl, color };
|
||||
});
|
||||
|
||||
const selectedIssueType = issueTypes.filter(issue => issue.id == instance.issueType)[0];
|
||||
const selectedIssueType = issueTypes.filter((issue) => issue.id == instance.issueType)[0];
|
||||
|
||||
return (
|
||||
<Form onSubmit={ this.onSubmit } className="text-left">
|
||||
<Form onSubmit={this.onSubmit} className="text-left">
|
||||
<Form.Field className="mb-15-imp">
|
||||
<label htmlFor="issueType">
|
||||
<span className="mr-2">Project</span>
|
||||
<CircularLoader loading={ metaLoading } />
|
||||
<CircularLoader loading={metaLoading} />
|
||||
</label>
|
||||
<Select
|
||||
name="projectId"
|
||||
options={ projectOptions }
|
||||
value={ instance.projectId }
|
||||
options={projectOptions}
|
||||
// value={ instance.projectId }
|
||||
fluid
|
||||
onChange={ this.writeOption }
|
||||
onChange={this.writeOption}
|
||||
placeholder="Project"
|
||||
/>
|
||||
</Form.Field>
|
||||
|
|
@ -87,12 +90,18 @@ class IssueForm extends React.PureComponent {
|
|||
selection
|
||||
name="issueType"
|
||||
labeled
|
||||
options={ issueTypeOptions }
|
||||
value={ instance.issueType }
|
||||
options={issueTypeOptions}
|
||||
// value={ instance.issueType }
|
||||
fluid
|
||||
onChange={ this.writeOption }
|
||||
onChange={this.writeOption}
|
||||
placeholder="Select issue type"
|
||||
text={ selectedIssueType ? <SelectedValue icon={ selectedIssueType.iconUrl } text={ selectedIssueType.name } /> : '' }
|
||||
text={
|
||||
selectedIssueType ? (
|
||||
<SelectedValue icon={selectedIssueType.iconUrl} text={selectedIssueType.name} />
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
|
|
@ -101,10 +110,10 @@ class IssueForm extends React.PureComponent {
|
|||
<Select
|
||||
selection
|
||||
name="assignee"
|
||||
options={ userOptions }
|
||||
value={ instance.assignee }
|
||||
options={userOptions}
|
||||
// value={ instance.assignee }
|
||||
fluid
|
||||
onChange={ this.writeOption }
|
||||
onChange={this.writeOption}
|
||||
placeholder="Select a user"
|
||||
/>
|
||||
</Form.Field>
|
||||
|
|
@ -113,9 +122,9 @@ class IssueForm extends React.PureComponent {
|
|||
<label htmlFor="title">Summary</label>
|
||||
<Input
|
||||
name="title"
|
||||
value={ instance.title }
|
||||
placeholder='Issue Title / Summary'
|
||||
onChange={ this.write }
|
||||
value={instance.title}
|
||||
placeholder="Issue Title / Summary"
|
||||
onChange={this.write}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
|
|
@ -127,25 +136,22 @@ class IssueForm extends React.PureComponent {
|
|||
<textarea
|
||||
name="description"
|
||||
rows="2"
|
||||
value={ instance.description }
|
||||
value={instance.description}
|
||||
placeholder="E.g. Found this issue at 3:29secs"
|
||||
onChange={ this.write }
|
||||
onChange={this.write}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
<Button
|
||||
loading={ creating }
|
||||
loading={creating}
|
||||
variant="primary"
|
||||
disabled={ !instance.validate() }
|
||||
disabled={!instance.validate()}
|
||||
className="float-left mr-2"
|
||||
type="submit"
|
||||
>
|
||||
{'Create'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={ closeHandler }
|
||||
>
|
||||
<Button type="button" onClick={closeHandler}>
|
||||
{'Cancel'}
|
||||
</Button>
|
||||
</Form>
|
||||
|
|
@ -153,12 +159,15 @@ class IssueForm extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
export default connect(state => ({
|
||||
creating: state.getIn(['assignments', 'addActivity', 'loading']),
|
||||
projects: state.getIn(['assignments', 'projects']),
|
||||
users: state.getIn(['assignments', 'users']),
|
||||
instance: state.getIn(['assignments', 'instance']),
|
||||
metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
|
||||
issueTypes: state.getIn(['assignments', 'issueTypes']),
|
||||
errors: state.getIn([ 'assignments', 'addActivity', 'errors' ])
|
||||
}), { addActivity, init, edit, fetchAssignments, fetchMeta })(IssueForm)
|
||||
export default connect(
|
||||
(state) => ({
|
||||
creating: state.getIn(['assignments', 'addActivity', 'loading']),
|
||||
projects: state.getIn(['assignments', 'projects']),
|
||||
users: state.getIn(['assignments', 'users']),
|
||||
instance: state.getIn(['assignments', 'instance']),
|
||||
metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
|
||||
issueTypes: state.getIn(['assignments', 'issueTypes']),
|
||||
errors: state.getIn(['assignments', 'addActivity', 'errors']),
|
||||
}),
|
||||
{ addActivity, init, edit, fetchAssignments, fetchMeta }
|
||||
)(IssueForm);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|||
import IssuesModal from './IssuesModal';
|
||||
import { fetchProjects, fetchMeta } from 'Duck/assignments';
|
||||
import stl from './issues.module.css';
|
||||
import { Tooltip } from 'react-tippy'
|
||||
|
||||
@connect(state => ({
|
||||
issues: state.getIn(['assignments', 'list']),
|
||||
|
|
@ -59,17 +60,17 @@ class Issues extends React.Component {
|
|||
return (
|
||||
<div className="relative">
|
||||
<div className={ stl.buttonWrapper} onClick={this.handleOpen}>
|
||||
<Popup
|
||||
<Tooltip
|
||||
open={this.state.showModal}
|
||||
position="bottom"
|
||||
interactive
|
||||
animation="shift"
|
||||
// animation="shift"
|
||||
trigger="click"
|
||||
unmountHTMLWhenHide
|
||||
// @ts-ignore
|
||||
theme='light'
|
||||
arrow
|
||||
content={
|
||||
html={
|
||||
<OutsideClickDetectingDiv onClickOutside={this.closeModal}>
|
||||
<IssuesModal
|
||||
provider={provider}
|
||||
|
|
@ -82,8 +83,8 @@ class Issues extends React.Component {
|
|||
<div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
|
||||
<Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
|
||||
<span className="ml-2">Create Issue</span>
|
||||
</div>
|
||||
</Popup>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue