Skip to content

Add country form to React #1360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add country form to React #1360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions src/main/frontend/src/components/AddCountryForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
class AddCountryForm extends React.Component {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you prepend a comment like this?

mystamps/src/main/frontend/src/components/SeriesSaleImportForm.js

Lines 1 to 5 in 778dc2a

//
// IMPORTANT:
// You must update ResourceUrl.RESOURCES_VERSION each time whenever you're modified this file!
//


constructor(props) {
super(props);
this.state = {
nameInEnglish: "",
nameInRussian: ""
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, prefer single quotes over double one.

};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
event.preventDefault();
this.setState({
[event.target.name]: event.target.value
});
}

handleSubmit(event) {
event.preventDefault();

this.setState({});

axios.post(
"categories",{},{}
).then(response => {

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you plan to implement this logic?

}).catch(error => {

});

}

render() {
return (
<form id="add-country-form" className="form-horizontal" onSubmit={this.handleSubmit}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to add has-error class for errors. Example:

mystamps/src/main/frontend/src/components/SeriesSaleImportForm.js

Line 114 in 778dc2a

className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`}

/* method="post" action="info.html" th:action="@{${ADD_COUNTRY_PAGE}}" th:object="${addCountryForm}" */>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line can be removed.


<div className="form-group" /* th:classappend="${#fields.hasErrors('name') ? 'has-error' : ''}" */>
<label htmlFor="name" className="control-label col-sm-4">
<span /* th:remove="tag" th:text="#{t_name_in_english}" */>
Name (in English)
</span>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The <span> isn't needed and we also should handle localization. Example:

<label htmlFor="name" className="control-label col-sm-4">
	{ this.props.l10n['t_name_in_english'] || 'Name (in English)' }
	<span className="required_field">*</span>
</label>

<span className="required_field">*</span>
</label>
<div className="col-sm-5">
<input id="name"
type="text"
className="form-control"
value={this.state.nameInEnglish}
name="nameInEnglish"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this "name" attribute is needed for event.target.name?

required="required"
onChange={this.handleChange} /* th:field="*{name}" */ />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
onChange={this.handleChange} /* th:field="*{name}" */ />
onChange={this.handleChange} />

{/*
<span id="name.errors" class="help-block" th:if="${#fields.hasErrors('name')}" th:each="error : ${#fields.errors('name')}" th:text="${error}"></span>
*/}
</div>
</div>

<div className="form-group" /* th:classappend="${#fields.hasErrors('nameRu') ? 'has-error' : ''}" */>
<label htmlFor="nameRu" className="control-label col-sm-4" /* th:text="#{t_name_in_russian}" */>
Name (in Russian)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization should be supported.

</label>
<div className="col-sm-5">
<input id="nameRu"
type="text"
className="form-control"
value={this.state.nameInRussian}
name="nameInRussian"
onChange={this.handleChange} /* th:field="*{nameRu}" */ />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
onChange={this.handleChange} /* th:field="*{nameRu}" */ />
onChange={this.handleChange} />

{/*
<span id="nameRu.errors" class="help-block" th:if="${#fields.hasErrors('nameRu')}" th:each="error : ${#fields.errors('nameRu')}" th:text="${error}"></span>
*/}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be implemented like there:

mystamps/src/main/frontend/src/components/SimilarSeriesForm.js

Lines 111 to 113 in 778dc2a

<span id="similar-id.errors" className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
{ this.state.validationErrors.join(', ') }
</span>

</div>
</div>

<div className="form-group">
<div className="col-sm-offset-4 col-sm-5">
<input type="submit"
className="btn btn-primary"
value="Add" /* th:value="#{t_add}" */ />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add localization and convert it into a button. Like there:

mystamps/src/main/frontend/src/components/SimilarSeriesForm.js

Lines 105 to 109 in 778dc2a

<button type="submit"
className="btn btn-primary btn-sm"
disabled={this.state.isDisabled}>
{ this.props.l10n['t_mark_as_similar'] || 'Mark as similar' }
</button>

</div>
</div>

</form>
)
}
}
48 changes: 11 additions & 37 deletions src/main/webapp/WEB-INF/views/country/add.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,43 +73,8 @@ <h3 th:text="${#strings.capitalize(add_country)}">
</small>
</div>

<form id="add-country-form" method="post" class="form-horizontal" action="info.html"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't remove the form in this PR. Everything should continue to work until we fully re-implement existing logic.

Can we try to render the component into id="add-country-form" or we need a separate element for that?

th:action="@{${ADD_COUNTRY_PAGE}}" th:object="${addCountryForm}">

<div class="form-group" th:classappend="${#fields.hasErrors('name') ? 'has-error' : ''}">
<label for="name" class="control-label col-sm-4">
<span th:remove="tag" th:text="#{t_name_in_english}">
Name (in English)
</span>
<span class="required_field">*</span>
</label>
<div class="col-sm-5">
<input id="name" type="text" class="form-control" required="required" th:field="*{name}" />
<!--/*/
<span id="name.errors" class="help-block" th:if="${#fields.hasErrors('name')}" th:each="error : ${#fields.errors('name')}" th:text="${error}"></span>
/*/-->
</div>
</div>

<div class="form-group" th:classappend="${#fields.hasErrors('nameRu') ? 'has-error' : ''}">
<label for="nameRu" class="control-label col-sm-4" th:text="#{t_name_in_russian}">
Name (in Russian)
</label>
<div class="col-sm-5">
<input id="nameRu" type="text" class="form-control" th:field="*{nameRu}" />
<!--/*/
<span id="nameRu.errors" class="help-block" th:if="${#fields.hasErrors('nameRu')}" th:each="error : ${#fields.errors('nameRu')}" th:text="${error}"></span>
/*/-->
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-4 col-sm-5">
<input type="submit" class="btn btn-primary" value="Add" th:value="#{t_add}" />
</div>
</div>

</form>
<div id="add-country-form-react"></div>

</div>
</div>
<div class="row">
Expand All @@ -123,5 +88,14 @@ <h3 th:text="${#strings.capitalize(add_country)}">
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js" th:src="${JQUERY_JS}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" th:src="${BOOTSTRAP_JS}"></script>

<script src="https://unpkg.com/[email protected]/umd/react.development.js" th:src="${REACT_JS}"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" th:src="${REACT_DOM_JS}"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.js" th:src="${AXIOS_JS}"></script>

<script src="../../../../../../target/classes/js/components/AddCountryForm.js"></script>
<script th:inline="javascript">
ReactDOM.render(React.createElement(AddCountryForm), document.getElementById('add-country-form-react'));
</script>
</body>
</html>