Skip to content
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

MAP-581 fix input field alignment #677

Closed
wants to merge 1 commit into from
Closed

MAP-581 fix input field alignment #677

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
1 change: 1 addition & 0 deletions assets/js/add-another-detail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
new AddAnother($('.add-another-body-worn-camera'), '.remove-button-container')
1 change: 0 additions & 1 deletion assets/js/add-another-evidence.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
new AddAnother($('.add-another-evidence'), '.remove-button-container')
new AddAnother($('.add-another-input'), '.remove-button-container')
Copy link
Contributor Author

Choose a reason for hiding this comment

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

moved this into a new file that more represents the page it serves, i.e details page

5 changes: 3 additions & 2 deletions integration-tests/pages/createReport/useOfForceDetailsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ const useOfForceDetailsPage = () =>

bodyWornCamera: () => cy.get('[name="bodyWornCamera"]'),
bodyWornCameraNumber: index => cy.get(`[name="bodyWornCameraNumbers[${index}][cameraNum]"]`),
addAnotherBodyWornCamera: () => cy.get('[data-qa-add-another-input = true]').click(),
removeBodyWornCamera: index => cy.get('.add-another-input .add-another__remove-button').eq(index).click(),
addAnotherBodyWornCamera: () => cy.get('[dataqa=add-another-body-worn-camera]').click(),
removeBodyWornCamera: index =>
cy.get('.add-another-body-worn-camera .add-another__remove-button').eq(index).click(),

personalProtectionTechniques: () => cy.get('[name="personalProtectionTechniques"]'),
batonDrawn: () => cy.get('[name="batonDrawn"]'),
Expand Down
3 changes: 1 addition & 2 deletions server/config/forms/useOfForceDetailsForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ const completeSchema = joi.object({

bodyWornCamera: requiredOneOfMsg(
'YES',
'NO',
'NOT_KNOWN'
'NO'
)('Select yes if any part of the incident was captured on a body-worn camera').alter(optionalForPartialValidation),

bodyWornCameraNumbers: joi
Expand Down
5 changes: 3 additions & 2 deletions server/views/formPages/incident/useOfForceDetails.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ <h1 class="govuk-heading-xl mainHeading">{{ pageTitle }}</h1>
})}}

