improved modals
This commit is contained in:
daniel31x13
parent
692b9b99e7
commit
93e0fe6172
|
|
@ -1,112 +0,0 @@
|
|||
import { Tab } from "@headlessui/react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import NewLink from "./Tabs.tsx/NewLink";
|
||||
import NewCollection from "./Tabs.tsx/NewCollection";
|
||||
|
||||
type Props = {
|
||||
index?: number;
|
||||
modalId: string;
|
||||
isOpen: boolean;
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function New({ index, modalId, isOpen, onClose }: Props) {
|
||||
const newModal = document.getElementById(modalId);
|
||||
const [tabIndex, setTabIndex] = useState(index);
|
||||
|
||||
useEffect(() => {
|
||||
setTabIndex(index);
|
||||
|
||||
newModal?.addEventListener("close", () => {
|
||||
onClose();
|
||||
});
|
||||
|
||||
return () => {
|
||||
newModal?.addEventListener("close", () => {
|
||||
onClose();
|
||||
});
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<dialog
|
||||
id={modalId}
|
||||
className="modal backdrop-blur-sm overflow-y-auto"
|
||||
open={isOpen}
|
||||
>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
toastOptions={{
|
||||
className:
|
||||
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||
}}
|
||||
/>
|
||||
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
||||
<form method="dialog">
|
||||
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-5 top-5">
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<Tab.Group
|
||||
onChange={(i: any) => setTabIndex(i)}
|
||||
selectedIndex={tabIndex}
|
||||
>
|
||||
<Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`${
|
||||
selected ? "btn-primary" : "btn-ghost"
|
||||
} outline-none rounded-md btn btn-sm w-24`
|
||||
}
|
||||
>
|
||||
Link
|
||||
</Tab>
|
||||
{/* <Tab
|
||||
className={({ selected }) =>
|
||||
`${
|
||||
selected ? "btn-primary" : "btn-ghost"
|
||||
} outline-none rounded-md btn btn-sm w-24`
|
||||
}
|
||||
>
|
||||
File
|
||||
</Tab> */}
|
||||
{/* <Tab
|
||||
className={({ selected }) =>
|
||||
`${
|
||||
selected ? "btn-primary" : "btn-ghost"
|
||||
} outline-none rounded-md btn btn-sm w-24`
|
||||
}
|
||||
>
|
||||
Note
|
||||
</Tab> */}
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`${
|
||||
selected ? "btn-primary" : "btn-ghost"
|
||||
} outline-none rounded-md btn btn-sm w-24`
|
||||
}
|
||||
>
|
||||
Collection
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels className="mt-5">
|
||||
<Tab.Panel>
|
||||
<NewLink isOpen={isOpen} modalId={modalId} />
|
||||
</Tab.Panel>
|
||||
{/* <Tab.Panel>File</Tab.Panel> */}
|
||||
{/* <Tab.Panel>Note</Tab.Panel> */}
|
||||
<Tab.Panel>
|
||||
<NewCollection isOpen={isOpen} modalId={modalId} />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import toast, { Toaster } from "react-hot-toast";
|
||||
import { faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { Collection } from "@prisma/client";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
type Props = {
|
||||
modalId: string;
|
||||
isOpen: boolean;
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function NewCollectionModal({
|
||||
modalId,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: Props) {
|
||||
const newModal = document.getElementById(modalId);
|
||||
|
||||
useEffect(() => {
|
||||
newModal?.addEventListener("close", () => {
|
||||
onClose();
|
||||
});
|
||||
|
||||
return () => {
|
||||
newModal?.addEventListener("close", () => {
|
||||
onClose();
|
||||
});
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
const initial = {
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
};
|
||||
|
||||
const [collection, setCollection] = useState<Partial<Collection>>(initial);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(initial);
|
||||
}, [isOpen]);
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const { addCollection } = useCollectionStore();
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
if (!collection) return null;
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
|
||||
let response;
|
||||
|
||||
response = await addCollection(collection as any);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Collection "Created!"`);
|
||||
(document.getElementById(modalId) as any).close();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
setSubmitLoader(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<dialog
|
||||
id={modalId}
|
||||
className="modal backdrop-blur-sm overflow-y-auto"
|
||||
open={isOpen}
|
||||
>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
toastOptions={{
|
||||
className:
|
||||
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||
}}
|
||||
/>
|
||||
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
||||
<form method="dialog">
|
||||
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-xl mb-5 font-thin">Create a New Collection</p>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<TextInput
|
||||
className="bg-base-200"
|
||||
value={collection.name}
|
||||
placeholder="e.g. Example Collection"
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<div className="color-picker flex justify-between">
|
||||
<div className="flex flex-col justify-between items-center w-32">
|
||||
<p className="w-full mb-2">Color</p>
|
||||
<div style={{ color: collection.color }}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-12 h-12 drop-shadow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="btn btn-ghost btn-xs"
|
||||
onClick={() =>
|
||||
setCollection({ ...collection, color: "#0ea5e9" })
|
||||
}
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</div>
|
||||
<HexColorPicker
|
||||
color={collection.color}
|
||||
onChange={(e) => setCollection({ ...collection, color: e })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Description</p>
|
||||
<textarea
|
||||
className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||
placeholder="The purpose of this Collection..."
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
setCollection({
|
||||
...collection,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-accent w-fit ml-auto" onClick={submit}>
|
||||
Create Collection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
|
||||
import TagSelection from "@/components/InputSelect/TagSelection";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
type Props = {
|
||||
modalId: string;
|
||||
isOpen: boolean;
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
|
||||
const newModal = document.getElementById(modalId);
|
||||
|
||||
const { data } = useSession();
|
||||
|
||||
const initial = {
|
||||
name: "",
|
||||
url: "",
|
||||
description: "",
|
||||
tags: [],
|
||||
screenshotPath: "",
|
||||
pdfPath: "",
|
||||
readabilityPath: "",
|
||||
textContent: "",
|
||||
collection: {
|
||||
name: "",
|
||||
ownerId: data?.user.id as number,
|
||||
},
|
||||
};
|
||||
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(initial);
|
||||
|
||||
const { addLink } = useLinkStore();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const [optionsExpanded, setOptionsExpanded] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const setCollection = (e: any) => {
|
||||
if (e?.__isNew__) e.value = null;
|
||||
|
||||
setLink({
|
||||
...link,
|
||||
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
||||
});
|
||||
};
|
||||
|
||||
const setTags = (e: any) => {
|
||||
const tagNames = e.map((e: any) => {
|
||||
return { name: e.label };
|
||||
});
|
||||
|
||||
setLink({ ...link, tags: tagNames });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setOptionsExpanded(false);
|
||||
if (router.query.id) {
|
||||
const currentCollection = collections.find(
|
||||
(e) => e.id == Number(router.query.id)
|
||||
);
|
||||
|
||||
if (
|
||||
currentCollection &&
|
||||
currentCollection.ownerId &&
|
||||
router.asPath.startsWith("/collections/")
|
||||
)
|
||||
setLink({
|
||||
...initial,
|
||||
collection: {
|
||||
id: currentCollection.id,
|
||||
name: currentCollection.name,
|
||||
ownerId: currentCollection.ownerId,
|
||||
},
|
||||
});
|
||||
} else
|
||||
setLink({
|
||||
...initial,
|
||||
collection: {
|
||||
// id: ,
|
||||
name: "Unorganized",
|
||||
ownerId: data?.user.id as number,
|
||||
},
|
||||
});
|
||||
|
||||
newModal?.addEventListener("close", () => {
|
||||
onClose();
|
||||
});
|
||||
|
||||
return () => {
|
||||
newModal?.addEventListener("close", () => {
|
||||
onClose();
|
||||
});
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
let response;
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
|
||||
response = await addLink(link);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Created!`);
|
||||
(document.getElementById(modalId) as any).close();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
setSubmitLoader(false);
|
||||
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<dialog
|
||||
id={modalId}
|
||||
className="modal backdrop-blur-sm overflow-y-auto"
|
||||
open={isOpen}
|
||||
>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
toastOptions={{
|
||||
className:
|
||||
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||
}}
|
||||
/>
|
||||
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
||||
<form method="dialog">
|
||||
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-xl mb-5 font-thin">Create a New Link</p>
|
||||
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
|
||||
<div className="sm:col-span-3 col-span-5">
|
||||
<p className="mb-2">Link</p>
|
||||
<TextInput
|
||||
value={link.url}
|
||||
onChange={(e) => setLink({ ...link, url: e.target.value })}
|
||||
placeholder="e.g. http://example.com/"
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 col-span-5">
|
||||
<p className="mb-2">Collection</p>
|
||||
{link.collection.name ? (
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
// defaultValue={{
|
||||
// label: link.collection.name,
|
||||
// value: link.collection.id,
|
||||
// }}
|
||||
defaultValue={
|
||||
link.collection.id
|
||||
? {
|
||||
value: link.collection.id,
|
||||
label: link.collection.name,
|
||||
}
|
||||
: {
|
||||
value: null as unknown as number,
|
||||
label: "Unorganized",
|
||||
}
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{optionsExpanded ? (
|
||||
<div className="mt-5">
|
||||
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Name</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||
placeholder="e.g. Example Link"
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Tags</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
return { label: e.name, value: e.id };
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="mb-2">Description</p>
|
||||
<textarea
|
||||
value={unescapeString(link.description) as string}
|
||||
onChange={(e) =>
|
||||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder="Will be auto generated if nothing is provided."
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div className="flex justify-between items-center mt-5">
|
||||
<div
|
||||
onClick={() => setOptionsExpanded(!optionsExpanded)}
|
||||
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
|
||||
>
|
||||
<p>{optionsExpanded ? "Hide" : "More"} Options</p>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-accent" onClick={submit}>
|
||||
Create Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { HexColorPicker } from "react-colorful";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import { useRouter } from "next/router";
|
||||
import { Collection } from "@prisma/client";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
modalId: string;
|
||||
};
|
||||
|
||||
export default function NewCollection({ isOpen, modalId }: Props) {
|
||||
const router = useRouter();
|
||||
|
||||
const initial = {
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
};
|
||||
|
||||
const [collection, setCollection] = useState<Partial<Collection>>(initial);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(initial);
|
||||
}, [isOpen]);
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const { addCollection } = useCollectionStore();
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
if (!collection) return null;
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
|
||||
let response;
|
||||
|
||||
response = await addCollection(collection as any);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Collection "Created!"`);
|
||||
(document.getElementById(modalId) as any).close();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
setSubmitLoader(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<TextInput
|
||||
className="bg-base-200"
|
||||
value={collection.name}
|
||||
placeholder="e.g. Example Collection"
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<div className="color-picker flex justify-between">
|
||||
<div className="flex flex-col justify-between items-center w-32">
|
||||
<p className="w-full mb-2">Color</p>
|
||||
<div style={{ color: collection.color }}>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
className="w-12 h-12 drop-shadow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="btn btn-ghost btn-xs"
|
||||
onClick={() =>
|
||||
setCollection({ ...collection, color: "#0ea5e9" })
|
||||
}
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</div>
|
||||
<HexColorPicker
|
||||
color={collection.color}
|
||||
onChange={(e) => setCollection({ ...collection, color: e })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Description</p>
|
||||
<textarea
|
||||
className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||
placeholder="The purpose of this Collection..."
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
setCollection({
|
||||
...collection,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-accent w-fit ml-auto" onClick={submit}>
|
||||
Create Collection
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
|
||||
import TagSelection from "@/components/InputSelect/TagSelection";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
modalId: string;
|
||||
};
|
||||
|
||||
export default function NewLink({ isOpen, modalId }: Props) {
|
||||
const { data } = useSession();
|
||||
|
||||
const initial = {
|
||||
name: "",
|
||||
url: "",
|
||||
description: "",
|
||||
tags: [],
|
||||
screenshotPath: "",
|
||||
pdfPath: "",
|
||||
readabilityPath: "",
|
||||
textContent: "",
|
||||
collection: {
|
||||
name: "",
|
||||
ownerId: data?.user.id as number,
|
||||
},
|
||||
};
|
||||
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(initial);
|
||||
|
||||
const { addLink } = useLinkStore();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const [optionsExpanded, setOptionsExpanded] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const setCollection = (e: any) => {
|
||||
if (e?.__isNew__) e.value = null;
|
||||
|
||||
setLink({
|
||||
...link,
|
||||
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
||||
});
|
||||
};
|
||||
|
||||
const setTags = (e: any) => {
|
||||
const tagNames = e.map((e: any) => {
|
||||
return { name: e.label };
|
||||
});
|
||||
|
||||
setLink({ ...link, tags: tagNames });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setOptionsExpanded(false);
|
||||
if (router.query.id) {
|
||||
const currentCollection = collections.find(
|
||||
(e) => e.id == Number(router.query.id)
|
||||
);
|
||||
|
||||
if (
|
||||
currentCollection &&
|
||||
currentCollection.ownerId &&
|
||||
router.asPath.startsWith("/collections/")
|
||||
)
|
||||
setLink({
|
||||
...initial,
|
||||
collection: {
|
||||
id: currentCollection.id,
|
||||
name: currentCollection.name,
|
||||
ownerId: currentCollection.ownerId,
|
||||
},
|
||||
});
|
||||
} else
|
||||
setLink({
|
||||
...initial,
|
||||
collection: {
|
||||
// id: ,
|
||||
name: "Unorganized",
|
||||
ownerId: data?.user.id as number,
|
||||
},
|
||||
});
|
||||
}, [isOpen]);
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
let response;
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
|
||||
response = await addLink(link);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Created!`);
|
||||
(document.getElementById(modalId) as any).close();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
setSubmitLoader(false);
|
||||
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
|
||||
<div className="sm:col-span-3 col-span-5">
|
||||
<p className="mb-2">Link</p>
|
||||
<TextInput
|
||||
value={link.url}
|
||||
onChange={(e) => setLink({ ...link, url: e.target.value })}
|
||||
placeholder="e.g. http://example.com/"
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 col-span-5">
|
||||
<p className="mb-2">Collection</p>
|
||||
{link.collection.name ? (
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
// defaultValue={{
|
||||
// label: link.collection.name,
|
||||
// value: link.collection.id,
|
||||
// }}
|
||||
defaultValue={
|
||||
link.collection.id
|
||||
? {
|
||||
value: link.collection.id,
|
||||
label: link.collection.name,
|
||||
}
|
||||
: {
|
||||
value: null as unknown as number,
|
||||
label: "Unorganized",
|
||||
}
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{optionsExpanded ? (
|
||||
<div className="mt-5">
|
||||
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Name</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||
placeholder="e.g. Example Link"
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Tags</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
return { label: e.name, value: e.id };
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="mb-2">Description</p>
|
||||
<textarea
|
||||
value={unescapeString(link.description) as string}
|
||||
onChange={(e) =>
|
||||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder="Will be auto generated if nothing is provided."
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div className="flex justify-between items-center mt-5">
|
||||
<div
|
||||
onClick={() => setOptionsExpanded(!optionsExpanded)}
|
||||
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
|
||||
>
|
||||
<p>{optionsExpanded ? "Hide" : "More"} Options</p>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-accent" onClick={submit}>
|
||||
Create Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { signOut } from "next-auth/react";
|
||||
import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import Dropdown from "@/components/Dropdown";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
|
|
@ -12,7 +12,8 @@ import ProfilePhoto from "@/components/ProfilePhoto";
|
|||
import useWindowDimensions from "@/hooks/useWindowDimensions";
|
||||
import ToggleDarkMode from "./ToggleDarkMode";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import New from "./Modals/New";
|
||||
import NewLinkModal from "./Modals/NewLink";
|
||||
import NewCollectionModal from "./Modals/NewCollectionModal";
|
||||
|
||||
export default function Navbar() {
|
||||
const { settings, updateSettings } = useLocalSettingsStore();
|
||||
|
|
@ -47,8 +48,11 @@ export default function Navbar() {
|
|||
setSidebar(!sidebar);
|
||||
};
|
||||
|
||||
const [newModalIsOpen, setNewModalIsOpen] = useState(false);
|
||||
const closeNewModal = () => setNewModalIsOpen(false);
|
||||
const [newLinkModalIsOpen, setNewLinkModalIsOpen] = useState(false);
|
||||
const closeNewLinkModal = () => setNewLinkModalIsOpen(false);
|
||||
const [newCollectionModalIsOpen, setNewCollectionModalIsOpen] =
|
||||
useState(false);
|
||||
const closeNewCollectionModal = () => setNewCollectionModalIsOpen(false);
|
||||
|
||||
return (
|
||||
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
|
||||
|
|
@ -62,18 +66,38 @@ export default function Navbar() {
|
|||
<div className="flex items-center gap-2">
|
||||
<ToggleDarkMode className="sm:inline-grid hidden" />
|
||||
|
||||
<button
|
||||
className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
|
||||
onClick={() => setNewModalIsOpen(true)}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faPlus}
|
||||
className="w-5 h-5 sm:group-hover:ml-5 sm:absolute duration-100 left-2"
|
||||
/>
|
||||
<span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
|
||||
New
|
||||
</span>
|
||||
</button>
|
||||
<div className="dropdown dropdown-end">
|
||||
<div className="tooltip tooltip-bottom" data-tip="Create New...">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="flex items-center group btn btn-accent text-white btn-sm"
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
|
||||
<FontAwesomeIcon icon={faCaretDown} className="w-3 h-3" />
|
||||
</div>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
|
||||
<li>
|
||||
<div
|
||||
onClick={() => setNewLinkModalIsOpen(true)}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
New Link
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
onClick={() => setNewCollectionModalIsOpen(true)}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
New Collection
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
|
|
@ -133,11 +157,15 @@ export default function Navbar() {
|
|||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<New
|
||||
index={0}
|
||||
isOpen={newModalIsOpen}
|
||||
onClose={closeNewModal}
|
||||
modalId="new-modal-0"
|
||||
<NewLinkModal
|
||||
isOpen={newLinkModalIsOpen}
|
||||
onClose={closeNewLinkModal}
|
||||
modalId="new-link-modal"
|
||||
/>
|
||||
<NewCollectionModal
|
||||
isOpen={newCollectionModalIsOpen}
|
||||
onClose={closeNewCollectionModal}
|
||||
modalId="new-collection-modal"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import useModalStore from "@/store/modals";
|
|||
import SortDropdown from "@/components/SortDropdown";
|
||||
import { Sort } from "@/types/global";
|
||||
import useSort from "@/hooks/useSort";
|
||||
import New from "@/components/Modals/New";
|
||||
import NewCollectionModal from "@/components/Modals/NewCollectionModal";
|
||||
|
||||
export default function Collections() {
|
||||
const { collections } = useCollectionStore();
|
||||
|
|
@ -121,7 +121,7 @@ export default function Collections() {
|
|||
})}
|
||||
|
||||
<div
|
||||
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group"
|
||||
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
|
||||
onClick={() => setNewModalIsOpen(true)}
|
||||
>
|
||||
<p className="group-hover:opacity-0 duration-100">New Collection</p>
|
||||
|
|
@ -158,11 +158,10 @@ export default function Collections() {
|
|||
</>
|
||||
) : undefined}
|
||||
</div>
|
||||
<New
|
||||
index={1}
|
||||
<NewCollectionModal
|
||||
isOpen={newModalIsOpen}
|
||||
onClose={closeNewModal}
|
||||
modalId="new-modal-1"
|
||||
modalId="new-collection-modal-1"
|
||||
/>
|
||||
</MainLayout>
|
||||
);
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue