get renderers inside the components that require it

This commit is contained in:
chfhtw
2026-04-07 13:43:50 +02:00
parent 7eb888d2e3
commit 01e6a1061c
5 changed files with 61 additions and 97 deletions
+1 -44
View File
@@ -18,7 +18,6 @@ import AbgabetoolAssistenz from "../components/Cis/Abgabetool/AbgabetoolAssisten
import DeadlineOverview from "../components/Cis/Abgabetool/DeadlineOverview.js";
import Studium from "../components/Cis/Studium/Studium.js";
import ApiRenderers from '../api/factory/renderers.js';
import ApiRouteInfo from '../api/factory/routeinfo.js';
import {capitalize} from "../helpers/StringHelpers.js";
@@ -229,8 +228,7 @@ const router = VueRouter.createRouter({
const app = Vue.createApp({
name: 'CisApp',
data: () => ({
appSideMenuEntries: {},
renderers: null,
appSideMenuEntries: {}
}),
components: {},
computed: {
@@ -243,7 +241,6 @@ const app = Vue.createApp({
provide() {
return { // provide injectable & watchable language property
language: Vue.computed(() => this.$p.user_language),
renderers: Vue.computed(() => this.renderers),
isMobile: this.isMobile
}
},
@@ -282,46 +279,6 @@ const app = Vue.createApp({
}
}
},
async created(){
await this.$api
.call(ApiRenderers.loadRenderers())
.then(res => res.data)
.then(data => {
for (let rendertype of Object.keys(data)) {
let modalTitle = null;
let modalContent = null;
let calendarEvent = null;
if (data[rendertype].modalTitle)
modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle)));
if (data[rendertype].modalContent)
modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent)));
if (data[rendertype].calendarEvent)
calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
if (data[rendertype].calendarEventStyles){
var head = document.head;
if(!head.querySelector(`link[href="${data[rendertype].calendarEventStyles}"]`)){
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = data[rendertype].calendarEventStyles;
head.appendChild(link);
}
}
if(this.renderers === null) {
this.renderers = {};
}
if (!this.renderers[rendertype]) {
this.renderers[rendertype] = {}
}
this.renderers[rendertype].modalTitle = modalTitle;
this.renderers[rendertype].modalContent = modalContent;
this.renderers[rendertype].calendarEvent = calendarEvent;
}
});
},
mounted() {
document.addEventListener('click', this.handleClick);
+1 -45
View File
@@ -3,13 +3,10 @@ import DashboardAdmin from '../../components/Dashboard/Admin.js';
import PluginsPhrasen from '../../plugins/Phrasen.js';
import ApiRenderers from '../../api/factory/renderers.js';
const app = Vue.createApp({
name: 'DashboardAdminApp',
data: () => ({
appSideMenuEntries: {},
renderers: null
appSideMenuEntries: {}
}),
components: {
CoreNavigationCmpt,
@@ -17,49 +14,8 @@ const app = Vue.createApp({
},
provide() {
return {
// TODO(chris): move those two into the components that need it
renderers: Vue.computed(() => this.renderers),
timezone: FHC_JS_DATA_STORAGE_OBJECT.timezone
};
},
created() {
this.$api
.call(ApiRenderers.loadRenderers())
.then(res => {
for (let rendertype of Object.keys(res.data)) {
let modalTitle = null;
let modalContent = null;
let calendarEvent = null;
if (res.data[rendertype].modalTitle)
modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(res.data[rendertype].modalTitle)));
if (res.data[rendertype].modalContent)
modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(res.data[rendertype].modalContent)));
if (res.data[rendertype].calendarEvent)
calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(res.data[rendertype].calendarEvent)));
if (res.data[rendertype].calendarEventStyles) {
var head = document.head;
if (!head.querySelector(`link[href="${res.data[rendertype].calendarEventStyles}"]`)) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = res.data[rendertype].calendarEventStyles;
head.appendChild(link);
}
}
if (this.renderers === null) {
this.renderers = {};
}
if (!this.renderers[rendertype]) {
this.renderers[rendertype] = {}
}
this.renderers[rendertype].modalTitle = modalTitle;
this.renderers[rendertype].modalContent = modalContent;
this.renderers[rendertype].calendarEvent = calendarEvent;
}
})
.catch(this.$fhcAlert.handleSystemErrors);
}
});
app.use(PluginsPhrasen);
+5 -4
View File
@@ -3,6 +3,7 @@ import FhcCalendar from "./Base.js";
import ApiLvPlan from '../../api/factory/lvPlan.js';
import { useEventLoader } from '../../composables/EventLoader.js';
import { useRenderers } from '../../composables/Renderers.js';
import ModeDay from './Mode/Day.js';
import ModeWeek from './Mode/Week.js';
@@ -13,9 +14,6 @@ export default {
components: {
FhcCalendar
},
inject: [
"renderers"
],
props: {
timezone: {
type: String,
@@ -99,10 +97,13 @@ export default {
context.emit('update:lv', newValue);
});
const { renderers } = useRenderers();
return {
rangeInterval,
events,
lv
lv,
renderers
};
},
created() {
+4 -4
View File
@@ -1,6 +1,7 @@
import FhcCalendar from "./Base.js";
import { useEventLoader } from '../../composables/EventLoader.js';
import { useRenderers } from '../../composables/Renderers.js';
import ModeList from '../Calendar/Mode/List.js';
@@ -9,9 +10,6 @@ export default {
components: {
FhcCalendar
},
inject: [
"renderers"
],
props: {
timezone: {
type: String,
@@ -59,10 +57,12 @@ export default {
const rangeInterval = Vue.ref(null);
const { events } = useEventLoader(rangeInterval, props.getPromiseFunc);
const { renderers } = useRenderers();
return {
rangeInterval,
events
events,
renderers
};
},
template: /* html */`
+50
View File
@@ -0,0 +1,50 @@
import ApiRenderers from '../api/factory/renderers.js';
/**
* @return object { renderers: Object }
*/
export function useRenderers() {
/* Result Vars */
const renderers = Vue.ref(null);
/* Helper Vars */
const $api = Vue.inject('$api');
const $fhcAlert = Vue.inject('$fhcAlert');
/* Main Logic */
$api
.call(ApiRenderers.loadRenderers())
.then(res => {
const head = document.head;
for (const rendertype of Object.keys(res.data)) {
const renderersForType = {};
for (const name of Object.keys(res.data[rendertype])) {
const rendererUrl = res.data[rendertype][name];
if (rendererUrl.substr(-4) == ".css") {
// add to head
if (!head.querySelector(`link[href="${rendererUrl}"]`)) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = rendererUrl;
head.appendChild(link);
}
} else {
renderersForType[name] = Vue.markRaw(
Vue.defineAsyncComponent(() => import(rendererUrl))
);
}
}
if (Object.keys(renderersForType).length) {
if (renderers.value === null)
renderers.value = {};
renderers.value[rendertype] = renderersForType;
}
}
})
.catch($fhcAlert.handleSystemErrors);
return {
renderers
};
}