<!-- Q2 new question body-worn camera question which was previously in the evidence page -->
{{ incidentMacro.radioWithMultipleNestedTextBox({
{{ incidentMacro.radiosWithAddAnotherTextBox({
primaryQuestion:{
text: "Was any part of the incident captured on a body-worn camera?",
name: "bodyWornCamera",
value: data.bodyWornCamera,
errorMessage: errors | findError('bodyWornCamera'),
includeNotKnown: false
questionSubject: 'body-worn-camera'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

to use this for integration tests and panel that open when Yes is selected

},
followUpQuestion:{
name: "bodyWornCameraNumbers",
Expand Down Expand Up @@ -184,4 +184,5 @@ <h1 class="govuk-heading-xl mainHeading">{{ pageTitle }}</h1>
{% block script %}
<script src="/assets/deselect-children.js"></script>
<script src="/assets/add-another-evidence.js"></script>
<script src="/assets/add-another-detail.js"></script>
{% endblock %}
162 changes: 74 additions & 88 deletions server/views/formPages/incidentMacros.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,94 +51,6 @@
</div>
{% endmacro %}


{% macro radioWithMultipleNestedTextBox(question) %}

{% if question.primaryQuestion.errorMessage %}
{% set govukFormGroupErrorOuter = 'govuk-form-group--error' %}
{% set primaryErrorMessageText = question.primaryQuestion.errorMessage.text %}
{% endif %}

<div class="govuk-!-margin-bottom-9 {{govukFormGroupErrorOuter}}">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend ">
{{question.primaryQuestion.text}}
</legend>
<span id="primaryQuestionErrMsg" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span>
{{ primaryErrorMessageText}}
</span>

<div class="govuk-radios{% if not question.primaryQuestion.includeNotKnown %}--inline{% endif %}" data-module="govuk-radios">
<div class=" govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="{{question.primaryQuestion.name}}" name="{{question.primaryQuestion.name}}"
type="radio" value="YES" data-aria-controls="conditional-inputs"
{% if question.primaryQuestion.value === 'YES' %} checked="checked" {% endif %}>
<label class="govuk-label govuk-radios__label" for="{{question.primaryQuestion.name}}">
Yes
</label>
</div>
<!-- hidden panel starts here -->
<div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-inputs">

<!-- add another starts here -->
<div class="add-another-input" id="{{question.followUpQuestion.name}}">
{% for item in question.followUpQuestion.value %}

{{ addAnother(
question.followUpQuestion.otherIds,
question.followUpQuestion.name,
question.followUpQuestion.errorMessage,
index = loop.index0,
value = item[question.followUpQuestion.otherIds[0]],
showRemove = loop.length != 1)
}}
{% else %}
{{ addAnother(
question.followUpQuestion.otherIds,
question.followUpQuestion.name,
question.followUpQuestion.errorMessage,
index = 0,
value = null,
showRemove = false) }}
{% endfor %}

<div class="button-action">
{{
govukButton({
text: 'Add another',
classes: 'govuk-button--secondary add-another__add-button govuk-!-margin-bottom-4',
attributes: { 'data-qa-add-another-input': true }
})
}}
</div>
</div>
<!-- add another ends here -->
</div>
<!-- hidden panel end -->

<div class="govuk-radios__item">
<input class="govuk-radios__input" id="primary-question-no" name="{{question.primaryQuestion.name}}" type="radio" value="NO" {% if question.primaryQuestion.value === 'NO' %} checked="checked" {% endif %}>
<label class="govuk-label govuk-radios__label" for="primary-question-no">
No
</label>
</div>
{% if question.primaryQuestion.includeNotKnown %}
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="primary-question-notKnown" name="{{question.primaryQuestion.name}}" type="radio" value="NOT_KNOWN" {% if question.primaryQuestion.value === 'NOT_KNOWN' %} checked="checked" {% endif %}>
<label class="govuk-label govuk-radios__label" for="primary-question-notKnown">
Not known
</label>
</div>
{% endif %}
</div>
</div>
<!-- end of radios -->
</fieldset>
</div>
{% endmacro %}

{% macro addAnother(otherIds, name, errors, index, value, showRemove) %}
{% call govukFieldset({ classes: 'add-another__item' }) %}
<div class="govuk-grid-row">
Expand Down Expand Up @@ -170,6 +82,80 @@
{% endcall %}
{% endmacro%}

{% macro radiosWithAddAnotherTextBox(question) %}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

renamed macro and removed the Not known code as it is no longer needed


{% if question.primaryQuestion.errorMessage %}
{% set govukFormGroupErrorOuter = 'govuk-form-group--error' %}
{% set primaryErrorMessageText = question.primaryQuestion.errorMessage.text %}
{% endif %}

<div class="govuk-!-margin-bottom-9 {{govukFormGroupErrorOuter}}">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend ">
{{question.primaryQuestion.text}}
</legend>
<span id="primaryQuestionErrMsg" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span>
{{ primaryErrorMessageText}}
</span>

<div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="{{question.primaryQuestion.name}}" name="{{question.primaryQuestion.name}}"
type="radio" value="YES" data-aria-controls="conditional-input-for-{{question.primaryQuestion.questionSubject}}"
{% if question.primaryQuestion.value === 'YES' %} checked="checked" {% endif %}>
<label class="govuk-label govuk-radios__label" for="{{question.primaryQuestion.name}}">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="primary-question-no"
name="{{question.primaryQuestion.name}}" type="radio" value="NO"
{% if question.primaryQuestion.value === 'NO' %} checked="checked" {% endif %}>
<label class="govuk-label govuk-radios__label" for="primary-question-no">
No
</label>
</div>
<div class="govuk-radios__conditional govuk-radios__conditional--hidden clear-both" id="conditional-input-for-{{question.primaryQuestion.questionSubject}}">
<div class="add-another-{{question.primaryQuestion.questionSubject}}" id="{{question.followUpQuestion.name}}">
{% set dataqa = ["add-another-", question.primaryQuestion.questionSubject ] | join %}

{% for item in question.followUpQuestion.value %}

{{ addAnother(
question.followUpQuestion.otherIds,
question.followUpQuestion.name,
question.followUpQuestion.errorMessage,
index = loop.index0,
value = item[question.followUpQuestion.otherIds[0]],
showRemove = loop.length != 1)
}}
{% else %}
{{ addAnother(
question.followUpQuestion.otherIds,
question.followUpQuestion.name,
question.followUpQuestion.errorMessage,
index = 0,
value = null,
showRemove = false) }}
{% endfor %}

<div class="button-action">
{{
govukButton({
text: 'Add another',
classes: 'govuk-button--secondary add-another__add-button govuk-!-margin-bottom-4',
attributes: {dataqa: dataqa}
})
}}
</div>
</div>
</div>
</div>
</fieldset>
</div>
{% endmacro %}

{% macro radiosWithNestedRadios(question) %}

{% set radio_button_orientation = 'govuk-radios--inline' if question.orientation === 'inline' else 'govuk-radios'%}
Expand Down
Loading