Add various improvements and fixes to studio, should fix #2055

src/UI/Studio/SchemaBasedArray.svelte

@@ -1,24 +1,21 @@
 <script lang="ts">
-  import EditLayerState from "./EditLayerState"
+  import { EditJsonState } from "./EditLayerState"
   import type { ConfigMeta } from "./configMeta"
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import SchemaBasedInput from "./SchemaBasedInput.svelte"
   import SchemaBasedField from "./SchemaBasedField.svelte"
   import { TrashIcon } from "@babeard/svelte-heroicons/mini"
-  import QuestionPreview from "./QuestionPreview.svelte"
-  import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte"
   import ShowConversionMessage from "./ShowConversionMessage.svelte"
   import Markdown from "../Base/Markdown.svelte"
-  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
-  import Icon from "../Map/Icon.svelte"
-  import Tr from "../Base/Tr.svelte"
-  import Translations from "../i18n/Translations"
+  import { Utils } from "../../Utils"
+  import type { QuestionableTagRenderingConfigJson } from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"
+  import CollapsedTagRenderingPreview from "./CollapsedTagRenderingPreview.svelte"
+  import { Accordion } from "flowbite-svelte"
 
-  export let state: EditLayerState
+  export let state: EditJsonState<any>
+  export let path: (string | number)[] = []
   export let schema: ConfigMeta
 
+  schema = Utils.Clone(schema)
   let title = schema.path.at(-1)
-  console.log(">>>", schema)
   let singular = title
   if (title?.endsWith("s")) {
     singular = title.slice(0, title.length - 1)
@@ -27,7 +24,6 @@
   if (singular?.match(/^[aeoui]/)) {
     article = "an"
   }
-  export let path: (string | number)[] = []
 
   const isTagRenderingBlock = path.length === 1 && path[0] === "tagRenderings"
 
@@ -41,12 +37,12 @@
     .filter((part) => part.path.length - 1 === schema.path.length)
   let messages = state.messagesFor(path)
 
-  const currentValue: UIEventSource<any[]> = state.getStoreFor(path)
+  const currentValue = state.getStoreFor<(string | QuestionableTagRenderingConfigJson)[]>(path)
   if (currentValue.data === undefined) {
     currentValue.setData([])
   }
 
-  function createItem(valueToSet?: any) {
+  function createItem(valueToSet?: string | QuestionableTagRenderingConfigJson) {
     if (currentValue.data === undefined) {
       currentValue.setData([])
     }
@@ -72,64 +68,13 @@
     return newPath
   }
 
-  function schemaForMultitype() {
-    const sch = { ...schema }
-    sch.hints.typehint = undefined
-    return sch
-  }
-
   function del(i: number) {
     currentValue.data.splice(i, 1)
     currentValue.ping()
   }
 
-  function swap(i: number, j: number) {
-    const x = currentValue.data[i]
-    currentValue.data[i] = currentValue.data[j]
-    currentValue.data[j] = x
-    currentValue.ping()
-  }
 
-  function moveTo(source: number, target: number) {
-    const x = currentValue.data[source]
-    currentValue.data.splice(source, 1)
-    currentValue.data.splice(target, 0, x)
-    currentValue.ping()
-  }
 
-  function genTitle(value: any, singular: string, i: number): Translation {
-    try {
-      if (schema.hints.title) {
-        const v = Function("value", "return " + schema.hints.title)(value)
-        return Translations.T(v)
-      }
-    } catch (e) {
-      console.log(
-        "Warning: could not translate a title for " +
-          `${singular} ${i} with function ` +
-          schema.hints.title +
-          " and value " +
-          JSON.stringify(value)
-      )
-    }
-    return Translations.T(`${singular} ${i}`)
-  }
-
-  let genIconF: (x: any) => { icon: string; color: string } = <any>(
-    Function("value", "return " + schema.hints.icon)
-  )
-  console.log("Icon lambda is", schema.hints.icon, path, genIconF("test"))
-
-  function genIcon(value: any): string {
-    return genIconF(value)?.icon
-  }
-
-  function genColor(value: any): string {
-    if (!schema.hints.icon) {
-      return undefined
-    }
-    return genIconF(value)?.color
-  }
 </script>
 
 <div class="pl-2">
@@ -163,99 +108,11 @@
       </div>
     {/each}
   {:else}
-    {#each $currentValue as value, i}
-      <AccordionSingle expanded={false}>
-        <span slot="header">
-          {#if !isTagRenderingBlock}
-            <div class="flex items-center justify-between">
-              <h3 class="m-0 flex">
-                {#if schema.hints.icon}
-                  <Icon clss="w-6 h-6" icon={genIcon(value)} color={genColor(value)} />
-                {/if}
-                {singular}
-                {i}
-
-                {#if schema.hints.title}
-                  <div class="subtle ml-2">
-                    <Tr t={genTitle(value, singular, i)} />
-                  </div>
-                {/if}
-              </h3>
-              <button
-                class="h-fit w-fit rounded-full border border-black p-1"
-                on:click={() => {
-                  del(i)
-                }}
-              >
-                <TrashIcon class="h-4 w-4" />
-              </button>
-            </div>
-          {:else if typeof value === "string"}
-            Builtin: <b>{value}</b>
-          {:else}
-            <Tr cls="font-bold" t={Translations.T(value?.question ?? value?.render)} />
-          {/if}
-        </span>
-        <div class="normal-background p-2">
-          {#if isTagRenderingBlock}
-            <QuestionPreview {state} path={fusePath(i, [])} {schema}>
-              <button
-                on:click={() => {
-                  del(i)
-                }}
-              >
-                <TrashIcon class="h-4 w-4" />
-                Delete this question
-              </button>
-
-              {#if i > 0}
-                <button
-                  on:click={() => {
-                    moveTo(i, 0)
-                  }}
-                >
-                  Move to front
-                </button>
-
-                <button
-                  on:click={() => {
-                    swap(i, i - 1)
-                  }}
-                >
-                  Move up
-                </button>
-              {/if}
-              {#if i + 1 < $currentValue.length}
-                <button
-                  on:click={() => {
-                    swap(i, i + 1)
-                  }}
-                >
-                  Move down
-                </button>
-                <button
-                  on:click={() => {
-                    moveTo(i, $currentValue.length - 1)
-                  }}
-                >
-                  Move to back
-                </button>
-              {/if}
-            </QuestionPreview>
-          {:else if schema.hints.types}
-            <SchemaBasedMultiType {state} path={fusePath(i, [])} schema={schemaForMultitype()} />
-          {:else}
-            {#each subparts as subpart}
-              <SchemaBasedInput
-                {state}
-                path={fusePath(i, [subpart.path.at(-1)])}
-                schema={subpart}
-              />
-            {/each}
-          {/if}
-        </div>
-      </AccordionSingle>
+    <Accordion>
+    {#each $currentValue as value, i  (value)}
+      <CollapsedTagRenderingPreview {state} {isTagRenderingBlock} {schema} {currentValue} {value} {i} {singular} path={fusePath(i, [])}/>
     {/each}
+    </Accordion>
   {/if}
   <div class="flex">
     <button on:click={() => createItem()}>Add {article} {singular}</button>