manual-upload.njk

{% from "../macros/common-components.njk" import goBack, submitButton, autoCompleteFilteredResults %}
{% extends "../template.njk" %}
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{% from "govuk/components/select/macro.njk" import govukSelect %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}

{% block pageTitle %}
    {{ title }}
{% endblock %}

{% block beforeContent %}
  {{ super() }}
  {{ goBack(cspNonce = cspNonce) }}
{% endblock %}

{% block content %}
    {% if errors.fileErrors
        or errors.formErrors.courtError
        or errors.formErrors.listTypeError
        or errors.formErrors.contentDateError
        or errors.formErrors.classificationError
        or errors.formErrors.displayDateError.from
        or errors.formErrors.displayDateError.to %}

        {% set errorList = [] %}
        {% if errors.fileErrors %}
            {% set errorList = (errorList.push({ text: errors.fileErrors, href: "#manual-file-upload" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.courtError %}
            {% set errorList = (errorList.push({ text: errors.formErrors.courtError, href: "#search-input" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.listTypeError %}
            {% set errorList = (errorList.push({ text: listTypeError, href: "#listType" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.contentDateError %}
            {% set errorList = (errorList.push({ text: errors.formErrors.contentDateError, href: "#content-date-from" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.classificationError %}
            {% set errorList = (errorList.push({ text: classificationError, href: "#classification" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.displayDateError.from %}
            {% set errorList = (errorList.push({ text: errors.formErrors.displayDateError.from, href: "#display-date-from" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.displayDateError.to %}
            {% set errorList = (errorList.push({ text: errors.formErrors.displayDateError.to, href: "#display-date-to" }), errorList) %}
        {% endif %}
        {% if errors.formErrors.displayDateError.range %}
            {% set errorList = (errorList.push({ text: errors.formErrors.displayDateError.range, href: "#display-date-from" }), errorList) %}
        {% endif %}

        {{ govukErrorSummary({
            titleText: errorTitle,
            errorList: errorList
        }) }}
    {% endif %}

  <div class="parent-box">
      <div class="govuk-callout">
        <h2 class="govuk-heading-m">{{ warning }}</h2>
        {{ govukWarningText({
          text: warningText
        }) }}
      </div>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">{{ title }}</h1>
        <form method="post" enctype="multipart/form-data">
          {% set fileErrorMessage = {text: errors.fileErrors} if errors.fileErrors else false %}
          <div class="govuk-inset-text">
              {% if nonStrategicUpload %}
                    {{ govukFileUpload({
                      id: "manual-file-upload",
                      name: "manual-file-upload",
                      accept: ".xslx",
                      label: {
                        text: nonStrategicCardFileUploadText
                      },
                      errorMessage: fileErrorMessage
                    }) }}
              {% else %}
                  {{ govukFileUpload({
                      id: "manual-file-upload",
                      name: "manual-file-upload",
                      accept: ".json,.csv,.doc,.docx,.htm,.html",
                      label: {
                          text: fileUploadText
                      },
                      errorMessage: fileErrorMessage
                  }) }}
              {% endif %}
          </div>

          {% set courtFormGroupError = 'govuk-form-group--error' if errors.formErrors.courtError else 'govuk-form-group' %}
          {% set inputError = 'govuk-input--error' if errors.formErrors.courtError else '' %}
          <div id="form-wrapper" class="govuk-!-margin-bottom-9 ">
            <div class="govuk-!-margin-bottom-3 govuk-!-width-one-half {{ courtFormGroupError }}">
              <label id="search-input-title" class="govuk-label" for="search-input">
              {{ form.court }}
              </label>
              {% if errors.formErrors.courtError %}
                <span class="govuk-error-message">{{ errors.formErrors.courtError }}</span>
              {% endif %}
              <div class="{{ inputError }}" id="search-input-container"></div>
            </div>
              {% set listTypeErrorMessage = {text: listTypeError} if errors.formErrors.listTypeError else '' %}
              <div class="govuk-form-group govuk-inset-text govuk-!-padding-right-0">
              <div id="list-question" class="govuk-!-margin-bottom-3 govuk-!-width-two-third">
                {{ govukSelect({
                  classes: 'govuk-!-width-two-thirds',
                  id: "listType",
                  name: "listType",
                  label: {
                    text: form.listType
                  },
                  errorMessage: listTypeErrorMessage,
                  items: listItems.listSubtypes
                }) }}
              </div>

              {% set cdFromError = 'govuk-input--error' if errors.formErrors.contentDateError else '' %}
              {% set cdFormGroupError = 'govuk-form-group--error' if errors.formErrors.contentDateError else 'govuk-form-group' %}

              <div class="{{ cdFormGroupError }} govuk-width-!-one-fourth">
                <fieldset class="govuk-fieldset" role="group" aria-describedby="content-date">
                  <legend class="govuk-fieldset__legend">
                    {{ form.contentDate }}
                  </legend>
                  {% if errors.formErrors.contentDateError %}
                    <span class="govuk-error-message">{{ errors.formErrors.contentDateError }}</span>
                  {% endif %}
                  <div id="content-date-hint" class="govuk-hint">
                    {{ form.contentDateHint }}
                  </div>
                  <div class="govuk-date-input" id="content-date-from">
                    <div class="govuk-date-input__item">
                      <div class="govuk-form-group">
                        <label class="govuk-label govuk-date-input__label" for="content-date-from-day">
                          {{ form.day }}
                        </label>
                        <input class="govuk-input govuk-date-input__input govuk-input--width-2 {{ cdFromError }}" id="content-date-from-day" name="content-date-from-day" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                    </div>
                    <div class="govuk-date-input__item">
                      <div class="govuk-form-group">
                        <label class="govuk-label govuk-date-input__label" for="content-date-from-month">
                          {{ form.month }}
                        </label>
                        <input class="govuk-input govuk-date-input__input govuk-input--width-2 {{ cdFromError }}" id="content-date-from-month" name="content-date-from-month" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                    </div>
                    <div class="govuk-date-input__item">
                      <div class="govuk-form-group">
                        <label class="govuk-label govuk-date-input__label" for="content-date-from-year">
                          {{ form.year }}
                        </label>
                        <input class="govuk-input govuk-date-input__input govuk-input--width-4 {{ cdFromError }}" id="content-date-from-year" name="content-date-from-year" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
            {% set availableToErrorMessage = {text: classificationError } if errors.formErrors.classificationError else '' %}
            {{ govukSelect({
              classes: 'govuk-!-width-one-half',
              id: "classification",
              name: "classification",
              label: {
                text: form.classificationText
              },
              items: form.classification,
              errorMessage: availableToErrorMessage
            }) }}

            {{ govukSelect({
              classes: 'govuk-!-width-one-half',
              id: "language",
              name: "language",
              label: {
                text: form.languageText
              },
              items: form.language
            }) }}

            {% set displayFromError = 'govuk-input--error' if errors.formErrors.displayDateError.from else '' %}
            {% set displayToError = 'govuk-input--error' if errors.formErrors.displayDateError.to else '' %}
            {% set displayFormGroupError = 'govuk-form-group--error' if errors.formErrors.displayDateError else 'govuk-form-group' %}
            {% set displayErrorMessage = errors.formErrors.displayDateError.from or errors.formErrors.displayDateError.to or errors.formErrors.displayDateError.range%}
            {% set displayFromErrorMessage = errors.formErrors.displayDateError.from or errors.formErrors.displayDateError.range%}
            {% set displayToErrorMessage = errors.formErrors.displayDateError.to or errors.formErrors.displayDateError.range%}

              <div class="{{ displayFormGroupError }}">
              <fieldset class="govuk-fieldset" role="group" aria-describedby="display-date-from">
                <legend class="govuk-fieldset__legend">{{ form.displayDateFrom }}</legend>
                {% if errors.formErrors.displayDateError %}
                  <span class="govuk-error-message">{{ displayFromErrorMessage }}</span>
                {% endif %}
                <div id="display-date-hint" class="govuk-hint">
                  {{ form.displayDateFromHint }}
                </div>
                <div class="govuk-date-input" id="display-date-from">
                  <div class="govuk-date-input__item">
                    <div class="govuk-form-group">
                      <label class="govuk-label govuk-date-input__label" for="display-date-from-day">
                        {{ form.day }}
                      </label>
                      <input class="govuk-input govuk-date-input__input govuk-input--width-2 {{ displayFromError }}" id="display-date-from-day" name="display-date-from-day" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                  </div>
                  <div class="govuk-date-input__item">
                    <div class="govuk-form-group">
                      <label class="govuk-label govuk-date-input__label" for="display-date-from-month">
                        {{ form.month }}
                      </label>
                      <input class="govuk-input govuk-date-input__input govuk-input--width-2 {{ displayFromError }}" id="display-date-from-month" name="display-date-from-month" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                  </div>
                  <div class="govuk-date-input__item">
                    <div class="govuk-form-group">
                      <label class="govuk-label govuk-date-input__label" for="display-date-from-year">
                        {{ form.year }}
                      </label>
                      <input class="govuk-input govuk-date-input__input govuk-input--width-4 {{ displayFromError }}" id="display-date-from-year" name="display-date-from-year" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="govuk-fieldset govuk-!-margin-top-6" role="group" aria-describedby="display-date-to">
                <legend class="govuk-fieldset__legend">{{ form.displayDateTo }}</legend>
                {% if errors.formErrors.displayDateError %}
                  <span class="govuk-error-message">{{ displayToErrorMessage }}</span>
                {% endif %}
                <div id="display-date-to-hint" class="govuk-hint">
                  {{ form.displayDateToHint }}
                </div>
                <div class="govuk-date-input" id="display-date-to">
                  <div class="govuk-date-input__item">
                    <div class="govuk-form-group">
                      <label class="govuk-label govuk-date-input__label" for="display-date-to-day">
                        {{ form.day }}
                      </label>
                      <input class="govuk-input govuk-date-input__input govuk-input--width-2 {{ displayToError }}" id="display-date-to-day" name="display-date-to-day" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                  </div>
                  <div class="govuk-date-input__item">
                    <div class="govuk-form-group">
                      <label class="govuk-label govuk-date-input__label" for="display-date-to-month">
                        {{ form.month }}
                      </label>
                      <input class="govuk-input govuk-date-input__input govuk-input--width-2 {{ displayToError }}" id="display-date-to-month" name="display-date-to-month" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                  </div>
                  <div class="govuk-date-input__item">
                    <div class="govuk-form-group">
                      <label class="govuk-label govuk-date-input__label" for="display-date-to-year">
                        {{ form.year }}
                      </label>
                      <input class="govuk-input govuk-date-input__input govuk-input--width-4 {{ displayToError }}" id="display-date-to-year" name="display-date-to-year" type="text" pattern="[0-9]*" inputmode="numeric"></div>
                  </div>
                </div>
              </fieldset>
              </div>
            </div>
          {{ submitButton(continueButton) }}
        </form>
      </div>
      <div class="govuk-grid-column-one-third">
        <h2 class="govuk-heading-l">{{ pageHelpHeading }}</h2>

        <h3 class="govuk-heading-s">{{ pageHelp[0].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[0].text }}</p>
        <h3 class="govuk-heading-s">{{ pageHelp[1].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[1].text }}</p>
        <h3 class="govuk-heading-s no-margin-bottom">{{ pageHelp[2].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[2].text }}</p>
        <h3 class="govuk-heading-s no-margin-bottom">{{ pageHelp[3].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[3].text }}</p>
        <h3 class="govuk-heading-s no-margin-bottom">{{ pageHelp[4].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[4].text }}</p>
        <h3 class="govuk-heading-s no-margin-bottom">{{ pageHelp[5].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[5].text }}</p>
        <h3 class="govuk-heading-s no-margin-bottom">{{ pageHelp[6].heading }}</h3>
        <p class="govuk-body">{{ pageHelp[6].text }}</p>
      </div>
    </div>
    {{ super() }}
  </div>
{% endblock %}

{% block bodyEnd %}
  <script src="/assets/js/accessible-autocomplete.min.js"></script>
  <script nonce="{{ cspNonce}}">
    {% set optionList = [] %}
    {% for item in listItems.courtList %}
    {% set _ = optionList.push(
      item.name
    ) %}
    {% endfor %}

    {% set defaultValue = formData['input-autocomplete'] if formData['input-autocomplete'] else '' %}
    {% set populatedContentDateFromDay = formData['content-date-from-day'] if formData['content-date-from-day'] else '' %}
    {% set populatedContentDateFromMonth = formData['content-date-from-month'] if formData['content-date-from-month'] else '' %}
    {% set populatedContentDateFromYear = formData['content-date-from-year'] if formData['content-date-from-year'] else '' %}
    {% set populatedClassification = formData['classification'] if formData['classification'] else '' %}
    {% set populatedLanguage = formData['language'] if formData['language'] else 'ENGLISH' %}
    {% set populatedDisplayDateFromDay = formData['display-date-from-day'] if formData['display-date-from-day'] else '' %}
    {% set populatedDisplayDateFromMonth = formData['display-date-from-month'] if formData['display-date-from-month'] else '' %}
    {% set populatedDisplayDateFromYear = formData['display-date-from-year'] if formData['display-date-from-year'] else '' %}
    {% set populatedDisplayDateToDay = formData['display-date-to-day'] if formData['display-date-to-day'] else '' %}
    {% set populatedDisplayDateToMonth = formData['display-date-to-month'] if formData['display-date-to-month'] else '' %}
    {% set populatedDisplayDateToYear = formData['display-date-to-year'] if formData['display-date-to-year'] else '' %}

    document.getElementById('content-date-from-day').value = {{ populatedContentDateFromDay | dump | safe }};
    document.getElementById('content-date-from-month').value = {{ populatedContentDateFromMonth  | dump | safe }};
    document.getElementById('content-date-from-year').value = {{ populatedContentDateFromYear  | dump | safe }};
    document.getElementById('classification').value = {{ populatedClassification | dump | safe }};
    document.getElementById('language').value = {{ populatedLanguage | dump | safe }};
    document.getElementById('display-date-from-day').value = {{ populatedDisplayDateFromDay  | dump | safe }};
    document.getElementById('display-date-from-month').value = {{ populatedDisplayDateFromMonth  | dump | safe }};
    document.getElementById('display-date-from-year').value = {{ populatedDisplayDateFromYear  | dump | safe }};
    document.getElementById('display-date-to-day').value = {{ populatedDisplayDateToDay  | dump | safe }};
    document.getElementById('display-date-to-month').value = {{ populatedDisplayDateToMonth  | dump | safe }};
    document.getElementById('display-date-to-year').value = {{ populatedDisplayDateToYear  | dump | safe }};

    const defaultVal = {{ defaultValue | dump | safe }}

    const element = document.querySelector('#search-input-container');
    const source = {{ optionList | dump |safe }};
    const autocompleteParam = {
      element: element,
      id: 'search-input',
      displayMenu: 'overlay',
      defaultValue: defaultVal,
    };

    if (window.history.replaceState) {
      window.history.replaceState(null, null, window.location.href);
    }

    function onListTypeChange() {
      let listType = document.getElementById('listType').value;
      let listTypeClassifications = {{ listTypeClassifications | dump | safe }}
      document.getElementById('classification').value = listTypeClassifications[listType];
    }

    document.getElementById('listType').addEventListener("change", onListTypeChange)

    // Set first govuk-grid-row back to display block as custom scss is written to change it to flex as that is required on other pages
    // Block is required on this page so the help section goes underneath the form on mobile devices
    document.querySelectorAll(".govuk-grid-row")[0].style.display = 'block';
  </script>
  {{ autoCompleteFilteredResults(autocompleteParam, cspNonce) }}
  {{ super() }}
{% endblock %}