From 89c27050895ba20d1ba8e07521075804ab4f97b7 Mon Sep 17 00:00:00 2001
From: stitch1 <elger.jonker@gmail.com>
Date: Thu, 5 Nov 2020 15:54:50 +0100
Subject: [PATCH] Remove dependency on jquery, replace collapse panels with
 bootstrap collapse

---
 dashboard_frontend/package.json               |  1 -
 .../src/components/chart_collapse_panel.vue   | 87 ++--------------
 .../cumulative-percentage-bar-chart.vue       |  2 +-
 .../charts/percentage-bar-chart.vue           |  4 +-
 .../src/components/collapse_panel.vue         | 98 +++++++++++++++----
 .../components/domains/DomainListManager.vue  |  6 --
 .../src/components/legacy_mixin.vue           | 77 ---------------
 .../src/components/reports/Report.vue         | 10 +-
 .../src/components/reports/ReportCharts.vue   | 24 ++---
 .../src/components/scans/ScanMonitor.vue      |  6 --
 package.json                                  |  1 -
 11 files changed, 106 insertions(+), 210 deletions(-)
 delete mode 100644 dashboard_frontend/src/components/legacy_mixin.vue

diff --git a/dashboard_frontend/package.json b/dashboard_frontend/package.json
index 0c23c26d..ae5445f1 100644
--- a/dashboard_frontend/package.json
+++ b/dashboard_frontend/package.json
@@ -17,7 +17,6 @@
     "chartjs-plugin-datalabels": "^0.7.0",
     "dropzone": "^5.7.2",
     "headroom.js": "^0.12.0",
-    "jquery": "^3.5.1",
     "matomo-tracker": "^2.2.4",
     "patternomaly": "^1.3.2",
     "portal-vue": "^2.1.7",
