5316: add poc how to make dynamic admin forms

Author: Sine Jespersen

assets/admin/components/slide/content/content-form.jsx

@@ -9,6 +9,7 @@ import FileSelector from "./file-selector";
 import StationSelector from "./station/station-selector";
 import RadioButtons from "../../util/forms/radio-buttons";
 import CheckboxOptions from "../../util/forms/checkbox-options";
+import getInputFiles from "../../../../shared/admin-util/helper";
 
 /**
  * Render form elements for content form.
@@ -30,20 +31,6 @@ function ContentForm({
   onChange = null,
   mediaData = {},
 }) {
-  const getInputFiles = (field) => {
-    const inputFiles = [];
-
-    if (Array.isArray(field)) {
-      field.forEach((mediaId) => {
-        if (Object.prototype.hasOwnProperty.call(mediaData, mediaId)) {
-          inputFiles.push(mediaData[mediaId]);
-        }
-      });
-    }
-
-    return inputFiles;
-  };
-
   /**
    * @param {object} formData - The data for form input.
    * @returns {object | string} - Returns a rendered jsx object.
@@ -79,7 +66,7 @@ function ContentForm({
             )}
 
             <FileSelector
-              files={getInputFiles(formStateObject[formData.name])}
+              files={getInputFiles(formStateObject[formData.name], mediaData)}
               multiple={formData.multipleImages}
               onFilesChange={onFileChange}
               name={formData.name}

assets/admin/components/slide/content/feed-selector.jsx

@@ -168,7 +168,7 @@ function FeedSelector({
         onChange={configurationChange}
         name={element.name}
         formStateObject={value?.configuration ?? {}}
-        onFileChange={() => {}}
+        onFileChange={() => {}} // Todo perhaps an error instead of an empty default
       />
     );
   };

assets/admin/components/slide/content/file-dropzone.jsx

@@ -41,7 +41,7 @@ function FileDropzone({ onFilesAdded, acceptedMimetypes = null }) {
     <>
       {/* TODO: Fix styling for dropzone: https://react-dropzone.js.org/#section-styling-dropzone */}
       {/* eslint-disable react/jsx-props-no-spreading */}
-      <div {...getRootProps({ className: "dropzone drag-drop-area" })}>
+      <div {...getRootProps({ className: "dropzone drag-drop-area my-1" })}>
         <input {...getInputProps()} />
         <div>
           <span>{t("file-dropzone.drag-and-drop-text")}</span>

assets/admin/components/slide/content/file-selector.jsx

@@ -107,19 +107,21 @@ function FileSelector({
       />
       {enableMediaLibrary && (
         <>
-          <Button
-            disabled={!multiple && files.length > 0}
-            variant="success"
-            onClick={() => setShowMediaModal(true)}
-          >
-            {t("file-selector.open-media-library")}
-          </Button>
-          {/*
+          <div className="d-flex align-items-center mt-2">
+            <Button
+              disabled={!multiple && files.length > 0}
+              variant="success"
+              onClick={() => setShowMediaModal(true)}
+            >
+              {t("file-selector.open-media-library")}
+            </Button>
+            {/*
               TODO: Make this configurable. It should always align with sizes in
               https://github.com/os2display/display-api-service/blob/develop/src/Entity/Tenant/Media.php
           */}
-          <div className="small mt-3">
-            {t("file-selector.max-size")}: 200 MB
+            <div className="small mt-1 mx-2">
+              {t("file-selector.max-size")}: 200 MB
+            </div>
           </div>
           <MediaSelectorModal
             selectedMedia={files}

assets/admin/components/slide/preview/slide-preview.jsx

@@ -1,9 +1,9 @@
-import { React, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import ErrorBoundary from "../../error-boundary";
+import { renderSlide } from "../../../../shared/slide-utils/templates-slide";
 import "./slide-preview.scss";
-import { renderSlide } from "../../../../shared/slide-utils/templates";
 
 /**
  * Slide live preview.

assets/admin/components/slide/slide-form.jsx

@@ -25,7 +25,8 @@ import "./slide-form.scss";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
 import Select from "../util/forms/select";
-import { getConfig } from "../../../shared/slide-utils/templates";
+import { renderAdminForm } from "../../../shared/slide-utils/templates-admin";
+import { getConfig } from "../../../shared/slide-utils/templates-slide";
 
 /**
  * The slide form component.
@@ -267,6 +268,13 @@ function SlideForm({
             {selectedTemplate && contentFormElements && (
               <>
                 <ContentBody>
+                  {renderAdminForm(
+                    idFromUrl(selectedTemplate.id),
+                    slide.content,
+                    handleContent,
+                    handleMedia,
+                    mediaData,
+                  )}
                   {contentFormElements.map((formElement) => (
                     <Fragment key={formElement.key}>
                       {formElement.input === "feed" && (

assets/client/components/slide.jsx

@@ -2,7 +2,7 @@ import { React } from "react";
 import "./slide.scss";
 import ErrorBoundary from "./error-boundary.jsx";
 import logger from "../logger/logger";
-import { renderSlide } from "../../shared/slide-utils/templates.js";
+import { renderSlide } from "../../shared/slide-utils/templates-slide.js";
 
 /**
  * Slide component.

assets/shared/admin-util/helper.js

@@ -0,0 +1,14 @@
+const getInputFiles = (field, mediaData) => {
+  const inputFiles = [];
+  if (Array.isArray(field)) {
+    field.forEach((mediaId) => {
+      if (Object.prototype.hasOwnProperty.call(mediaData, mediaId)) {
+        inputFiles.push(mediaData[mediaId]);
+      }
+    });
+  }
+
+  return inputFiles;
+};
+
+export default getInputFiles;

assets/shared/slide-utils/templates-admin.js

@@ -0,0 +1,70 @@
+// Load templates.
+// @see https://vite.dev/guide/features.html#glob-import
+// @see docs/custom-templates.md
+// Eager loading because no other code piece imports the templates otherwise.
+const templateModules = import.meta.glob("../templates/*.jsx", { eager: true });
+const customTemplatesModules = import.meta.glob("../custom-templates/*.jsx", {
+  eager: true,
+});
+
+function duckTypingAdminFormModule(module) {
+  return (
+    typeof module.id === "function" &&
+    typeof module.config === "function" &&
+    typeof module.renderAdminForm === "function"
+  );
+}
+
+function findAdminFormModule(modules, templateUlid) {
+  for (const key of Object.keys(modules)) {
+    const module = modules[key].default;
+
+    if (duckTypingAdminFormModule(module)) {
+      if (module.id() === templateUlid) {
+        return module;
+      }
+    }
+  }
+
+  return null;
+}
+
+function getAdminModule(templateUlid) {
+  if (!templateUlid) {
+    return null;
+  }
+
+  const module =
+    findAdminFormModule(templateModules, templateUlid) ??
+    findAdminFormModule(customTemplatesModules, templateUlid) ??
+    null;
+
+  if (module === null) {
+    throw new Error(`Cannot find admin template with '${templateUlid}'`);
+  }
+
+  return module;
+}
+
+function renderAdminForm(
+  templateUlid,
+  formStateObject,
+  onChange,
+  handleMedia,
+  mediaData,
+) {
+  const module = getAdminModule(templateUlid);
+
+  if (!module) {
+    return null;
+  }
+
+  return module.renderAdminForm(
+    formStateObject,
+    onChange,
+    handleMedia,
+    mediaData,
+  );
+}
+
+export { renderAdminForm };