final polishing
This commit is contained in:
daniel31x13
parent
a3c487d074
commit
155c77cbc4
|
|
@ -27,11 +27,7 @@ type Props = {
|
|||
editMode?: boolean;
|
||||
};
|
||||
|
||||
export default function LinkCard({
|
||||
link,
|
||||
flipDropdown,
|
||||
editMode,
|
||||
}: Props) {
|
||||
export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
const { collections } = useCollectionStore();
|
||||
const { account } = useAccountStore();
|
||||
|
||||
|
|
@ -96,17 +92,21 @@ export default function LinkCard({
|
|||
|
||||
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";
|
||||
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);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`${selectedStyle} ${hoverStyles} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
|
||||
className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative`}
|
||||
onClick={() => selectable && handleCheckboxClick(link)}
|
||||
>
|
||||
|
||||
{!editMode ? (
|
||||
<>
|
||||
<Link
|
||||
|
|
@ -134,9 +134,7 @@ export default function LinkCard({
|
|||
) : (
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -190,7 +188,9 @@ export default function LinkCard({
|
|||
</p>
|
||||
{link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||
<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]" />
|
||||
|
||||
|
|
@ -226,9 +226,7 @@ export default function LinkCard({
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="rounded-2xl cursor-pointer"
|
||||
>
|
||||
<div className="rounded-2xl cursor-pointer">
|
||||
<div className="relative rounded-t-2xl h-40 overflow-hidden">
|
||||
{previewAvailable(link) ? (
|
||||
<Image
|
||||
|
|
@ -249,9 +247,7 @@ export default function LinkCard({
|
|||
) : (
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -305,7 +301,9 @@ export default function LinkCard({
|
|||
</p>
|
||||
{link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||
<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]" />
|
||||
|
||||
|
|
|
|||
|
|
@ -76,17 +76,21 @@ export default function LinkCardCompact({
|
|||
|
||||
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";
|
||||
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);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`${selectedStyle} ${hoverStyles} border relative items-center flex ${!showInfo && !isPWA()
|
||||
? "hover:bg-base-300 p-3"
|
||||
: "py-3"
|
||||
} duration-200 rounded-lg`}
|
||||
className={`${selectedStyle} border relative items-center flex ${
|
||||
!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
|
||||
} duration-200 rounded-lg`}
|
||||
onClick={() => selectable && handleCheckboxClick(link)}
|
||||
>
|
||||
{/* {showCheckbox &&
|
||||
|
|
@ -144,13 +148,15 @@ export default function LinkCardCompact({
|
|||
collection={collection}
|
||||
position="top-3 right-3"
|
||||
flipDropdown={flipDropdown}
|
||||
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
// linkInfo={showInfo}
|
||||
// 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>
|
||||
<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>
|
||||
|
|
@ -192,51 +198,50 @@ export default function LinkCardCompact({
|
|||
</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="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="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 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>
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-3 right-3"
|
||||
flipDropdown={flipDropdown}
|
||||
</div>
|
||||
<LinkActions
|
||||
link={link}
|
||||
collection={collection}
|
||||
position="top-3 right-3"
|
||||
flipDropdown={flipDropdown}
|
||||
// toggleShowInfo={() => setShowInfo(!showInfo)}
|
||||
// linkInfo={showInfo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="divider my-0 last:hidden h-[1px]"></div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -23,15 +23,16 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
|
|||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
if (response.ok) {
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}`
|
||||
);
|
||||
|
||||
setSelectedLinks([]);
|
||||
onClose();
|
||||
setSelectedLinks([]);
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -44,24 +44,25 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
|
||||
if (response.ok) {
|
||||
toast.success(`Updated!`);
|
||||
setSelectedLinks([]);
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
setSelectedLinks([]);
|
||||
setSubmitLoader(false);
|
||||
onClose();
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Edit Link</p>
|
||||
<p className="text-xl font-thin">
|
||||
Edit {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
|
||||
</p>
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
<div className="mt-5">
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Collection</p>
|
||||
<p className="mb-2">Move to Collection</p>
|
||||
<CollectionSelection
|
||||
showDefaultValue={false}
|
||||
onChange={setCollection}
|
||||
|
|
@ -69,12 +70,12 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Tags</p>
|
||||
<p className="mb-2">Add Tags</p>
|
||||
<TagSelection onChange={setTags} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<label className="flex items-center gap-2">
|
||||
<div className="ml-auto w-1/2 p-3">
|
||||
<label className="flex items-center gap-2 ">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
|
|
|
|||
|
|
@ -121,7 +121,8 @@ export default function Index() {
|
|||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
|
|
@ -133,7 +134,8 @@ export default function Index() {
|
|||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
|
@ -143,8 +145,9 @@ export default function Index() {
|
|||
<div
|
||||
className="h-[60rem] p-5 flex gap-3 flex-col"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
||||
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
||||
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
|
||||
settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
||||
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
||||
}}
|
||||
>
|
||||
{activeCollection && (
|
||||
|
|
@ -309,21 +312,25 @@ export default function Index() {
|
|||
<div className="flex justify-between items-center gap-5">
|
||||
<p>Showing {activeCollection?._count?.links} results</p>
|
||||
<div className="flex items-center gap-2">
|
||||
{links.length > 0 && (permissions === true || permissions?.canUpdate || permissions?.canDelete) && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
{links.length > 0 &&
|
||||
(permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
permissions?.canDelete) && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
|
|
@ -352,31 +359,29 @@ export default function Index() {
|
|||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
{(permissions === true ||
|
||||
permissions?.canUpdate) && (
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(permissions === true ||
|
||||
permissions?.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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
{(permissions === true || permissions?.canUpdate) && (
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(permissions === true || permissions?.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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -422,7 +427,6 @@ export default function Index() {
|
|||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -430,7 +434,6 @@ export default function Index() {
|
|||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default function Links() {
|
|||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
links.map((link) => link.collectionId as number)
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
useLinks({ sort: sortBy });
|
||||
|
|
@ -43,7 +43,8 @@ export default function Links() {
|
|||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
|
|
@ -55,7 +56,8 @@ export default function Links() {
|
|||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
|
@ -69,7 +71,7 @@ export default function Links() {
|
|||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
console.log(collectivePermissions)
|
||||
console.log(collectivePermissions);
|
||||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||
|
|
@ -81,17 +83,18 @@ export default function Links() {
|
|||
/>
|
||||
|
||||
<div className="mt-2 flex items-center justify-end gap-2">
|
||||
{links.length > 0 && (collectivePermissions === true || collectivePermissions?.canUpdate || collectivePermissions?.canDelete) && (
|
||||
{links.length > 0 && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
|
|
@ -126,29 +129,29 @@ export default function Links() {
|
|||
<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={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
<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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -163,7 +166,6 @@ export default function Links() {
|
|||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -171,7 +173,6 @@ export default function Links() {
|
|||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -29,11 +29,9 @@ export default function PinnedLinks() {
|
|||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
links.map((link) => link.collectionId as number)
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
useLinks({ sort: sortBy });
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
|
|
@ -44,7 +42,8 @@ export default function PinnedLinks() {
|
|||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
|
|
@ -56,7 +55,8 @@ export default function PinnedLinks() {
|
|||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
|
@ -80,17 +80,18 @@ export default function PinnedLinks() {
|
|||
description={"Pinned Links from your Collections"}
|
||||
/>
|
||||
<div className="mt-2 flex items-center justify-end gap-2">
|
||||
{links.length > 0 && (collectivePermissions === true || collectivePermissions?.canUpdate || collectivePermissions?.canDelete) && (
|
||||
{!(links.length === 0) && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
|
|
@ -125,29 +126,29 @@ export default function PinnedLinks() {
|
|||
<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={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
<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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -174,7 +175,6 @@ export default function PinnedLinks() {
|
|||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -182,7 +182,6 @@ export default function PinnedLinks() {
|
|||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -119,7 +119,8 @@ export default function Index() {
|
|||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
|
|
@ -131,7 +132,8 @@ export default function Index() {
|
|||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
|
@ -190,10 +192,11 @@ export default function Index() {
|
|||
</p>
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8
|
||||
? "dropdown-end"
|
||||
: ""
|
||||
}`}
|
||||
className={`dropdown dropdown-bottom font-normal ${
|
||||
activeTag?.name.length && activeTag?.name.length > 8
|
||||
? "dropdown-end"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
tabIndex={0}
|
||||
|
|
@ -239,21 +242,20 @@ export default function Index() {
|
|||
</div>
|
||||
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
{links.length > 0 && (collectivePermissions === true || collectivePermissions?.canUpdate || collectivePermissions?.canDelete) && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${editMode
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
|
|
@ -283,29 +285,29 @@ export default function Index() {
|
|||
<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={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{(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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
<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"
|
||||
disabled={selectedLinks.length === 0}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -320,7 +322,6 @@ export default function Index() {
|
|||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -328,7 +329,6 @@ export default function Index() {
|
|||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue