Feature/gh 1646 change frequency (#1662)

* style frequency form, add basic event listeners
* add start and end reporting period dates
* add data block card styles
* calculate reporting period range and humanize

opentech/apply/projects/templates/application_projects/includes/reports.html

@@ -4,25 +4,35 @@
             <p class="data-block__title">Reporting</p>
         </div>
         <div class="data-block__body">
-            <div>
-                <h6>Report frequency</h6>
-                <p>
-                    {{ object.report_config.get_frequency_display }}
-                </p>
+            <div class="data-block__card">
+                <h6 class="data-block__card-title">Report frequency</h6>
+                <p class="data-block__card-copy">{{ object.report_config.get_frequency_display }}</p>
                 {% if request.user.is_apply_staff %}
-                <p>
+                    <p class="data-block__card-copy">
+                        <a data-fancybox data-src="#change-frequency" href="#" class="data-block__action-link">Change</a>
+                    </p>
+                    <!-- Change report frequency modal -->
                     <div class="modal" id="change-frequency">
                         {{ object.report_config.last_report.serialize|json_script:"lastReportData" }}
                         <h4 class="modal__header-bar">Change reporting frequency</h4>
+                        <div class="form__info-box">
+                            <p>
+                                Next report will be due in
+                                <b class="js-next-report-due-slot">(please choose the next report date)</b>
+                                and the report period will be
+                                <b class="js-report-period-start"></b>
+                                to
+                                <b class="js-report-period-end">(please choose the next report date)</b>
+                                and then every
+                                <b class="js-frequency-number-slot"></b>
+                                <b class="js-frequency-period-slot"></b>
+                                after until the project end date:
+                                <span class="js-project-end-slot"></span>.
+                            </p>
+                        </div>
                         <p>Schedule reports every:</p>
-                        {% include 'funds/includes/delegated_form_base.html' with form=update_frequency_form value='Continue'%}
+                        {% include 'funds/includes/delegated_form_base.html' with form=update_frequency_form value='Continue' extra_classes="form--report-frequency" %}
                     </div>
-                    <a data-fancybox
-                        data-src="#change-frequency"
-                        href="#">
-                        Change
-                    </a>
-                </p>
                 {% endif %}
             </div>
             <ul class="data-block__list">

opentech/apply/projects/templates/application_projects/project_detail.html

@@ -270,5 +270,6 @@
     <script src="{% static 'js/apply/toggle-proposal-info.js' %}"></script>
     <script src="{% static 'js/apply/file-uploads.js' %}"></script>
     <script src="{% static 'js/apply/past-reports-pagination.js' %}"></script>
+    <script src="{% static 'js/apply/report-calculator.js' %}"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
 {% endblock %}

opentech/static_src/src/javascript/apply/report-calculator.js

+(function ($) {
+
+    'use strict';
+
+    const reportData = JSON.parse(document.getElementById('lastReportData').textContent);
+
+    // Form inputs
+    const frequencyNumberInput = document.getElementById('id_occurrence');
+    const frequencyPeriodSelect = document.getElementById('id_frequency');
+    const startDateInput = document.getElementById('id_start');
+
+    // Form slots
+    const projectEndSlot = document.querySelector('.js-project-end-slot');
+    const frequencyNumberSlot = document.querySelector('.js-frequency-number-slot');
+    const frequencyPeriodSlot = document.querySelector('.js-frequency-period-slot');
+    const periodStartSlot = document.querySelector('.js-report-period-start');
+    const periodEndSlot = document.querySelector('.js-report-period-end');
+    const nextReportDueSlot = document.querySelector('.js-next-report-due-slot');
+
+    function init() {
+        // Set on page load
+        setProjectEnd();
+        setFrequency();
+        setReportPeriodStart();
+
+        // Add event listeners
+        addFrequencyEvents();
+        addReportPeriodEvents();
+    }
+
+    // Sets the project end date in the form info box
+    function setProjectEnd() {
+        projectEndSlot.innerHTML = reportData.projectEndDate;
+    }
+
+    // Set the reporting frequency
+    function setFrequency() {
+        frequencyNumberSlot.innerHTML = frequencyNumberInput.value;
+        pluraliseTimePeriod(frequencyNumberInput.value);
+    }
+
+    // Set the reporting period start date (endDate + 1)
+    function setReportPeriodStart() {
+        const endDate = new Date(reportData.endDate);
+        endDate.setDate(endDate.getDate() + 1);
+        periodStartSlot.innerHTML = endDate.toISOString().slice(0, 10);
+    }
+
+    function addReportPeriodEvents() {
+        startDateInput.oninput = e => {
+            // Update the reporting period end date (next report date)
+            periodEndSlot.innerHTML = e.target.value;
+
+            // Update the reporting period range (next report date - today)
+            const daysDiff = dateDiffInDays(new Date(), new Date(e.target.value));
+            const weeksAndDays = getWeeks(daysDiff);
+            const {weeks, days} = weeksAndDays;
+            const pluraliseWeeks = weeks === 1 ? '' : 's';
+            const pluraliseDays = days === 1 ? '' : 's';
+
+            nextReportDueSlot.innerHTML = `
+                ${weeks > 0 ? `${weeks} week${pluraliseWeeks}` : ''} ${days} day${pluraliseDays}
+            `;
+        };
+    }
+
+    // Update reporting frequency as the options are changed
+    function addFrequencyEvents() {
+        frequencyNumberInput.oninput = e => {
+            frequencyNumberSlot.innerHTML = e.target.value;
+            pluraliseTimePeriod(e.target.value);
+        };
+
+        frequencyPeriodSelect.onchange = e => {
+            frequencyPeriodSlot.innerHTML = `${e.target.value}`;
+            pluraliseTimePeriod(frequencyNumberInput.value);
+        };
+    }
+
+    function pluraliseTimePeriod(number) {
+        frequencyPeriodSlot.innerHTML = `${frequencyPeriodSelect.value}${Number(number) === 1 ? '' : 's'}`;
+    }
+
+    // Get the number of days between two dates
+    function dateDiffInDays(startDate, EndDate) {
+        const msPerDay = 1000 * 60 * 60 * 24;
+        const utc1 = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+        const utc2 = Date.UTC(EndDate.getFullYear(), EndDate.getMonth(), EndDate.getDate());
+
+        return Math.floor((utc2 - utc1) / msPerDay);
+    }
+
+    // Convert days into weeks and days
+    function getWeeks(days) {
+        return {
+            weeks: Math.floor(days / 7),
+            days: days % 7
+        };
+    }
+
+    init();
+
+})(jQuery);

opentech/static_src/src/sass/apply/components/_data-block.scss

@@ -221,4 +221,31 @@
         height: 25px;
         fill: $color--tomato;
     }
