Merge pull request #855 from MuckRock/842-uploads

Ensure access is set on uploads
MuckRock · Nov 20, 2024 · 317a064 · 317a064
2 parents 19bbb31 + e720e84
commit 317a064
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -63,7 +63,8 @@
     "dismiss": "Dismiss",
     "dispatch": "Dispatch",
     "organize": "Organize",
-    "run": "Run"
+    "run": "Run",
+    "required": "This field is required"
   },
   "dialogReprocessDialog": {
     "title": "Confirm reprocess",

diff --git a/src/lib/components/forms/DocumentUpload.svelte b/src/lib/components/forms/DocumentUpload.svelte
@@ -172,8 +172,8 @@ progress through the three-part upload process.
 
     const form = new FormData(e.target as HTMLFormElement);
 
-    const access = form.get("access") as Access;
-    const titles = form.getAll("title") as string[];
+    const access = (form.get("access") as Access) ?? "private";
+    const titles = (form.getAll("title") as string[]) ?? [];
     const revision_control = form.get("revision_control") === "on";
 
     // only run on files that are "ready" and haven't started uploading
@@ -357,7 +357,7 @@ progress through the three-part upload process.
 
           <Field>
             <FieldLabel>{$_("uploadDialog.accessLevel")}</FieldLabel>
-            <AccessLevel name="access" bind:selected={access} />
+            <AccessLevel name="access" bind:selected={access} required />
           </Field>
           <Field>
             <FieldLabel>{$_("uploadDialog.projects")}</FieldLabel>

diff --git a/src/lib/components/inputs/AccessLevel.svelte b/src/lib/components/inputs/AccessLevel.svelte
@@ -43,30 +43,39 @@
   export let name: string;
   export let selected: Access = levels[0]!.value;
   export let direction: "column" | "row" = "column";
+  export let required = false;
 </script>
 
-<Flex {direction} gap={0.5}>
-  {#each levels as level}
-    <div class="option" class:selected={level.value === selected}>
-      <input
-        class="sr-only"
-        type="radio"
-        {name}
-        id={level.value}
-        bind:group={selected}
-        value={level.value}
-      />
-      <label for={level.value} class="detail">
-        <Flex gap={0.5}>
-          <svelte:component this={level.icon} />
-          <Flex direction="column" gap={0.125}>
-            <p class="title">{level.title}</p>
-            <p class="description">{level.description}</p>
+<Flex direction="column">
+  {#if required && !selected}
+    <p class="error">
+      {$_("dialog.required")}
+    </p>
+  {/if}
+  <Flex {direction} gap={0.5}>
+    {#each levels as level}
+      <div class="option" class:selected={level.value === selected}>
+        <label for={level.value} class="detail">
+          <Flex gap={0.5}>
+            <svelte:component this={level.icon} />
+            <Flex direction="column" gap={0.125}>
+              <p class="title">{level.title}</p>
+              <p class="description">{level.description}</p>
+            </Flex>
           </Flex>
-        </Flex>
-      </label>
-    </div>
-  {/each}
+          <input
+            class="sr-only"
+            type="radio"
+            {name}
+            id={level.value}
+            bind:group={selected}
+            value={level.value}
+            {required}
+          />
+        </label>
+      </div>
+    {/each}
+  </Flex>
 </Flex>
 
 <style>
@@ -96,6 +105,10 @@
     font-size: var(--font-xs);
     opacity: 0.7;
   }
+  .error {
+    color: var(--error);
+  }
+
   .sr-only {
     position: absolute;
     clip: rect(1px, 1px, 1px, 1px);

diff --git a/src/lib/components/inputs/stories/AccessLevel.stories.svelte b/src/lib/components/inputs/stories/AccessLevel.stories.svelte
@@ -22,3 +22,4 @@
 <Story name="Organization" args={{ ...args, selected: "organization" }} />
 <Story name="Public" args={{ ...args, selected: "public" }} />
 <Story name="Row" args={{ ...args, direction: "row" }} />
+<Story name="Required" args={{ required: true, selected: null }} />