egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/dev' into tags-in-public-collection

Browse Source
This commit is contained in:
Oliver Schwamb
2024-10-30 12:10:30 +01:00
parent abb73f80bd 8738dd45e9
commit 24d45f8e8e
266 changed files with 18575 additions and 6564 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ModalContent/EditCollectionSharingModal.tsx
+73 -64
View File
@@ -1,15 +1,21 @@
import React, { useEffect, useState } from "react";
import TextInput from "@/components/TextInput";
import useCollectionStore from "@/store/collections";
import toast from "react-hot-toast";
import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
import {
AccountSettings,
CollectionIncludingMembersAndLinkCount,
Member,
} from "@/types/global";
import getPublicUserData from "@/lib/client/getPublicUserData";
import useAccountStore from "@/store/account";
import usePermissions from "@/hooks/usePermissions";
import ProfilePhoto from "../ProfilePhoto";
import addMemberToCollection from "@/lib/client/addMemberToCollection";
import Modal from "../Modal";
import { dropdownTriggerer } from "@/lib/client/utils";
import { useTranslation } from "next-i18next";
import { useUpdateCollection } from "@/hooks/store/collections";
import { useUser } from "@/hooks/store/user";
import CopyButton from "../CopyButton";
type Props = {
onClose: Function;
@@ -20,11 +26,13 @@ export default function EditCollectionSharingModal({
onClose,
activeCollection,
}: Props) {
const { t } = useTranslation();
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
const [submitLoader, setSubmitLoader] = useState(false);
const { updateCollection } = useCollectionStore();
const updateCollection = useUpdateCollection();
const submit = async () => {
if (!submitLoader) {
@@ -33,24 +41,26 @@ export default function EditCollectionSharingModal({
setSubmitLoader(true);
const load = toast.loading("Updating...");
const load = toast.loading(t("updating_collection"));
let response;
await updateCollection.mutateAsync(collection, {
onSettled: (data, error) => {
toast.dismiss(load);
response = await updateCollection(collection as any);
toast.dismiss(load);
if (response.ok) {
toast.success(`Updated!`);
onClose();
} else toast.error(response.data as string);
if (error) {
toast.error(error.message);
} else {
onClose();
toast.success(t("updated"));
}
},
});
setSubmitLoader(false);
}
};
const { account } = useAccountStore();
const { data: user = {} } = useUser();
const permissions = usePermissions(collection.id as number);
const currentURL = new URL(document.URL);
@@ -59,14 +69,9 @@ export default function EditCollectionSharingModal({
const [memberUsername, setMemberUsername] = useState("");
const [collectionOwner, setCollectionOwner] = useState({
id: null as unknown as number,
name: "",
username: "",
image: "",
archiveAsScreenshot: undefined as unknown as boolean,
archiveAsPDF: undefined as unknown as boolean,
});
const [collectionOwner, setCollectionOwner] = useState<
Partial<AccountSettings>
>({});
useEffect(() => {
const fetchOwner = async () => {
@@ -93,7 +98,7 @@ export default function EditCollectionSharingModal({
return (
<Modal toggleModal={onClose}>
<p className="text-xl font-thin">
{permissions === true ? "Share and Collaborate" : "Team"}
{permissions === true ? t("share_and_collaborate") : t("team")}
</p>
<div className="divider mb-3 mt-1"></div>
@@ -101,7 +106,7 @@ export default function EditCollectionSharingModal({
<div className="flex flex-col gap-3">
{permissions === true && (
<div>
<p>Make Public</p>
<p>{t("make_collection_public")}</p>
<label className="label cursor-pointer justify-start gap-2">
<input
@@ -115,12 +120,13 @@ export default function EditCollectionSharingModal({
}
className="checkbox checkbox-primary"
/>
<span className="label-text">Make this a public collection</span>
<span className="label-text">
{t("make_collection_public_checkbox")}
</span>
</label>
<p className="text-neutral text-sm">
This will let <b>Anyone</b> to view this collection and it&apos;s
users.
{t("make_collection_public_desc")}
</p>
</div>
)}
@@ -150,46 +156,36 @@ export default function EditCollectionSharingModal({
</p>
</div>
)}
{collection.isPublic ? (
<div className={permissions === true ? "pl-5" : ""}>
<p className="mb-2">Sharable Link (Click to copy)</p>
<div
onClick={() => {
try {
navigator.clipboard
.writeText(publicCollectionURL)
.then(() => toast.success("Copied!"));
} catch (err) {
console.log(err);
}
}}
className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
>
{collection.isPublic && (
<div>
<p className="mb-2">{t("sharable_link")}</p>
<div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
{publicCollectionURL}
<CopyButton text={publicCollectionURL} />
</div>
</div>
) : null}
)}
{permissions === true && <div className="divider my-3"></div>}
{permissions === true && (
<>
<p>Members</p>
<p>{t("members")}</p>
<div className="flex items-center gap-2">
<TextInput
value={memberUsername || ""}
className="bg-base-200"
placeholder="Username (without the '@')"
placeholder={t("members_username_placeholder")}
onChange={(e) => setMemberUsername(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" &&
addMemberToCollection(
account.username as string,
user.username as string,
memberUsername || "",
collection,
setMemberState
setMemberState,
t
)
}
/>
@@ -197,10 +193,11 @@ export default function EditCollectionSharingModal({
<div
onClick={() =>
addMemberToCollection(
account.username as string,
user.username as string,
memberUsername || "",
collection,
setMemberState
setMemberState,
t
)
}
className="btn btn-accent dark:border-violet-400 text-white btn-square btn-sm h-10 w-10"
@@ -240,7 +237,7 @@ export default function EditCollectionSharingModal({
</div>
</div>
<div>
<p className="text-sm font-bold">Owner</p>
<p className="text-sm font-bold">{t("owner")}</p>
</div>
</div>
</div>
@@ -252,11 +249,11 @@ export default function EditCollectionSharingModal({
.map((e, i) => {
const roleLabel =
e.canCreate && e.canUpdate && e.canDelete
? "Admin"
? t("admin")
: e.canCreate && !e.canUpdate && !e.canDelete
? "Contributor"
? t("contributor")
: !e.canCreate && !e.canUpdate && !e.canDelete
? "Viewer"
? t("viewer")
: undefined;
return (
@@ -294,7 +291,7 @@ export default function EditCollectionSharingModal({
{roleLabel}
<i className="bi-chevron-down"></i>
</div>
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-64 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl mt-1">
<li>
<label
className="label cursor-pointer flex justify-start"
@@ -333,8 +330,12 @@ export default function EditCollectionSharingModal({
}}
/>
<div>
<p className="font-bold">Viewer</p>
<p>Read-only access</p>
<p className="font-bold whitespace-nowrap">
{t("viewer")}
</p>
<p className="whitespace-nowrap">
{t("viewer_desc")}
</p>
</div>
</label>
</li>
@@ -376,8 +377,12 @@ export default function EditCollectionSharingModal({
}}
/>
<div>
<p className="font-bold">Contributor</p>
<p>Can view and create Links</p>
<p className="font-bold whitespace-nowrap">
{t("contributor")}
</p>
<p className="whitespace-nowrap">
{t("contributor_desc")}
</p>
</div>
</label>
</li>
@@ -419,8 +424,12 @@ export default function EditCollectionSharingModal({
}}
/>
<div>
<p className="font-bold">Admin</p>
<p>Full access to all Links</p>
<p className="font-bold whitespace-nowrap">
{t("admin")}
</p>
<p className="whitespace-nowrap">
{t("admin_desc")}
</p>
</div>
</label>
</li>
@@ -437,7 +446,7 @@ export default function EditCollectionSharingModal({
className={
"bi-x text-xl btn btn-sm btn-square btn-ghost text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
}
title="Remove Member"
title={t("remove_member")}
onClick={() => {
const updatedMembers =
collection.members.filter((member) => {
@@ -468,7 +477,7 @@ export default function EditCollectionSharingModal({
className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
onClick={submit}
>
Save Changes
{t("save_changes")}
</button>
)}
</div>