format
This commit is contained in:
parent
e2c6993a6d
commit
0a77ee90a7
|
@ -16,7 +16,11 @@ type Props = {
|
||||||
| 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();
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -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) && (
|
||||||
|
|
|
@ -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 ${
|
||||||
|
!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
|
||||||
} duration-200 rounded-lg`}
|
} 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)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -26,7 +26,8 @@ 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 ${
|
||||||
|
viewMode == ViewMode.Card
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
: "hover:bg-neutral/20"
|
: "hover:bg-neutral/20"
|
||||||
}`}
|
}`}
|
||||||
|
@ -36,7 +37,8 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
|
||||||
|
|
||||||
<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 ${
|
||||||
|
viewMode == ViewMode.List
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
: "hover:bg-neutral/20"
|
: "hover:bg-neutral/20"
|
||||||
}`}
|
}`}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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,7 +145,8 @@ 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%, ${
|
||||||
|
settings.theme === "dark" ? "#262626" : "#f3f4f6"
|
||||||
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -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,10 +316,11 @@ 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 ${
|
||||||
|
editMode
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
: "hover:bg-neutral/20"
|
: "hover:bg-neutral/20"
|
||||||
}`}
|
}`}
|
||||||
|
@ -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);
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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,10 +86,11 @@ 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 ${
|
||||||
|
editMode
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
: "hover:bg-neutral/20"
|
: "hover:bg-neutral/20"
|
||||||
}`}
|
}`}
|
||||||
|
@ -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
|
||||||
|
onClose={() => {
|
||||||
setBulkEditLinksModal(false);
|
setBulkEditLinksModal(false);
|
||||||
setEditMode(false);
|
setEditMode(false);
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</MainLayout>
|
</MainLayout>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,10 +86,11 @@ 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 ${
|
||||||
|
editMode
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
: "hover:bg-neutral/20"
|
: "hover:bg-neutral/20"
|
||||||
}`}
|
}`}
|
||||||
|
@ -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
|
||||||
|
onClose={() => {
|
||||||
setBulkEditLinksModal(false);
|
setBulkEditLinksModal(false);
|
||||||
setEditMode(false);
|
setEditMode(false);
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</MainLayout>
|
</MainLayout>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,7 +188,8 @@ 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 ${
|
||||||
|
activeTag?.name.length && activeTag?.name.length > 8
|
||||||
? "dropdown-end"
|
? "dropdown-end"
|
||||||
: ""
|
: ""
|
||||||
}`}
|
}`}
|
||||||
|
@ -235,10 +241,11 @@ 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 ${
|
||||||
|
editMode
|
||||||
? "bg-primary/20 hover:bg-primary/20"
|
? "bg-primary/20 hover:bg-primary/20"
|
||||||
: "hover:bg-neutral/20"
|
: "hover:bg-neutral/20"
|
||||||
}`}
|
}`}
|
||||||
|
@ -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
|
||||||
|
onClose={() => {
|
||||||
setBulkEditLinksModal(false);
|
setBulkEditLinksModal(false);
|
||||||
setEditMode(false);
|
setEditMode(false);
|
||||||
}} />
|
}}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</MainLayout>
|
</MainLayout>
|
||||||
);
|
);
|
||||||
|
|
Ŝarĝante…
Reference in New Issue