Resolve "Stundenplanansicht für Überschneidungsfreiheitschecks"

Closes #3323

Merge request studip/studip!2337

2 files changed, 47 insertions, 43 deletions

diff --git a/resources/assets/javascripts/lib/overlapping.js b/resources/assets/javascripts/lib/overlapping.js
index 56896fe..05b1a22 100644
--- a/resources/assets/javascripts/lib/overlapping.js
+++ b/resources/assets/javascripts/lib/overlapping.js
@@ -7,7 +7,8 @@ const Overlapping = {
      * @returns {undefined}
      */
     init: function () {
-        $('#base-version-select').select2({
+        let base_selection = $('#base-version-select');
+        base_selection.select2({
             placeholder: $gettext('Studiengangteil suchen'),
             minimumInputLength: 3,
             ajax: {
@@ -31,7 +32,7 @@ const Overlapping = {
         $('#semtype-select').select2({
             placeholder: $gettext('Veranstaltungstyp auswählen (optional)')
         });
-        $('#base-version-select').on('select2:select', function () {
+        base_selection.on('select2:select', function () {
             $('#comp-versions-select').val(null).trigger('change');
             $.ajax({
                 url: STUDIP.URLHelper.getURL('dispatch.php/admin/overlapping/comp_versions'),
@@ -41,7 +42,7 @@ const Overlapping = {
                 },
                 success: function(data) {
                     if (data.results.length) {
-                        var inputlength = 3;
+                        let inputlength = 3;
                         if (data.results.length < 4) {
                             inputlength = 0;
                         }
@@ -55,33 +56,30 @@ const Overlapping = {
                             }
                         });
                     } else {
-                        $('#comp-versions-select').select2({
+                        base_selection.select2({
                             placeholder: $gettext('Keine weitere Auswahl möglich')
                         });
-                        $('#comp-versions-select').prop('disabled', true).trigger('change');
+                        base_selection.prop('disabled', true).trigger('change');
                     }
                 }
             });
         });
 
         $('span.mvv-overlapping-exclude').on('click', function () {
-            const course_id = $(this).data('mvv-ovl-course');
-            const selection_id = $(this).data('mvv-ovl-selection');
+            const conflict_id = $(this).data('mvv-ovl-conflict');
             $.ajax({
-                method: 'post',
-                url: STUDIP.URLHelper.getURL('dispatch.php/admin/overlapping/set_exclude'),
+                method: 'get',
+                url: STUDIP.URLHelper.getURL('dispatch.php/admin/overlapping/exclude'),
                 data: {
-                    'excluded': $(this).is('.mvv-overlapping-invisible') ? 1 : 0,
-                    'course_id': course_id,
-                    'selection_id': selection_id
+                    'conflict_id': conflict_id
                 },
                 success() {
                     $('.mvv-overlapping-exclude').each(function () {
-                        if ($(this).data('mvv-ovl-course') == course_id) {
+                        if ($(this).data('mvv-ovl-conflict') === conflict_id) {
                             $(this).toggleClass('mvv-overlapping-invisible');
                         }
+                        $(this).attr('title', $gettext('Veranstaltung berücksichtigen'));
                     });
-                    $('.mvv-overlapping-exclude').attr('title', $gettext('Veranstaltung berücksichtigen'));
                     $('.mvv-overlapping-invisible').attr('title', $gettext('Veranstaltung nicht berücksichtigen'));
 
                 }
diff --git a/resources/assets/stylesheets/scss/overlapping.scss b/resources/assets/stylesheets/scss/overlapping.scss
index d8f6d52..6de5f48 100644
--- a/resources/assets/stylesheets/scss/overlapping.scss
+++ b/resources/assets/stylesheets/scss/overlapping.scss
@@ -4,73 +4,69 @@
 
 .mvv-ovl-base-abschnitt {
     position: relative;
-    width: 100%;
-    height: 30px;
     margin-bottom: 5px;
-    color: var(--dark-gray-color);
     font-weight: 700;
-    font-size: 16px;
     border-bottom: 1px solid var(--light-gray-color-40);
 
     h2 {
-        position: absolute;
+        position: relative;
         left: 5px;
-        border: none;
-        margin: 7px 0;
+        top: 7px;
+        padding-right: 150px;
+        margin-top: 0;
+        font-size: 1em;
     }
 
     & > div {
         position: absolute;
-        left: unset;
         right: 0;
+        bottom: 0;
+        white-space: nowrap;
 
         div {
             display: inline-block;
-            width: 25px;
-            margin-top: 5px;
+            width: 20px;
+            font-size: 1em;
         }
     }
 }
 
 ul.mvv-ovl-conflict {
-    width: 100%;
 
-    .mvv-ovl-base-modulteil, .mvv-ovl-comp-modulteil {
+    div.mvv-ovl-title {
+        margin-right: 150px;
+        display: inline-block;
+       /* margin-top: -21px; */
+    }
+
+    .mvv-ovl-modulteil {
         > div {
             position: absolute;
             top: 0;
             right: 0;
             text-align: right;
-            border-bottom: solid 1px var(--light-gray-color-40);
+            width: 150px;
 
             &:first-of-type {
-                left: 30px;
+                position: relative;
+                top: -21px;
+                left: 18px;
                 width: auto;
                 text-align: left;
                 border-bottom: solid 1px var(--light-gray-color-40);
+                padding-right: 150px;
             }
 
             & > div {
                 display: inline-block;
-                width: 25px;
+                width: 20px;
                 text-align: left;
             }
         }
-    }
-
-    .mvv-ovl-version {
-        font-size: 1.2em;
-    }
-}
 
-.mvv-ovl-base-course {
-    position: absolute;
-    width: 5px;
-    color: var(--red);
-    left: 10px;
-
-    ~ label {
-        padding-left: 4px;
+        > ul {
+            top: -21px;
+        }
     }
 }
 
@@ -85,3 +81,13 @@ ul.mvv-ovl-conflict {
         background: rgba(255, 255, 255, 0.5) url("#{$image-path}/icons/blue/visibility-invisible.svg") center center no-repeat;
     }
 }
+
+#admin-overlapping-index {
+    .select2-dropdown .select2-results .select2-results__option {
+        word-wrap: break-word;
+        white-space: normal;
+    }
+    .select2-selection__rendered .select2-selection__choice .select2-selection__content {
+        white-space: normal;
+    }
+}