tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix style in edit ticket title and add loading logic. (#827)

This commit is contained in:
LautaroCesso 2020-07-14 19:19:51 -03:00 committed by GitHub
parent 62497d1263
commit 14d81cff24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/app-components/ticket-viewer.js
View File

@ -24,6 +24,7 @@ import InfoTooltip from 'core-components/info-tooltip';
import DepartmentDropdown from 'app-components/department-dropdown';
import TagSelector from 'core-components/tag-selector';
import Tag from 'core-components/tag';
import Loading from 'core-components/loading';
class TicketViewer extends React.Component {
static propTypes = {
@ -64,6 +65,7 @@ class TicketViewer extends React.Component {
editTitle: false,
newTitle: this.props.ticket.title,
editTitleError: false,
editTitleLoading: false,
};
componentDidMount() {
@ -138,11 +140,21 @@ class TicketViewer extends React.Component {
return(
<div className="ticket-viewer__header">
<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>
<Button type='secondary' size="extra-small" onClick={this.changeTitle.bind(this)}>
{i18n('EDIT_TITLE')}
</Button>
</div>
)
}
@ -157,7 +169,8 @@ class TicketViewer extends React.Component {
<div className="ticket-viewer__info-container-editable">
<div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
<div className="ticket-viewer__info-value">
<DepartmentDropdown className="ticket-viewer__editable-dropdown"
<DepartmentDropdown
className="ticket-viewer__editable-dropdown"
departments={departments}
selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
onChange={this.onDepartmentDropdownChanged.bind(this)} />
@ -426,6 +439,9 @@ class TicketViewer extends React.Component {
}
changeTitle(){
this.setState({
editTitleLoading: true
});
API.call({
path: '/ticket/edit-title',
data: {
@ -435,12 +451,14 @@ class TicketViewer extends React.Component {
}).then(() => {
this.setState({
editTitle: false,
editTitleError: false
editTitleError: false,
editTitleLoading: false
});
this.onTicketModification();
}).catch((result) => {
this.setState({
editTitleError: i18n(result.message)
editTitleError: i18n(result.message),
editTitleLoading: false
})
});
}

23
client/src/app-components/ticket-viewer.scss
View File

@ -36,17 +36,24 @@
}
&___input-edit-title {
color: black;
align-items:center;
justify-content: center;
margin-bottom: 6px;
margin-right: 6px;
color: black;
align-items:center;
justify-content: center;
margin-bottom: 6px;
margin-right: 6px;
.input__text {
height: 25px;
}
.input__text {
height: 25px;
}
}
&__edit-title__buttons {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 160px;
}
&__number {
color: white;
margin-right: 30px;