Skip to content

Commit a6e9689

Browse files
php-coderphp-coder
committed
/series/add: reorder fields and hide some fields by default.
Fix #117
2 parents 0ffad9f + eb8e3e1 commit a6e9689

File tree

3 files changed

+99
-55
lines changed

3 files changed

+99
-55
lines changed

‎src/main/resources/ru/mystamps/i18n/Messages.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,18 @@ t_enter = Sign in
8181

8282
# series/add.html
8383
t_add_series_ucfirst = Add stamp series
84+
t_specify_issue_date = Specify date of release
8485
t_day = Day
8586
t_month = Month
8687
t_year = Year
8788
t_quantity = Quantity
8889
t_perforated = Perforated
90+
t_add_catalogs_info = Add information from stamps catalogues
8991
t_michel = Michel
9092
t_scott = Scott
9193
t_yvert = Yvert
9294
t_sg = Gibbons
95+
t_add_comment = Add comment
9396
t_comment = Comment
9497
t_image = Image
9598
t_add_more_images_hint = Later you will be able to add additional images

‎src/main/resources/ru/mystamps/i18n/Messages_ru.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,18 @@ t_enter = Войти
8181

8282
# series/add.html
8383
t_add_series_ucfirst = Добавить серию марок
84+
t_specify_issue_date = Указать дату выпуска
8485
t_day = День
8586
t_month = Месяц
8687
t_year = Год
8788
t_quantity = Количество
8889
t_perforated = Перфорированная
90+
t_add_catalogs_info = Добавить информацию из каталогов
8991
t_michel = Michel
9092
t_scott = Scott
9193
t_yvert = Yvert
9294
t_sg = Gibbons
95+
t_add_comment = Добавить комментарий
9396
t_comment = Комментарий
9497
t_image = Изображение
9598
t_add_more_images_hint = Вы сможете добавить дополнительные изображения позже

‎src/main/webapp/WEB-INF/views/series/add.html

Lines changed: 93 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,14 @@ <h3 th:text="#{t_add_series_ucfirst}">
6363
</small>
6464
</div>
6565

66-
<form method="post" enctype="multipart/form-data" class="form-horizontal" action="info.html" th:action="@{${ADD_SERIES_PAGE}} + '?' + ${_csrf.parameterName} + '=' + ${_csrf.token}" th:object="${addSeriesForm}">
66+
<form method="post" enctype="multipart/form-data" class="form-horizontal" action="info.html"
67+
th:action="@{${ADD_SERIES_PAGE}} + '?' + ${_csrf.parameterName} + '=' + ${_csrf.token}"
68+
th:object="${addSeriesForm}"
69+
th:with="michelHasErrors=${#fields.hasErrors('michelNumbers') or #fields.hasErrors('michelPrice') or #fields.hasErrors('michelCurrency')},
70+
scottHasErrors=${#fields.hasErrors('scottNumbers') or #fields.hasErrors('scottPrice') or #fields.hasErrors('scottCurrency')},
71+
yvertHasErrors=${#fields.hasErrors('yvertNumbers') or #fields.hasErrors('yvertPrice') or #fields.hasErrors('yvertCurrency')},
72+
gibbonsHasErrors=${#fields.hasErrors('gibbonsNumbers') or #fields.hasErrors('gibbonsPrice') or #fields.hasErrors('gibbonsCurrency')},
73+
showCatalogsInfo=${michelHasErrors or scottHasErrors or yvertHasErrors or gibbonsHasErrors}">
6774

6875
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('category') ? 'has-error' : ''}">
6976
<label for="category" class="control-label col-sm-3">
@@ -110,7 +117,66 @@ <h3 th:text="#{t_add_series_ucfirst}">
110117
</div>
111118
</div>
112119

113-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('day') or #fields.hasErrors('month') or #fields.hasErrors('year') ? 'has-error' : ''}">
120+
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('quantity') ? 'has-error' : ''}">
121+
<label for="quantity" class="control-label col-sm-3">
122+
<span class="field-label" th:text="#{t_quantity}">
123+
Quantity
124+
</span>
125+
<span id="quantity.required" class="required_field">*</span>
126+
</label>
127+
<div class="col-sm-2">
128+
<input type="number"
129+
id="quantity"
130+
class="form-control"
131+
required="required"
132+
th:min="${T(ru.mystamps.web.validation.ValidationRules).MIN_STAMPS_IN_SERIES}"
133+
th:max="${T(ru.mystamps.web.validation.ValidationRules).MAX_STAMPS_IN_SERIES}"
134+
min="1"
135+
max="50"
136+
th:field="*{quantity}" />
137+
<span id="quantity.errors" class="help-block" th:if="${#fields.hasErrors('quantity')}" th:each="error : ${#fields.errors('quantity')}" th:text="${error}"></span>
138+
</div>
139+
</div>
140+
141+
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('perforated') ? 'has-error' : ''}">
142+
<label for="perforated" class="control-label col-sm-3">
143+
<span class="field-label" th:text="#{t_perforated}">
144+
Perforated
145+
</span>
146+
</label>
147+
<div class="col-sm-1">
148+
<input type="checkbox" id="perforated" checked="checked" th:field="*{perforated}" />
149+
<span id="perforated.errors" class="help-block" th:if="${#fields.hasErrors('perforated')}" th:each="error : ${#fields.errors('perforated')}" th:text="${error}"></span>
150+
</div>
151+
</div>
152+
153+
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('image') ? 'has-error' : ''}">
154+
<label for="image" class="control-label col-sm-3">
155+
<span class="field-label" th:text="#{t_image}">
156+
Image
157+
</span>
158+
<span id="image.required" class="required_field">*</span>
159+
</label>
160+
<div class="col-sm-7">
161+
<input type="file" id="image" class="form-control" style="box-shadow: none; border: 0px;" required="required" accept="image/png,image/jpeg" th:field="*{image}" />
162+
<small togglz:active="ADD_ADDITIONAL_IMAGES_TO_SERIES" sec:authorize="hasAuthority('ADD_IMAGES_TO_SERIES')">
163+
<span class="hint-block" th:text="#{t_add_more_images_hint}">
164+
You will be able to add additional images on the series page
165+
</span>
166+
</small>
167+
<span id="image.errors" class="help-block" th:if="${#fields.hasErrors('image')}" th:each="error : ${#fields.errors('image')}" th:text="${error}"></span>
168+
</div>
169+
</div>
170+
171+
<div class="form-group js-collapse-toggle-header">
172+
<div class="col-sm-offset-3 col-sm-5">
173+
<span class="glyphicon glyphicon-chevron-right" th:class="${#fields.hasErrors('day') or #fields.hasErrors('month') or #fields.hasErrors('year') ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-right'}"></span>&nbsp;<a href="javascript:void(0)" data-toggle="collapse" data-target=".js-issue-date" th:text="#{t_specify_issue_date}">
174+
Specify date of release
175+
</a>
176+
</div>
177+
</div>
178+
179+
<div class="form-group form-group-sm collapse js-issue-date" th:classappend="${#fields.hasErrors('day') or #fields.hasErrors('month') or #fields.hasErrors('year') ? 'has-error in' : ''}">
114180
<label for="year" class="control-label col-sm-3">
115181
<span class="field-label" th:text="#{t_issue_date}">
116182
Date of release
@@ -194,40 +260,15 @@ <h3 th:text="#{t_add_series_ucfirst}">
194260
</div>
195261
</div>
196262

