Disable build when readonly

Author: beliolfa

src/lib/BuilderNavbar.svelte

@@ -86,7 +86,7 @@
 
     <BuilderNavbarSeparator />
 
-    <BuilderNavbarActions {state} {isSigned} on:action />
+    <BuilderNavbarActions {state} {isSigned} readOnly={forceReadOnly} on:action />
 
     <BuilderNavbarSeparator />
 
@@ -138,6 +138,7 @@
       <BuilderNavbarActions
         {state}
         {isSigned}
+        readOnly={forceReadOnly}
         on:action={(event) => {
           mobileMenuOpen = false;
           dispatch("action", event.detail);

src/lib/BuilderNavbarActions.svelte

@@ -9,13 +9,14 @@
 
   export let state: State = "init";
   export let isSigned = false;
+  export let readOnly = false;
 </script>
 
 <div class="flex space-x-1 items-center">
   <button
     title="Build the GOBL document."
-    class={iconButtonClasses(state !== "modified" && state !== "loaded" && state !== "errored")}
-    disabled={state !== "modified" && state !== "loaded" && state !== "errored"}
+    class={iconButtonClasses((state !== "modified" && state !== "loaded" && state !== "errored") || readOnly)}
+    disabled={(state !== "modified" && state !== "loaded" && state !== "errored") || readOnly}
     on:click={() => {
       dispatch("action", "build");
     }}
@@ -27,8 +28,8 @@
     on:click={() => {
       dispatch("action", "correct");
     }}
-    class={iconButtonClasses(!["loaded", "built"].includes(state))}
-    disabled={!["loaded", "built"].includes(state)}
+    class={iconButtonClasses(!["loaded", "built"].includes(state) || readOnly)}
+    disabled={!["loaded", "built"].includes(state) || readOnly}
   >
     <Icon src={Erase} class="w-5 h-5" />
   </button>

src/lib/BuilderNavbarEnvelopeMeta.svelte

@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte";
   import { Icon } from "@steeze-ui/svelte-icon";
   import { Header, Signature } from "@invopop/ui-icons";
+  import { iconButtonClasses } from "./ui/iconButtonClasses";
 
   const dispatch = createEventDispatcher();
 
@@ -17,14 +18,13 @@
 >
   <Icon src={Header} class="h-5 w-5" />
 </button>
-{#if isSigned}
-  <button
-    title="Show document signatures"
-    class="inline-flex items-center space-x-1.5 p-1.5 border border-gobl-300 text-sm font-medium text-white hover:text-gobl-50 hover:border-gobl-50"
-    on:click={() => {
-      dispatch("action", "showSignatures");
-    }}
-  >
-    <Icon src={Signature} class="h-5 w-5" />
-  </button>
-{/if}
+<button
+  title="Show document signatures"
+  class={iconButtonClasses(!isSigned)}
+  disabled={!isSigned}
+  on:click={() => {
+    dispatch("action", "showSignatures");
+  }}
+>
+  <Icon src={Signature} class="h-5 w-5" />
+</button>

src/routes/+page.svelte

@@ -149,7 +149,6 @@
     }}
     on:confirm={async (event) => {
       const result = await builder.correctWithOptions(event.detail);
-      console.log(result);
       openCorrectModal = !result;
     }}
   />