Courseware block integration (#762)

* Fixing courseware plugin * Dont show episode id
elan-ev · Aug 29, 2023 · 0f2c608 · 0f2c608
1 parent e6e89e2
commit 0f2c608
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 156 deletions.
diff --git a/OpenCast.class.php b/OpenCast.class.php
@@ -60,6 +60,7 @@ public function __construct()
             // }
         }
 
+        $this->addStylesheet("assets/css/courseware.scss");
         VersionHelper::get()->registerCoursewareBlock($this);
     }
 

diff --git a/assets/css/courseware.scss b/assets/css/courseware.scss
@@ -0,0 +1,134 @@
+/* * * * * * * * * * * * * * * * * * */
+/*   C O U R S E W A R E   B L O C K */
+/* * * * * * * * * * * * * * * * * * */
+
+.oc-cw-searchbar {
+    clear: both;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    float: left;
+    margin-right: 5px;
+    flex: 3;
+
+    display: flex;
+    flex-direction: row;
+
+    border: 1px solid var(--light-gray-color-40);
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container li {
+    padding: none;
+    white-space: nowrap;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input {
+    padding: 8px;
+    width: 100%;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input > input {
+    padding: 0px;
+    font-size: 16px;
+    border: none;
+    width: 100%;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input input:focus {
+    outline: none;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-sorter {
+    flex: 1;
+    min-width: 12em;
+    height: 40px !important;
+}
+
+.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+
+    border-left: thin solid $content-color-40;
+    background-color: $content-color-20;
+
+    cursor: pointer;
+}
+
+.oc-cw-video-list {
+    margin-top: 1em;
+}
+
+.oc-cw-video-list ul {
+    clear: both;
+    padding-left: 0;
+    list-style: none;
+    overflow: auto;
+    height: auto;
+}
+
+.oc-cw-video-list ul li {
+    background: var(--dark-gray-color-5);
+    border-right-width: 1px;
+    border-left-width: 1px;
+    border-width: 1px 0 0;
+    margin-bottom: 1em;
+    padding: 1em;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    border-color: #ddd;
+    cursor: pointer;
+}
+
+.oc-cw-video-list ul li:hover, .oc-cw-video-list ul li.selected {
+    background: var(--content-color-40);
+}
+
+.oc-cw-pagination {
+    margin-bottom: 1em;
+    display: flex;
+}
+
+.oc-cw-pagination button {
+    padding: 8px 16px;
+    border: 1px solid #ddd;
+    float: left;
+    cursor: pointer;
+}
+
+.oc-cw-pagination button:disabled {
+    cursor: default
+}
+
+.oc-cw-pagination .active {
+    background-color: var(--base-color-60);
+    color: white;
+    cursor: default;
+}
+
+.oc-cw-loadingbar {
+    border-radius: 15px;
+    background-color: var(--dark-gray-color-10);
+    height: 15px;
+    width: 300px;
+    display: block;
+}
+
+.oc-cw-loadingbar:not(:last-of-type) {
+    margin-bottom: 5px;
+}
+
+iframe.oc_cw_iframe {
+    border: none;
+    width: 100%;
+    height: 600px;
+}
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -1343,127 +1343,6 @@ label.oc--file-upload {
     }
 }
 
-
-/* * * * * * * * * * * * * * * * * * */
-/*   C O U R S E W A R E   B L O C K */
-/* * * * * * * * * * * * * * * * * * */
-
-.oc-cw-searchbar {
-    clear: both;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-}
-.oc-cw-searchbar .oc-cw-searchbar-container {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    float: left;
-    margin-right: 5px;
-    flex: 2;
-
-    display: flex;
-    flex-direction: row;
-
-    border: 1px solid var(--light-gray-color-40);
-}
-.oc-cw-searchbar .oc-cw-searchbar-container li {
-    padding: none;
-    white-space: nowrap;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input {
-    padding: 8px;
-    width: 100%;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input > input {
-    padding: 0px;
-    font-size: 16px;
-    border: none;
-    background: var(--dark-gray-color-5);
-    width: 100%;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input input:focus {
-    outline: none;
-}
-
-.oc-cw-searchbar .oc-cw-searchbar-sorter {
-    flex: 1;
-    height: 40px !important;
-}
-
-
-.oc-cw-video-list {
-    margin-top: 1em;
-}
-
-.oc-cw-video-list ul {
-    clear: both;
-    padding-left: 0;
-    list-style: none;
-    overflow: auto;
-    height: auto;
-}
-.oc-cw-video-list ul li {
-    background: var(--dark-gray-color-5);
-    border-right-width: 1px;
-    border-left-width: 1px;
-    border-width: 1px 0 0;
-    margin-bottom: 1em;
-    padding: 1em;
-    display: block;
-    position: relative;
-    overflow: hidden;
-    border-color: #ddd;
-    cursor: pointer;
-}
-
-.oc-cw-video-list ul li:hover, .oc-cw-video-list ul li.selected {
-    background: var(--content-color-40);
-}
-
-.oc-cw-pagination {
-    margin-bottom: 1em;
-    display: flex;
-}
-
-.oc-cw-pagination button {
-    padding: 8px 16px;
-    border: 1px solid #ddd;
-    float: left;
-    cursor: pointer;
-}
-
-.oc-cw-pagination button:disabled {
-    cursor: default
-}
-
-.oc-cw-pagination .active {
-    background-color: var(--base-color-60);
-    color: white;
-    cursor: default;
-}
-
-.oc-cw-loadingbar {
-    border-radius: 15px;
-    background-color: var(--dark-gray-color-10);
-    height: 15px;
-    width: 300px;
-    display: block;
-}
-.oc-cw-loadingbar:not(:last-of-type) {
-    margin-bottom: 5px;
-}
-
-iframe.oc_cw_iframe {
-    border: none;
-    width: 100%;
-    height: 600px;
-}
-
 /* * * * * * * * * * * */
 /*   M E S S A G E S * */
 /* * * * * * * * * * * */

diff --git a/courseware/vueapp/components/CoursewareSearchBar.vue b/courseware/vueapp/components/CoursewareSearchBar.vue
@@ -10,6 +10,14 @@
                     @submit="doSearch"
                 />
             </li>
+            <li title="Suche starten"
+                class="oc-cw-searchbar-search-icon"
+                @click="doSearch"
+            >
+                <studip-icon
+                    shape="search" role="clickable"
+                />
+            </li>
         </ul>
 
         <select class="oc-cw-searchbar-sorter" v-model="inputSort" @change="setSort">
@@ -27,11 +35,30 @@
 export default {
     name: "CoursewareSearchBar",
 
-    props: ['sorts'],
-
     data() {
+        const sorts = [
+            {
+                field: 'created',
+                order: 'desc',
+                text: 'Datum hochgeladen: Neueste zuerst'
+            }, {
+                field: 'created',
+                order: 'asc',
+                text: 'Datum hochgeladen: Älteste zuerst'
+            }, {
+                field: 'title',
+                order: 'asc',
+                text: 'Titel: Alphabetisch'
+            }, {
+                field: 'title',
+                order: 'desc',
+                text: 'Titel: Umgekehrt Alphabetisch'
+            }
+        ];
+
         return {
-            inputSort: null,
+            sorts: sorts,
+            inputSort: sorts[0],
             inputSearch: ''
         }
     },

diff --git a/courseware/vueapp/components/CoursewareVideoTable.vue b/courseware/vueapp/components/CoursewareVideoTable.vue
@@ -19,12 +19,9 @@
                 <ul class="video-list" v-else>
                     <li v-for="(video, index) in videos" :key="index" :class="{selected: selectedVideoId == video.id}" @click="setVideo(video)">
                         <div>
-                            <strong class="oc--metadata-title">
+                            <strong>
                                 {{video.title}}
                             </strong>
-                            <div>
-                                <small><i>{{ video.episode }}</i></small>
-                            </div>
                             <div>
                                 {{ printDetails(video) }}
                                 <!-- {{ video.author }}

diff --git a/courseware/vueapp/courseware-plugin-opencast-video.vue b/courseware/vueapp/courseware-plugin-opencast-video.vue
@@ -12,12 +12,12 @@
             <template #content>
                 <div>
                   <div v-if="!lti_connected">
-                      <span v-if="!currentEpisodeURL && !currentEpisodeId" v-translate v-text="'Es wurde bisher keine Video ausgewählt'"></span>
-                      <span v-if="!currentEpisodeURL && currentEpisodeId" v-translate v-text="'Dieses Video hat keinen Veröffentlichungs-URL-Link'"></span>
-                      <span v-else v-translate v-text="'Das Video ist nicht verfügbar'"></span>
+                      <span v-translate v-text="'LTI Verbindung fehlgeschlagen'"></span>
                   </div>
                   <div v-else>
-                      <iframe :src="currentEpisodeURL"
+                      <span v-if="!currentEpisodeId" v-translate v-text="'Es wurde bisher kein Video ausgewählt'"></span>
+                      <span v-else-if="!currentEpisodeURL" v-translate v-text="'Dieses Video hat keinen Veröffentlichungs-URL-Link'"></span>
+                      <iframe v-else :src="currentEpisodeURL"
                         class="oc_cw_iframe"
                         allowfullscreen
                     ></iframe>
@@ -37,7 +37,6 @@
                         <translate>Videos</translate>
                     </label>
                     <CoursewareSearchBar
-                        :sorts="sorts"
                         @doSearch="performSearch"
                         @doSort="performSort"
                     />
@@ -105,28 +104,6 @@ export default {
             relatedContainers: 'courseware-containers/related',
         }),
 
-        sorts() {
-            return [
-                {
-                    field: 'mkdate',
-                    order: 'desc',
-                    text : 'Datum hochgeladen: Neueste zuerst'
-                },  {
-                    field: 'mkdate',
-                    order: 'asc',
-                    text : 'Datum hochgeladen: Älteste zuerst'
-                },  {
-                    field: 'title',
-                    order: 'desc',
-                    text : 'Titel: Alphabetisch'
-                }, {
-                    field: 'title',
-                    order: 'asc',
-                    text : 'Titel: Umgekehrt Alphabetisch'
-                }
-            ];
-        },
-
         container() {
             return (
                 this.relatedContainers({
@@ -198,7 +175,7 @@ export default {
             attributes.payload.episode_id = this.currentEpisodeId;
             attributes.payload.url = this.currentEpisodeURL;
             attributes.payload.visible = this.currentVisible;
-
+            
             if (this.container?.id && this.block?.id) {
                 return this.updateBlock({
                     attributes,
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,6 +60,7 @@ public function __construct() @@
                 // }
             }
+            $this->addStylesheet("assets/css/courseware.scss");
             VersionHelper::get()->registerCoursewareBlock($this);
         }
@@ Expand Down @@