Resolve "Studiengruppen erweitern" - Hauptbronch

Closes #3616

Merge request studip/studip!2509

9 files changed, 228 insertions, 6 deletions

diff --git a/resources/assets/javascripts/lib/global_search.js b/resources/assets/javascripts/lib/global_search.js
index 19154a1..4c46c77 100644
--- a/resources/assets/javascripts/lib/global_search.js
+++ b/resources/assets/javascripts/lib/global_search.js
@@ -131,6 +131,13 @@ const GlobalSearch = {
                             .appendTo(details);
                     }
 
+                    // Details: Descriptional text
+                    if (result.found_tag !== null) {
+                        $('<div class="globalsearch-result-description">')
+                            .html(result.found_tag)
+                            .appendTo(details);
+                    }
+
                     // Details: Additional information
                     if (result.additional !== null) {
                         $('<div class="globalsearch-result-additional">')
diff --git a/resources/assets/javascripts/lib/search.js b/resources/assets/javascripts/lib/search.js
index ff3a98d..5c0e3e8 100644
--- a/resources/assets/javascripts/lib/search.js
+++ b/resources/assets/javascripts/lib/search.js
@@ -245,6 +245,13 @@ const Search = {
                 .appendTo(details);
         }
 
+        // Details: Tags
+        if (result.found_tag !== null) {
+            $('<div class="search-result-description">')
+                .html(result.found_tag)
+                .appendTo(details);
+        }
+
         if (result.dates !== null) {
             $('<div class="search-result-dates">')
                 .html(result.dates)
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index 0a707c8..5c8f3a4 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -562,6 +562,13 @@ form.default {
             margin-top: 0.5ex;
         }
     }
+    .multiquicksearch > li {
+        display: flex;
+        align-items: center;
+        a.delete_item {
+            margin-left: 5px;
+        }
+    }
 }
 
 form.narrow {
diff --git a/resources/assets/stylesheets/scss/studygroup.scss b/resources/assets/stylesheets/scss/studygroup.scss
index 8eb0c4c..18cde00 100644
--- a/resources/assets/stylesheets/scss/studygroup.scss
+++ b/resources/assets/stylesheets/scss/studygroup.scss
@@ -52,3 +52,107 @@ ul.studygroup-gallery {
     }
   }
 }
