xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

format

This commit is contained in:
Isaac Wise 2024-02-11 01:29:11 -06:00
parent e2c6993a6d
commit 0a77ee90a7
15 changed files with 186 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/InputSelect/CollectionSelection.tsx
View File

@ -9,14 +9,18 @@ type Props = {
onChange: any; onChange: any;
showDefaultValue?: boolean; showDefaultValue?: boolean;
defaultValue?: defaultValue?:
| { | {
label: string; label: string;
value?: number; value?: number;
} }
| undefined; | undefined;
}; };
export default function CollectionSelection({ onChange, defaultValue, showDefaultValue = true }: Props) { export default function CollectionSelection({
onChange,
defaultValue,
showDefaultValue = true,
}: Props) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const router = useRouter(); const router = useRouter();
@ -52,7 +56,7 @@ export default function CollectionSelection({ onChange, defaultValue, showDefaul
options={options} options={options}
styles={styles} styles={styles}
defaultValue={showDefaultValue ? defaultValue : null} defaultValue={showDefaultValue ? defaultValue : null}
// menuPosition="fixed" // menuPosition="fixed"
/> />
); );
} }

2
components/LinkViews/Layouts/CardView.tsx
View File

@ -4,7 +4,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function CardView({ export default function CardView({
links, links,
showCheckbox = true, showCheckbox = true,
editMode editMode,
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
showCheckbox?: boolean; showCheckbox?: boolean;

3
components/LinkViews/Layouts/ListView.tsx
View File

@ -4,7 +4,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function ListView({ export default function ListView({
links, links,
showCheckbox = true, showCheckbox = true,
editMode editMode,
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
showCheckbox?: boolean; showCheckbox?: boolean;
@ -21,7 +21,6 @@ export default function ListView({
showCheckbox={showCheckbox} showCheckbox={showCheckbox}
flipDropdown={i === links.length - 1} flipDropdown={i === links.length - 1}
editMode={editMode} editMode={editMode}
/> />
); );
})} })}

5
components/LinkViews/LinkCard.tsx
View File

@ -32,7 +32,7 @@ export default function LinkCard({
link, link,
flipDropdown, flipDropdown,
showCheckbox = true, showCheckbox = true,
editMode editMode,
}: Props) { }: Props) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { account } = useAccountStore(); const { account } = useAccountStore();
@ -103,7 +103,8 @@ export default function LinkCard({
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="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
> >
{showCheckbox && editMode && {showCheckbox &&
editMode &&
(permissions === true || (permissions === true ||
permissions?.canCreate || permissions?.canCreate ||
permissions?.canDelete) && ( permissions?.canDelete) && (

24
components/LinkViews/LinkList.tsx
View File

@ -35,8 +35,12 @@ export default function LinkCardCompact({
const { account } = useAccountStore(); const { account } = useAccountStore();
const { links, setSelectedLinks, selectedLinks } = useLinkStore(); const { links, setSelectedLinks, selectedLinks } = useLinkStore();
const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => { const handleCheckboxClick = (
const linkIndex = selectedLinks.findIndex(selectedLink => selectedLink.id === link.id); link: LinkIncludingShortenedCollectionAndTags
) => {
const linkIndex = selectedLinks.findIndex(
(selectedLink) => selectedLink.id === link.id
);
if (linkIndex !== -1) { if (linkIndex !== -1) {
const updatedLinks = [...selectedLinks]; const updatedLinks = [...selectedLinks];
@ -77,17 +81,21 @@ export default function LinkCardCompact({
return ( return (
<> <>
<div <div
className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3" className={`border-neutral-content relative items-center flex ${
} duration-200 rounded-lg`} !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
} duration-200 rounded-lg`}
> >
{showCheckbox && editMode && {showCheckbox &&
editMode &&
(permissions === true || (permissions === true ||
permissions?.canCreate || permissions?.canCreate ||
permissions?.canDelete) && ( permissions?.canDelete) && (
<input <input
type="checkbox" type="checkbox"
className="checkbox checkbox-primary my-auto mr-2" className="checkbox checkbox-primary my-auto mr-2"
checked={selectedLinks.some(selectedLink => selectedLink.id === link.id)} checked={selectedLinks.some(
(selectedLink) => selectedLink.id === link.id
)}
onChange={() => handleCheckboxClick(link)} onChange={() => handleCheckboxClick(link)}
/> />
)} )}
@ -131,8 +139,8 @@ export default function LinkCardCompact({
collection={collection} collection={collection}
position="top-3 right-3" position="top-3 right-3"
flipDropdown={flipDropdown} flipDropdown={flipDropdown}
// toggleShowInfo={() => setShowInfo(!showInfo)} // toggleShowInfo={() => setShowInfo(!showInfo)}
// linkInfo={showInfo} // linkInfo={showInfo}
/> />
{showInfo ? ( {showInfo ? (
<div> <div>

12
components/ModalContent/BulkEditLinksModal.tsx
View File

@ -34,7 +34,11 @@ export default function BulkEditLinksModal({ onClose }: Props) {
const load = toast.loading("Updating..."); const load = toast.loading("Updating...");
const response = await updateLinks(selectedLinks, removePreviousTags, updatedValues); const response = await updateLinks(
selectedLinks,
removePreviousTags,
updatedValues
);
toast.dismiss(load); toast.dismiss(load);
@ -58,7 +62,10 @@ export default function BulkEditLinksModal({ onClose }: Props) {
<div className="grid sm:grid-cols-2 gap-3"> <div className="grid sm:grid-cols-2 gap-3">
<div> <div>
<p className="mb-2">Collection</p> <p className="mb-2">Collection</p>
<CollectionSelection showDefaultValue={false} onChange={setCollection} /> <CollectionSelection
showDefaultValue={false}
onChange={setCollection}
/>
</div> </div>
<div> <div>
@ -71,7 +78,6 @@ export default function BulkEditLinksModal({ onClose }: Props) {
<input <input
type="checkbox" type="checkbox"
className="checkbox checkbox-primary" className="checkbox checkbox-primary"
checked={removePreviousTags} checked={removePreviousTags}
onChange={(e) => setRemovePreviousTags(e.target.checked)} onChange={(e) => setRemovePreviousTags(e.target.checked)}
/> />

18
components/ViewDropdown.tsx
View File

@ -26,20 +26,22 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
<div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]"> <div className="p-1 flex flex-row gap-1 border border-neutral-content rounded-[0.625rem]">
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.Card)} onClick={(e) => onChangeViewMode(e, ViewMode.Card)}
className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card className={`btn btn-square btn-sm btn-ghost ${
? "bg-primary/20 hover:bg-primary/20" viewMode == ViewMode.Card
: "hover:bg-neutral/20" ? "bg-primary/20 hover:bg-primary/20"
}`} : "hover:bg-neutral/20"
}`}
> >
<i className="bi-grid w-4 h-4 text-neutral"></i> <i className="bi-grid w-4 h-4 text-neutral"></i>
</button> </button>
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.List)} onClick={(e) => onChangeViewMode(e, ViewMode.List)}
className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.List className={`btn btn-square btn-sm btn-ghost ${
? "bg-primary/20 hover:bg-primary/20" viewMode == ViewMode.List
: "hover:bg-neutral/20" ? "bg-primary/20 hover:bg-primary/20"
}`} : "hover:bg-neutral/20"
}`}
> >
<i className="bi bi-view-stacked w-4 h-4 text-neutral"></i> <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
</button> </button>

42
hooks/useCollectivePermissions.ts
View File

@ -4,31 +4,31 @@ import { Member } from "@/types/global";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function useCollectivePermissions(collectionIds: number[]) { export default function useCollectivePermissions(collectionIds: number[]) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { account } = useAccountStore(); const { account } = useAccountStore();
const [permissions, setPermissions] = useState<Member | true>(); const [permissions, setPermissions] = useState<Member | true>();
useEffect(() => { useEffect(() => {
for (const collectionId of collectionIds) { for (const collectionId of collectionIds) {
const collection = collections.find((e) => e.id === collectionId); const collection = collections.find((e) => e.id === collectionId);
if (collection) { if (collection) {
let getPermission: Member | undefined = collection.members.find( let getPermission: Member | undefined = collection.members.find(
(e) => e.userId === account.id (e) => e.userId === account.id
); );
if ( if (
getPermission?.canCreate === false && getPermission?.canCreate === false &&
getPermission?.canUpdate === false && getPermission?.canUpdate === false &&
getPermission?.canDelete === false getPermission?.canDelete === false
) )
getPermission = undefined; getPermission = undefined;
setPermissions(account.id === collection.ownerId || getPermission); setPermissions(account.id === collection.ownerId || getPermission);
} }
} }
}, [account, collections, collectionIds]); }, [account, collections, collectionIds]);
return permissions; return permissions;
} }

5
hooks/useLinks.tsx
View File

@ -18,7 +18,8 @@ export default function useLinks(
searchByTextContent, searchByTextContent,
}: LinkRequestQuery = { sort: 0 } }: LinkRequestQuery = { sort: 0 }
) { ) {
const { links, setLinks, resetLinks, selectedLinks, setSelectedLinks } = useLinkStore(); const { links, setLinks, resetLinks, selectedLinks, setSelectedLinks } =
useLinkStore();
const router = useRouter(); const router = useRouter();
const { reachedBottom, setReachedBottom } = useDetectPageBottom(); const { reachedBottom, setReachedBottom } = useDetectPageBottom();
@ -70,7 +71,7 @@ export default function useLinks(
useEffect(() => { useEffect(() => {
// Save the selected links before resetting the links // Save the selected links before resetting the links
// and then restore the selected links after resetting the links // and then restore the selected links after resetting the links
const previouslySelected = selectedLinks const previouslySelected = selectedLinks;
resetLinks(); resetLinks();
setSelectedLinks(previouslySelected); setSelectedLinks(previouslySelected);

2
hooks/usePermissions.tsx
View File

@ -29,4 +29,4 @@ export default function usePermissions(collectionId: number) {
}, [account, collections, collectionId]); }, [account, collections, collectionId]);
return permissions; return permissions;
} }

38
pages/collections/[id].tsx
View File

@ -121,7 +121,8 @@ export default function Index() {
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading( 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 && response.ok &&
toast.success( 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 <div
className="h-[60rem] p-5 flex gap-3 flex-col" className="h-[60rem] p-5 flex gap-3 flex-col"
style={{ style={{
backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6" backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`, settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}} }}
> >
{activeCollection && ( {activeCollection && (
@ -268,7 +271,8 @@ export default function Index() {
<p className="text-neutral text-sm font-semibold"> <p className="text-neutral text-sm font-semibold">
By {collectionOwner.name} By {collectionOwner.name}
{activeCollection.members.length > 0 && {activeCollection.members.length > 0 &&
` and ${activeCollection.members.length} others`}. ` and ${activeCollection.members.length} others`}
.
</p> </p>
</div> </div>
</div> </div>
@ -312,13 +316,14 @@ export default function Index() {
<div <div
role="button" role="button"
onClick={() => { onClick={() => {
setEditMode(!editMode) setEditMode(!editMode);
setSelectedLinks([]) setSelectedLinks([]);
}} }}
className={`btn btn-square btn-sm btn-ghost ${editMode className={`btn btn-square btn-sm btn-ghost ${
? "bg-primary/20 hover:bg-primary/20" editMode
: "hover:bg-neutral/20" ? "bg-primary/20 hover:bg-primary/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>
@ -416,17 +421,18 @@ export default function Index() {
{bulkDeleteLinksModal && ( {bulkDeleteLinksModal && (
<BulkDeleteLinksModal <BulkDeleteLinksModal
onClose={() => { onClose={() => {
setBulkDeleteLinksModal(false) setBulkDeleteLinksModal(false);
setEditMode(false) setEditMode(false);
}} }}
/> />
)} )}
{bulkEditLinksModal && ( {bulkEditLinksModal && (
<BulkEditLinksModal <BulkEditLinksModal
onClose={() => { onClose={() => {
setBulkEditLinksModal(false) setBulkEditLinksModal(false);
setEditMode(false) setEditMode(false);
}} /> }}
/>
)} )}
</> </>
)} )}

43
pages/links/index.tsx
View File

@ -16,18 +16,20 @@ import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
export default function Links() { export default function Links() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore(); const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
useLinkStore();
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card localStorage.getItem("viewMode") || ViewMode.Card
); );
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const collectivePermissions = useCollectivePermissions(selectedLinks.map((link) => link.collectionId as number)); const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number)
);
useLinks({ sort: sortBy }); useLinks({ sort: sortBy });
@ -41,7 +43,8 @@ export default function Links() {
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading( const load = toast.loading(
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" `Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}...` }...`
); );
@ -53,7 +56,8 @@ export default function Links() {
response.ok && response.ok &&
toast.success( toast.success(
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" `Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}!` }!`
); );
}; };
@ -82,13 +86,14 @@ export default function Links() {
<div <div
role="button" role="button"
onClick={() => { onClick={() => {
setEditMode(!editMode) setEditMode(!editMode);
setSelectedLinks([]) setSelectedLinks([]);
}} }}
className={`btn btn-square btn-sm btn-ghost ${editMode className={`btn btn-square btn-sm btn-ghost ${
? "bg-primary/20 hover:bg-primary/20" editMode
: "hover:bg-neutral/20" ? "bg-primary/20 hover:bg-primary/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>
@ -122,7 +127,8 @@ export default function Links() {
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && {selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canUpdate) && ( (collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto" className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
@ -131,7 +137,8 @@ export default function Links() {
</button> </button>
)} )}
{selectedLinks.length > 0 && {selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canDelete) && ( (collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
@ -163,10 +170,12 @@ export default function Links() {
/> />
)} )}
{bulkEditLinksModal && ( {bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => { <BulkEditLinksModal
setBulkEditLinksModal(false); onClose={() => {
setEditMode(false); setBulkEditLinksModal(false);
}} /> setEditMode(false);
}}
/>
)} )}
</MainLayout> </MainLayout>
); );

42
pages/links/pinned.tsx
View File

@ -15,7 +15,8 @@ import toast from "react-hot-toast";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
export default function PinnedLinks() { export default function PinnedLinks() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore(); const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
useLinkStore();
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card localStorage.getItem("viewMode") || ViewMode.Card
@ -27,7 +28,9 @@ export default function PinnedLinks() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const collectivePermissions = useCollectivePermissions(selectedLinks.map((link) => link.collectionId as number)); const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number)
);
useLinks({ sort: sortBy }); useLinks({ sort: sortBy });
@ -41,7 +44,8 @@ export default function PinnedLinks() {
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading( const load = toast.loading(
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" `Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}...` }...`
); );
@ -53,7 +57,8 @@ export default function PinnedLinks() {
response.ok && response.ok &&
toast.success( toast.success(
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" `Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}!` }!`
); );
}; };
@ -81,13 +86,14 @@ export default function PinnedLinks() {
<div <div
role="button" role="button"
onClick={() => { onClick={() => {
setEditMode(!editMode) setEditMode(!editMode);
setSelectedLinks([]) setSelectedLinks([]);
}} }}
className={`btn btn-square btn-sm btn-ghost ${editMode className={`btn btn-square btn-sm btn-ghost ${
? "bg-primary/20 hover:bg-primary/20" editMode
: "hover:bg-neutral/20" ? "bg-primary/20 hover:bg-primary/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>
@ -121,7 +127,8 @@ export default function PinnedLinks() {
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && {selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canUpdate) && ( (collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto" className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
@ -130,7 +137,8 @@ export default function PinnedLinks() {
</button> </button>
)} )}
{selectedLinks.length > 0 && {selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canDelete) && ( (collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
@ -174,10 +182,12 @@ export default function PinnedLinks() {
/> />
)} )}
{bulkEditLinksModal && ( {bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => { <BulkEditLinksModal
setBulkEditLinksModal(false); onClose={() => {
setEditMode(false); setBulkEditLinksModal(false);
}} /> setEditMode(false);
}}
/>
)} )}
</MainLayout> </MainLayout>
); );

51
pages/tags/[id].tsx
View File

@ -19,7 +19,8 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
export default function Index() { export default function Index() {
const router = useRouter(); const router = useRouter();
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore(); const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
useLinkStore();
const { tags, updateTag, removeTag } = useTagStore(); const { tags, updateTag, removeTag } = useTagStore();
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@ -32,7 +33,9 @@ export default function Index() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false); const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const collectivePermissions = useCollectivePermissions(selectedLinks.map((link) => link.collectionId as number)); const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number)
);
useLinks({ tagId: Number(router.query.id), sort: sortBy }); useLinks({ tagId: Number(router.query.id), sort: sortBy });
@ -112,7 +115,8 @@ export default function Index() {
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading( const load = toast.loading(
`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" `Deleting ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}...` }...`
); );
@ -124,7 +128,8 @@ export default function Index() {
response.ok && response.ok &&
toast.success( toast.success(
`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : "" `Deleted ${selectedLinks.length} Link${
selectedLinks.length > 1 ? "s" : ""
}!` }!`
); );
}; };
@ -183,10 +188,11 @@ export default function Index() {
</p> </p>
<div className="relative"> <div className="relative">
<div <div
className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8 className={`dropdown dropdown-bottom font-normal ${
? "dropdown-end" activeTag?.name.length && activeTag?.name.length > 8
: "" ? "dropdown-end"
}`} : ""
}`}
> >
<div <div
tabIndex={0} tabIndex={0}
@ -235,13 +241,14 @@ export default function Index() {
<div <div
role="button" role="button"
onClick={() => { onClick={() => {
setEditMode(!editMode) setEditMode(!editMode);
setSelectedLinks([]) setSelectedLinks([]);
}} }}
className={`btn btn-square btn-sm btn-ghost ${editMode className={`btn btn-square btn-sm btn-ghost ${
? "bg-primary/20 hover:bg-primary/20" editMode
: "hover:bg-neutral/20" ? "bg-primary/20 hover:bg-primary/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>
@ -273,7 +280,8 @@ export default function Index() {
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && {selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canUpdate) && ( (collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button <button
onClick={() => setBulkEditLinksModal(true)} onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto" className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
@ -282,7 +290,8 @@ export default function Index() {
</button> </button>
)} )}
{selectedLinks.length > 0 && {selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canDelete) && ( (collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
@ -314,10 +323,12 @@ export default function Index() {
/> />
)} )}
{bulkEditLinksModal && ( {bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => { <BulkEditLinksModal
setBulkEditLinksModal(false); onClose={() => {
setEditMode(false); setBulkEditLinksModal(false);
}} /> setEditMode(false);
}}
/>
)} )}
</MainLayout> </MainLayout>
); );

10
store/links.ts
View File

@ -151,11 +151,11 @@ const useLinkStore = create<LinkStore>()((set) => ({
links: state.links.map((e) => links: state.links.map((e) =>
links.some((link) => link.id === e.id) links.some((link) => link.id === e.id)
? { ? {
...e, ...e,
tags: removePreviousTags tags: removePreviousTags
? [...(newData.tags ?? [])] ? [...(newData.tags ?? [])]
: [...e.tags, ...(newData.tags ?? [])], : [...e.tags, ...(newData.tags ?? [])],
} }
: e : e
), ),
})); }));