Merge branch 'feature/upgrade-guide' of github.com:os2display/display-api-service into feature/upgrade-guide

Author: tuj

.github/workflows/playwright.yaml

@@ -22,6 +22,10 @@ jobs:
         run: |
           docker compose run --rm phpfpm composer install
 
+      - name: Copy fixture assets to public/fixtures
+        run: |
+          docker compose run --rm phpfpm cp -r fixtures/public/fixtures public/fixtures
+
       - name: Build assets
         run: |
           docker compose run --rm node npm install

.gitignore

@@ -1,6 +1,9 @@
 # Ignore custom templates folder.
 /assets/shared/custom-templates/*
 
+# Ignore the public/fixtures folder.
+/public/fixtures
+
 # Ignore release json file.
 /public/release.json
 

CHANGELOG.md

@@ -18,6 +18,9 @@ All notable changes to this project will be documented in this file.
 * Added update command.
 * Added (Client) online-check to public.
 * Updated developer documentation.
+* Removed admin/access-config.json fetch
+* Aligned with v. 2.5.2.
+* Removed themes.
 * Added command to migrate config.json files.
 
 ### NB! Prior to 3.x the project was split into separate repositories

README.md

@@ -577,6 +577,13 @@ For example:
   booking system you can implement a "FeedSource" that fetches booking data from your source and normalizes it to match
   the calendar output model.
 
+## Themes
+
+It is possible to create themes that can apply to select templates. See `/admin/themes` in the Admin.
+
+The theme css has to follow som rules. See [docs/themes/themes.md](docs/themes/themes.md) for instructions on writing
+custom themes.
+
 ## Custom Templates
 
 OS2Display ships with some standard templates. These are located in `assets/shared/templates`.

Taskfile.yml

@@ -30,6 +30,7 @@ tasks:
       - task compose-up
       - task composer-install
       - task db:migrate --yes
+      - task fixtures:copy-assets
       - task site-open
     silent: true
 
@@ -44,6 +45,7 @@ tasks:
       - task composer-install
       - task db:migrate --yes
       - task fixtures:load --yes
+      - task fixtures:copy-assets
       - task site-open
     silent: true
 
@@ -221,3 +223,8 @@ tasks:
     desc: "Migrate to latest database schema and update installed templates"
     cmds:
       - task compose -- exec phpfpm bin/console app:update --no-interaction
+
+  fixtures:copy-assets:
+    desc: "Copy the folder from fixtures/public/fixtures to public/fixtures. Rerun if fixtures are changed."
+    cmds:
+      - task compose -- exec phpfpm cp -r fixtures/public/fixtures public/fixtures

assets/admin/app.jsx

@@ -55,7 +55,6 @@ function App() {
   const [authenticated, setAuthenticated] = useState();
   const [config, setConfig] = useState();
   const [selectedTenant, setSelectedTenant] = useState();
-  const [accessConfig, setAccessConfig] = useState();
   const [tenants, setTenants] = useState();
   const [userName, setUserName] = useState("");
   const [userType, setUserType] = useState("");
@@ -66,6 +65,26 @@ function App() {
   const [isPublished, setIsPublished] = useState("all");
   const [exists, setExists] = useState(null);
   const [screenUserLatestRequest, setScreenUserLatestRequest] = useState(null);
+  const [accessConfig, setAccessConfig] = useState({
+    campaign: {
+      roles: ["ROLE_ADMIN"],
+    },
+    screen: {
+      roles: ["ROLE_ADMIN"],
+    },
+    settings: {
+      roles: ["ROLE_ADMIN"],
+    },
+    groups: {
+      roles: ["ROLE_ADMIN"],
+    },
+    shared: {
+      roles: ["ROLE_ADMIN"],
+    },
+    users: {
+      roles: ["ROLE_ADMIN", "ROLE_EXTERNAL_USER_ADMIN"],
+    },
+  });
 
   const userStore = {
     authenticated: { get: authenticated, set: setAuthenticated },
@@ -150,36 +169,6 @@ function App() {
     };
   }, []);
 
-  useEffect(() => {
-    fetch("/admin/access-config.json")
-      .then((response) => response.json())
-      .then((jsonData) => {
-        setAccessConfig(jsonData);
-      })
-      .catch(() => {
-        setAccessConfig({
-          campaign: {
-            roles: ["ROLE_ADMIN"],
-          },
-          screen: {
-            roles: ["ROLE_ADMIN"],
-          },
-          settings: {
-            roles: ["ROLE_ADMIN"],
-          },
-          groups: {
-            roles: ["ROLE_ADMIN"],
-          },
-          shared: {
-            roles: ["ROLE_ADMIN"],
-          },
-          users: {
-            roles: ["ROLE_ADMIN", "ROLE_EXTERNAL_USER_ADMIN"],
-          },
-        });
-      });
-  }, []);
-
   useEffect(() => {
     i18next.init({
       interpolation: { escapeValue: false }, // React already does escaping

assets/admin/components/screen/util/grid-generation-and-select.jsx

@@ -1,9 +1,6 @@
 import { useState, useEffect } from "react";
 import { Tabs, Tab, Alert } from "react-bootstrap";
-import {
-  createGridArea,
-  createGrid,
-} from "../../../../shared/grid-generator/grid-generator";
+import Grid from "./grid";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import idFromUrl from "../../util/helpers/id-from-url";
@@ -31,15 +28,10 @@ function GridGenerationAndSelect({
 }) {
   const { t } = useTranslation("common");
   const dispatch = useDispatch();
-  const [key, setKey] = useState(regions.length > 0 ? regions[0]["@id"] : "");
+  const [selectedRegion, setSelectedRegion] = useState(
+    regions.length > 0 ? regions[0]["@id"] : "",
+  );
   const [selectedPlaylists, setSelectedPlaylists] = useState([]);
-  const gridClasses = `grid ${vertical ? "vertical" : "horizontal"}`;
-  // Rows and columns in grid defaults to 1.
-  const configColumns = grid?.columns || 1;
-  const configRows = grid?.rows || 1;
-  const gridTemplateAreas = {
-    gridTemplateAreas: createGrid(configColumns, configRows),
-  };
 
   /**
    * @param {object} props The props
@@ -149,87 +141,67 @@ function GridGenerationAndSelect({
     setSelectedPlaylists(playlists);
   };
 
-  /** @param {string} id - The id of the selected tab */
-  const handleSelect = (id) => {
-    setKey(id);
-  };
-
   /**
-   * Removes playlist from list of playlists, and closes modal.
+   * Removes playlist from list of playlists.
    *
-   * @param {object} inputPlaylist - InputPlaylist to remove
-   * @param {object} inputRegion - InputRegion to remove from
+   * @param {object} inputPlaylistId - InputPlaylistId to remove
+   * @param {object} inputRegionId - InputRegionId to remove from
    */