diff --git a/dashboard_frontend/src/components/chart_collapse_panel.vue b/dashboard_frontend/src/components/chart_collapse_panel.vue
index 3b8ad9dc..306046d0 100644
--- a/dashboard_frontend/src/components/chart_collapse_panel.vue
+++ b/dashboard_frontend/src/components/chart_collapse_panel.vue
@@ -1,61 +1,20 @@
-<style scoped>
-.panel-content {
-    padding-bottom: 10px;
-}
-
-.chart-container {
-    position: relative; height:500px; min-height:500px; width:100%; min-width: 950px;
-}
-.chart_collapse_panel{
-    border-top: 1px solid dimgray;
-    border-bottom: 1px solid dimgray;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.panel-title {
-    font-size: 1.3em;
-}
-
-.h2 {
-  padding-left: 2em;
-    font-size: 1.2em;
-}
-
-.h3 {
-  padding-left: 3em;
-    font-size: 1.1em;
-}
-
-</style>
-
 <template>
-    <div class="chart_collapse_panel">
-        <h1 :class="level" class="panel-title">
-            <a href="" aria-expanded="false">
-                <span class="visuallyhidden">-:</span>
-                {{ title }}
-                <span class="pre-icon visuallyhidden"></span>
-                <span class="icon"><img
-                    src="/static/images/vendor/internet_nl/push-open.png"
-                    alt=""></span>
-            </a>
-        </h1>
-        <div class="panel-content">
-            <div style="overflow: auto; width: 100%;">
-                <div class="chart-container">
-                    <slot name="content">
-                        default content
+    <collapse-panel :title='title' :custom_title_class="level">
+        <div slot="content">
+            <div style="overflow: auto; width: 100%; height: 500px; position: relative;">
+                <div class="chart-container" style="position: relative; height: 500px; min-height: 500px; width: 100%;">
+                    <slot name="chart_content">
+                        Default Content
                     </slot>
                 </div>
             </div>
         </div>
-    </div>
+    </collapse-panel>
 </template>
 
 <script>
 export default {
-    name: "collapse_panel.vue",
+    name: "chart_collapse_panel",
     props: {
         title: {
             type: String,
@@ -69,33 +28,3 @@ export default {
 
 }
 </script>
-
-<style scoped>
-
-</style>
-<!--
-Possible upgrade:
-
-    <b-button v-b-toggle="category.key" variant="primary">{{ category.label }}</b-button>
-    <b-collapse :id="category.key" class="mt-2">
-        <div style="overflow: auto; width: 100%">
-            <div class="chart-container"
-                 style="position: relative; height:500px; width:100%; min-width: 950px;">
-                <percentage-bar-chart
-                    :title="graph_bar_chart_title"
-                    :translation_key="'charts.adoption_bar_chart'"
-                    :color_scheme="color_scheme"
-                    :chart_data="compare_charts"
-                    :accessibility_text="$t('charts.adoption_bar_chart.accessibility_text')"
-                    :show_dynamic_average="issue_filters[category.key].show_dynamic_average"
-                    :only_show_dynamic_average="false"
-                    :field_name_to_category_names="field_name_to_category_names"
-                    :axis="visible_fields_from_categories(category)">
-                </percentage-bar-chart>
-            </div>
-        </div>
-    </b-collapse>
-
-
-
--->
\ No newline at end of file
diff --git a/dashboard_frontend/src/components/charts/cumulative-percentage-bar-chart.vue b/dashboard_frontend/src/components/charts/cumulative-percentage-bar-chart.vue
index 4669dee9..526c8f29 100644
--- a/dashboard_frontend/src/components/charts/cumulative-percentage-bar-chart.vue
+++ b/dashboard_frontend/src/components/charts/cumulative-percentage-bar-chart.vue
@@ -63,7 +63,7 @@ export default {
                         },
                     },
                     responsive: true,
-                    maintainAspectRatio: false,
+                    maintainAspectRatio: true,
                     title: {
                         position: 'top',
                         display: true,
diff --git a/dashboard_frontend/src/components/charts/percentage-bar-chart.vue b/dashboard_frontend/src/components/charts/percentage-bar-chart.vue
index 247aff3e..cf1051b9 100644
--- a/dashboard_frontend/src/components/charts/percentage-bar-chart.vue
+++ b/dashboard_frontend/src/components/charts/percentage-bar-chart.vue
@@ -69,7 +69,9 @@ export default {
 
                     },
                     responsive: true,
-                    maintainAspectRatio: false,
+                    // setting this to false will not show the charts in collapse panels. See
+                    // https://github.com/chartjs/Chart.js/issues/762
+                    maintainAspectRatio: true,
                     title: {
                         position: 'top',
                         display: true,
diff --git a/dashboard_frontend/src/components/collapse_panel.vue b/dashboard_frontend/src/components/collapse_panel.vue
index aeddc3c2..f6ae8272 100644
--- a/dashboard_frontend/src/components/collapse_panel.vue
+++ b/dashboard_frontend/src/components/collapse_panel.vue
@@ -4,7 +4,7 @@
     padding-left: 20px;
 }
 
-.chart_collapse_panel {
+.collapse_panel {
     border-top: 1px solid gray;
     border-bottom: 1px solid gray;
     margin-top: 10px;
@@ -13,42 +13,106 @@
 
 .panel-title {
     font-size: 1.0em;
-    padding-left: 20px;
+    font-weight: normal;
+}
+
+.panel-title:hover {
+    text-decoration: underline;
+}
+
+button {
+    border: 0 !important;
+    color: dimgray;
+    font-weight: bold !important;
+}
+
+button:hover {
+    background-color: inherit;
 }
 
+.animate_opening {
+    transition: transform 300ms linear;
+    transform: rotate(0deg);
+    display: inline-block;
+}
+
+.animate_opening.open {
+    transform: rotate(180deg);
+    transition: transform 300ms linear;
+}
+
+.block button:hover, .block button:focus, .block button:active {
+    background: white
+}
+
+.level_two {
+  padding-left: 2em;
+    font-size: 0.9em;
+}
+
+.level_three {
+  padding-left: 3em;
+    font-size: 0.8em;
+}
+
+
 </style>
 
 <template>
-    <div class="chart_collapse_panel">
-        <h1 class="panel-title">
-            <a href="" aria-expanded="false">
-                <span class="visuallyhidden">-:</span>
+    <div class="collapse_panel">
+        <button
+            :class="status_visible ? null : 'collapsed'"
+            :aria-expanded="status_visible ? 'true' : 'false'"
+            :aria-controls="'collapse-' + id"
+            @click="status_visible = !status_visible"
+        >
+            <span :class="`panel-title ${custom_title_class}`">
+               <div :class="status_visible ? 'animate_opening open' : 'animate_opening'">
+                    <img src="/static/images/vendor/internet_nl/push-open.png" alt="open panel">
+                </div>
                 {{ title }}
-                <span class="pre-icon visuallyhidden"></span>
-                <span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
-            </a>
-        </h1>
-        <div class="panel-content">
+            </span>
+        </button>
+
+        <b-collapse :id="'collapse-' + id" v-model="status_visible" class="panel-content">
             <slot name="content">
                 default content
             </slot>
-        </div>
+        </b-collapse>
     </div>
 </template>
 
 <script>
 export default {
-    name: "collapse_panel.vue",
+    name: "collapse_panel",
+    mounted: function () {
+        // generated random id for this thing to be collapsable. Chance to be the same is 1 in 1 000 000 000 000.
+        this.id = Math.round((Math.random() * 1000000000000));
+
+        // support being open on start using :visible.
+        this.status_visible = this.visible;
+    },
+    data: function () {
+        return {
+            // random ID so the button knows what element to collapse or expand.
+            id: 0,
+            status_visible: false,
+        }
+    },
     props: {
         title: {
             type: String,
             default: ""
         },
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        custom_title_class: {
+            type: String,
+            default: ""
+        }
     }
 
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/dashboard_frontend/src/components/domains/DomainListManager.vue b/dashboard_frontend/src/components/domains/DomainListManager.vue
index ffbb9f23..a93cff09 100644
--- a/dashboard_frontend/src/components/domains/DomainListManager.vue
+++ b/dashboard_frontend/src/components/domains/DomainListManager.vue
@@ -153,7 +153,6 @@ Fixed: when deleting a list, it is re-added to the list of lists when adding a n
 </template>
 
 <script>
-import legacy_mixin from '../legacy_mixin.vue'
 import managed_url_list from './managed-url-list.vue'
 import sharedMessages from './../translations/dashboard.js'
 
@@ -164,7 +163,6 @@ export default {
     i18n: {
         sharedMessages: sharedMessages,
     },
-    mixins: [legacy_mixin],
     data: function () {
         return {
             loading: false,
@@ -199,10 +197,6 @@ export default {
                 this.maximum_domains_per_list = data['maximum_domains_per_list'];
                 this.loading = false;
 
-                // this makes sure accordeons work while vue routing is in place:
-                this.$nextTick(() => {
-                    this.accordinate();
-                });
             }).catch((fail) => {
                 console.log('A loading error occurred: ' + fail);
             });
diff --git a/dashboard_frontend/src/components/legacy_mixin.vue b/dashboard_frontend/src/components/legacy_mixin.vue
deleted file mode 100644
index b95db7a3..00000000
--- a/dashboard_frontend/src/components/legacy_mixin.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-import $ from 'jquery'
-
-export default {
-    methods: {
-        // Creates accordeons in an old-school way
-        // was taken from accordion-min.js and put in a function otherwise the accordions don't work.
-        // todo: use new accordion system.
-        accordinate: function () {
-            $('.accordion').attr({role: 'tablist', multiselectable: 'true'});
-            $('.panel-content').attr('id', function (IDcount) {
-                return 'panel-' + IDcount;
-            });
-            $('.panel-content').attr('aria-labelledby', function (IDcount) {
-                return 'control-panel-' + IDcount;
-            });
-            $('.panel-content').attr('aria-hidden', 'true');
-            $('.accordion .panel-content').attr('role', 'tabpanel');
-            $('.panel-title').each(function () {
-                let target = $(this).next('.panel-content')[0].id;
-                $('a', this).attr('href', '#' + 'control-' + target).attr('aria-controls', target).attr('id', 'control-' + target);
-                let opentext = $('#panel-item-open').html();
-                $('.pre-icon', this).text(opentext);
-            });
-            var hash = window.location.hash;
-            // quick fix to prevent messing up loading SPA pages.
-            if (hash != '' && hash.startsWith("control-panel")) {
-                $(hash).attr('aria-expanded', true).addClass('active').parent().next('.panel-content').slideDown(200).attr('aria-hidden', 'false');
-                this.setPanelItemFoldText($('.pre-icon', hash), 'close');
-                this.refreshPanelButtonText($(hash), 'open');
-            }
-
-            // reset onclicks, because adding on-clicks stack: each one will be called causing the panel to open and close multiple times
-            // after calling accordinate multiple times.
-            let self = this;
-            $('.panel-title a').off("click").click(function () {
-                // var stateObj = {foo: "bar"};
-                if ($(this).attr('aria-expanded') == 'false') {
-                    $(this).attr('aria-expanded', true).addClass('active').parent().next('.panel-content').slideDown(200).attr('aria-hidden', 'false');
-                    self.setPanelItemFoldText($('.pre-icon', this), 'close');
-                    self.refreshPanelButtonText($(this), 'open');
-                    // window.history.pushState(stateObj, null, "#" + $(this).attr('id'));
-                } else {
-                    $(this).attr('aria-expanded', false).removeClass('active').parent().next('.panel-content').slideUp(200).attr('aria-hidden', 'true');
-                    // history.pushState(stateObj, null, '#')
-                    self.setPanelItemFoldText($('.pre-icon', this), 'open');
-                    self.refreshPanelButtonText($(this), 'close');
-                }
-                return false;
-            });
-        },
-        setPanelItemFoldText: function (panel_preicon, text) {
-            if (text === 'open') {
-                var openText = $('#panel-item-open').text();
-                panel_preicon.text(openText);
-            } else if (text === 'close') {
-                var closeText = $('#panel-item-close').text();
-                panel_preicon.text(closeText);
-            }
-        },
-        refreshPanelButtonText: function (panel_a, action) {
-            var testResults = panel_a.parents('.testresults');
-            var testHeader = testResults.prev();
-            var button = $('.panel-button-container button', testHeader);
-            if (action === 'close' && $('.panel-title a', testResults).length === $('.panel-title', testResults).find('a[aria-expanded=false]').length) {
-                button.addClass('panel-button-show').removeClass('panel-button-hide');
-                var panelButtonShowText = $('#panel-button-show').text();
-                button.text(panelButtonShowText);
-            } else if (action === 'open' && $('.panel-title a', testResults).length === $('.panel-title', testResults).find('a[aria-expanded=true]').length) {
-                button.addClass('panel-button-hide').removeClass('panel-button-show');
-                var panelButtonHideText = $('#panel-button-hide').text();
-                button.text(panelButtonHideText);
-            }
-        }
-    }
-};
-</script>
\ No newline at end of file
diff --git a/dashboard_frontend/src/components/reports/Report.vue b/dashboard_frontend/src/components/reports/Report.vue
index 9141dcad..4a709422 100644
--- a/dashboard_frontend/src/components/reports/Report.vue
+++ b/dashboard_frontend/src/components/reports/Report.vue
@@ -2,7 +2,7 @@
 
 </style>
 
-<template type="x-template" id="report_template">
+<template>
     <div id="report-template">
         <div class="block fullwidth do-not-print">
             <h1>{{ $t("header.title") }}</h1>
@@ -129,7 +129,6 @@
 
 import _ from 'lodash'
 
-import legacy_mixin from './../legacy_mixin'
 import field_translations from './../field_translations'
 
 import ReportCharts from './ReportCharts'
@@ -215,8 +214,6 @@ export default {
         }
     },
     name: 'report',
-    template: 'report_template',
-    mixins: [legacy_mixin],
     data: function () {
         return {
 
@@ -299,9 +296,6 @@ export default {
                 this.selected_report = reports_to_select;
             }
         }, 1500)
-        this.$nextTick(() => {
-            this.accordinate();
-        });
     },
 
     // common issue that debounce does not work on a watch.
@@ -342,7 +336,6 @@ export default {
                 this.is_loading = false;
                 // new accordions are created, reduce their size.
                 this.$nextTick(() => {
-                    this.accordinate();
                     this.$forceUpdate()
                 });
             }).catch((fail) => {
@@ -392,7 +385,6 @@ export default {
                     // given the charts are on a fixed number in the array, vue doesn't pick up changes.
                     // and as the order matters, this is a solution that fixes that.
                     this.$nextTick(() => {
-                        this.accordinate();
                         this.$forceUpdate();
                     });
                 }
diff --git a/dashboard_frontend/src/components/reports/ReportCharts.vue b/dashboard_frontend/src/components/reports/ReportCharts.vue
index f83d3531..d03b6950 100644
--- a/dashboard_frontend/src/components/reports/ReportCharts.vue
+++ b/dashboard_frontend/src/components/reports/ReportCharts.vue
@@ -97,8 +97,8 @@
                                 <div style="page-break-inside: avoid;"
                                      v-if="visible_fields_from_categories(category).length > 0">
 
-                                    <chart_collapse_panel :title="category.label" :level="'h2'">
-                                        <div slot="content">
+                                    <chart_collapse_panel :title="category.label" :level="'level_two'">
+                                        <div slot="chart_content">
                                             <percentage-bar-chart
                                                 style="height: 500px;"
                                                 :title="graph_bar_chart_title"
@@ -118,8 +118,8 @@
                                     <div style="page-break-inside: avoid;"
                                          v-if="fields_from_self(subcategory).length > 0">
 
-                                        <chart_collapse_panel :title="subcategory.label" :level="'h3'">
-                                            <div slot="content">
+                                        <chart_collapse_panel :title="subcategory.label" :level="'level_three'">
+                                            <div slot="chart_content">
                                                 <percentage-bar-chart
                                                     style="height: 500px;"
                                                     :title="graph_bar_chart_title"
@@ -136,8 +136,8 @@
                                         <!-- Special graph for Forum standardisation, that cannot have the items disabled -->
                                         <template
                                             v-if="['category_mail_forum_standardisation_magazine', 'category_web_forum_standardisation_magazine'].includes(subcategory.key)">
-                                            <chart_collapse_panel :title="subcategory.label" :level="'h3'">
-                                                <div slot="content">
+                                            <chart_collapse_panel :title="subcategory.label" :level="'level_three'">
+                                                <div slot="chart_content">
                                                     <percentage-bar-chart
                                                         style="height: 500px;"
                                                         :title="graph_bar_chart_title"
@@ -194,8 +194,8 @@
                                      v-if="visible_fields_from_categories(category).length > 0">
 
 
-                                    <chart_collapse_panel :title="category.label" :level="'h2'">
-                                        <div slot="content">
+                                    <chart_collapse_panel :title="category.label" :level="'level_two'">
+                                        <div slot="chart_content">
                                             <cumulative-percentage-bar-chart
                                                 style="height: 500px"
                                                 :title="graph_cumulative_bar_chart_title"
@@ -217,8 +217,8 @@
                                          v-if="fields_from_self(subcategory).length > 0">
 
 
-                                        <chart_collapse_panel :title="subcategory.label" :level="'h3'">
-                                            <div slot="content">
+                                        <chart_collapse_panel :title="subcategory.label" :level="'level_three'">
+                                            <div slot="chart_content">
                                                 <cumulative-percentage-bar-chart
                                                     style="height: 500px"
                                                     :title="graph_cumulative_bar_chart_title"
@@ -238,8 +238,8 @@
                                             v-if="['category_mail_forum_standardisation_magazine', 'category_web_forum_standardisation_magazine'].includes(subcategory.key)">
                                             <chart_collapse_panel :title="'This shows the average for Forum Standardisation, it is not possible\n'+
 '                                                to\n'+
-'                                                show the average or to select what fields should be visible.'" :level="'h3'">
-                                                <div slot="content">
+'                                                show the average or to select what fields should be visible.'" :level="'level_three'">
+                                                <div slot="chart_content">
                                                     <cumulative-percentage-bar-chart
                                                         style="height: 500px"
                                                         :title="graph_cumulative_bar_chart_title"
diff --git a/dashboard_frontend/src/components/scans/ScanMonitor.vue b/dashboard_frontend/src/components/scans/ScanMonitor.vue
index ff0be996..057f2cdc 100644
--- a/dashboard_frontend/src/components/scans/ScanMonitor.vue
+++ b/dashboard_frontend/src/components/scans/ScanMonitor.vue
@@ -164,11 +164,8 @@ h4 {
 
 
 <script>
-import legacy_mixin from './../legacy_mixin.vue'
-
 export default {
     name: 'scan_monitor',
-    mixins: [legacy_mixin],
 
     data: function () {
         return {
@@ -191,9 +188,6 @@ export default {
             fetch(`${this.$store.state.dashboard_endpoint}/data/scan-monitor/`, {credentials: 'include'}).then(response => response.json()).then(data => {
                 this.scans = data;
                 this.$store.commit("update_scan_monitor_data", data);
-                this.$nextTick(() => {
-                    this.accordinate();
-                });
             }).catch((fail) => {
                 console.log('A loading error occurred: ' + fail);
             });
diff --git a/package.json b/package.json
index 867364d3..bae7fd2d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
     "chartjs-plugin-datalabels": "^0.7.0",
     "dropzone": "^5.7.2",
     "headroom.js": "^0.12.0",
-    "jquery": "^3.5.1",
     "matomo-tracker": "^2.2.4",
     "patternomaly": "^1.3.2",
     "portal-vue": "^2.1.7",