Umstellung der Adminseite für Veranstaltungen auf vue.js
Ziel
Für Admins und Root soll die Seite "Veranstaltungen" umgestellt werden auf vue.js, wodurch bessere Workflows möglich werden.
Beschreibung
Die Adminseite für Veranstaltungen wird auf Vue.js umgestellt und modernisiert. Die Liste der Veranstaltungen ist eine große Tabelle, die am rechten Rand fast immer eine Aktion anzeigt, die einen Dialog öffnet. Wenn in dem Dialog etwas bearbeitet und der Dialog geschlossen wird, werden die Daten gespeichert, aber sie sind in der Liste der Veranstaltungen noch nicht aktualisiert zu sehen. Daher wird die Tabelle auf das Javascript-Framework Vue.js umgestellt, das es dann ermöglicht, die Daten der geänderten Veranstaltung sofort in aktueller Form anzuzeigen. Diese Funktionen werden auch für Plugins, die in diesen Bereich aktiviert werden können, die sich in den Bereich einhaken, zur Verfügung gestellt. Ebenfalls auf Vue.js wird die Sortierung der Adminliste umgestellt. Bisher wird diese Tabelle in PHP sortiert. Das bedeutet, dass die Seite jedes Mal komplett neu geladen wird, sobald man die Sortierreihenfolge ändert. Das dauert oft sehr lange und stört die Arbeitsabläufe. Zudem soll es möglich sein, auch Spalten aus Plugins zu sortieren, was bisher technisch gar nicht möglich ist. Auswahl der Darstellungsfilter beschleunigen: Die sogenannten Darstellungsfilter entsprechen den Spalten der Tabelle bzw. den Daten, die angezeigt werden. Eine Umstellung auf Vue.js und Ajax macht den Reload der Seite nach Änderung der Auswahlfilter obsolet, die Änderungen werden instantan sichtbar.
Maßnahmen
Die Templates dieser Seite sowie der Controller müssen komplett umstrukturiert werden. Es muss darauf geachtet werden, dass Plugins weiterhin eigene Spalten für diese Tabelle mitliefern können und auch eigene Aktionen zur Aktionsbereichsauswahl bereitstellen können. Es wird fortan vue.js verwendet, weitere JS-Bibliotheken werden nicht erwartet.
Plugins, die bisher weitere Filter in die Sidebar eingebaut hatten, sollten nach diesem StEP angepasst werden, sodass ihre Filter-Widgets nicht mehr die Seite komplett neuladen, sondern die ausgewählten Daten an die Vue-Instanz schicken müssen über einen solchen Aufruf: STUDIP.AdminCourses.App.setFilter('meine_variable', meine_variable);
. Auch die Einbindung des Filters in die PHP-Klasse AdminCourseFilter
ändert sich ein wenig, um Altlasten zu entfernen. Plugins, die das Interface AdminCourseContents
implementiert haben, müssen nicht angepasst werden. Plugins, die AdminCourseAction
implementiert haben, müssen ebenfalls nicht angepasst werden, können aber in einer Speicher-Action des Plugins die folgenden Zeilen ausführen, um die Einbindung in den Adminbereich angenehmer zu machen:
$this->response->add_header('X-Dialog-Close', 1);
$this->response->add_header('X-Dialog-Execute', "STUDIP.AdminCourses.App.reloadCourse");
$this->render_text($course_id);
Kurzbezeichnung des Integrationsaufwandes
-
mittel
Keine Veränderungen an der Datenbank von Stud.IP, keine erwarteten Auswirkungen auf andere Bereiche von Stud.IP.
Durchführung
Rasmus zur Stud.IP Version 5.4 oder 5.5.