mirror of
https://github.com/opensupports/opensupports.git
synced 2025-07-10 07:24:47 +02:00
Fix style in edit ticket title and add loading logic. (#827)
This commit is contained in:
parent
62497d1263
commit
14d81cff24
@ -24,6 +24,7 @@ import InfoTooltip from 'core-components/info-tooltip';
|
|||||||
import DepartmentDropdown from 'app-components/department-dropdown';
|
import DepartmentDropdown from 'app-components/department-dropdown';
|
||||||
import TagSelector from 'core-components/tag-selector';
|
import TagSelector from 'core-components/tag-selector';
|
||||||
import Tag from 'core-components/tag';
|
import Tag from 'core-components/tag';
|
||||||
|
import Loading from 'core-components/loading';
|
||||||
|
|
||||||
class TicketViewer extends React.Component {
|
class TicketViewer extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
@ -64,6 +65,7 @@ class TicketViewer extends React.Component {
|
|||||||
editTitle: false,
|
editTitle: false,
|
||||||
newTitle: this.props.ticket.title,
|
newTitle: this.props.ticket.title,
|
||||||
editTitleError: false,
|
editTitleError: false,
|
||||||
|
editTitleLoading: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -138,11 +140,21 @@ class TicketViewer extends React.Component {
|
|||||||
return(
|
return(
|
||||||
<div className="ticket-viewer__header">
|
<div className="ticket-viewer__header">
|
||||||
<div className="ticket-viewer__edit-title-box">
|
<div className="ticket-viewer__edit-title-box">
|
||||||
<FormField className="ticket-viewer___input-edit-title" error={this.state.editTitleError} value={this.state.newTitle} field='input' onChange={(e) => this.setState({newTitle: e.target.value })} />
|
<FormField
|
||||||
|
className="ticket-viewer___input-edit-title"
|
||||||
|
error={this.state.editTitleError}
|
||||||
|
value={this.state.newTitle}
|
||||||
|
field='input'
|
||||||
|
onChange={(e) => this.setState({newTitle: e.target.value})} />
|
||||||
|
</div>
|
||||||
|
<div className="ticket-viewer__edit-title__buttons">
|
||||||
|
<Button disabled={this.state.editTitleLoading} type='primary' size="medium" onClick={() => this.setState({editTitle: false})}>
|
||||||
|
{this.state.editTitleLoading ? <Loading /> : <Icon name="times" />}
|
||||||
|
</Button>
|
||||||
|
<Button disabled={this.state.editTitleLoading} type='secondary' size="medium" onClick={this.changeTitle.bind(this)}>
|
||||||
|
{this.state.editTitleLoading ? <Loading /> : <Icon name="check" />}
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Button type='secondary' size="extra-small" onClick={this.changeTitle.bind(this)}>
|
|
||||||
{i18n('EDIT_TITLE')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -157,7 +169,8 @@ class TicketViewer extends React.Component {
|
|||||||
<div className="ticket-viewer__info-container-editable">
|
<div className="ticket-viewer__info-container-editable">
|
||||||
<div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
|
<div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
|
||||||
<div className="ticket-viewer__info-value">
|
<div className="ticket-viewer__info-value">
|
||||||
<DepartmentDropdown className="ticket-viewer__editable-dropdown"
|
<DepartmentDropdown
|
||||||
|
className="ticket-viewer__editable-dropdown"
|
||||||
departments={departments}
|
departments={departments}
|
||||||
selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
|
selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
|
||||||
onChange={this.onDepartmentDropdownChanged.bind(this)} />
|
onChange={this.onDepartmentDropdownChanged.bind(this)} />
|
||||||
@ -426,6 +439,9 @@ class TicketViewer extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
changeTitle(){
|
changeTitle(){
|
||||||
|
this.setState({
|
||||||
|
editTitleLoading: true
|
||||||
|
});
|
||||||
API.call({
|
API.call({
|
||||||
path: '/ticket/edit-title',
|
path: '/ticket/edit-title',
|
||||||
data: {
|
data: {
|
||||||
@ -435,12 +451,14 @@ class TicketViewer extends React.Component {
|
|||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
editTitle: false,
|
editTitle: false,
|
||||||
editTitleError: false
|
editTitleError: false,
|
||||||
|
editTitleLoading: false
|
||||||
});
|
});
|
||||||
this.onTicketModification();
|
this.onTicketModification();
|
||||||
}).catch((result) => {
|
}).catch((result) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
editTitleError: i18n(result.message)
|
editTitleError: i18n(result.message),
|
||||||
|
editTitleLoading: false
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -36,17 +36,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&___input-edit-title {
|
&___input-edit-title {
|
||||||
color: black;
|
color: black;
|
||||||
align-items:center;
|
align-items:center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
|
|
||||||
.input__text {
|
.input__text {
|
||||||
height: 25px;
|
height: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__edit-title__buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
width: 160px;
|
||||||
|
}
|
||||||
&__number {
|
&__number {
|
||||||
color: white;
|
color: white;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user