From 02f5fd7b367b61c6bf92685e66179a46f7055fd5 Mon Sep 17 00:00:00 2001
From: Javier Martinez <javier.martinez@invopop.com>
Date: Fri, 8 Sep 2023 11:56:04 +0000
Subject: [PATCH] remember chosen enditor when reloading

---
 src/lib/GOBLBuilder.svelte                     |  4 +++-
 src/lib/editor/form/EditableDateField.svelte   |  4 +++-
 src/lib/editor/form/EditableSelectField.svelte |  4 +++-
 src/lib/editor/form/EditableTextField.svelte   |  2 +-
 src/lib/editor/form/FieldButtons.svelte        |  5 ++---
 src/lib/editor/form/FieldTitle.svelte          | 15 +--------------
 src/lib/editor/form/LeafField.svelte           |  3 ++-
 7 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/lib/GOBLBuilder.svelte b/src/lib/GOBLBuilder.svelte
index 2c894b5..6c29cb9 100644
--- a/src/lib/GOBLBuilder.svelte
+++ b/src/lib/GOBLBuilder.svelte
@@ -52,7 +52,7 @@
   export let signEnabled = true;
 
   // Whether shows the code or the form editor
-  let editorView = "code";
+  let editorView = localStorage.getItem("editor-view") || "code";
   let initialEditorData = "";
 
   if (signEnabled) {
@@ -61,6 +61,8 @@
     });
   }
 
+  $: localStorage.setItem("editor-view", editorView);
+
   // jsonSchema is stored for validations in code editor
   $: jsonSchema.set(jsonSchemaURL);
 
diff --git a/src/lib/editor/form/EditableDateField.svelte b/src/lib/editor/form/EditableDateField.svelte
index 04ab604..304224c 100644
--- a/src/lib/editor/form/EditableDateField.svelte
+++ b/src/lib/editor/form/EditableDateField.svelte
@@ -20,7 +20,9 @@
   on:change={handleChange}
   on:keyup={handleChange}
   on:blur
-  class="outline-none w-full bg-white rounded border h-8 py-1.5 px-2 text-gray-700 focus:border-gray-400"
+  class="outline-none w-full border rounded h-8 py-1.5 px-2 text-gray-700 focus:border-gray-400"
   class:border-rose-500={showError}
+  class:bg-slate-50={field.is.calculated}
+  class:border-slate-100={field.is.calculated}
   class:focus:border-rose-500={showError}
 />
diff --git a/src/lib/editor/form/EditableSelectField.svelte b/src/lib/editor/form/EditableSelectField.svelte
index aa6a201..8ab866d 100644
--- a/src/lib/editor/form/EditableSelectField.svelte
+++ b/src/lib/editor/form/EditableSelectField.svelte
@@ -21,8 +21,10 @@
   on:change={handleChange}
   on:keyup={handleChange}
   on:blur
-  class="text-ellipsis outline-none w-full bg-white rounded border h-8 py-1.5 pl-2 pr-8 text-gray-700 appearance-none focus:border-gray-400 cursor-pointer"
+  class="text-ellipsis outline-none w-full rounded border h-8 py-1.5 pl-2 pr-8 text-gray-700 appearance-none focus:border-gray-400 cursor-pointer"
   class:border-rose-500={showError}