197-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('quantity') ? 'has-error' : ''}">
198-
<label for="quantity" class="control-label col-sm-3">
199-
<span class="field-label" th:text="#{t_quantity}">
200-
Quantity
201-
</span>
202-
<span id="quantity.required" class="required_field">*</span>
203-
</label>
204-
<div class="col-sm-2">
205-
<input type="number"
206-
id="quantity"
207-
class="form-control"
208-
required="required"
209-
th:min="${T(ru.mystamps.web.validation.ValidationRules).MIN_STAMPS_IN_SERIES}"
210-
th:max="${T(ru.mystamps.web.validation.ValidationRules).MAX_STAMPS_IN_SERIES}"
211-
min="1"
212-
max="50"
213-
th:field="*{quantity}" />
214-
<span id="quantity.errors" class="help-block" th:if="${#fields.hasErrors('quantity')}" th:each="error : ${#fields.errors('quantity')}" th:text="${error}"></span>
215-
</div>
216-
</div>
217-
218-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('perforated') ? 'has-error' : ''}">
219-
<label for="perforated" class="control-label col-sm-3">
220-
<span class="field-label" th:text="#{t_perforated}">
221-
Perforated
222-
</span>
223-
</label>
224-
<div class="col-sm-1">
225-
<input type="checkbox" id="perforated" checked="checked" th:field="*{perforated}" />
226-
<span id="perforated.errors" class="help-block" th:if="${#fields.hasErrors('perforated')}" th:each="error : ${#fields.errors('perforated')}" th:text="${error}"></span>
263+
<div class="form-group js-collapse-toggle-header">
264+
<div class="col-sm-offset-3 col-sm-7">
265+
<span class="glyphicon glyphicon-chevron-right" th:class="${showCatalogsInfo ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-right'}"></span>&nbsp;<a href="javascript:void(0)" data-toggle="collapse" data-target=".js-catalogs-info" th:text="#{t_add_catalogs_info}">
266+
Add information from stamps catalogues
267+
</a>
227268
</div>
228269
</div>
229270

230-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('michelNumbers') or #fields.hasErrors('michelPrice') or #fields.hasErrors('michelCurrency') ? 'has-error' : ''}">
271+
<div class="form-group form-group-sm collapse js-catalogs-info" th:classappend="|${michelHasErrors ? 'has-error' : ''} ${showCatalogsInfo ? 'in' : ''}|">
231272
<label for="michelNumbers" class="control-label col-sm-3">
232273
<span class="field-label" th:text="#{t_michel}">
233274
Michel
@@ -260,7 +301,7 @@ <h3 th:text="#{t_add_series_ucfirst}">
260301
</div>
261302
</div>
262303

