replace old colour group selector and notifications with vue app that uses the same underlying data as my courses, relocate my courses vue components and remove now obsolete functions from meine_seminare_func, fixes #5165, fixes #5201

Closes #5165 and #5201

Merge request studip/studip!3892

7 files changed, 62 insertions, 130 deletions

diff --git a/resources/assets/javascripts/bootstrap/settings.js b/resources/assets/javascripts/bootstrap/settings.js
index caae5b2..2acaabe 100644
--- a/resources/assets/javascripts/bootstrap/settings.js
+++ b/resources/assets/javascripts/bootstrap/settings.js
@@ -32,55 +32,6 @@ STUDIP.domReady(() => {
     });
 });
 
-//
-$(document).on('change', '#settings-notifications :checkbox', function() {
-    var name = $(this).attr('name');
-
-    if (name === 'all[all]') {
-        $(this)
-            .closest('table')
-            .find(':checkbox')
-            .prop('checked', this.checked);
-        return;
-    }
-
-    if (/all\[columns\]/.test(name)) {
-        var index =
-            $(this)
-                .closest('td')
-                .index() + 2;
-        $(this)
-            .closest('table')
-            .find('tbody td:nth-child(' + index + ') :checkbox')
-            .prop('checked', this.checked);
-    } else if (/all\[rows\]/.test(name)) {
-        $(this)
-            .closest('td')
-            .siblings()
-            .find(':checkbox')
-            .prop('checked', this.checked);
-    }
-
-    $('.notification.settings tbody :checkbox[name^=all]').each(function() {
-        var other = $(this)
-            .closest('td')
-            .siblings()
-            .find(':checkbox');
-        this.checked = other.filter(':not(:checked)').length === 0;
-    });
-
-    $('.notification.settings thead :checkbox').each(function() {
-        var index =
-                $(this)
-                    .closest('td')
-                    .index() + 2,
-            other = $(this)
-                .closest('table')
-                .find('tbody td:nth-child(' + index + ') :checkbox');
-        this.checked = other.filter(':not(:checked)').length === 0;
-    });
-});
-
 $(document).on('input', '#new_password', function() {
     var message = $(this).data().message;
     if (this.validity.patternMismatch) {
diff --git a/resources/assets/javascripts/bootstrap/vue.js b/resources/assets/javascripts/bootstrap/vue.js
index c0fe942..ac22629 100644
--- a/resources/assets/javascripts/bootstrap/vue.js
+++ b/resources/assets/javascripts/bootstrap/vue.js
@@ -46,9 +46,12 @@ STUDIP.ready(() => {
         const promises = [Promise.resolve()];
 
         for (const [index, name] of Object.entries(config.stores)) {
+
             promises.push(
                 import(`../../../vue/store/${name}.js`).then(storeConfig => {
-                    store.registerModule(index, storeConfig.default);
+                    if (!store.hasModule(index)) {
+                        store.registerModule(index, storeConfig.default);
+                    }
 
                     const dataElement = document.getElementById(`vue-store-data-${index}`);
                     if (dataElement) {
@@ -106,5 +109,10 @@ STUDIP.ready(() => {
         plugins.forEach(plugin => app.use(plugin, { store }))
 
         app.mount(node);
+
+        const dialog = node.closest('.studip-dialog');
+        if (dialog !== null) {
+            $(dialog).on('dialogclose', () => app.unmount());
+        }
     });
 });
diff --git a/resources/assets/stylesheets/scss/colour-selector.scss b/resources/assets/stylesheets/scss/colour-selector.scss
new file mode 100644
index 0000000..0585f2a
--- /dev/null
+++ b/resources/assets/stylesheets/scss/colour-selector.scss
@@ -0,0 +1,51 @@
+.colour-selector {
+    $padding: 2px;
+
+    position: relative;
+
+    background-clip: padding-box;
+    width: var(--icon-size-default);
+
+    &.mycourses-group-selector {
+        border: 1px solid var(--color--table-border);
+    }
+
+    input[type="radio"] {
+        @extend .sr-only;
+
+        &:focus + label {
+            // Replicates the focus on the label
+            // @see https://css-tricks.com/copy-the-browsers-native-focus-styles/
+            outline: 5px auto Highlight;
+            outline: 5px auto -webkit-focus-ring-color;
+            outline-offset: 1px;
+        }
+
+        &:checked + label {
+            // We need to insert a pseudo element since the above focus
+            // indicator would be lost
+            &::before {
+                content: '';
+                display: inline-block;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                outline: 2px solid var(--white);
+                outline-offset: -4px;
+            }
+        }
+    }
+
+    label {
+        box-sizing: border-box;
+        cursor: pointer;
+        height: calc(var(--icon-size-default) + 2 * $padding);
+        margin: 0 !important;
+        padding: $padding;
+        position: relative;
+        text-indent: 0 !important;
+        width: calc(var(--icon-size-default) + 2 * $padding);
+    }
+}
diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss
index 2e26dee..9d34b5c 100644
--- a/resources/assets/stylesheets/scss/my_courses.scss
+++ b/resources/assets/stylesheets/scss/my_courses.scss
@@ -9,73 +9,6 @@
     background: var(--white);
 }
 
-form.default table.mycourses-group-selector {
-    table-layout: fixed;
-    width: unset;
-
-    td {
-        width: 2em;
-    }
-}
-
-form.default td.mycourses-group-selector,
-table.colour-selector td.colour {
-    position: relative;
-
-    background-clip: padding-box;
-
-    &.mycourses-group-selector {
-        border: 1px solid fade-out($brand-color-lighter, 0.8);
-    }
-
-    &.colour {
-        padding-left: 0.1em;
-        padding-right: 0.1em;
-    }
-
-    input[type="radio"] {
-        @extend .sr-only;
-
-        &:checked + label {
-            .group-number {
-                display: none;
-            }
-            .checked-icon {
-                display: inline;
-            }
-        }
-    }
-
-    &:hover label {
-        .group-number {
-            display: none;
-        }
-        .checked-icon {
-            display: inline;
-        }
-    }
-
-    label {
-        text-align: center;
-        font-size: large;
-        font-weight: bold;
-        cursor: pointer;
-
-        background-color: var(--white);
-        margin-bottom: 0;
-        text-indent: 0;
-
-        height: 1.2em;
-
-        .group-number {
-            display: inline;
-        }
-        .checked-icon {
-            display: none;
-        }
-    }
-}
-
 $icon-padding: 3px;
 
 .my-courses-navigation {
diff --git a/resources/assets/stylesheets/scss/schedule.scss b/resources/assets/stylesheets/scss/schedule.scss
index c163f42..c2be9ed 100644
--- a/resources/assets/stylesheets/scss/schedule.scss
+++ b/resources/assets/stylesheets/scss/schedule.scss
@@ -3,18 +3,6 @@ form.default.schedule-entry {
     section.nowrap {
         flex-wrap: nowrap;
     }
-
-    table.colour-selector td.colour {
-        label {
-            width: 1.5em;
-            height: 1.5em;
-
-            .studip-icon {
-                height: 1.5em;
-                filter: drop-shadow(0 0 2px var(--white))
-            }
-        }
-    }
 }
 
 .fc.schedule {
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 788392d..f2978ba 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -214,7 +214,7 @@ td.tree-elbow-line, td.tree-elbow-end {
     background-color: var(--group-color-8) !important;
 }
 
-#my_seminars, #settings-notifications {
+#my_seminars {
     .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
     .gruppe5, .gruppe6, .gruppe7, .gruppe9 {
         width: 1px;
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 42ab072..6d1d16a 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -24,6 +24,7 @@
 @import "scss/buttons";
 @import "scss/calendar";
 @import "scss/clipboard";
+@import "scss/colour-selector";
 @import "scss/consultation";
 @import "scss/contacts";
 @import "scss/contentbar";