-
-
Notifications
You must be signed in to change notification settings - Fork 213
/
data_corrections_modal.html
153 lines (149 loc) · 7.32 KB
/
data_corrections_modal.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
{% load hq_shared_tags %}
{% load i18n %}
{% comment %}
Modal-based UI for data corrections.
Depends on reports/js/data_corrections.js
{% endcomment %}
<!-- class='hide' keeps modal from showing until knockout initializes & removes the class -->
<div class="hide modal fade data-corrections-modal"
data-bind="css: { 'full-screen-modal': isFullScreenModal(), 'hide': false },
event: { 'hidden.bs.modal': function() { $root.init(); }, 'shown.bs.modal': function() { $root.trackOpen(); } }">
<div class="modal-dialog" data-bind="css: { 'modal-lg': isLargeModal() }">
<div class="modal-content">
<div class="modal-header with-controls">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="form-inline pull-right" data-bind="visible: !showSpinner()">
<!-- ko if: displayProperties.length > 1 -->
<ul class="nav nav-pills">
<!-- ko foreach: displayProperties -->
<li data-bind="click: function() { $root.updateDisplayProperty(property) }, css: { active: $root.displayProperty() === property }">
<a data-bind="text: name"></a>
</li>
<!--/ko-->
</ul>
<!--/ko-->
<search-box data-apply-bindings="false"
params="value: query,
action: filter,
immediate: true,
placeholder: '{% if instance %}{% trans_html_attr "Filter questions" %}{% else %}{% trans_html_attr "Filter properties" %}{% endif %}'"></search-box>
</div>
<h4 class="modal-title">
{% if instance %}{# This is a form, not a case #}
{% trans "Clean Form Submission" %}
{% else %}
{% trans "Clean Case Data" %}
{% endif %}
</h4>
</div>
<div class="modal-body" data-bind="css: { 'text-center': showSpinner }">
{% if instance %}{# This is a form, not a case #}
<div class='alert alert-warning'>
<i class="fa fa-exclamation-triangle"></i>
{% blocktrans %}
This feature is replacing the old "Edit this form" functionality, which will be removed in September 2019.
{% endblocktrans %}
<a href="{% url 'edit_form_instance' domain instance.form_id %}" target="_blank" id="edit-form">
{% trans 'Click here to access the old "edit this form" page.' %}
</a>
<br><br>
<i class="fa fa-exclamation-triangle"></i>
{% blocktrans %}
This feature will only update the specified questions.
It will <strong>not</strong> run any calculations or affect cases.
<a target="_blank" href="https://confluence.dimagi.com/display/commcarepublic/Data+Cleaning%3A+Clean+Form+Submission">Read more</a>.
{% endblocktrans %}
</div>
{% endif %}
<div class='alert alert-danger' data-bind="visible: showError">
{% blocktrans %}
Something unexpected happened.
Please refresh the page and try again, or report an issue if the problem persists.
{% endblocktrans %}
</div>
<div class='alert alert-danger' data-bind="visible: showRetry">
{% blocktrans %}
Something unexpected happened.
Please try again, or report an issue if the problem persists.
{% endblocktrans %}
</div>
<i class="fa fa-spinner fa-spin fa-5x" data-bind="visible: showSpinner"></i>
<div data-bind="visible: !showSpinner()">
<div class="text-muted" data-bind="visible: showNoData">{% trans "No editable properties found" %}</div>
<div class="container-fluid">
<!-- ko foreach: visibleColumns -->
<div data-bind="attr: { 'class': $root.columnClass }">
<!-- ko foreach: $data -->
<div class="form-group container-fluid" data-bind="css: {'has-success': dirty()}">
<label class="col-sm-6 control-label">
<i class="fa fa-pencil-square pull-left" data-bind="visible: dirty()"></i>
<span data-bind="template: $root.propertyTemplate"></span>
</label>
<div class="col-sm-6">
<!-- ko ifnot: options.length -->
<input type="text" class="form-control"
data-bind="value: value,
attr: { 'data-name': name },
event: { change: function() { this.dirty(true); } }" />
<!-- /ko -->
<!-- ko if: options.length -->
<!-- ko ifnot: multiple -->
<select class="form-control"
data-bind="foreach: options,
value: value,
attr: { 'data-name': name },
event: { change: function() { this.dirty(true); } }">
<option data-bind="value: id, text: text"></option>
</select>
<!-- /ko -->
<!-- ko if: multiple -->
{% comment %}
Multiselect values are based on a space-separated string, because
that's how form submissions work. Making this work with select2's
comma-separated multiselect option is non-trivial, so instead we
have a hidden input with a space-separated value that stays in sync
with updates on the select2.
{% endcomment %}
<input type="hidden" class="form-control"
data-bind="value: value,
attr: { 'data-name': name }" />
<select class="form-control"
multiple="multiple"
data-bind="foreach: options,
event: { change: updateSpaceSeparatedValue }">
<option data-bind="value: id, text: text"></option>
</select>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
</div>
<div class="modal-footer with-controls">
<!-- ko if: showPagination -->
<pagination class="pull-left" data-apply-bindings="false"
params="goToPage: currentPage,
perPage: itemsPerPage,
maxPagesShown: 10,
totalItems: totalItems,
inlinePageListOnly: true"></pagination>
<!-- /ko -->
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
<button type="submit" class="btn btn-primary" data-bind="click: submitForm, attr: { disabled: disallowSave }">
<span data-bind="visible: !showRetry(), click: trackSave">
{% trans "Save" %}
</span>
<span data-bind="visible: showRetry()">
{% trans "Try Again" %}
</span>
</button>
</div>
</div>
</div>
</div>