Fix custom responses #388

client/src/app/admin/panel/tickets/admin-panel-custom-responses.js

@@ -21,21 +21,27 @@ import TextEditor from 'core-components/text-editor';
 
 class AdminPanelCustomResponses extends React.Component {
     static defaultProps = {
-        items: []
+        items: [],
     };
 
     state = {
+        formClicked: false,
+        showForm: false,
         formLoading: false,
         selectedIndex: -1,
-        edited: false,
         errors: {},
+        originalForm: {
+            title: '',
+            content: TextEditor.createEmpty(),
+            language: this.props.language
+        },
         form: {
             title: '',
             content: TextEditor.createEmpty(),
-            language: 'en'
+            language: this.props.language
         }
     };
-    
+
     componentDidMount() {
         if (!this.props.loaded) {
             this.retrieveCustomResponses();
@@ -57,25 +63,7 @@ class AdminPanelCustomResponses extends React.Component {
                 <div className="col-md-3">
                     <Listing {...this.getListingProps()}/>
                 </div>
-                <div className="col-md-9">
+                {this.state.showForm ?  this.renderForm() : null}
-                    <Form {...this.getFormProps()}>
-                        <div className="row">
-                            <div className="col-md-7">
-                                <FormField label={i18n('TITLE')} name="title" validation="TITLE" required fieldProps={{size: 'large'}}/>
-                            </div>
-                            <div className="col-md-5">
-                                <FormField label={i18n('LANGUAGE')} name="language" field="input" decorator={LanguageSelector} fieldProps={{size: 'medium'}} />
-                            </div>
-                        </div>
-                        <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
-                        <div className="admin-panel-custom-responses__actions">
-                            <div className="admin-panel-custom-responses__save-button">
-                                <SubmitButton type="secondary" size="small">{i18n('SAVE')}</SubmitButton>
-                            </div>
-                            {(this.state.selectedIndex !== -1) ? this.renderOptionalButtons() : null}
-                        </div>
-                    </Form>
-                </div>
             </div>
         );
     }
@@ -88,11 +76,35 @@ class AdminPanelCustomResponses extends React.Component {
         );
     }
 
+    renderForm() {
+        return (
+            <div className="col-md-9">
+                <Form {...this.getFormProps()}>
+                    <div className="row">
+                        <div className="col-md-7">
+                            <FormField label={i18n('TITLE')} name="title" validation="TITLE" required fieldProps={{size: 'large'}}/>
+                        </div>
+                        <div className="col-md-5">
+                            <FormField label={i18n('LANGUAGE')} name="language" field="input" decorator={LanguageSelector} fieldProps={{size: 'medium'}} />
+                        </div>
+                    </div>
+                    <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
+                    <div className="admin-panel-custom-responses__actions">
+                        <div className="admin-panel-custom-responses__save-button">
+                            <SubmitButton type="secondary" size="small">{i18n('SAVE')}</SubmitButton>
+                        </div>
+                        {(this.state.selectedIndex !== -1) ? this.renderOptionalButtons() : null}
+                    </div>
+                </Form>
+            </div>
+        );
+    }
+
     renderOptionalButtons() {
         return (
             <div className="admin-panel-custom-responses__optional-buttons">
                 <div className="admin-panel-custom-responses__discard-button">
-                    <Button onClick={this.onDiscardChangesClick.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
+                    {this.isEdited() ? <Button onClick={this.onDiscardChangesClick.bind(this)}>{i18n('DISCARD_CHANGES')}</Button> : null}
                 </div>
                 <div className="admin-panel-custom-responses__delete-button">
                     <Button onClick={this.onDeleteClick.bind(this)}>{i18n('DELETE')}</Button>
@@ -117,7 +129,8 @@ class AdminPanelCustomResponses extends React.Component {
             values: this.state.form,
             errors: this.state.errors,
             loading: this.state.formLoading,
-            onChange: (form) => {this.setState({form, edited: true})},
+            onClick: () => this.setState({formClicked: true}),
+            onChange: (form) => this.setState({form}),
             onValidateErrors: (errors) => {this.setState({errors})},
             onSubmit: this.onFormSubmit.bind(this)
         }
@@ -139,7 +152,7 @@ class AdminPanelCustomResponses extends React.Component {
     }
 
     onItemChange(index) {
-        if(this.state.edited) {
+        if(this.isEdited()) {
             AreYouSure.openModal(i18n('WILL_LOSE_CHANGES'), this.updateForm.bind(this, index));
         } else {
             this.updateForm(index);
@@ -147,28 +160,30 @@ class AdminPanelCustomResponses extends React.Component {
     }
 
     onFormSubmit(form) {
+        const {items, allowedLanguages} = this.props;
         this.setState({formLoading: true});
 
         if(this.state.selectedIndex !== -1) {
             API.call({
                 path: '/ticket/edit-custom-response',
                 data: {
-                    id: this.props.items[this.state.selectedIndex].id,
+                    id: items[this.state.selectedIndex].id,
-                    name: form.name,
+                    name: form.title,
                     content: form.content,
-                    language: form.language
+                    language: _.includes(allowedLanguages, form.language) ? form.language : allowedLanguages[0]
                 }
             }).then(() => {
-                this.setState({formLoading: false});
+                this.setState({formLoading: false, originalForm: form});
                 this.retrieveCustomResponses();
             }).catch(this.onItemChange.bind(this, -1));
         } else {
+            this.setState({form, originalForm: form});
             API.call({
                 path: '/ticket/add-custom-response',
                 data: {
                     name: form.title,
                     content: form.content,
-                    language: form.language
+                    language: _.includes(allowedLanguages, form.language) ? form.language : allowedLanguages[0]
                 }
             }).then(() => {
                 this.retrieveCustomResponses();
@@ -204,12 +219,14 @@ class AdminPanelCustomResponses extends React.Component {
 
         form.title = (this.props.items[index] && this.props.items[index].name) || '';
         form.content = TextEditor.getEditorStateFromHTML((this.props.items[index] && this.props.items[index].content) || '');
-        form.language = (this.props.items[index] && this.props.items[index].language) || 'en';
+        form.language = (this.props.items[index] && this.props.items[index].language) || this.props.language;
 
         this.setState({
+            formClicked: false,
+            showForm: true,
             selectedIndex: index,
-            edited: false,
             formLoading: false,
+            originalForm: form,
             form: form,
             errors: {}
         });
@@ -217,14 +234,21 @@ class AdminPanelCustomResponses extends React.Component {
 
     retrieveCustomResponses() {
         this.props.dispatch(AdminDataActions.retrieveCustomResponses());
-        this.setState({
+    }
-            edited: false
+
-        });
+    isEdited() {
+        return this.state.form.title && this.state.formClicked && (
+            this.state.form.title != this.state.originalForm.title ||
+            this.state.form.content != this.state.originalForm.content ||
+            this.state.form.language != this.state.originalForm.language
+        );
     }
 }
 
 export default connect((store) => {
     return {
+        allowedLanguages: store.config.allowedLanguages,
+        language: store.config.language,
         loaded: store.adminData.customResponsesLoaded,
         items: store.adminData.customResponses
     };