+
+    &__card {
+        padding-bottom: 1rem;
+        position: relative;
+        margin-bottom: 2rem;
+
+        &::after {
+            content: '';
+            width: calc(100% + 2rem);
+            position: absolute;
+            height: 2px;
+            display: block;
+            background: $color--mid-grey;
+            left: -1rem;
+            bottom: 0;
+
+            @include media-query(mob-landscape) {
+                width: calc(100% + 4rem);
+                left: -2rem;
+            }
+        }
+    }
+
+    &__card-copy,
+    &__card-title {
+        margin: 0 0 .5rem;
+    }
 }

opentech/static_src/src/sass/apply/components/_form.scss

@@ -43,6 +43,23 @@
             }
         }
 
+        #{$root}--report-frequency & {
+            margin: 0;
+
+            // Number input
+            &:nth-of-type(1) {
+                width: 20%;
+                display: inline-block;
+                margin-right: 1rem;
+            }
+
+            // Frequency select
+            &:nth-of-type(2) {
+                width: 50%;
+                display: inline-block;
+            }
+        }
+
         &--wrap {
             flex-wrap: wrap;
         }
@@ -469,4 +486,13 @@
         border: 1px solid $color--mid-grey;
         max-width: 410px;
     }
+
+    &__info-box {
+        background-color: $color--light-blue-90;
+        padding: 1rem;
+
+        p {
+            margin: 0;
+        }
+    }
 }