make entire item clickable when in edit mode
This commit is contained in:
Isaac Wise
parent
5128bd44d8
commit
aef33d859e
|
|
@ -19,7 +19,6 @@ export default function CardView({
|
||||||
link={e}
|
link={e}
|
||||||
count={i}
|
count={i}
|
||||||
flipDropdown={i === links.length - 1}
|
flipDropdown={i === links.length - 1}
|
||||||
showCheckbox={showCheckbox}
|
|
||||||
editMode={editMode}
|
editMode={editMode}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,19 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||||
|
|
||||||
export default function ListView({
|
export default function ListView({
|
||||||
links,
|
links,
|
||||||
showCheckbox = true,
|
|
||||||
editMode,
|
editMode,
|
||||||
}: {
|
}: {
|
||||||
links: LinkIncludingShortenedCollectionAndTags[];
|
links: LinkIncludingShortenedCollectionAndTags[];
|
||||||
showCheckbox?: boolean;
|
|
||||||
editMode?: boolean;
|
editMode?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="flex gap-1 flex-col">
|
||||||
{links.map((e, i) => {
|
{links.map((e, i) => {
|
||||||
return (
|
return (
|
||||||
<LinkList
|
<LinkList
|
||||||
key={i}
|
key={i}
|
||||||
link={e}
|
link={e}
|
||||||
count={i}
|
count={i}
|
||||||
showCheckbox={showCheckbox}
|
|
||||||
flipDropdown={i === links.length - 1}
|
flipDropdown={i === links.length - 1}
|
||||||
editMode={editMode}
|
editMode={editMode}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -24,14 +24,12 @@ type Props = {
|
||||||
count: number;
|
count: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
flipDropdown?: boolean;
|
flipDropdown?: boolean;
|
||||||
showCheckbox?: boolean;
|
|
||||||
editMode?: boolean;
|
editMode?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LinkCard({
|
export default function LinkCard({
|
||||||
link,
|
link,
|
||||||
flipDropdown,
|
flipDropdown,
|
||||||
showCheckbox = true,
|
|
||||||
editMode,
|
editMode,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const { collections } = useCollectionStore();
|
const { collections } = useCollectionStore();
|
||||||
|
|
@ -98,143 +96,256 @@ export default function LinkCard({
|
||||||
|
|
||||||
const [showInfo, setShowInfo] = useState(false);
|
const [showInfo, setShowInfo] = useState(false);
|
||||||
|
|
||||||
|
const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border-primary bg-base-300" : "border-neutral-content";
|
||||||
|
const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete);
|
||||||
|
const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
|
className={`${selectedStyle} ${hoverStyles} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
|
||||||
|
onClick={() => selectable && handleCheckboxClick(link)}
|
||||||
>
|
>
|
||||||
{showCheckbox &&
|
|
||||||
editMode &&
|
{!editMode ? (
|
||||||
(permissions === true ||
|
<>
|
||||||
permissions?.canCreate ||
|
<Link
|
||||||
permissions?.canDelete) && (
|
href={generateLinkHref(link, account)}
|
||||||
<input
|
target="_blank"
|
||||||
type="checkbox"
|
className="rounded-2xl cursor-pointer"
|
||||||
className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200"
|
|
||||||
checked={selectedLinks.includes(link)}
|
|
||||||
onChange={() => handleCheckboxClick(link)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Link
|
|
||||||
href={generateLinkHref(link, account)}
|
|
||||||
target="_blank"
|
|
||||||
className="rounded-2xl cursor-pointer"
|
|
||||||
>
|
|
||||||
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
|
||||||
{previewAvailable(link) ? (
|
|
||||||
<Image
|
|
||||||
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
|
|
||||||
width={1280}
|
|
||||||
height={720}
|
|
||||||
alt=""
|
|
||||||
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
|
|
||||||
style={{ filter: "blur(2px)" }}
|
|
||||||
draggable="false"
|
|
||||||
onError={(e) => {
|
|
||||||
const target = e.target as HTMLElement;
|
|
||||||
target.style.display = "none";
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : link.preview === "unavailable" ? (
|
|
||||||
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
|
|
||||||
) : (
|
|
||||||
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
// background:
|
|
||||||
// "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
|
|
||||||
>
|
>
|
||||||
<LinkIcon link={link} />
|
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
||||||
</div>
|
{previewAvailable(link) ? (
|
||||||
</div>
|
<Image
|
||||||
|
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
|
||||||
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
|
width={1280}
|
||||||
|
height={720}
|
||||||
<div className="p-3 mt-1">
|
alt=""
|
||||||
<p className="truncate w-full pr-8 text-primary">
|
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
|
||||||
{unescapeString(link.name || link.description) || link.url}
|
style={{ filter: "blur(2px)" }}
|
||||||
</p>
|
draggable="false"
|
||||||
|
onError={(e) => {
|
||||||
<div title={link.url || ""} className="w-fit">
|
const target = e.target as HTMLElement;
|
||||||
<div className="flex gap-1 item-center select-none text-neutral mt-1">
|
target.style.display = "none";
|
||||||
<i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
|
}}
|
||||||
<p className="text-sm truncate">{shortendURL}</p>
|
/>
|
||||||
|
) : link.preview === "unavailable" ? (
|
||||||
|
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
|
||||||
|
) : (
|
||||||
|
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
// background:
|
||||||
|
// "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
|
||||||
|
>
|
||||||
|
<LinkIcon link={link} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
|
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
|
||||||
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
|
<div className="p-3 mt-1">
|
||||||
<div className="cursor-pointer w-fit">
|
<p className="truncate w-full pr-8 text-primary">
|
||||||
{collection ? (
|
{unescapeString(link.name || link.description) || link.url}
|
||||||
<LinkCollection link={link} collection={collection} />
|
</p>
|
||||||
) : undefined}
|
|
||||||
</div>
|
|
||||||
<LinkDate link={link} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{showInfo ? (
|
<div title={link.url || ""} className="w-fit">
|
||||||
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
|
<div className="flex gap-1 item-center select-none text-neutral mt-1">
|
||||||
<div
|
<i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
|
||||||
onClick={() => setShowInfo(!showInfo)}
|
<p className="text-sm truncate">{shortendURL}</p>
|
||||||
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
|
|
||||||
>
|
|
||||||
<i className="bi-x text-neutral text-2xl"></i>
|
|
||||||
</div>
|
|
||||||
<p className="text-neutral text-lg font-semibold">Description</p>
|
|
||||||
|
|
||||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
|
||||||
<p>
|
|
||||||
{link.description ? (
|
|
||||||
unescapeString(link.description)
|
|
||||||
) : (
|
|
||||||
<span className="text-neutral text-sm">
|
|
||||||
No description provided.
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
{link.tags[0] ? (
|
|
||||||
<>
|
|
||||||
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
|
||||||
|
|
||||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
|
||||||
|
|
||||||
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
|
||||||
<div className="flex gap-1 items-center flex-wrap">
|
|
||||||
{link.tags.map((e, i) => (
|
|
||||||
<Link
|
|
||||||
href={"/tags/" + e.id}
|
|
||||||
key={i}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
|
||||||
>
|
|
||||||
#{e.name}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
) : undefined}
|
|
||||||
</div>
|
|
||||||
) : undefined}
|
|
||||||
|
|
||||||
<LinkActions
|
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
link={link}
|
|
||||||
collection={collection}
|
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
|
||||||
position="top-[10.75rem] right-3"
|
<div className="cursor-pointer w-fit">
|
||||||
toggleShowInfo={() => setShowInfo(!showInfo)}
|
{collection && (
|
||||||
linkInfo={showInfo}
|
<LinkCollection link={link} collection={collection} />
|
||||||
flipDropdown={flipDropdown}
|
)}
|
||||||
/>
|
</div>
|
||||||
|
<LinkDate link={link} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{showInfo && (
|
||||||
|
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
|
||||||
|
<div
|
||||||
|
onClick={() => setShowInfo(!showInfo)}
|
||||||
|
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
|
||||||
|
>
|
||||||
|
<i className="bi-x text-neutral text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<p className="text-neutral text-lg font-semibold">Description</p>
|
||||||
|
|
||||||
|
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
<p>
|
||||||
|
{link.description ? (
|
||||||
|
unescapeString(link.description)
|
||||||
|
) : (
|
||||||
|
<span className="text-neutral text-sm">
|
||||||
|
No description provided.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{link.tags[0] && (
|
||||||
|
<>
|
||||||
|
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||||
|
|
||||||
|
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
|
||||||
|
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||||
|
<div className="flex gap-1 items-center flex-wrap">
|
||||||
|
{link.tags.map((e, i) => (
|
||||||
|
<Link
|
||||||
|
href={"/tags/" + e.id}
|
||||||
|
key={i}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
||||||
|
>
|
||||||
|
#{e.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<LinkActions
|
||||||
|
link={link}
|
||||||
|
collection={collection}
|
||||||
|
position="top-[10.75rem] right-3"
|
||||||
|
toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||||
|
linkInfo={showInfo}
|
||||||
|
flipDropdown={flipDropdown}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="rounded-2xl cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
||||||
|
{previewAvailable(link) ? (
|
||||||
|
<Image
|
||||||
|
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
|
||||||
|
width={1280}
|
||||||
|
height={720}
|
||||||
|
alt=""
|
||||||
|
className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
|
||||||
|
style={{ filter: "blur(2px)" }}
|
||||||
|
draggable="false"
|
||||||
|
onError={(e) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
target.style.display = "none";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : link.preview === "unavailable" ? (
|
||||||
|
<div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
|
||||||
|
) : (
|
||||||
|
<div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
|
||||||
|
>
|
||||||
|
<LinkIcon link={link} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
|
||||||
|
<div className="p-3 mt-1">
|
||||||
|
<p className="truncate w-full pr-8 text-primary">
|
||||||
|
{unescapeString(link.name || link.description) || link.url}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div title={link.url || ""} className="w-fit">
|
||||||
|
<div className="flex gap-1 item-center select-none text-neutral mt-1">
|
||||||
|
<i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
|
||||||
|
<p className="text-sm truncate">{shortendURL}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
|
||||||
|
<div className="flex justify-between text-xs text-neutral px-3 pb-1">
|
||||||
|
<div className="cursor-pointer w-fit">
|
||||||
|
{collection && (
|
||||||
|
<LinkCollection link={link} collection={collection} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<LinkDate link={link} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showInfo && (
|
||||||
|
<div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
|
||||||
|
<div
|
||||||
|
onClick={() => setShowInfo(!showInfo)}
|
||||||
|
className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
|
||||||
|
>
|
||||||
|
<i className="bi-x text-neutral text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<p className="text-neutral text-lg font-semibold">Description</p>
|
||||||
|
|
||||||
|
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
<p>
|
||||||
|
{link.description ? (
|
||||||
|
unescapeString(link.description)
|
||||||
|
) : (
|
||||||
|
<span className="text-neutral text-sm">
|
||||||
|
No description provided.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{link.tags[0] && (
|
||||||
|
<>
|
||||||
|
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||||
|
|
||||||
|
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
|
||||||
|
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||||
|
<div className="flex gap-1 items-center flex-wrap">
|
||||||
|
{link.tags.map((e, i) => (
|
||||||
|
<Link
|
||||||
|
href={"/tags/" + e.id}
|
||||||
|
key={i}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
||||||
|
>
|
||||||
|
#{e.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<LinkActions
|
||||||
|
link={link}
|
||||||
|
collection={collection}
|
||||||
|
position="top-[10.75rem] right-3"
|
||||||
|
toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||||
|
linkInfo={showInfo}
|
||||||
|
flipDropdown={flipDropdown}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,14 +21,12 @@ type Props = {
|
||||||
count: number;
|
count: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
flipDropdown?: boolean;
|
flipDropdown?: boolean;
|
||||||
showCheckbox?: boolean;
|
|
||||||
editMode?: boolean;
|
editMode?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LinkCardCompact({
|
export default function LinkCardCompact({
|
||||||
link,
|
link,
|
||||||
flipDropdown,
|
flipDropdown,
|
||||||
showCheckbox = true,
|
|
||||||
editMode,
|
editMode,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const { collections } = useCollectionStore();
|
const { collections } = useCollectionStore();
|
||||||
|
|
@ -78,14 +76,20 @@ export default function LinkCardCompact({
|
||||||
|
|
||||||
const [showInfo, setShowInfo] = useState(false);
|
const [showInfo, setShowInfo] = useState(false);
|
||||||
|
|
||||||
|
const selectedStyle = selectedLinks.some((selectedLink) => selectedLink.id === link.id) ? "border border-primary bg-base-300" : "border-transparent";
|
||||||
|
const selectable = editMode && (permissions === true || permissions?.canCreate || permissions?.canDelete);
|
||||||
|
const hoverStyles = !selectable ? "cursor-not-allowed" : "cursor-pointer";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`border-neutral-content relative items-center flex ${
|
className={`${selectedStyle} ${hoverStyles} border relative items-center flex ${!showInfo && !isPWA()
|
||||||
!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
|
? "hover:bg-base-300 p-3"
|
||||||
} duration-200 rounded-lg`}
|
: "py-3"
|
||||||
|
} duration-200 rounded-lg`}
|
||||||
|
onClick={() => selectable && handleCheckboxClick(link)}
|
||||||
>
|
>
|
||||||
{showCheckbox &&
|
{/* {showCheckbox &&
|
||||||
editMode &&
|
editMode &&
|
||||||
(permissions === true ||
|
(permissions === true ||
|
||||||
permissions?.canCreate ||
|
permissions?.canCreate ||
|
||||||
|
|
@ -98,96 +102,142 @@ export default function LinkCardCompact({
|
||||||
)}
|
)}
|
||||||
onChange={() => handleCheckboxClick(link)}
|
onChange={() => handleCheckboxClick(link)}
|
||||||
/>
|
/>
|
||||||
)}
|
)} */}
|
||||||
<Link
|
{!editMode ? (
|
||||||
href={generateLinkHref(link, account)}
|
<>
|
||||||
target="_blank"
|
<Link
|
||||||
className="flex items-center cursor-pointer"
|
href={generateLinkHref(link, account)}
|
||||||
>
|
target="_blank"
|
||||||
<div className="shrink-0">
|
className="flex items-center cursor-pointer"
|
||||||
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
|
>
|
||||||
</div>
|
<div className="shrink-0">
|
||||||
|
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
|
||||||
<div className="w-[calc(100%-56px)] ml-2">
|
|
||||||
<p className="line-clamp-1 mr-8 text-primary">
|
|
||||||
{unescapeString(link.name || link.description) || link.url}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
|
|
||||||
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
|
|
||||||
{collection ? (
|
|
||||||
<LinkCollection link={link} collection={collection} />
|
|
||||||
) : undefined}
|
|
||||||
{link.url ? (
|
|
||||||
<div className="flex items-center gap-1 w-fit text-neutral truncate">
|
|
||||||
<i className="bi-link-45deg text-lg" />
|
|
||||||
<p className="truncate w-full">{shortendURL}</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="badge badge-primary badge-sm my-1">
|
|
||||||
{link.type}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<LinkDate link={link} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<LinkActions
|
<div className="w-[calc(100%-56px)] ml-2">
|
||||||
link={link}
|
<p className="line-clamp-1 mr-8 text-primary">
|
||||||
collection={collection}
|
{unescapeString(link.name || link.description) || link.url}
|
||||||
position="top-3 right-3"
|
</p>
|
||||||
flipDropdown={flipDropdown}
|
|
||||||
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
|
||||||
// linkInfo={showInfo}
|
|
||||||
/>
|
|
||||||
{showInfo ? (
|
|
||||||
<div>
|
|
||||||
<div className="pb-3 mt-1 px-3">
|
|
||||||
<p className="text-neutral text-lg font-semibold">Description</p>
|
|
||||||
|
|
||||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
|
||||||
<p>
|
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
|
||||||
{link.description ? (
|
{collection && (
|
||||||
unescapeString(link.description)
|
<LinkCollection link={link} collection={collection} />
|
||||||
) : (
|
)}
|
||||||
<span className="text-neutral text-sm">
|
{link.url ? (
|
||||||
No description provided.
|
<div className="flex items-center gap-1 w-fit text-neutral truncate">
|
||||||
</span>
|
<i className="bi-link-45deg text-lg" />
|
||||||
)}
|
<p className="truncate w-full">{shortendURL}</p>
|
||||||
</p>
|
</div>
|
||||||
{link.tags[0] ? (
|
) : (
|
||||||
<>
|
<div className="badge badge-primary badge-sm my-1">
|
||||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
{link.type}
|
||||||
Tags
|
</div>
|
||||||
</p>
|
)}
|
||||||
|
<LinkDate link={link} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<LinkActions
|
||||||
|
link={link}
|
||||||
|
collection={collection}
|
||||||
|
position="top-3 right-3"
|
||||||
|
flipDropdown={flipDropdown}
|
||||||
|
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||||
|
// linkInfo={showInfo}
|
||||||
|
/>
|
||||||
|
{showInfo && (
|
||||||
|
<div>
|
||||||
|
<div className="pb-3 mt-1 px-3">
|
||||||
|
<p className="text-neutral text-lg font-semibold">Description</p>
|
||||||
|
|
||||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
|
<p>
|
||||||
|
{link.description ? (
|
||||||
|
unescapeString(link.description)
|
||||||
|
) : (
|
||||||
|
<span className="text-neutral text-sm">
|
||||||
|
No description provided.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{link.tags[0] && (
|
||||||
|
<>
|
||||||
|
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||||
|
Tags
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||||
<div className="flex gap-1 items-center flex-wrap">
|
|
||||||
{link.tags.map((e, i) => (
|
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||||
<Link
|
<div className="flex gap-1 items-center flex-wrap">
|
||||||
href={"/tags/" + e.id}
|
{link.tags.map((e, i) => (
|
||||||
key={i}
|
<Link
|
||||||
onClick={(e) => {
|
href={"/tags/" + e.id}
|
||||||
e.stopPropagation();
|
key={i}
|
||||||
}}
|
onClick={(e) => {
|
||||||
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
e.stopPropagation();
|
||||||
>
|
}}
|
||||||
#{e.name}
|
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
||||||
</Link>
|
>
|
||||||
))}
|
#{e.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) :
|
||||||
|
(
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="flex items-center cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="shrink-0">
|
||||||
|
<LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-[calc(100%-56px)] ml-2">
|
||||||
|
<p className="line-clamp-1 mr-8 text-primary select-none">
|
||||||
|
{unescapeString(link.name || link.description) || link.url}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
|
||||||
|
<div className="flex items-center gap-x-3 w-fit text-neutral flex-wrap">
|
||||||
|
{collection ? (
|
||||||
|
<LinkCollection link={link} collection={collection} />
|
||||||
|
) : undefined}
|
||||||
|
{link.url ? (
|
||||||
|
<div className="flex items-center gap-1 w-fit text-neutral truncate">
|
||||||
|
<i className="bi-link-45deg text-lg" />
|
||||||
|
<p className="truncate w-full select-none">{shortendURL}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="badge badge-primary badge-sm my-1 select-none">
|
||||||
|
{link.type}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<LinkDate link={link} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
) : undefined}
|
</div>
|
||||||
</div>
|
<LinkActions
|
||||||
</div>
|
link={link}
|
||||||
) : undefined}
|
collection={collection}
|
||||||
|
position="top-3 right-3"
|
||||||
|
flipDropdown={flipDropdown}
|
||||||
|
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||||
|
// linkInfo={showInfo}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="divider my-0 last:hidden h-[1px]"></div>
|
<div className="divider my-0 last:hidden h-[1px]"></div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -329,7 +329,7 @@ export default function Index() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
|
<div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
|
||||||
{links.length > 0 && editMode && (
|
{links.length > 0 && editMode && (
|
||||||
<div className="flex gap-3 ml-3">
|
<div className="flex gap-3 ml-3">
|
||||||
<input
|
<input
|
||||||
|
|
@ -355,7 +355,7 @@ export default function Index() {
|
||||||
<button
|
<button
|
||||||
onClick={() => setBulkEditLinksModal(true)}
|
onClick={() => setBulkEditLinksModal(true)}
|
||||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||||
disabled={!editMode}
|
disabled={!editMode || selectedLinks.length === 0}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -368,7 +368,7 @@ export default function Index() {
|
||||||
? bulkDeleteLinks()
|
? bulkDeleteLinks()
|
||||||
: setBulkDeleteLinksModal(true);
|
: setBulkDeleteLinksModal(true);
|
||||||
}}
|
}}
|
||||||
disabled={!editMode}
|
disabled={!editMode || selectedLinks.length === 0}
|
||||||
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
|
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
|
|
|
||||||
|
|
@ -101,7 +101,7 @@ export default function Links() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
|
<div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
|
||||||
{links.length > 0 && editMode && (
|
{links.length > 0 && editMode && (
|
||||||
<div className="flex gap-3 ml-3">
|
<div className="flex gap-3 ml-3">
|
||||||
<input
|
<input
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ export default function PinnedLinks() {
|
||||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||||
const [editMode, setEditMode] = useState(false);
|
const [editMode, setEditMode] = useState(false);
|
||||||
const collectivePermissions = useCollectivePermissions(
|
const collectivePermissions = useCollectivePermissions(
|
||||||
selectedLinks.map((link) => link.collectionId as number)
|
links.map((link) => link.collectionId as number)
|
||||||
);
|
);
|
||||||
|
|
||||||
useLinks({ sort: sortBy });
|
useLinks({ sort: sortBy });
|
||||||
|
|
@ -44,8 +44,7 @@ export default function PinnedLinks() {
|
||||||
|
|
||||||
const bulkDeleteLinks = async () => {
|
const bulkDeleteLinks = async () => {
|
||||||
const load = toast.loading(
|
const load = toast.loading(
|
||||||
`Deleting ${selectedLinks.length} Link${
|
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||||
selectedLinks.length > 1 ? "s" : ""
|
|
||||||
}...`
|
}...`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -57,8 +56,7 @@ export default function PinnedLinks() {
|
||||||
|
|
||||||
response.ok &&
|
response.ok &&
|
||||||
toast.success(
|
toast.success(
|
||||||
`Deleted ${selectedLinks.length} Link${
|
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||||
selectedLinks.length > 1 ? "s" : ""
|
|
||||||
}!`
|
}!`
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -82,18 +80,17 @@ export default function PinnedLinks() {
|
||||||
description={"Pinned Links from your Collections"}
|
description={"Pinned Links from your Collections"}
|
||||||
/>
|
/>
|
||||||
<div className="mt-2 flex items-center justify-end gap-2">
|
<div className="mt-2 flex items-center justify-end gap-2">
|
||||||
{links.length > 0 && (
|
{!(links.length === 0) && (
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setEditMode(!editMode);
|
setEditMode(!editMode);
|
||||||
setSelectedLinks([]);
|
setSelectedLinks([]);
|
||||||
}}
|
}}
|
||||||
className={`btn btn-square btn-sm btn-ghost ${
|
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||||
editMode
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
: "hover:bg-neutral/20"
|
||||||
: "hover:bg-neutral/20"
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,57 +100,53 @@ export default function PinnedLinks() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{editMode && (
|
<div className={editMode ? "w-full flex justify-between items-center min-h-[32px]" : "w-full flex justify-end items-center min-h-[32px]"}>
|
||||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
{links.length > 0 && editMode && (
|
||||||
{links.length > 0 && (
|
<div className="flex gap-3 ml-3">
|
||||||
<div className="flex gap-3 ml-3">
|
<input
|
||||||
<input
|
type="checkbox"
|
||||||
type="checkbox"
|
className="checkbox checkbox-primary"
|
||||||
className="checkbox checkbox-primary"
|
onChange={() => handleSelectAll()}
|
||||||
onChange={() => handleSelectAll()}
|
checked={
|
||||||
checked={
|
selectedLinks.length === links.length && links.length > 0
|
||||||
selectedLinks.length === links.length && links.length > 0
|
}
|
||||||
}
|
/>
|
||||||
/>
|
{selectedLinks.length > 0 ? (
|
||||||
{selectedLinks.length > 0 ? (
|
<span>
|
||||||
<span>
|
{selectedLinks.length}{" "}
|
||||||
{selectedLinks.length}{" "}
|
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
</span>
|
||||||
</span>
|
) : (
|
||||||
) : (
|
<span>Nothing selected</span>
|
||||||
<span>Nothing selected</span>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex gap-3">
|
|
||||||
{selectedLinks.length > 0 &&
|
|
||||||
(collectivePermissions === true ||
|
|
||||||
collectivePermissions?.canUpdate) && (
|
|
||||||
<button
|
|
||||||
onClick={() => setBulkEditLinksModal(true)}
|
|
||||||
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{selectedLinks.length > 0 &&
|
|
||||||
(collectivePermissions === true ||
|
|
||||||
collectivePermissions?.canDelete) && (
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
(document?.activeElement as HTMLElement)?.blur();
|
|
||||||
e.shiftKey
|
|
||||||
? bulkDeleteLinks()
|
|
||||||
: setBulkDeleteLinksModal(true);
|
|
||||||
}}
|
|
||||||
className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{(collectivePermissions === true || collectivePermissions?.canUpdate) && (
|
||||||
|
<button
|
||||||
|
onClick={() => setBulkEditLinksModal(true)}
|
||||||
|
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||||
|
disabled={!editMode || selectedLinks.length === 0}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{(collectivePermissions === true || collectivePermissions?.canDelete) && (
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
(document?.activeElement as HTMLElement)?.blur();
|
||||||
|
e.shiftKey
|
||||||
|
? bulkDeleteLinks()
|
||||||
|
: setBulkDeleteLinksModal(true);
|
||||||
|
}}
|
||||||
|
disabled={!editMode || selectedLinks.length === 0}
|
||||||
|
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
||||||
<LinkComponent editMode={editMode} links={links} />
|
<LinkComponent editMode={editMode} links={links} />
|
||||||
|
|
|
||||||
Ŝarĝante…
Reference in New Issue