ansxor.ca
forked from
pds.ls/pdsls
atmosphere explorer
handle.invalid
1import { createSignal, Show } from "solid-js";
2import { hasUserScope } from "../../auth/scope-utils";
3import { Button } from "../button.jsx";
4
5export const ConfirmSubmit = (props: {
6 isCreate: boolean;
7 onConfirm: (validate: boolean | undefined, recreate: boolean) => void;
8 onClose: () => void;
9}) => {
10 const [validate, setValidate] = createSignal<boolean | undefined>(undefined);
11 const [recreate, setRecreate] = createSignal(false);
12
13 const getValidateLabel = () => {
14 return (
15 validate() === true ? "True"
16 : validate() === false ? "False"
17 : "Unset"
18 );
19 };
20
21 const cycleValidate = () => {
22 setValidate(
23 validate() === undefined ? true
24 : validate() === true ? false
25 : undefined,
26 );
27 };
28
29 return (
30 <>
31 <div class="flex flex-col gap-3 text-sm">
32 <h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2>
33 <div class="flex flex-col gap-1.5">
34 <div class="flex items-center gap-2">
35 <button
36 type="button"
37 class="-ml-2 flex min-w-30 items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200/50 dark:hover:bg-neutral-700"
38 onClick={cycleValidate}
39 >
40 <span
41 classList={{
42 iconify: true,
43 "lucide--square-check text-green-500 dark:text-green-400": validate() === true,
44 "lucide--square-x text-red-500 dark:text-red-400": validate() === false,
45 "lucide--square text-neutral-500 dark:text-neutral-400": validate() === undefined,
46 }}
47 ></span>
48 <span>Validate: {getValidateLabel()}</span>
49 </button>
50 </div>
51 <p class="text-xs text-neutral-600 dark:text-neutral-400">
52 Set to 'false' to skip lexicon schema validation by the PDS, 'true' to require it, or
53 leave unset to validate only for known lexicons.
54 </p>
55 </div>
56 <Show when={!props.isCreate}>
57 <div class="flex flex-col gap-1.5">
58 <div class="flex items-center gap-2">
59 <button
60 type="button"
61 class={
62 hasUserScope("create") ?
63 "-ml-2 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs hover:bg-neutral-200/50 dark:hover:bg-neutral-700"
64 : "-ml-2 flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs opacity-40"
65 }
66 onClick={() => hasUserScope("create") && setRecreate(!recreate())}
67 >
68 <span
69 classList={{
70 iconify: true,
71 "lucide--square-check text-green-500 dark:text-green-400": recreate(),
72 "lucide--square text-neutral-500 dark:text-neutral-400": !recreate(),
73 }}
74 ></span>
75 <span>Recreate{hasUserScope("create") ? "" : " (create permission needed)"}</span>
76 </button>
77 </div>
78 <p class="text-xs text-neutral-600 dark:text-neutral-400">
79 Delete the existing record and create a new one with the same record key.
80 </p>
81 </div>
82 </Show>
83 <div class="flex justify-between gap-2">
84 <Button onClick={props.onClose}>Cancel</Button>
85 <Button
86 onClick={() => props.onConfirm(validate(), recreate())}
87 classList={{
88 "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true,
89 }}
90 >
91 {props.isCreate ? "Create" : "Edit"}
92 </Button>
93 </div>
94 </div>
95 </>
96 );
97};