diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/web/base/admin/bodies/contact-form.html | 2 | ||||
| -rw-r--r-- | templates/web/base/admin/extra-metadata-form.html | 114 | ||||
| -rw-r--r-- | templates/web/base/admin/extra-metadata-item.html | 110 | ||||
| -rw-r--r-- | templates/web/base/admin/extra-metadata-option.html | 29 | ||||
| -rw-r--r-- | templates/web/base/common_scripts.html | 1 |
5 files changed, 150 insertions, 106 deletions
diff --git a/templates/web/base/admin/bodies/contact-form.html b/templates/web/base/admin/bodies/contact-form.html index 7a58644e5..7f559274d 100644 --- a/templates/web/base/admin/bodies/contact-form.html +++ b/templates/web/base/admin/bodies/contact-form.html @@ -140,7 +140,7 @@ </dl> [% INCLUDE 'admin/extra-metadata-form.html' metas=(contact.get_metadata_for_editing OR []) %] - <p class="form-group"> + <p class="form-group" style="margin-top: 2em"> <label for="note">[% loc('Summarise your changes') %]</label> <span class="form-hint" id="note-hint">[% loc("If you’ve made changes, leave a note explaining what, for other admins to see.") %]</span> <input class="form-control" type="text" id="note" name="note" size="30" aria-describedby="note-hint" required> diff --git a/templates/web/base/admin/extra-metadata-form.html b/templates/web/base/admin/extra-metadata-form.html index b82eca966..9b8e4909f 100644 --- a/templates/web/base/admin/extra-metadata-form.html +++ b/templates/web/base/admin/extra-metadata-form.html @@ -1,107 +1,11 @@ -<ul class="js-metadata-items"> - [% FOR meta IN metas.merge([{}]) %] - <li class="js-metadata-item [% IF loop.last %]hidden-js js-metadata-item-template[% END %]" data-index="[% loop.index %]"> - <button type="button" class="btn btn--small js-metadata-item-remove hidden-nojs">[% loc('Remove field') %]</button> +<div class="extra-metadata-form js-metadata-items"> + [% FOR meta IN metas %] + [% INCLUDE 'admin/extra-metadata-item.html' i=loop.index collapsed=1 %] + [% END %] +</div> - <div class="admin-hint"><p>[% loc('The ordering of this field on the report page. Fields are shown in ascending order according to this value.') %]</p></div> - <label> - [% loc('Order') %] - <input name="metadata[[% loop.index %]].order" data-field-name="order" type=text value="[% meta.order OR 0 | html %]"> - </label> +<div class="hidden-js" id="js-template-extra-metadata-item"> + [% INCLUDE 'admin/extra-metadata-item.html' meta={} i=9999 collapsed=0 %] +</div> - <div class="admin-hint"><p>[% loc('Whether the field is displayed to the user, included as a hidden field and automatically populated, or set by the server upon Open311 submission. This field is usually set automatically.') %]</p></div> - <label> - [% loc('Automated') %] - <select name="metadata[[% loop.index %]].automated" data-field-name="automated"> - <option value="" [% meta.automated == '' ? 'selected' : '' %]></option> - <option value="server_set" [% meta.automated == 'server_set' ? 'selected' : '' %]>[% loc('Server Set') %]</option> - <option value="hidden_field" [% meta.automated == 'hidden_field' ? 'selected' : '' %]>[% loc('Hidden Field') %]</option> - </select> - </label> - - <div class="admin-hint"><p>[% loc('The code used to store this field value in the database. e.g. <code>address</code> would be available as <code>report.get_extra_field_value("address")</code> in the templates.') %]</p></div> - <label> - [% loc('Code') %] - <input name="metadata[[% loop.index %]].code" data-field-name="code" type=text value="[% meta.code | html %]"> - </label> - - <div class="admin-hint"><p>[% loc('Whether the user is required to provide a value for this field.') %]</p></div> - <label> - [% loc('Required') %] - <input name="metadata[[% loop.index %]].required" data-field-name="required" type=checkbox [% meta.required == 'true' ? 'checked' : '' %]> - </label> - - <div class="admin-hint"><p>[% loc('If ticked the user won’t see an input field, just the ‘Description’ text.') %]</p></div> - <label> - [% loc('Notice') %] - <input name="metadata[[% loop.index %]].notice" data-field-name="notice" type=checkbox [% meta.variable == 'false' ? 'checked' : '' %]> - </label> - - <div class="admin-hint"><p>[% loc('If ticked this extra data will not be edited or deleted by the Open311 population script.') %]</p></div> - <label> - [% loc('Protected') %] - <input name="metadata[[% loop.index %]].protected" data-field-name="protected" type=checkbox [% meta.protected == 'true' ? 'checked' : '' %]> - </label> - - <div class="admin-hint"><p>[% loc('If ticked the entire report form will be disabled when this category is selected.') %]</p></div> - <label> - [% loc('Disable form') %] - <input name="metadata[[% loop.index %]].disable_form" data-field-name="disable_form" type=checkbox [% meta.disable_form == 'true' ? 'checked' : '' %]> - </label> - - <div class="admin-hint"><p>[% loc('The field name as shown to the user on the report form.') %]</p></div> - <label> - [% loc('Description') %] - <input name="metadata[[% loop.index %]].description" data-field-name="description" type=text value="[% meta.description | html %]"> - </label> - - <div class="admin-hint"><p>[% loc('Can be used to display extra text to the user alongside the field. The default template does not show this (<code>meta.datatype_description</code>), you must add it in <code>category_extras_fields.html</code>') %]</p></div> - <label> - [% loc('Hint') %] - <input name="metadata[[% loop.index %]].datatype_description" data-field-name="datatype_description" type=text value="[% meta.datatype_description | html %]"> - </label> - - <div class="admin-hint"><p>[% loc('The type of input field to show to the user. <strong>Text</strong> is a simple text field, <strong>List</strong> is a drop-down selection.') %]</p></div> - <label> - [% loc('Type') %] - <select name="metadata[[% loop.index %]].datatype" data-field-name="datatype" class="js-metadata-item-type"> - <option value="string" [% meta.datatype == 'string' ? 'selected' : '' %]>[% loc('String') %]</option> - <option value="singlevaluelist" [% meta.datatype == 'singlevaluelist' ? 'selected' : '' %]>[% loc('List') %]</option> - </select> - </label> - - <div class="js-metadata-options"> - <div class="admin-hint"><p>[% loc('For each option, <strong>Key</strong> is the value which is stored in the database for that option and <strong>Name</strong> is the value displayed to the user.') %]</p></div> - [% loc('Options') %]<span class="hidden-js"> [% loc('(ignored if type is "String")') %]</span> - <ul> - [% outer_loop = loop %] - [% SET values = meta.item('values') ? meta.values : [] %] - [% FOREACH option IN values.merge([{}]) %] - [%# the .merge() call is so there's an empty one on the end %] - <li class="js-metadata-option [% IF loop.last %]hidden-js js-metadata-option-template[% END %]"> - <label> - [% loc('Key') %] - <input class="js-metadata-option-key" name="metadata[[% outer_loop.index %]].values[[% loop.index %]].key" type="text" value="[% option.key | html %]"> - </label> - <label> - [% loc('Name') %] - <input class="js-metadata-option-name" name="metadata[[% outer_loop.index %]].values[[% loop.index %]].name" type="text" value="[% option.name | html %]"> - </label> - <label> - [% loc('Disable form') %] - <input class="js-metadata-option-disable" name="metadata[[% outer_loop.index %]].values[[% loop.index %]].disable" type="checkbox"[% ' checked' IF option.disable %]> - </label> - <button type="button" class="btn btn--small js-metadata-option-remove hidden-nojs">[% loc('Remove') %]</button> - </li> - [% END %] - <li class="hidden-nojs"> - <button type="button" class="btn btn--small js-metadata-option-add">[% loc('Add option') %]</button> - </li> - </ul> - </div> - </li> - [%- END %] - <li class="hidden-nojs"> - <button type="button" class="btn btn--small js-metadata-item-add">[% loc('Add field') %]</button> - </li> -</ul> +<button type="button" class="btn btn--small js-metadata-item-add hidden-nojs">[% loc('Add field') %]</button> diff --git a/templates/web/base/admin/extra-metadata-item.html b/templates/web/base/admin/extra-metadata-item.html new file mode 100644 index 000000000..66cb6f79c --- /dev/null +++ b/templates/web/base/admin/extra-metadata-item.html @@ -0,0 +1,110 @@ +[% +SET behaviour = ''; +DEFAULT behaviour = 'server' IF meta.automated == 'server_set'; +DEFAULT behaviour = 'hidden' IF meta.automated == 'hidden_field'; +DEFAULT behaviour = 'notice' IF meta.variable == 'false'; +DEFAULT behaviour = 'question'; +~%] + +<fieldset class="extra-metadata-item js-metadata-item" data-i="[% i %]"> + <legend class="visuallyhidden">Extra data field [% i %]</legend> + + <header class="extra-metadata-item__header hidden-nojs"> + <div class="js-metadata-item-header-grab extra-metadata-item__header__grab" aria-label="Drag to reorder"></div> + <button type="button" class="js-metadata-item-header-title extra-metadata-item__header__title" data-default="[% loc('New field') %]" data-toggle-visibility="#metadata-fieldset-[% i %]"> + [%~ IF meta.code ~%] + <strong>[% meta.code | html %]</strong> + / [% behaviour %] + [% IF meta.description %] / [% meta.description.substr(0, 50) | html %][% END %] + [%~ ELSE ~%] + <strong>[% loc('New field') %]</strong> + [%~ END ~%] + </button> + <button type="button" class="js-metadata-item-remove extra-metadata-item__header__remove">[% loc('Remove field') %]</button> + </header> + + <div class="extra-metadata-item__body [% IF collapsed %]hidden-js[% END %]" id="metadata-fieldset-[% i %]"> + + <div class="form-group"> + <label for="metadata-[% i %]-code">[% loc('Code') %]</label> + <span class="form-hint" id="metadata-[% i %]-code-hint">[% loc('The code used to store this field value in the database.') %]</span> + <input class="form-control" name="metadata[[% i %]].code" id="metadata-[% i %]-code" aria-describedby="metadata-[% i %]-code-hint" type=text value="[% meta.code | html %]"> + </div> + + <fieldset> + <legend>[% loc('Behaviour') %]</legend> + <div class="form-check form-check--inline"> + <input type="radio" name="metadata[[% i %]].behaviour" id="metadata-[% i %]-behaviour-question" value="question" data-show="#metadata-[% i %]-description-group, #metadata-[% i %]-description-label-question, #metadata-[% i %]-datatype-group, #metadata-[% i %]-required-group, #metadata-[% i %]-protected-group" data-hide="#metadata-[% i %]-description-label-notice, #metadata-[% i %]-disabled-group"[% ' checked' IF behaviour == 'question' %]> + <label for="metadata-[% i %]-behaviour-question">[% loc('Extra question shown to user') %]</label> + </div> + <div class="form-check form-check--inline"> + <input type="radio" name="metadata[[% i %]].behaviour" id="metadata-[% i %]-behaviour-notice" value="notice" data-show="#metadata-[% i %]-description-group, #metadata-[% i %]-description-label-notice, #metadata-[% i %]-protected-group, #metadata-[% i %]-disabled-group" data-hide="#metadata-[% i %]-description-label-question, #metadata-[% i %]-datatype-group, #metadata-[% i %]-required-group"[% ' checked' IF behaviour == 'notice' %]> + <label for="metadata-[% i %]-behaviour-notice">[% loc('Notice shown to user') %]</label> + </div> + <div class="form-check form-check--inline"> + <input type="radio" name="metadata[[% i %]].behaviour" id="metadata-[% i %]-behaviour-hidden" value="hidden" data-show="#metadata-[% i %]-protected-group" data-hide="#metadata-[% i %]-description-group, #metadata-[% i %]-datatype-group, #metadata-[% i %]-required-group, #metadata-[% i %]-disabled-group"[% ' checked' IF behaviour == 'hidden' %]> + <label for="metadata-[% i %]-behaviour-hidden">[% loc('Hidden data in reporting form') %]</label> + </div> + <div class="form-check form-check--inline"> + <input type="radio" name="metadata[[% i %]].behaviour" id="metadata-[% i %]-behaviour-server" value="server" data-show="#metadata-[% i %]-protected-group" data-hide="#metadata-[% i %]-description-group, #metadata-[% i %]-datatype-group, #metadata-[% i %]-required-group, #metadata-[% i %]-disabled-group"[% ' checked' IF behaviour == 'server' %]> + <label for="metadata-[% i %]-behaviour-server">[% loc('Internal data set by Open311') %]</label> + </div> + </fieldset> + + <div class="form-group js-sort-order"> + <label for="metadata-[% i %]-order">[% loc('Order') %]</label> + <input class="form-control" name="metadata[[% i %]].order" id="metadata-[% i %]-order" type=text value="[% meta.order OR 0 | html %]"> + </div> + + <div class="form-group hidden-js" id="metadata-[% i %]-description-group"> + <label for="metadata-[% i %]-description" id="metadata-[% i %]-description-label-question" class="[% 'hidden-js' UNLESS behaviour == 'question' %]">[% loc('Question text') %]</label> + <label for="metadata-[% i %]-description" id="metadata-[% i %]-description-label-notice" class="[% 'hidden-js' UNLESS behaviour == 'notice' %]">[% loc('Notice text') %]</label> + <textarea class="form-control" name="metadata[[% i %]].description" id="metadata-[% i %]-description" rows="2">[% meta.description | html %]</textarea> + </div> + + <div class="hidden-js" id="metadata-[% i %]-datatype-group"> + <div class="form-group"> + <label for="metadata-[% i %]-datatype">[% loc('Display as') %]</label> + <select class="form-control" name="metadata[[% i %]].datatype" id="metadata-[% i %]-datatype"> + <option value="string" data-hide="#metadata-[% i %]-options-group" [% 'selected' IF meta.datatype == 'string' %]>[% loc('Text field') %]</option> + <option value="singlevaluelist" data-show="#metadata-[% i %]-options-group" [% 'selected' IF meta.datatype == 'singlevaluelist' %]>[% loc('Drop-down list') %]</option> + </select> + </div> + + <div class="hidden-js" id="metadata-[% i %]-options-group"> + <p class="label">[% loc('Options') %]</p> + <div class="js-metadata-options"> + [% SET options = meta.item('values') ? meta.values : [] %] + [% FOR option IN options %] + [% INCLUDE 'admin/extra-metadata-option.html' option=option i=i j=loop.index %] + [% END %] + </div> + + <div class="hidden-js"[% IF i==9999 %] id="js-template-extra-metadata-option"[% END %]> + [% INCLUDE 'admin/extra-metadata-option.html' option={} i=i j=8888 %] + </div> + + <button type="button" class="btn btn--small js-metadata-option-add hidden-nojs">[% loc('Add option') %]</button> + </div> + </div> + + <p class="form-check hidden-js" id="metadata-[% i %]-required-group"> + <input type="checkbox" name="metadata[[% i %]].required" value="1" id="metadata-[% i %]-required" aria-describedby="metadata-[% i %]-required-hint" [% ' checked' IF meta.required == 'true' %]> + <label for="metadata-[% i %]-required">[% loc('Required') %]</label> + <span class="form-hint" id="metadata-[% i %]-required-hint">[% loc('Prevent user from submitting the form until this field is filled in.') %]</span> + </p> + + <p class="form-check hidden-js" id="metadata-[% i %]-disabled-group"> + <input type="checkbox" name="metadata[[% i %]].disable_form" value="1" id="metadata-[% i %]-disable_form" aria-describedby="metadata-[% i %]-disable_form-hint" [% ' checked' IF meta.disable_form == 'true' %]> + <label for="metadata-[% i %]-disable_form">[% loc('Disable form when this category is selected') %]</label> + <span class="form-hint" id="metadata[[% i %]]-disable_form-hint">[% loc('If ticked, the form will be disabled and this item’s notice text will be displayed.') %]</span> + </p> + + <p class="form-check hidden-js" id="metadata-[% i %]-protected-group"> + <input type="checkbox" name="metadata[[% i %]].protected" value="1" id="metadata-[% i %]-protected" aria-describedby="metadata-[% i %]-protected-hint" [% ' checked' IF meta.protected == 'true' %]> + <label for="metadata-[% i %]-protected">[% loc('Protect from Open311 changes') %]</label> + <span class="form-hint" id="metadata[[% i %]]-protected-hint">[% loc('If ticked, this extra data will not be edited or deleted by the Open311 population script.') %]</span> + </p> + + </div> +</fieldset> diff --git a/templates/web/base/admin/extra-metadata-option.html b/templates/web/base/admin/extra-metadata-option.html new file mode 100644 index 000000000..360dfb208 --- /dev/null +++ b/templates/web/base/admin/extra-metadata-option.html @@ -0,0 +1,29 @@ +<fieldset class="extra-metadata-option js-metadata-option"> + <legend class="visuallyhidden">Option [% j %]</legend> + + <div class="row"> + <div class="col"> + <label for="metadata-[% i %]-values-[% j %]-key">[% loc('Internal key') %]</label> + <input type="text" class="form-control" name="metadata[[% i %]].values[[% j %]].key" id="metadata-[% i %]-values-[% j %]-key" value="[% option.key | html %]"> + </div> + <div class="col"> + <label for="metadata-[% i %]-values-[% j %]-name">[% loc('Displayed label') %]</label> + <input type="text" class="form-control" name="metadata[[% i %]].values[[% j %]].name" id="metadata-[% i %]-values-[% j %]-name" value="[% option.name | html %]"> + </div> + </div> + <div class="row"> + <div class="col"> + <p class="form-check"> + <input type="checkbox" name="metadata[[% i %]].values[[% j %]].disable" value="1" id="metadata-[% i %]-values-[% j %]-disable" data-toggle-visibility="#js-disable-form-message-box-[% i %]-[% j %]" [% ' checked' IF option.disable %]> + <label for="metadata-[% i %]-values-[% j %]-disable">[% loc('Disable form when this option is selected') %]</label> + </p> + <p class="form-group [% 'hidden-js' IF NOT option.disable %]" id="js-disable-form-message-box-[% i %]-[% j %]"> + <label for="disabled-message-[% i %]-[% j %]">[% loc('Message to show when form is disabled (HTML permitted)') %]</label> + <textarea id="disabled-message-[% i %]-[% j %]" name="metadata[[% i %]].values[[% j %]].disable_message" class="form-control">[% option.disable_message OR meta.datatype_description | html %]</textarea> + </p> + </div> + <div class="col"> + <button type="button" class="js-metadata-option-remove">[% loc('Remove option') %]</button> + </div> + </div> +</fieldset> diff --git a/templates/web/base/common_scripts.html b/templates/web/base/common_scripts.html index fd7011763..60775fcae 100644 --- a/templates/web/base/common_scripts.html +++ b/templates/web/base/common_scripts.html @@ -68,6 +68,7 @@ END; IF admin; scripts.push( version('/cobrands/fixmystreet/admin.js'), + version('/vendor/html5sortable.min.js'), ); END; |