+
+.connectedcourses {
+    .teaser {
+        font-size: 24px;
+    }
+    .connectedstudygroups-empty-background {
+        @include empty-placeholder-image('network2', false);
+    }
+    footer {
+        background-color: var(--content-color-20);
+        border-top: 1px solid var(--brand-color-darker);
+        clear: both;
+        padding: 0;
+        height: 58px;
+    }
+}
+
+.studip-tiles {
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+    > * {
+        display: flex;
+        flex-direction: column;
+        width: 270px;
+        border: 1px solid var(--content-color-20);
+        padding: 10px;
+        margin-bottom: 10px;
+        align-items: stretch;
+        margin-right: 10px;
+        > * {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 10px;
+
+            &.with-action-menu {
+                justify-content: space-between;
+                > * {
+                    margin-right: 0px;
+                    &:first-child {
+                        display: flex;
+                        flex-direction: row;
+                        > * {
+                            margin-right: 10px;
+                        }
+                    }
+                }
+            }
+            .actions {
+                text-align: right;
+            }
+            &:last-child {
+                margin-bottom: 0px;
+            }
+            > * {
+                margin-right: 10px;
+            }
+        }
+    }
+}
+
+.studip-contents-overview-teaser {
+    max-width: 782px;
+    background-color: var(--content-color-20);
+    background-image: url('#{$image-path}/courseware-keyvisual-negative.svg');
+    background-repeat: no-repeat;
+    background-size: 196px;
+    background-position-y: 50%;
+    background-position-x: 24px;
+    padding: 24px;
+    margin-bottom: 10px;
+
+    .teaser-content {
+        padding-left: 220px;
+
+        header {
+            font-size: 1.5em;
+            margin-bottom: 0.5em;
+        }
+    }
+}
+
+.responsive-display {
+    .cw-contents-overview-teaser {
+        max-width: 782px;
+        background-size: 60%;
+        background-position-y: 24px;
+        background-position-x: 50%;
+        padding: 24px;
+        margin-bottom: 10px;
+
+        .teaser-content {
+            padding-top: 28%;
+            padding-left: 0;
+            text-align: justify;
+
+            header {
+                font-size: 1.5em;
+                margin: 1em 0 0.5em 0;
+                text-align: center;
+            }
+        }
+    }
+}
diff --git a/resources/assets/stylesheets/scss/tables.scss b/resources/assets/stylesheets/scss/tables.scss
index 2c05362..32a26c2 100644
--- a/resources/assets/stylesheets/scss/tables.scss
+++ b/resources/assets/stylesheets/scss/tables.scss
@@ -623,10 +623,14 @@ table.default {
         font-size: $font-size-base;
         border-left: 1px solid var(--color--table-border);
         margin-bottom: -2px;
-        min-height: 26px;
+        min-height: 30px;
         padding-bottom: 3px;
         padding-left: 0.5em;
         padding-top: 4px;
+        input[type=text] {
+            width: auto; // otherwise it can be 100%, so there is no space left for other parts of the actions-area
+            max-height: 30px;
+        }
     }
 
     td.actions, th.actions {
diff --git a/resources/vue/base-components.js b/resources/vue/base-components.js
index d9bb1b7..2524642 100644
--- a/resources/vue/base-components.js
+++ b/resources/vue/base-components.js
@@ -10,6 +10,7 @@ const BaseComponents = {
     EditableList: defineAsyncComponent(() => import('./components/EditableList.vue')),
     FileUpload: defineAsyncComponent(() => import('./components/form_inputs/FileUpload.vue')),
     I18nTextarea: defineAsyncComponent(() => import("./components/I18nTextarea.vue")),
+    Multiquicksearch: defineAsyncComponent(() => import('./components/Multiquicksearch.vue')),
     Multiselect: defineAsyncComponent(() => import('./components/Multiselect.vue')),
     MyCoursesColouredTable: defineAsyncComponent(() => import('./components/form_inputs/MyCoursesColouredTable.vue')),
     Quicksearch: defineAsyncComponent(() => import('./components/Quicksearch.vue')),
diff --git a/resources/vue/components/Multiquicksearch.vue b/resources/vue/components/Multiquicksearch.vue
new file mode 100644
index 0000000..19d8068
--- /dev/null
+++ b/resources/vue/components/Multiquicksearch.vue
@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <ul class="clean multiquicksearch">
+            <li v-for="(item, index) in items" :key="index">
+                <quicksearch :name="name"
+                             :searchtype="searchtype"
+                             :autocomplete="autocomplete"
+                             :modelValue="autocomplete ? item.item_name : item.item_id"
+                             :needle="item.item_name"
+                             :ref="'qs_' + index"
+                             @update:modelValue="(new_id, new_item_name) => editItem(new_id, new_item_name, index)"></quicksearch>
+                <a href="" class="delete_item" @click.prevent="deleteItem(index)">
+                    <studip-icon shape="trash" class="text-bottom"></studip-icon>
+                </a>
+            </li>
+        </ul>
+        <a href="#" @click.prevent="addItem">
+            <studip-icon shape="add" class="text-bottom"></studip-icon>
+            {{ addlabel }}
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'multiquicksearch',
+    inheritAttrs: false,
+    props: {
+        name: {
+            type: String,
+            required: false
+        },
+        value: {
+            type: Object,
+            required: false,
+            default: []
+        },
+        searchtype: {
+            type: String,
+            required: true
+        },
+        autocomplete: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        addlabel: {
+            type: String,
+            required: false,
+            default: ""
+        }
+    },
+    data () {
+        return {
+            items: []
+        };
+    },
+    mounted () {
+        for (let i in this.value) {
+            this.items.push({
+                item_id: this.autocomplete ? this.value[i] : i,
+                item_name: this.value[i]
+            });
+        }
+    },
+    watch: {
+        items: {
+            handler(newValue, oldValue) {
+                let new_val = {};
+                for (let i in newValue) {
+                    new_val[newValue[i].item_id] = newValue[i].item_name;
+                }
+                this.$emit('update:modelValue', new_val);
+            },
+            deep: true
+        }
+    },
+    methods: {
+        addItem: function () {
+            this.items.push({
+                item_id: '',
+                item_name: ''
+            });
+        },
+        editItem: function (item_id, item_name, index) {
+            this.items[index].item_id = item_id;
+            this.items[index].item_name = item_name;
+        },
+        deleteItem: function (index) {
+            if (this.items.length > 0) {
+                this.items.splice(index, 1);
+            }
+        }
+    }
+}
+</script>
diff --git a/resources/vue/components/MyCoursesTables.vue b/resources/vue/components/MyCoursesTables.vue
index e3b70ea..3041735 100644
--- a/resources/vue/components/MyCoursesTables.vue
+++ b/resources/vue/components/MyCoursesTables.vue
@@ -141,11 +141,6 @@ export default {
                 if (!this.isChild(course)) {
                     courses.push(course);
                 }
-                if (this.isParent(course)) {
-                    this.getCourses(course.children).forEach(c => {
-                        courses.push(c);
-                    });
-                }
             });
 
             return courses;
diff --git a/resources/vue/components/Quicksearch.vue b/resources/vue/components/Quicksearch.vue
index dcdd31d..1a61513 100644
--- a/resources/vue/components/Quicksearch.vue
+++ b/resources/vue/components/Quicksearch.vue
@@ -8,6 +8,7 @@
                :name="autocomplete ? name : null"
                v-model="inputValue"
                autocomplete="off"
+               ref="text_input"
                @blur="reset()"
                @keydown.up="selectUp"
                @keydown.down="selectDown"