From 5a33e1e126f0829d62d9b0f790c9b4519a3a4a9a Mon Sep 17 00:00:00 2001
From: kissel <johannes.kissel@disy.net>
Date: Tue, 21 Nov 2023 13:54:34 +0100
Subject: [PATCH] allow multiple common blocks in the sandbox; added
 descriptions to complex sandbox fields

---
 sandbox.html   | 56 ++++++++++++++++++++++++++++++++++++++------------
 src/cadenza.js | 44 +++++++++++++++++----------------------
 2 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/sandbox.html b/sandbox.html
index 7395140e..9f7d17c6 100644
--- a/sandbox.html
+++ b/sandbox.html
@@ -28,7 +28,21 @@
     form, fieldset {
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      gap: 12px;
+    }
+    fieldset > div {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    fieldset small {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      & > * {
+        margin-block: 0;
+      }
     }
     main {
       flex: 1;
@@ -57,11 +71,13 @@
       const action = actionSelect.value;
       const settingsTemplate = document.querySelector(`[data-action=${action}]`);
       settingsContainer.append(settingsTemplate.content.cloneNode(true));
-      const commonSettingsTemplate = document.getElementById(`common-${settingsTemplate.dataset.common}`);
-      if (commonSettingsTemplate) {
-        settingsContainer.append(
-          document.createElement('hr'),
-          commonSettingsTemplate.content.cloneNode(true));
+      if (settingsTemplate.dataset.common) {
+        settingsTemplate.dataset.common.split(',').forEach(commonId => {
+          const commonSettingsTemplate = document.getElementById(`common-${commonId}`);
+          settingsContainer.append(
+            document.createElement('hr'),
+            commonSettingsTemplate.content.cloneNode(true));
+        })
       }
 
       const data = localStorage.getItem(`cadenzajs-sandbox-${action}`);
@@ -118,6 +134,7 @@
     function getOptions ({
       disabledUiFeatures,
       expandNavigator,
+      filter,
       geometry,
       hideMainHeaderAndFooter,
       hideWorkbookToolBar,
@@ -129,12 +146,12 @@
       minScale,
       parts,
       simplifiedOperationMode,
-      useMapSrs,
-      filter
+      useMapSrs
     }) {
       return {
         disabledUiFeatures: disabledUiFeatures && disabledUiFeatures.split(','),
         expandNavigator: (expandNavigator === 'on'),
+        filter: filter && parseFilterVariables(filter),
         geometry: geometry && JSON.parse(geometry),
         hideMainHeaderAndFooter: (hideMainHeaderAndFooter === 'on'),
         hideWorkbookToolBar: (hideWorkbookToolBar === 'on'),
@@ -146,8 +163,7 @@
         minScale,
         parts: parts && parts.split(','),
         ...(simplifiedOperationMode === 'on' && { operationMode: 'simplified' }),
-        useMapSrs: useMapSrs === 'on',
-        filter: filter && parseFilterVariables(filter)
+        useMapSrs: useMapSrs === 'on'
       };
     }
 
@@ -224,11 +240,25 @@
   </div>
   <div>
     <label for="disabledUiFeatures">Disabled UI features</label>
-    <input name="disabledUiFeatures" id="disabledUiFeatures" placeholder="feature1,feature2...">
+    <input name="disabledUiFeatures" id="disabledUiFeatures" placeholder="feature1,feature2,...">
+
+    <small>
+      <p>Comma-separated list of features</p>
+
+      Supported features:
+      <ul>
+        <li>workbook-design</li>
+        <li>workbook-view-management</li>
+      </ul>
+    </small>
   </div>
   <div>
     <label for="filter">Filter</label>
-    <input name="filter" id="filter" placeholder='{ "textvar": "foo", "numbervar": 42.0, "datevar1": "2000-01-01T00.000Z", "datevar2": "{{currentDate}}" }'>
+    <textarea name="filter" id="filter" rows="3"></textarea>
+    <small>
+      <p>A JSON object with filter variable names and values</p>
+      <p>Dates need to be ISO strings<br>(e.g. <code>"2023-11-17T17:12:06.175Z"</code>).<br>Use <code>"{{currentDate}}"</code> for the current date.</p>
+    </small>
   </div>
 </template>
 
@@ -301,7 +331,7 @@
   </div>
 </template>
 
-<template data-action="showMap" data-common="show">
+<template data-action="showMap" data-common="map,show">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
diff --git a/src/cadenza.js b/src/cadenza.js
index c45c29ed..3b0fa189 100644
--- a/src/cadenza.js
+++ b/src/cadenza.js
@@ -84,10 +84,7 @@ globalThis.cadenza = Object.assign(
  * See {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types}
  */
 /** @typedef {'columns' | 'values' | 'totals'} TablePart - A part of a table to export. */
-
-/**
- * @typedef {Record<string, string | number | Date>} FilterVariables - Filter variable values
- */
+/** @typedef {Record<string, string | number | Date>} FilterVariables - Filter variable names and values */
 /**
  * _Notes:_
  * * Most public methods can be aborted using an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
@@ -185,8 +182,7 @@ export class CadenzaClient {
    * @param {object} [options]
    * @param {UiFeature[]} [options.disabledUiFeatures] - Cadenza UI features to disable
    * @param {boolean} [options.expandNavigator] - Indicates if the navigator should be expanded.
-   * @param {FilterVariables} [options.filter] - Filter variables. The keys should contain the
-   *     filter variable names and the values the filter variable values.
+   * @param {FilterVariables} [options.filter] - Filter variables
    * @param {boolean} [options.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
    * @param {boolean} [options.hideWorkbookToolBar] - Whether to hide the workbook toolbar
    * @param {GlobalId} [options.highlightGlobalId] - The ID of an item to highlight / expand in the navigator
@@ -247,8 +243,7 @@ export class CadenzaClient {
    * @param {object} [options] - Options
    * @param {UiFeature[]} [options.disabledUiFeatures] - Cadenza UI features to disable
    * @param {boolean} [options.expandNavigator] - Indicates if the navigator should be expanded.
-   * @param {FilterVariables} [options.filter] - Filter variables. The keys should contain the
-   *     filter variable names and the values the filter variable values.
+   * @param {FilterVariables} [options.filter] - Filter variables
    * @param {Geometry} [options.geometry] - A geometry to show on the map
    * @param {boolean} [options.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
    * @param {boolean} [options.hideWorkbookToolBar] - Whether to hide the workbook toolbar
@@ -720,8 +715,7 @@ function assertSupportedMediaType(
  * @param {UiFeature[]} [params.disabledUiFeatures]
  * @param {boolean} [params.expandNavigator]
  * @param {string} [params.fileName]
- * @param {FilterVariables} [params.filter] - Filter variables. The keys should contain the filter
- *     variable names and the values the filter variable values.
+ * @param {FilterVariables} [params.filter]
  * @param {GeometryType} [params.geometryType]
  * @param {boolean} [params.hideMainHeaderAndFooter]
  * @param {boolean} [params.hideWorkbookToolBar]
@@ -762,6 +756,14 @@ function createParams({
       assert(validUiFeature(feature), `Invalid UI feature: ${feature}`),
     );
   }
+  if (filter) {
+    Object.keys(filter).forEach((varName) =>
+      assert(
+        validKebabCaseString(varName),
+        `Invalid filter variable name: ${varName}`,
+      ),
+    );
+  }
   if (geometryType) {
     assertValidGeometryType(geometryType);
   }
@@ -776,14 +778,6 @@ function createParams({
       assert(validTablePart(part), `Invalid table part: ${part}`),
     );
   }
-  if (filter) {
-    Object.keys(filter).forEach((varName) =>
-      assert(
-        validKebabCaseString(varName),
-        `Invalid filter variable name: ${varName}`,
-      ),
-    );
-  }
   return new URLSearchParams({
     ...(action && { action }),
     ...(disabledUiFeatures && {
@@ -791,6 +785,13 @@ function createParams({
     }),
     ...(expandNavigator && { expandNavigator: 'true' }),
     ...(fileName && { fileName }),
+    ...(filter &&
+      Object.fromEntries(
+        Object.entries(filter).map(([variable, value]) => [
+          `filter.${variable}`,
+          JSON.stringify(value instanceof Date ? value.toISOString() : value),
+        ]),
+      )),
     ...(geometryType && { geometryType }),
     ...(hideMainHeaderAndFooter && { hideMainHeaderAndFooter: 'true' }),
     ...(hideWorkbookToolBar && { hideWorkbookToolBar: 'true' }),
@@ -807,13 +808,6 @@ function createParams({
       webApplicationLink: webApplication.externalLinkId,
       webApplicationLinkRepository: webApplication.repositoryName,
     }),
-    ...(filter &&
-      Object.fromEntries(
-        Object.entries(filter).map(([variable, value]) => [
-          `filter.${variable}`,
-          JSON.stringify(value instanceof Date ? value.toISOString() : value),
-        ]),
-      )),
   });
 }