-  const removeFromList = (inputPlaylist, inputRegion) => {
-    const indexOfItemToRemove = selectedPlaylists.findIndex(
-      ({ "@id": id, region }) => {
-        return region === inputRegion && id === inputPlaylist;
-      },
+  const removeFromList = (inputPlaylistId, inputRegionId) => {
+    setSelectedPlaylists((prev) =>
+      prev.filter(
+        ({ "@id": id, region: regionId }) =>
+          !(regionId === inputRegionId && id === inputPlaylistId),
+      ),
     );
-    const selectedPlaylistsCopy = [...selectedPlaylists];
-    selectedPlaylistsCopy.splice(indexOfItemToRemove, 1);
-    setSelectedPlaylists(selectedPlaylistsCopy);
   };
 
+  if (regions?.length === 0) return null;
+
   return (
     <>
       <div className="col-md-4 my-3 my-md-0">
         <div className="bg-light border rounded p-1">
-          <div className={gridClasses} style={gridTemplateAreas}>
-            {regions &&
-              regions.map((data) => (
-                <div
-                  key={data["@id"]}
-                  className={
-                    key === data["@id"] ? "grid-item selected" : "grid-item "
-                  }
-                  style={{ gridArea: createGridArea(data.gridArea) }}
-                >
-                  {data.title}
-                </div>
-              ))}
-          </div>
+          <Grid
+            grid={grid}
+            vertical={vertical}
+            regions={regions}
+            selected={selectedRegion}
+          />
         </div>
       </div>
       <div className="col-md-12">
-        {regions.length > 0 && (
-          <>
-            <h3 className="h5">{t("screen-form.screen-region-playlists")}</h3>
-            <Tabs
-              defaultActiveKey={regions[0]["@id"]}
-              id="tabs"
-              onSelect={handleSelect}
-              className="mb-3"
-            >
-              {regions &&
-                regions.map((data) => (
-                  <Tab
-                    eventKey={data["@id"]}
-                    key={data["@id"]}
-                    title={data.title}
-                  >
-                    <PlaylistDragAndDrop
-                      id="playlist_drag_and_drop"
-                      handleChange={handleChange}
-                      removeFromList={removeFromList}
-                      name={data["@id"]}
-                      regionIdForInitializeCallback={data["@id"]}
-                      screenId={screenId}
-                      regionId={idFromUrl(data["@id"])}
-                      selectedPlaylists={selectedPlaylists.filter(
-                        ({ region }) => region === idFromUrl(data["@id"]),
-                      )}
-                    />
-                    {data?.type === "touch-buttons" && (
-                      <Alert key="screen-form-touch-buttons" variant="info">
-                        {t("screen-form.touch-region-helptext")}
-                      </Alert>
-                    )}
-                  </Tab>
-                ))}
-            </Tabs>
-          </>
-        )}
+        <>
+          <h3 className="h5">{t("screen-form.screen-region-playlists")}</h3>
+          <Tabs
+            defaultActiveKey={regions[0]["@id"]}
+            id="tabs"
+            onSelect={setSelectedRegion}
+            className="mb-3"
+          >
+            {regions.map(({ title, "@id": id, type }) => (
+              <Tab eventKey={id} key={id} title={title}>
+                <PlaylistDragAndDrop
+                  id="playlist_drag_and_drop"
+                  handleChange={handleChange}
+                  removeFromList={removeFromList}
+                  name={id}
+                  regionIdForInitializeCallback={id}
+                  screenId={screenId}
+                  regionId={idFromUrl(id)}
+                  selectedPlaylists={selectedPlaylists.filter(
+                    ({ region }) => region === idFromUrl(id),
+                  )}
+                />
+                {type === "touch-buttons" && (
+                  <Alert key="screen-form-touch-buttons" variant="info">
+                    {t("screen-form.touch-region-helptext")}
+                  </Alert>
+                )}
+              </Tab>
+            ))}
+          </Tabs>
+        </>
       </div>
     </>
   );

assets/admin/components/screen/util/grid.jsx

@@ -0,0 +1,35 @@
+import {
+  createGridArea,
+  createGrid,
+} from "../../../../shared/grid-generator/grid-generator";
+
+// Rows and columns in grid defaults to 1.
+const Grid = ({
+  vertical,
+  regions,
+  selected,
+  grid: { columns = 1, rows = 1 },
+}) => {
+  const gridClasses = `grid ${vertical ? "vertical" : "horizontal"}`;
+  const gridTemplateAreas = {
+    gridTemplateAreas: createGrid(columns, rows),
+  };
+
+  return (
+    <div className={gridClasses} style={gridTemplateAreas}>
+      {regions.map((region) => (
+        <div
+          key={region["@id"]}
+          className={
+            selected === region["@id"] ? "grid-item selected" : "grid-item "
+          }
+          style={{ gridArea: createGridArea(region.gridArea) }}
+        >
+          {region.title}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Grid;