+  class:bg-slate-50={field.is.calculated}
+  class:border-slate-100={field.is.calculated}
   class:focus:border-rose-500={showError}
 >
   {#each options as opt (opt.value)}
diff --git a/src/lib/editor/form/EditableTextField.svelte b/src/lib/editor/form/EditableTextField.svelte
index 5e2348e..c908c97 100644
--- a/src/lib/editor/form/EditableTextField.svelte
+++ b/src/lib/editor/form/EditableTextField.svelte
@@ -27,8 +27,8 @@
   on:keyup={handleChange}
   on:blur
   class="focus:border-gray-400 {classes}"
-  class:bg-white={!field.is.calculated}
   class:bg-slate-50={field.is.calculated}
+  class:border-slate-100={field.is.calculated}
   class:border-rose-500={showError}
   class:focus:border-rose-500={showError}
 />
diff --git a/src/lib/editor/form/FieldButtons.svelte b/src/lib/editor/form/FieldButtons.svelte
index 24e237b..cf8250b 100644
--- a/src/lib/editor/form/FieldButtons.svelte
+++ b/src/lib/editor/form/FieldButtons.svelte
@@ -9,7 +9,6 @@
 
   const dispatch = createEventDispatcher();
 
-  $: classes = field?.is.calculated ? "bg-blue-100" : "bg-color2";
   $: showAdd = ["object", "array"].includes(field?.type || "");
   $: addLabel = field?.type === "array" ? "Add Row" : "Add Property";
   $: canMove = field?.parent?.type === "array";
@@ -17,8 +16,8 @@
   $: canMoveDown = canMove && Number(field?.key) < Number(field?.parent?.children?.length) - 1;
 </script>
 
-<div id="fieldBackground" class="flex w-full h-full rounded {classes}" transition:fade={{ duration: 200 }}>
-  <div class="flex-shrink-0 left-full h-9 ml-1 top-0 rounded {classes}">
+<div id="fieldBackground" class="flex w-full h-full rounded bg-color2" transition:fade={{ duration: 200 }}>
+  <div class="flex-shrink-0 left-full h-9 top-0 rounded bg-color2">
     <ul class="flex align-middle text-grey-5 h-full">
       {#if showAdd}
         <li>
diff --git a/src/lib/editor/form/FieldTitle.svelte b/src/lib/editor/form/FieldTitle.svelte
index 8f66dd2..0172936 100644
--- a/src/lib/editor/form/FieldTitle.svelte
+++ b/src/lib/editor/form/FieldTitle.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import type { UIModelField } from "$lib/editor/form/utils/model.js";
-  import Tooltip from "$lib/ui/Tooltip.svelte";
-  import CalculatedIcon from "$lib/ui/icons/CalculatedIcon.svelte";
   import { Hashtag, Icon } from "svelte-hero-icons";
   export let field: UIModelField<unknown>;
 
@@ -12,17 +10,6 @@
   {#if field.parent?.isArray()}
     <Icon src={Hashtag} class="h-3 text-grey-5 mr-1" /> {arrayTitle} {Number(field.key) + 1}
   {:else}
-    <span class:text-blue-500={field.is.calculated}>{field.schema.title || field.key}</span>
-    {#if field.is.calculated}
-      <span class="ml-2 text-blue-500">
-        <Tooltip
-          label="This is a calculated field. It will be generated by the builder if missing."
-          bgClass="bg-blue-300"
-          delay={1000}
-        >
-          <CalculatedIcon />
-        </Tooltip>
-      </span>
-    {/if}
+    <span class:italic={field.is.calculated}>{field.schema.title || field.key}</span>
   {/if}
 </span>
diff --git a/src/lib/editor/form/LeafField.svelte b/src/lib/editor/form/LeafField.svelte
index df50bcd..eb8e497 100644
--- a/src/lib/editor/form/LeafField.svelte
+++ b/src/lib/editor/form/LeafField.svelte
@@ -9,9 +9,10 @@
   export let parseValue: (value: SchemaValue) => SchemaValue;
   export let parseKey: ((key: SchemaValue) => string) | undefined = undefined;
   export let field: UIModelField<string>;
+  $: label = `${field.schema.description}${field.is.calculated ? " (calculated)" : ""}`;
 </script>
 
-<Tooltip label={field.schema.description} delay={1000} placement="bottom" containerClass="block w-full">
+<Tooltip {label} delay={1000} placement="bottom" containerClass="block w-full">
   <div class="flex items-stretch justify-between w-full gap-2">
     <div class="flex items-start justify-start">
       {#if field.is.editableKey}