@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/src/layout-2016/lib/au-diagramme.js

@@ -1,85 +1,85 @@
-/* eslint no-prototype-builtins: 0 */
-/* eslint no-restricted-syntax: 0 */
-/* eslint no-unused-vars: 0 */
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import AUDiagrammeComponent from '../components/diagramme/AUDiagrammeComponent';
-
-const defaultOptions = {
-  config: {
-    container: '.au_edutable_eddi_container',
-    courseID: 0,
-    track: 0,
-  },
-};
-
-class AUDiagramme {
-  constructor(lang, tables) {
-    this.tables = tables;
-    this.lang = lang;
-  }
-
-  static mergeOptions(_table) {
-    const table = _table;
-    if (!table.hasOwnProperty('config')) {
-      table.config = {};
-    }
-
-    for (const conf in defaultOptions.config) {
-      if (!table.config.hasOwnProperty(conf)) {
-        table.config[conf] = defaultOptions.config[conf];
-      }
-    }
-  }
-
-  init() {
-    const qsCourses = AU.helpers.getQuerystring('coursesprint');
-    if (qsCourses !== '') {
-      const coursesSplit = qsCourses.split(',');
-      for (let j = 0; j < coursesSplit.length; j += 1) {
-        const trackSplit = coursesSplit[j].split('|');
-        if (trackSplit.length > 1) {
-          this.tables.push({
-            config: {
-              container: `#print_course_${j}`,
-              courseID: parseInt(trackSplit[0], 10),
-              track: parseInt(trackSplit[1], 10),
-            },
-          });
-        } else {
-          this.tables.push({
-            config: {
-              container: `#print_course_${j}`,
-              courseID: parseInt(trackSplit[0], 10),
-            },
-          });
-        }
-        ReactDOM.render(<div id={`print_course_${j}`} />, document.querySelector('body'));
-      }
-    }
-    for (let i = 0; i < this.tables.length; i += 1) {
-      const table = this.tables[i];
-      table.id = i;
-      AUDiagramme.mergeOptions(table);
-      const url = `https://eddiprod.au.dk/EDDI/webservices/StudieoversigtService2.cfc?method=getLinjeListByDokordningId&tjekForVisningIstudieDiagram=true&allowOrigin=true&dokordningId=${table.config.courseID}`;
-      fetch(url).then((promise) => promise.json()).then((data) => {
-        const mountNode = document.querySelector(table.config.container);
-        if (mountNode) {
-          ReactDOM.render(
-            <AUDiagrammeComponent
-              lang={this.lang}
-              response={data}
-              course={table.config.courseID}
-              track={table.config.track}
-              print={qsCourses !== ''}
-            />,
-            mountNode,
-          );
-        }
-      });
-    }
-  }
-}
-
-window.AUDiagramme = AUDiagramme;
+/* eslint no-prototype-builtins: 0 */
+/* eslint no-restricted-syntax: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AUDiagrammeComponent from '../components/diagramme/AUDiagrammeComponent';
+
+const defaultOptions = {
+  config: {
+    container: '.au_edutable_eddi_container',
+    courseID: 0,
+    track: 0,
+  },
+};
+
+class AUDiagramme {
+  constructor(lang, tables) {
+    this.tables = tables;
+    this.lang = lang;
+  }
+
+  static mergeOptions(_table) {
+    const table = _table;
+    if (!table.hasOwnProperty('config')) {
+      table.config = {};
+    }
+
+    for (const conf in defaultOptions.config) {
+      if (!table.config.hasOwnProperty(conf)) {
+        table.config[conf] = defaultOptions.config[conf];
+      }
+    }
+  }
+
+  init() {
+    const qsCourses = AU.helpers.getQuerystring('coursesprint');
+    if (qsCourses !== '') {
+      const coursesSplit = qsCourses.split(',');
+      for (let j = 0; j < coursesSplit.length; j += 1) {
+        const trackSplit = coursesSplit[j].split('|');
+        if (trackSplit.length > 1) {
+          this.tables.push({
+            config: {
+              container: `#print_course_${j}`,
+              courseID: parseInt(trackSplit[0], 10),
+              track: parseInt(trackSplit[1], 10),
+            },
+          });
+        } else {
+          this.tables.push({
+            config: {
+              container: `#print_course_${j}`,
+              courseID: parseInt(trackSplit[0], 10),
+            },
+          });
+        }
+        ReactDOM.render(<div id={`print_course_${j}`} />, document.querySelector('body'));
+      }
+    }
+    for (let i = 0; i < this.tables.length; i += 1) {
+      const table = this.tables[i];
+      table.id = i;
+      AUDiagramme.mergeOptions(table);
+      const url = `https://eddiprod.au.dk/EDDI/webservices/StudieoversigtService2.cfc?method=getLinjeListByDokordningId&tjekForVisningIstudieDiagram=true&allowOrigin=true&dokordningId=${table.config.courseID}`;
+      fetch(url).then((promise) => promise.json()).then((data) => {
+        const mountNode = document.querySelector(table.config.container);
+        if (mountNode) {
+          ReactDOM.render(
+            <AUDiagrammeComponent
+              lang={this.lang}
+              response={data}
+              course={table.config.courseID}
+              track={table.config.track}
+              print={qsCourses !== ''}
+            />,
+            mountNode,
+          );
+        }
+      });
+    }
+  }
+}
+
+window.AUDiagramme = AUDiagramme;

package/src/layout-2016/lib/au-flowbox.js

@@ -1,93 +1,119 @@
-/* eslint-env browser */
-/* eslint no-prototype-builtins: 0 */
-/* eslint no-restricted-syntax: 0 */
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FlowBoxComponent from '../components/flowbox/FlowBoxComponent';
-
-const defaultOptions = {
-  config: {
-    container: '.au_flowbox',
-    tracking: '/virtual/flowbox/',
-    render: 'ul',
-  },
-  data: {
-    mode: 'list',
-    source: '.au_flowbox_list',
-    headline: 'Overskrift',
-    prepend: '',
-  },
-};
-
-class AUFlowbox {
-  constructor(lang, boxes) {
-    this.boxes = boxes;
-    this.lang = lang;
-  }
-
-  static mergeOptions(_box) {
-    const box = _box;
-    if (!box.hasOwnProperty('config')) {
-      box.config = {};
-    }
-
-    for (const conf in defaultOptions.config) {
-      if (!box.config.hasOwnProperty(conf)) {
-        box.config[conf] = defaultOptions.config[conf];
-      }
-    }
-
-    if (!box.hasOwnProperty('data')) {
-      box.data = {};
-    }
-
-    for (const data in defaultOptions.data) {
-      if (!box.data.hasOwnProperty(data)) {
-        box.data[data] = defaultOptions.data[data];
-      }
-    }
-  }
-
-  static parse(box) {
-    const parseList = (data, elements, selector) => {
-      elements.forEach((e) => {
-        const subElements = e.querySelectorAll(selector);
-        subElements.forEach((s) => {
-          const obj = {
-            name: s.innerHTML,
-            children: [],
-            parent: data,
-          };
-
-          data.children.push(obj);
-          const parent = s.parentElement;
-          const children = parent.querySelectorAll(':scope > ul');
-          if (children.length > 0) {
-            parseList(obj, children, ':scope > li > p'); // Det her skal vi altid gøre
-          }
-        });
-      });
-    };
-
-    parseList(box.item, document.querySelectorAll(box.data.source), window.flowboxScopeSelector || ':scope > li > p'); // Her kan selectoren være en anden, hvis der fx er global content i spil, så der kommer en <div> ind...
-  }
-
-  init() {
-    for (let i = 0; i < this.boxes.length; i += 1) {
-      const box = this.boxes[i];
-      AUFlowbox.mergeOptions(box);
-      box.id = i;
-      box.item = {
-        name: box.data.headline,
-        children: [],
-        parent: null,
-      };
-      AUFlowbox.parse(box);
-      const mountNode = document.querySelector(box.config.container);
-      ReactDOM.render(<FlowBoxComponent box={box} lang={this.lang} />, mountNode);
-    }
-  }
-}
-
-window.AUFlowbox = AUFlowbox;
+/* eslint-env browser */
+/* eslint no-prototype-builtins: 0 */
+/* eslint no-restricted-syntax: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FlowBoxComponent from '../components/flowbox/FlowBoxComponent';
+
+const defaultOptions = {
+  config: {
+    container: '.au_flowbox',
+    render: 'ul',
+  },
+  data: {
+    mode: 'list',
+    source: '.au_flowbox_list',
+    headline: 'Overskrift',
+    prepend: '',
+  },
+};
+
+class AUFlowbox {
+  constructor(lang, boxes) {
+    this.boxes = boxes;
+    this.lang = lang;
+  }
+
+  static mergeOptions(_box) {
+    const box = _box;
+    if (!box.hasOwnProperty('config')) {
+      box.config = {};
+    }
+
+    for (const conf in defaultOptions.config) {
+      if (!box.config.hasOwnProperty(conf)) {
+        box.config[conf] = defaultOptions.config[conf];
+      }
+    }
+
+    if (!box.hasOwnProperty('data')) {
+      box.data = {};
+    }
+
+    for (const data in defaultOptions.data) {
+      if (!box.data.hasOwnProperty(data)) {
+        box.data[data] = defaultOptions.data[data];
+      }
+    }
+  }
+
+  static parse(box) {
+    const getLabelFromLi = (li) => {
+      // Primært: TYPO3v10/“p-wrapped” eller global content hvor der kommer en wrapper ind
+      const labelEl = li.querySelector(':scope > p')
+        || li.querySelector(':scope > div > p')
+        || li.querySelector(':scope > div > p > span') // hvis editoren putter spans ind
+        || null;
+
+      if (labelEl) {
+        return labelEl.innerHTML.trim();
+      }
+
+      // Sekundært: TYPO3v12 hvor label ofte er en text node direkte i <li>
+      // Tag kun direkte textnodes (ignorer <ul> og andre elementer)
+      const text = Array.from(li.childNodes)
+        .filter((n) => n.nodeType === Node.TEXT_NODE)
+        .map((n) => n.textContent)
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+      // Fallback: hvis noget uventet er inde i et element, men stadig uden <p>
+      if (text) return text;
+
+      const firstNonUlElement = Array.from(li.children).find((c) => c.tagName !== 'UL');
+      return firstNonUlElement ? firstNonUlElement.innerHTML.trim() : '';
+    };
+
+    const parseUl = (data, ulElements) => {
+      ulElements.forEach((ul) => {
+        const lis = ul.querySelectorAll(':scope > li');
+        lis.forEach((li) => {
+          const name = getLabelFromLi(li);
+          if (!name) return;
+
+          const obj = { name, children: [], parent: data };
+          data.children.push(obj);
+
+          const childUls = li.querySelectorAll(':scope > ul');
+          if (childUls.length > 0) {
+            parseUl(obj, childUls); // Det her skal vi altid gøre
+          }
+        });
+      });
+    };
+
+    // Start: find root UL’er fra box.data.source (som før)
+    const roots = document.querySelectorAll(box.data.source);
+    parseUl(box.item, roots);
+  }
+
+  init() {
+    for (let i = 0; i < this.boxes.length; i += 1) {
+      const box = this.boxes[i];
+      AUFlowbox.mergeOptions(box);
+      box.id = i;
+      box.item = {
+        name: box.data.headline,
+        children: [],
+        parent: null,
+      };
+      AUFlowbox.parse(box);
+      const mountNode = document.querySelector(box.config.container);
+      ReactDOM.render(<FlowBoxComponent box={box} lang={this.lang} />, mountNode);
+    }
+  }
+}
+
+window.AUFlowbox = AUFlowbox;

package/src/lib/context.tsx

@@ -1,59 +1,59 @@
-import React, { createContext, useContext } from 'react';
-import { setLocale } from './dates';
-import { getPortalByName } from './portals';
-
-export const LangContext = createContext<string>('da');
-export const useLangContext = (): string => {
-  const lang = useContext(LangContext);
-  setLocale(lang);
-  return lang;
-};
-
-export const AuthenticationContext = createContext<boolean>(false);
-export const useAuthenticationContext = (): boolean => useContext(AuthenticationContext);
-
-export const UserContext = createContext<AU.IUserContext | null>(null);
-export const useUserContext = (): AU.IUserContext | null => {
-  const user = useContext(UserContext);
-  return user;
-};
-
-export const PortalContext = createContext<AU.IPortalContext | null>(null);
-
-type PortalContextProviderProps = {
-  name: AU.portalNames;
-  children: JSX.Element;
-}
-
-export const AUPortal = {
-  Provider: ({
-    name,
-    children,
-  }: PortalContextProviderProps) => {
-    const lang = useLangContext();
-    const portal = getPortalByName(lang || 'da', name);
-    return (
-      <PortalContext.Provider value={portal}>
-        <AuthenticationContext.Provider value={typeof window.authenticated === 'undefined' ? false : window.authenticated}>
-          {children}
-        </AuthenticationContext.Provider>
-      </PortalContext.Provider>
-    );
-  },
-};
-
-export const usePortalContext = (): AU.IPortalContext | null => {
-  const portal = useContext(PortalContext);
-  return portal;
-};
-
-export const ImpersonationContext = createContext<AU.IImpersonationContext>({
-  canImpersonate: false,
-  isImpersonating: false,
-  impersonatateError: false,
-});
-// eslint-disable-next-line max-len
-export const useImpersonationContext = (): AU.IImpersonationContext => useContext(ImpersonationContext);
-
-export const AUDialogModalContext = createContext<(() => void) | null>(null);
-export const useAUDialogModalContext = (): (() => void) | null => useContext(AUDialogModalContext);
+import React, { createContext, useContext } from 'react';
+import { setLocale } from './dates';
+import { getPortalByName } from './portals';
+
+export const LangContext = createContext<string>('da');
+export const useLangContext = (): string => {
+  const lang = useContext(LangContext);
+  setLocale(lang);
+  return lang;
+};
+
+export const AuthenticationContext = createContext<boolean>(false);
+export const useAuthenticationContext = (): boolean => useContext(AuthenticationContext);
+
+export const UserContext = createContext<AU.IUserContext | null>(null);
+export const useUserContext = (): AU.IUserContext | null => {
+  const user = useContext(UserContext);
+  return user;
+};
+
+export const PortalContext = createContext<AU.IPortalContext | null>(null);
+
+type PortalContextProviderProps = {
+  name: AU.portalNames;
+  children: JSX.Element;
+}
+
+export const AUPortal = {
+  Provider: ({
+    name,
+    children,
+  }: PortalContextProviderProps) => {
+    const lang = useLangContext();
+    const portal = getPortalByName(lang || 'da', name);
+    return (
+      <PortalContext.Provider value={portal}>
+        <AuthenticationContext.Provider value={typeof window.authenticated === 'undefined' ? false : window.authenticated}>
+          {children}
+        </AuthenticationContext.Provider>
+      </PortalContext.Provider>
+    );
+  },
+};
+
+export const usePortalContext = (): AU.IPortalContext | null => {
+  const portal = useContext(PortalContext);
+  return portal;
+};
+
+export const ImpersonationContext = createContext<AU.IImpersonationContext>({
+  canImpersonate: false,
+  isImpersonating: false,
+  impersonatateError: false,
+});
+// eslint-disable-next-line max-len
+export const useImpersonationContext = (): AU.IImpersonationContext => useContext(ImpersonationContext);
+
+export const AUDialogModalContext = createContext<(() => void) | null>(null);
+export const useAUDialogModalContext = (): (() => void) | null => useContext(AUDialogModalContext);

package/src/lib/dates.ts

@@ -1,52 +1,52 @@
-import dayjs from 'dayjs';
-import 'dayjs/locale/da';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import weekday from 'dayjs/plugin/weekday';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import updateLocale from 'dayjs/plugin/updateLocale';
-
-dayjs.extend(isoWeek);
-dayjs.extend(weekday);
-dayjs.extend(advancedFormat);
-dayjs.extend(localizedFormat);
-dayjs.extend(updateLocale);
-
-dayjs.updateLocale('da', {
-  weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
-  monthsShort: 'jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec'.split('_'),
-});
-
-export const formatTime = (date: Date, format = 'HH:mm'): string => dayjs(date).format(format);
-export const getLocale = (): string => dayjs.locale();
-export const setLocale = (locale: string): string => dayjs.locale(locale);
-export const getThisYear = (): number => dayjs().year();
-export const getYearToString = (date: Date): string => formatTime(date, 'YYYY');
-export const getNumberOfWeeksInYear = (year: number): number => dayjs(`${year}-12-31`).isoWeek();
-export const skipWeeks = (date: Date, multiplier: number): Date => dayjs(date).clone().add(multiplier * 7, 'days').toDate();
-export const getWeek = (date: Date): number => dayjs(date).isoWeek();
-// eslint-disable-next-line max-len
-export const getDateByWeekday = (date: Date, index: number, locale = 'da'): Date => {
-  const currentLocale = getLocale();
-  setLocale(locale);
-  const newDate = dayjs(date).weekday(index).toDate();
-  if (currentLocale !== locale) {
-    setLocale(currentLocale);
-  }
-  return newDate;
-};
-const dateIsSameMonthAsCurrent = (date: Date): boolean => formatTime(new Date(), 'M') === formatTime(date, 'M');
-export const getLongDate = (date: Date): string => formatTime(date, 'dddd, Do MMMM YYYY');
-export const getShortDate = (date: Date): string => formatTime(date, `ddd D${(dateIsSameMonthAsCurrent(date) ? '' : `${getLocale() === 'da' ? '.' : ''} MMM`)}`);
-export const isToday = (date: Date): boolean => dayjs(date).isSame(dayjs());
-export const multipleDaysFormatTime = (date: Date, index: number, format = 'ddd HH:mm', firstLetterToUpper = true): string => {
-  if (index > 0) {
-    const formatted = formatTime(date, format);
-    if (firstLetterToUpper) {
-      return formatted.charAt(0).toUpperCase() + formatted.slice(1);
-    }
-    return formatted;
-  }
-  return formatTime(date);
-};
-export const formatDayOfWeek = (date: Date): string => formatTime(date, 'dddd').charAt(0).toUpperCase() + formatTime(date, 'dddd').slice(1);
+import dayjs from 'dayjs';
+import 'dayjs/locale/da';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import weekday from 'dayjs/plugin/weekday';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(isoWeek);
+dayjs.extend(weekday);
+dayjs.extend(advancedFormat);
+dayjs.extend(localizedFormat);
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('da', {
+  weekdaysShort: 'søn_man_tir_ons_tor_fre_lør'.split('_'),
+  monthsShort: 'jan_feb_mar_apr_maj_jun_jul_aug_sep_okt_nov_dec'.split('_'),
+});
+
+export const formatTime = (date: Date, format = 'HH:mm'): string => dayjs(date).format(format);
+export const getLocale = (): string => dayjs.locale();
+export const setLocale = (locale: string): string => dayjs.locale(locale);
+export const getThisYear = (): number => dayjs().year();
+export const getYearToString = (date: Date): string => formatTime(date, 'YYYY');
+export const getNumberOfWeeksInYear = (year: number): number => dayjs(`${year}-12-31`).isoWeek();
+export const skipWeeks = (date: Date, multiplier: number): Date => dayjs(date).clone().add(multiplier * 7, 'days').toDate();
+export const getWeek = (date: Date): number => dayjs(date).isoWeek();
+// eslint-disable-next-line max-len
+export const getDateByWeekday = (date: Date, index: number, locale = 'da'): Date => {
+  const currentLocale = getLocale();
+  setLocale(locale);
+  const newDate = dayjs(date).weekday(index).toDate();
+  if (currentLocale !== locale) {
+    setLocale(currentLocale);
+  }
+  return newDate;
+};
+const dateIsSameMonthAsCurrent = (date: Date): boolean => formatTime(new Date(), 'M') === formatTime(date, 'M');
+export const getLongDate = (date: Date): string => formatTime(date, 'dddd, Do MMMM YYYY');
+export const getShortDate = (date: Date): string => formatTime(date, `ddd D${(dateIsSameMonthAsCurrent(date) ? '' : `${getLocale() === 'da' ? '.' : ''} MMM`)}`);
+export const isToday = (date: Date): boolean => dayjs(date).isSame(dayjs());
+export const multipleDaysFormatTime = (date: Date, index: number, format = 'ddd HH:mm', firstLetterToUpper = true): string => {
+  if (index > 0) {
+    const formatted = formatTime(date, format);
+    if (firstLetterToUpper) {
+      return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+    }
+    return formatted;
+  }
+  return formatTime(date);
+};
+export const formatDayOfWeek = (date: Date): string => formatTime(date, 'dddd').charAt(0).toUpperCase() + formatTime(date, 'dddd').slice(1);