tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-10 07:24:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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 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
}) })
}); });
} }

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

@ -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;