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

improvements

This commit is contained in:
daniel31x13 2024-02-13 10:55:51 -05:00
parent 558ba11db7
commit 0b2e78332a
7 changed files with 163 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/LinkViews/LinkCard.tsx
View File

@ -18,6 +18,7 @@ import useOnScreen from "@/hooks/useOnScreen";
import { generateLinkHref } from "@/lib/client/generateLinkHref"; import { generateLinkHref } from "@/lib/client/generateLinkHref";
import useAccountStore from "@/store/account"; import useAccountStore from "@/store/account";
import usePermissions from "@/hooks/usePermissions"; import usePermissions from "@/hooks/usePermissions";
import toast from "react-hot-toast";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
@ -97,15 +98,25 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
) )
? "border-primary bg-base-300" ? "border-primary bg-base-300"
: "border-neutral-content"; : "border-neutral-content";
const selectable = const selectable =
editMode && editMode &&
(permissions === true || permissions?.canCreate || permissions?.canDelete); (permissions === true || permissions?.canCreate || permissions?.canDelete);
// const unselectableStyle =
// editMode && !selectable ? "pointer-events-none" : "";
return ( return (
<div <div
ref={ref} ref={ref}
className={`${selectedStyle} 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)} onClick={() =>
selectable
? handleCheckboxClick(link)
: toast.error(
"You don't have permission to edit or delete this item."
)
}
> >
{!editMode ? ( {!editMode ? (
<> <>

2
components/LinkViews/LinkList.tsx
View File

@ -49,7 +49,6 @@ export default function LinkCardCompact({
} }
}; };
let shortendURL; let shortendURL;
try { try {
@ -82,6 +81,7 @@ export default function LinkCardCompact({
) )
? "border border-primary bg-base-300" ? "border border-primary bg-base-300"
: "border-transparent"; : "border-transparent";
const selectable = const selectable =
editMode && editMode &&
(permissions === true || permissions?.canCreate || permissions?.canDelete); (permissions === true || permissions?.canCreate || permissions?.canDelete);

9
components/ModalContent/EditCollectionSharingModal.tsx
View File

@ -234,11 +234,8 @@ export default function EditCollectionSharingModal({
: undefined; : undefined;
return ( return (
<> <React.Fragment key={i}>
<div <div className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none">
key={i}
className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none"
>
<div <div
className={"flex items-center justify-between w-full"} className={"flex items-center justify-between w-full"}
> >
@ -433,7 +430,7 @@ export default function EditCollectionSharingModal({
</div> </div>
</div> </div>
<div className="divider my-0 last:hidden h-[3px]"></div> <div className="divider my-0 last:hidden h-[3px]"></div>
</> </React.Fragment>
); );
})} })}
</div> </div>

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

@ -97,6 +97,11 @@ 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);
useEffect(() => {
return () => {
setEditMode(false);
};
}, [router]);
const [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card localStorage.getItem("viewMode") || ViewMode.Card
@ -359,29 +364,31 @@ export default function Index() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{(permissions === true || permissions?.canUpdate) && ( <button
<button onClick={() => setBulkEditLinksModal(true)}
onClick={() => setBulkEditLinksModal(true)} className="btn btn-sm btn-accent text-white w-fit ml-auto"
className="btn btn-sm btn-accent text-white w-fit ml-auto" disabled={
disabled={selectedLinks.length === 0} selectedLinks.length === 0 ||
> !(permissions === true || permissions?.canUpdate)
Edit }
</button> >
)} Edit
{(permissions === true || permissions?.canDelete) && ( </button>
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
e.shiftKey e.shiftKey
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : 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" 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} disabled={
> selectedLinks.length === 0 ||
Delete !(permissions === true || permissions?.canDelete)
</button> }
)} >
Delete
</button>
</div> </div>
</div> </div>
)} )}

66
pages/links/index.tsx
View File

@ -14,6 +14,7 @@ import toast from "react-hot-toast";
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal"; import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal"; import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import { useRouter } from "next/router";
export default function Links() { export default function Links() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@ -24,9 +25,17 @@ export default function Links() {
); );
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst); const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
const router = useRouter();
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);
useEffect(() => {
return () => {
setEditMode(false);
};
}, [router]);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number) selectedLinks.map((link) => link.collectionId as number)
); );
@ -71,7 +80,6 @@ export default function Links() {
// @ts-ignore // @ts-ignore
const LinkComponent = linkView[viewMode]; const LinkComponent = linkView[viewMode];
console.log(collectivePermissions);
return ( return (
<MainLayout> <MainLayout>
<div className="p-5 flex flex-col gap-5 w-full h-full"> <div className="p-5 flex flex-col gap-5 w-full h-full">
@ -127,31 +135,37 @@ export default function Links() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{(collectivePermissions === true || <button
collectivePermissions?.canUpdate) && ( onClick={() => setBulkEditLinksModal(true)}
<button className="btn btn-sm btn-accent text-white w-fit ml-auto"
onClick={() => setBulkEditLinksModal(true)} disabled={
className="btn btn-sm btn-accent text-white w-fit ml-auto" selectedLinks.length === 0 ||
disabled={selectedLinks.length === 0} !(
> collectivePermissions === true ||
Edit collectivePermissions?.canUpdate
</button> )
)} }
{(collectivePermissions === true || >
collectivePermissions?.canDelete) && ( Edit
<button </button>
onClick={(e) => { <button
(document?.activeElement as HTMLElement)?.blur(); onClick={(e) => {
e.shiftKey (document?.activeElement as HTMLElement)?.blur();
? bulkDeleteLinks() e.shiftKey
: setBulkDeleteLinksModal(true); ? 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} 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={
Delete selectedLinks.length === 0 ||
</button> !(
)} collectivePermissions === true ||
collectivePermissions?.canDelete
)
}
>
Delete
</button>
</div> </div>
</div> </div>
)} )}

66
pages/links/pinned.tsx
View File

@ -2,7 +2,7 @@ import SortDropdown from "@/components/SortDropdown";
import useLinks from "@/hooks/useLinks"; import useLinks from "@/hooks/useLinks";
import MainLayout from "@/layouts/MainLayout"; import MainLayout from "@/layouts/MainLayout";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import PageHeader from "@/components/PageHeader"; import PageHeader from "@/components/PageHeader";
import { Sort, ViewMode } from "@/types/global"; import { Sort, ViewMode } from "@/types/global";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
@ -13,6 +13,7 @@ import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
import useCollectivePermissions from "@/hooks/useCollectivePermissions"; import useCollectivePermissions from "@/hooks/useCollectivePermissions";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
// import GridView from "@/components/LinkViews/Layouts/GridView"; // import GridView from "@/components/LinkViews/Layouts/GridView";
import { useRouter } from "next/router";
export default function PinnedLinks() { export default function PinnedLinks() {
const { links, selectedLinks, deleteLinksById, setSelectedLinks } = const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
@ -25,9 +26,16 @@ export default function PinnedLinks() {
useLinks({ sort: sortBy, pinnedOnly: true }); useLinks({ sort: sortBy, pinnedOnly: true });
const router = useRouter();
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);
useEffect(() => {
return () => {
setEditMode(false);
};
}, [router]);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number) selectedLinks.map((link) => link.collectionId as number)
); );
@ -124,31 +132,37 @@ export default function PinnedLinks() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{(collectivePermissions === true || <button
collectivePermissions?.canUpdate) && ( onClick={() => setBulkEditLinksModal(true)}
<button className="btn btn-sm btn-accent text-white w-fit ml-auto"
onClick={() => setBulkEditLinksModal(true)} disabled={
className="btn btn-sm btn-accent text-white w-fit ml-auto" selectedLinks.length === 0 ||
disabled={selectedLinks.length === 0} !(
> collectivePermissions === true ||
Edit collectivePermissions?.canUpdate
</button> )
)} }
{(collectivePermissions === true || >
collectivePermissions?.canDelete) && ( Edit
<button </button>
onClick={(e) => { <button
(document?.activeElement as HTMLElement)?.blur(); onClick={(e) => {
e.shiftKey (document?.activeElement as HTMLElement)?.blur();
? bulkDeleteLinks() e.shiftKey
: setBulkDeleteLinksModal(true); ? 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} 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={
Delete selectedLinks.length === 0 ||
</button> !(
)} collectivePermissions === true ||
collectivePermissions?.canDelete
)
}
>
Delete
</button>
</div> </div>
</div> </div>
)} )}

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

@ -33,6 +33,12 @@ 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);
useEffect(() => {
return () => {
setEditMode(false);
};
}, [router]);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number) selectedLinks.map((link) => link.collectionId as number)
); );
@ -283,31 +289,37 @@ export default function Index() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{(collectivePermissions === true || <button
collectivePermissions?.canUpdate) && ( onClick={() => setBulkEditLinksModal(true)}
<button className="btn btn-sm btn-accent text-white w-fit ml-auto"
onClick={() => setBulkEditLinksModal(true)} disabled={
className="btn btn-sm btn-accent text-white w-fit ml-auto" selectedLinks.length === 0 ||
disabled={selectedLinks.length === 0} !(
> collectivePermissions === true ||
Edit collectivePermissions?.canUpdate
</button> )
)} }
{(collectivePermissions === true || >
collectivePermissions?.canDelete) && ( Edit
<button </button>
onClick={(e) => { <button
(document?.activeElement as HTMLElement)?.blur(); onClick={(e) => {
e.shiftKey (document?.activeElement as HTMLElement)?.blur();
? bulkDeleteLinks() e.shiftKey
: setBulkDeleteLinksModal(true); ? 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} 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={
Delete selectedLinks.length === 0 ||
</button> !(
)} collectivePermissions === true ||
collectivePermissions?.canDelete
)
}
>
Delete
</button>
</div> </div>
</div> </div>
)} )}