263-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('scottNumbers') or #fields.hasErrors('scottPrice') or #fields.hasErrors('scottCurrency') ? 'has-error' : ''}">
304+
<div class="form-group form-group-sm collapse js-catalogs-info" th:classappend="|${scottHasErrors ? 'has-error' : ''} ${showCatalogsInfo ? 'in' : ''}|">
264305
<label for="scottNumbers" class="control-label col-sm-3">
265306
<span class="field-label" th:text="#{t_scott}">
266307
Scott
@@ -293,7 +334,7 @@ <h3 th:text="#{t_add_series_ucfirst}">
293334
</div>
294335
</div>
295336

296-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('yvertNumbers') or #fields.hasErrors('yvertPrice') or #fields.hasErrors('yvertCurrency') ? 'has-error' : ''}">
337+
<div class="form-group form-group-sm collapse js-catalogs-info" th:classappend="|${yvertHasErrors ? 'has-error' : ''} ${showCatalogsInfo ? 'in' : ''}|">
297338
<label for="yvertNumbers" class="control-label col-sm-3">
298339
<span class="field-label" th:text="#{t_yvert}">
299340
Yvert
@@ -326,7 +367,7 @@ <h3 th:text="#{t_add_series_ucfirst}">
326367
</div>
327368
</div>
328369

329-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('gibbonsNumbers') or #fields.hasErrors('gibbonsPrice') or #fields.hasErrors('gibbonsCurrency') ? 'has-error' : ''}">
370+
<div class="form-group form-group-sm collapse js-catalogs-info" th:classappend="|${gibbonsHasErrors ? 'has-error' : ''} ${showCatalogsInfo ? 'in' : ''}|">
330371
<label for="gibbonsNumbers" class="control-label col-sm-3">
331372
<span class="field-label" th:text="#{t_sg}">
332373
Gibbons
@@ -359,7 +400,15 @@ <h3 th:text="#{t_add_series_ucfirst}">
359400
</div>
360401
</div>
361402

362-
<div class="form-group" th:classappend="${#fields.hasErrors('comment') ? 'has-error' : ''}" sec:authorize="hasAuthority('ADD_COMMENTS_TO_SERIES')">
403+
<div class="form-group js-collapse-toggle-header" sec:authorize="hasAuthority('ADD_COMMENTS_TO_SERIES')">
404+
<div class="col-sm-offset-3 col-sm-5">
405+
<span class="glyphicon glyphicon-chevron-right" th:class="${#fields.hasErrors('comment') ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-right'}"></span>&nbsp;<a href="javascript:void(0)" data-toggle="collapse" data-target=".js-comment" th:text="#{t_add_comment}">
406+
Add comment
407+
</a>
408+
</div>
409+
</div>
410+
411+
<div class="form-group collapse js-comment" th:classappend="${#fields.hasErrors('comment') ? 'has-error in' : ''}" sec:authorize="hasAuthority('ADD_COMMENTS_TO_SERIES')">
363412
<label for="comment" class="control-label col-sm-3">
364413
<span class="field-label" th:text="#{t_comment}">
365414
Comment
@@ -371,24 +420,6 @@ <h3 th:text="#{t_add_series_ucfirst}">
371420
</div>
372421
</div>
373422

374-
<div class="form-group form-group-sm" th:classappend="${#fields.hasErrors('image') ? 'has-error' : ''}">
375-
<label for="image" class="control-label col-sm-3">
376-
<span class="field-label" th:text="#{t_image}">
377-
Image
378-
</span>
379-
<span id="image.required" class="required_field">*</span>
380-
</label>
381-
<div class="col-sm-7">
382-
<input type="file" id="image" class="form-control" style="box-shadow: none; border: 0px;" required="required" accept="image/png,image/jpeg" th:field="*{image}" />
383-
<small togglz:active="ADD_ADDITIONAL_IMAGES_TO_SERIES" sec:authorize="hasAuthority('ADD_IMAGES_TO_SERIES')">
384-
<span class="hint-block" th:text="#{t_add_more_images_hint}">
385-
You will be able to add additional images on the series page
386-
</span>
387-
</small>
388-
<span id="image.errors" class="help-block" th:if="${#fields.hasErrors('image')}" th:each="error : ${#fields.errors('image')}" th:text="${error}"></span>
389-
</div>
390-
</div>
391-
392423
<div class="form-group form-group-sm">
393424
<div class="col-sm-offset-3 col-sm-5">
394425
<input type="submit" class="btn btn-primary" value="Add" th:value="#{t_add}" />
@@ -419,6 +450,13 @@ <h3 th:text="#{t_add_series_ucfirst}">
419450
return CatalogUtils.expandNumbers(val);
420451
});
421452
});
453+
454+
$('.collapse').on('show.bs.collapse hide.bs.collapse', function toggleChevron() {
455+
$(this)
456+
.prev('.js-collapse-toggle-header')
457+
.find('.glyphicon')
458+
.toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
459+
});
422460
});
423461
</script>
424462
</body>

0 commit comments

Comments
 (0)