Skip to content

Commit

Permalink
Merge pull request #34631 from dimagi/jls/b5-errors
Browse files Browse the repository at this point in the history
[B5] web apps: errors in form entry
  • Loading branch information
orangejenny authored May 17, 2024
2 parents cd6b2c0 + c11ce11 commit c61b7de
Show file tree
Hide file tree
Showing 38 changed files with 260 additions and 74 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_choice_label.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_date.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_datetime.html' %}
{% include 'cloudcare/partials/form_entry/entry_dropdown.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_dropdown.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_ethiopian_date.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_file.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_geo.html' %}
{% include 'cloudcare/partials/form_entry/entry_multidropdown.html' %}
{% include 'cloudcare/partials/form_entry/entry_password.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_multidropdown.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_password.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_select.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_signature.html' %}
{% include 'cloudcare/partials/form_entry/entry_str.html' %}
{% include 'cloudcare/partials/form_entry/entry_text.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_str.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_text.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_time.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/entry_unsupported.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap3/form.html' %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_choice_label.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_date.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_datetime.html' %}
{% include 'cloudcare/partials/form_entry/entry_dropdown.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_dropdown.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_ethiopian_date.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_file.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_geo.html' %}
{% include 'cloudcare/partials/form_entry/entry_multidropdown.html' %}
{% include 'cloudcare/partials/form_entry/entry_password.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_multidropdown.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_password.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_select.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_signature.html' %}
{% include 'cloudcare/partials/form_entry/entry_str.html' %}
{% include 'cloudcare/partials/form_entry/entry_text.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_str.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_text.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_time.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/entry_unsupported.html' %}
{% include 'cloudcare/partials/form_entry/bootstrap5/form.html' %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
id: 'group-' + $parent.entryId + '-choice-' + $index(),
'aria-labelledby': $parent.entryId + '-choice-' + $index() + '-sr',
name: $parent.entryId,
css: { 'is-invalid': $root.hasError() },
class: 'group-' + $parent.entryId,
}
"/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script type="text/html" id="date-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control"
data-bind="attr: {id: entryId, 'aria-required': $parent.required() ? 'true' : 'false'}"/>
data-bind="
css: { 'is-invalid': $parent.hasError() },
attr: {id: entryId, 'aria-required': $parent.required() ? 'true' : 'false'},
"/>
<span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script type="text/html" id="datetime-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
<input type="text" class="form-control" data-bind="
css: { 'is-invalid': $parent.hasError() },
attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' },
"/>
<span class="input-group-text"><i class="fcc fcc-fd-datetime"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script type="text/html" id="dropdown-entry-ko-template">
<select class="form-control" data-bind="
foreach: options,
value: rawAnswer,
css: { 'is-invalid': $parent.hasError() },
attr: {
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
},
valueAllowUnset: true,
">
<option data-bind="value: id, text: text"></option>
</select>
</script>
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script type="text/html" id="ethiopian-date-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control" autocomplete="off" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
<input type="text" class="form-control" autocomplete="off" data-bind="
css: { 'is-invalid': $parent.hasError() },
attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' },
"/>
<span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<div class="col-sm-8">
<input type="file" data-bind="
value: $data.rawAnswer,
css: { 'is-invalid': $parent.hasError() },
attr: {
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@
<form data-bind="submit: search">
<div class="mt-1" data-bind="css: control_width">
<div class="input-group">
<input class="query form-control" type="text" />
<input class="query form-control"
type="text"
data-bind="css: { 'is-invalid': $parent.hasError() }"
/>
<button class="btn btn-outline-primary search">{% trans "Search" %}</button>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script type="text/html" id="multidropdown-entry-ko-template">
<select multiple class="form-control" data-bind="
options: choices,
selectedOptions: rawAnswer,
css: { 'is-invalid': $parent.hasError() },
attr: {
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
},
valueAllowUnset: true,
">
</select>
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script type="text/html" id="password-entry-ko-template">
<input type="password" class="form-control" data-bind="
value: $data.rawAnswer,
valueUpdate: valueUpdate,
css: { 'is-invalid': $parent.hasError() },
attr: {
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
},
"/>
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<input data-bind="
checked: $parent.rawAnswer,
checkedValue: $data,
css: { 'is-invalid': $root.hasError() },
attr: {
id: 'group-' + $parent.entryId + '-choice-' + $index(),
type: $parent.isMulti ? 'checkbox' : 'radio',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<script type="text/html" id="signature-entry-ko-template">
<div data-bind="attr: { id: entryId + '-wrapper' }">
<canvas data-bind="
css: { 'is-invalid': $parent.hasError() },
attr: {
id: entryId + '-canvas',
'aria-required': $parent.required() ? 'true' : 'false',
Expand All @@ -14,7 +15,7 @@
<button class="btn btn-outline-primary btn-sm float-end" data-bind="click: onClear">
{% trans "Clear" %}
</button>
<input type="file" class="hidden" data-bind="
<input type="file" class="d-none" data-bind="
value: $data.rawAnswer,
attr: {
id: entryId,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script type="text/html" id="str-entry-ko-template">
<input autocomplete="off" type="text" class="form-control" data-bind="
value: $data.rawAnswer,
valueUpdate: valueUpdate,
css: { 'is-invalid': $parent.hasError() },
attr: {
maxlength: lengthLimit,
id: entryId,
placeholder: placeholderText,
'aria-required': $parent.required() ? 'true' : 'false',
}
"/>
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script type="text/html" id="text-entry-ko-template">
<textarea class="textfield form-control vertical-resize" data-bind="
value: $data.rawAnswer,
valueUpdate: valueUpdate,
css: { 'is-invalid': $parent.hasError() },
attr: {
placeholder: placeholderText,
maxlength: lengthLimit,
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
},
"></textarea>
</script>
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script type="text/html" id="time-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
<input type="text" class="form-control" data-bind="
attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' },
css: { 'is-invalid': $parent.hasError() },
"/>
<span class="input-group-text"><i class="fa-regular fa-clock"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,8 @@
</label>
<div class="widget-container controls" data-bind="css: controlWidth">
<div class="widget" data-bind="
template: { name: entryTemplate, data: entry, afterRender: afterRender },
css: { 'has-error': hasError } {# todo B5: css:has-error #}
">
template: { name: entryTemplate, data: entry, afterRender: afterRender },
">
</div>
<div class="widget-multimedia" data-bind="
template: { name: 'widget-multimedia-ko-template', data: $data }"
Expand Down Expand Up @@ -120,16 +119,15 @@
<!-- /ko -->
<!-- ko if: isButton -->
{# appearance attributes TEXT_ALIGN_CENTER TEXT_ALIGN_RIGHT #}
<div class="q row" data-bind="
css: {
error: error,
'text-center': stylesContains('text-align-center'),
'text-end': stylesContains('text-align-right')
}">
<div class="widget-container controls col-md-12">
<div class="widget" data-bind="
template: { name: entryTemplate, data: entry, afterRender: afterRender },
css: { 'has-error': hasError } {# todo B5: css:has-error #}
<div class="q row" data-bind="
css: {
error: error,
'text-center': stylesContains('text-align-center'),
'text-end': stylesContains('text-align-right')
}">
<div class="widget-container controls col-md-12">
<div class="widget" data-bind="
template: { name: entryTemplate, data: entry, afterRender: afterRender },
"></div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,28 +26,33 @@
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_choice_label.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_date.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_datetime.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_dropdown.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_ethiopian_date.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_file.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_geo.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_multidropdown.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_password.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_select.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_signature.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_str.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_text.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_time.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_unsupported.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/form.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_button.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_choice_label.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_date.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_datetime.html' %}
{% include 'cloudcare/partials/form_entry/entry_dropdown.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_ethiopian_date.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_file.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_geo.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_dropdown.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_ethiopian_date.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_file.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_geo.html' %}
{% include 'cloudcare/partials/form_entry/entry_multidropdown.html' %}
{% include 'cloudcare/partials/form_entry/entry_password.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_select.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_signature.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_multidropdown.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_password.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_select.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_signature.html' %}
{% include 'cloudcare/partials/form_entry/entry_str.html' %}
{% include 'cloudcare/partials/form_entry/entry_text.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_time.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/entry_unsupported.html' %}
-{% include 'cloudcare/partials/form_entry/bootstrap3/form.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_str.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_text.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_time.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/entry_unsupported.html' %}
+{% include 'cloudcare/partials/form_entry/bootstrap5/form.html' %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
---
+++
@@ -21,7 +21,7 @@
@@ -12,6 +12,7 @@
id: 'group-' + $parent.entryId + '-choice-' + $index(),
'aria-labelledby': $parent.entryId + '-choice-' + $index() + '-sr',
name: $parent.entryId,
+ css: { 'is-invalid': $root.hasError() },
class: 'group-' + $parent.entryId,
}
"/>
@@ -21,7 +22,7 @@
<!-- /ko -->
<!-- ko if: hideLabel -->
<div data-bind="attr: { 'class': colStyle }">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
---
+++
@@ -2,6 +2,6 @@
@@ -1,7 +1,10 @@
<script type="text/html" id="date-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control"
data-bind="attr: {id: entryId, 'aria-required': $parent.required() ? 'true' : 'false'}"/>
- data-bind="attr: {id: entryId, 'aria-required': $parent.required() ? 'true' : 'false'}"/>
- <span class="input-group-addon"><i class="fa-solid fa-calendar-days"></i></span>
+ data-bind="
+ css: { 'is-invalid': $parent.hasError() },
+ attr: {id: entryId, 'aria-required': $parent.required() ? 'true' : 'false'},
+ "/>
+ <span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
---
+++
@@ -1,6 +1,6 @@
@@ -1,6 +1,9 @@
<script type="text/html" id="datetime-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
- <input type="text" class="form-control" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
- <span class="input-group-addon"><i class="fcc fcc-fd-datetime"></i></span>
+ <input type="text" class="form-control" data-bind="
+ css: { 'is-invalid': $parent.hasError() },
+ attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' },
+ "/>
+ <span class="input-group-text"><i class="fcc fcc-fd-datetime"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
+++
@@ -2,6 +2,7 @@
<select class="form-control" data-bind="
foreach: options,
value: rawAnswer,
+ css: { 'is-invalid': $parent.hasError() },
attr: {
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
---
+++
@@ -1,6 +1,6 @@
@@ -1,6 +1,9 @@
<script type="text/html" id="ethiopian-date-entry-ko-template">
<div class="input-group">
<input type="text" class="form-control" autocomplete="off" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
- <input type="text" class="form-control" autocomplete="off" data-bind="attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' }"/>
- <span class="input-group-addon"><i class="fa-solid fa-calendar-days"></i></span>
+ <input type="text" class="form-control" autocomplete="off" data-bind="
+ css: { 'is-invalid': $parent.hasError() },
+ attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' },
+ "/>
+ <span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
</div>
</script>
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
---
+++
@@ -2,7 +2,7 @@
@@ -2,9 +2,10 @@

<script type="text/html" id="file-entry-ko-template">
<div class="row">
- <div class="col-xs-8">
+ <div class="col-sm-8">
<input type="file" data-bind="
value: $data.rawAnswer,
+ css: { 'is-invalid': $parent.hasError() },
attr: {
@@ -12,8 +12,8 @@
id: entryId,
'aria-required': $parent.required() ? 'true' : 'false',
@@ -12,8 +13,8 @@
},
"/>
</div>
Expand Down
Loading

0 comments on commit c61b7de

Please sign in to comment.