fix section logic

MuckRock · Jul 15, 2024 · 0ecbaf2 · 0ecbaf2
1 parent 83fecfa
commit 0ecbaf2
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/src/lib/components/forms/EditSectionRow.svelte b/src/lib/components/forms/EditSectionRow.svelte
@@ -27,20 +27,31 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
   export let page_number: number = undefined;
   export let title: string = "";
 
+  // store separately to deal with zero-indexed section pages
+  let display_number: number = (page_number || 0) + 1;
+
   $: mode = id ? "edit" : "create";
+
+  function reset() {
+    title = "";
+    page_number = undefined;
+    display_number = undefined;
+  }
 </script>
 
 <tr class="section {mode}" id="section-{id ?? 'new'}">
   <td class="page_number">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label>
       <span class="sr-only">{$_("sections.page")}</span>
-      <Number
+      <input
+        type="number"
         name="page_number"
-        value={page_number + 1}
+        bind:value={display_number}
         min={1}
         max={document.page_count}
         required
+        on:input={(e) => (page_number = display_number - 1)}
       />
     </label>
   </td>
@@ -90,12 +101,9 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
         value="add"
         {disabled}
         on:click={async (e) => {
-          await create(
-            document.id,
-            { title, page_number: page_number - 1 },
-            csrftoken,
-          );
+          await create(document.id, { title, page_number }, csrftoken);
           await invalidate(`document:${document.id}`);
+          reset();
         }}
       >
         <PlusCircle16 />
@@ -105,7 +113,7 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
         mode="ghost"
         title={$_("sections.clear")}
         minW={false}
-        on:click={(e) => {}}
+        on:click={reset}
       >
         <XCircle16 />
       </Button>
@@ -135,4 +143,30 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
   tr.section {
     padding: 0.125rem;
   }
+
+  input[type="number"] {
+    display: flex;
+    padding: 0.375rem 0.75rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-3, hwb(205 60% 30%));
+    background: var(--white, #fff);
+    box-shadow: 0px 2px 0px 0px var(--gray-2, #d8dee2) inset;
+
+    color: var(--gray-5, #233944);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: "Source Sans Pro";
+    font-size: var(--font-size, 1rem);
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+  input::placeholder {
+    color: var(--gray-3, #99a8b3);
+  }
 </style>
diff --git a/src/lib/components/forms/EditSections.svelte b/src/lib/components/forms/EditSections.svelte
@@ -23,7 +23,6 @@ This form is entirely client-side.
 
   $: sections = document.sections ?? [];
   $: existing_pages = new Set(sections.map((s) => s.page_number));
-  $: console.log(section);
 
   beforeUpdate(() => {
     // updating, so remove new section data
@@ -67,6 +66,7 @@ This form is entirely client-side.
         {csrftoken}
         title={section.title}
         page_number={section.page_number}
+        disabled={existing_pages.has(section.page_number)}
       />
 
       {#if existing_pages.has(section.page_number)}