atmosphere explorer
pds.ls
tool
typescript
atproto
move record edit options to advanced modal
+32
-32
+12
-20
src/components/create/confirm-submit.tsx
+12
-20
src/components/create/confirm-submit.tsx
···
1
-
import { createSignal, For, Show } from "solid-js";
1
+
import { For, Show } from "solid-js";
2
2
import { hasUserScope } from "../../auth/scope-utils";
3
3
import { Button } from "../button.jsx";
4
4
···
13
13
14
14
export const ConfirmSubmit = (props: {
15
15
isCreate: boolean;
16
-
onConfirm: (validate: boolean | undefined, recreate: boolean) => void;
16
+
validate: boolean | undefined;
17
+
setValidate: (v: boolean | undefined) => void;
18
+
recreate: boolean;
19
+
setRecreate: (v: boolean) => void;
17
20
onClose: () => void;
18
21
}) => {
19
-
const [validate, setValidate] = createSignal<boolean | undefined>(undefined);
20
-
const [recreate, setRecreate] = createSignal(false);
21
-
22
22
return (
23
23
<div class="flex flex-col gap-3 text-sm">
24
-
<h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2>
24
+
<h2 class="font-semibold">Advanced options</h2>
25
25
26
26
<div class="flex flex-col gap-1.5">
27
27
<div class="flex items-center justify-between gap-2">
···
31
31
{(opt) => (
32
32
<button
33
33
type="button"
34
-
onClick={() => setValidate(opt.value)}
35
-
class={`border-r border-neutral-200 px-2.5 py-1.5 transition-colors last:border-r-0 dark:border-neutral-600 ${validate() === opt.value ? activeClass : inactiveClass}`}
34
+
onClick={() => props.setValidate(opt.value)}
35
+
class={`border-r border-neutral-200 px-2.5 py-1.5 transition-colors last:border-r-0 dark:border-neutral-600 ${props.validate === opt.value ? activeClass : inactiveClass}`}
36
36
>
37
37
{opt.label}
38
38
</button>
···
53
53
>
54
54
<input
55
55
type="checkbox"
56
-
checked={recreate()}
56
+
checked={props.recreate}
57
57
disabled={!hasUserScope("create")}
58
-
onChange={(e) => setRecreate(e.currentTarget.checked)}
58
+
onChange={(e) => props.setRecreate(e.currentTarget.checked)}
59
59
class="h-3.5 w-3.5 accent-blue-500"
60
60
/>
61
61
Recreate{!hasUserScope("create") ? " (create permission needed)" : ""}
···
66
66
</div>
67
67
</Show>
68
68
69
-
<div class="flex justify-between gap-2">
70
-
<Button onClick={props.onClose}>Cancel</Button>
71
-
<Button
72
-
onClick={() => props.onConfirm(validate(), recreate())}
73
-
classList={{
74
-
"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,
75
-
}}
76
-
>
77
-
Confirm
78
-
</Button>
69
+
<div class="flex justify-end gap-2">
70
+
<Button onClick={props.onClose}>Done</Button>
79
71
</div>
80
72
</div>
81
73
);
+20
-12
src/components/create/index.tsx
+20
-12
src/components/create/index.tsx
···
45
45
const [openInsertMenu, setOpenInsertMenu] = createSignal(false);
46
46
const [openHandleDialog, setOpenHandleDialog] = createSignal(false);
47
47
const [openConfirmDialog, setOpenConfirmDialog] = createSignal(false);
48
+
const [validate, setValidate] = createSignal<boolean | undefined>(undefined);
49
+
const [recreate, setRecreate] = createSignal(false);
48
50
49
51
const hasPermission = () => !props.scope || hasUserScope(props.scope);
50
52
const [isMaximized, setIsMaximized] = createSignal(false);
···
139
141
setNotice(`${res.data.error}: ${res.data.message}`);
140
142
return;
141
143
}
142
-
setOpenConfirmDialog(false);
143
144
setOpenDialog(false);
144
145
const id = addNotification({
145
146
message: "Record created",
···
199
200
return;
200
201
}
201
202
}
202
-
setOpenConfirmDialog(false);
203
203
setOpenDialog(false);
204
204
const id = addNotification({
205
205
message: "Record edited",
···
415
415
<Modal
416
416
open={openConfirmDialog()}
417
417
onClose={() => setOpenConfirmDialog(false)}
418
-
closeOnClick={false}
419
418
contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[24rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700"
420
419
>
421
420
<ConfirmSubmit
422
421
isCreate={props.create}
423
-
onConfirm={(validate, recreate) => {
424
-
if (props.create) {
425
-
createRecord(validate);
426
-
} else {
427
-
editRecord(validate, recreate);
428
-
}
429
-
}}
422
+
validate={validate()}
423
+
setValidate={setValidate}
424
+
recreate={recreate()}
425
+
setRecreate={setRecreate}
430
426
onClose={() => setOpenConfirmDialog(false)}
431
427
/>
432
428
</Modal>
433
429
<div class="flex items-center justify-end gap-2">
434
-
<Button onClick={() => setOpenConfirmDialog(true)}>
435
-
{props.create ? "Create..." : "Edit..."}
430
+
<Button onClick={() => setOpenConfirmDialog(true)}>Advanced</Button>
431
+
<Button
432
+
onClick={() => {
433
+
if (props.create) {
434
+
createRecord(validate());
435
+
} else {
436
+
editRecord(validate(), recreate());
437
+
}
438
+
}}
439
+
classList={{
440
+
"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,
441
+
}}
442
+
>
443
+
{props.create ? "Create" : "Edit"}
436
444
</Button>
437
445
</div>
438
446
</div>