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
+22 -16
View File
@@ -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 && (
@@ -268,7 +271,8 @@ export default function Index() {
<p className="text-neutral text-sm font-semibold">
By {collectionOwner.name}
{activeCollection.members.length > 0 &&
` and ${activeCollection.members.length} others`}.
` and ${activeCollection.members.length} others`}
.
</p>
</div>
</div>
@@ -312,13 +316,14 @@ export default function Index() {
<div
role="button"
onClick={() => {
setEditMode(!editMode)
setSelectedLinks([])
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>
@@ -416,17 +421,18 @@ export default function Index() {
{bulkDeleteLinksModal && (
<BulkDeleteLinksModal
onClose={() => {
setBulkDeleteLinksModal(false)
setEditMode(false)
setBulkDeleteLinksModal(false);
setEditMode(false);
}}
/>
)}
{bulkEditLinksModal && (
<BulkEditLinksModal
onClose={() => {
setBulkEditLinksModal(false)
setEditMode(false)
}} />
setBulkEditLinksModal(false);
setEditMode(false);
}}
/>
)}
</>
)}
+26 -17
View File
@@ -16,18 +16,20 @@ import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
// import GridView from "@/components/LinkViews/Layouts/GridView";
export default function Links() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore();
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
useLinkStore();
const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card
);
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = 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 });
@@ -41,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" : ""
}...`
);
@@ -53,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" : ""
}!`
);
};
@@ -82,13 +86,14 @@ export default function Links() {
<div
role="button"
onClick={() => {
setEditMode(!editMode)
setSelectedLinks([])
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>
@@ -122,7 +127,8 @@ export default function Links() {
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canUpdate) && (
(collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
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>
)}
{selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canDelete) && (
(collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
@@ -163,10 +170,12 @@ export default function Links() {
/>
)}
{bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => {
setBulkEditLinksModal(false);
setEditMode(false);
}} />
<BulkEditLinksModal
onClose={() => {
setBulkEditLinksModal(false);
setEditMode(false);
}}
/>
)}
</MainLayout>
);
+26 -16
View File
@@ -15,7 +15,8 @@ import toast from "react-hot-toast";
// import GridView from "@/components/LinkViews/Layouts/GridView";
export default function PinnedLinks() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore();
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
useLinkStore();
const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card
@@ -27,7 +28,9 @@ export default function PinnedLinks() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = 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 });
@@ -41,7 +44,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" : ""
}...`
);
@@ -53,7 +57,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" : ""
}!`
);
};
@@ -81,13 +86,14 @@ export default function PinnedLinks() {
<div
role="button"
onClick={() => {
setEditMode(!editMode)
setSelectedLinks([])
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>
@@ -121,7 +127,8 @@ export default function PinnedLinks() {
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canUpdate) && (
(collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
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>
)}
{selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canDelete) && (
(collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
@@ -174,10 +182,12 @@ export default function PinnedLinks() {
/>
)}
{bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => {
setBulkEditLinksModal(false);
setEditMode(false);
}} />
<BulkEditLinksModal
onClose={() => {
setBulkEditLinksModal(false);
setEditMode(false);
}}
/>
)}
</MainLayout>
);
+31 -20
View File
@@ -19,7 +19,8 @@ import useCollectivePermissions from "@/hooks/useCollectivePermissions";
export default function Index() {
const router = useRouter();
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore();
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
useLinkStore();
const { tags, updateTag, removeTag } = useTagStore();
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -32,7 +33,9 @@ export default function Index() {
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
const [bulkEditLinksModal, setBulkEditLinksModal] = 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 });
@@ -112,7 +115,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" : ""
}...`
);
@@ -124,7 +128,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" : ""
}!`
);
};
@@ -183,10 +188,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}
@@ -235,13 +241,14 @@ export default function Index() {
<div
role="button"
onClick={() => {
setEditMode(!editMode)
setSelectedLinks([])
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>
@@ -273,7 +280,8 @@ export default function Index() {
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canUpdate) && (
(collectivePermissions === true ||
collectivePermissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
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>
)}
{selectedLinks.length > 0 &&
(collectivePermissions === true || collectivePermissions?.canDelete) && (
(collectivePermissions === true ||
collectivePermissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
@@ -314,10 +323,12 @@ export default function Index() {
/>
)}
{bulkEditLinksModal && (
<BulkEditLinksModal onClose={() => {
setBulkEditLinksModal(false);
setEditMode(false);
}} />
<BulkEditLinksModal
onClose={() => {
setBulkEditLinksModal(false);
setEditMode(false);
}}
/>
)}
</MainLayout>
);