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

keep edit buttons visible

This commit is contained in:
Isaac Wise 2024-02-11 02:02:14 -06:00
parent 0a77ee90a7
commit 5128bd44d8
2 changed files with 110 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -121,8 +121,7 @@ export default function Index() {
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading( const load = toast.loading(
`Deleting ${selectedLinks.length} Link${ `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
selectedLinks.length > 1 ? "s" : ""
}...` }...`
); );
@ -134,8 +133,7 @@ export default function Index() {
response.ok && response.ok &&
toast.success( toast.success(
`Deleted ${selectedLinks.length} Link${ `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
selectedLinks.length > 1 ? "s" : ""
}!` }!`
); );
}; };
@ -145,8 +143,7 @@ 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%, ${ backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${settings.theme === "dark" ? "#262626" : "#f3f4f6"
settings.theme === "dark" ? "#262626" : "#f3f4f6"
} 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`, } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
}} }}
> >
@ -319,8 +316,7 @@ export default function Index() {
setEditMode(!editMode); setEditMode(!editMode);
setSelectedLinks([]); setSelectedLinks([]);
}} }}
className={`btn btn-square btn-sm btn-ghost ${ className={`btn btn-square btn-sm btn-ghost ${editMode
editMode
? "bg-primary/20 hover:bg-primary/20" ? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20" : "hover:bg-neutral/20"
}`} }`}
@ -333,9 +329,8 @@ export default function Index() {
</div> </div>
</div> </div>
{editMode && ( <div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
<div className="w-full flex justify-between items-center min-h-[32px]"> {links.length > 0 && editMode && (
{links.length > 0 && (
<div className="flex gap-3 ml-3"> <div className="flex gap-3 ml-3">
<input <input
type="checkbox" type="checkbox"
@ -345,26 +340,27 @@ export default function Index() {
selectedLinks.length === links.length && links.length > 0 selectedLinks.length === links.length && links.length > 0
} }
/> />
{selectedLinks.length > 0 && ( {selectedLinks.length > 0 ? (
<span> <span>
{selectedLinks.length}{" "} {selectedLinks.length}{" "}
{selectedLinks.length === 1 ? "link" : "links"} selected {selectedLinks.length === 1 ? "link" : "links"} selected
</span> </span>
) : (
<span>Nothing selected</span>
)} )}
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && {(permissions === true || permissions?.canUpdate) && (
(permissions === true || permissions?.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 text-white w-fit ml-auto"
disabled={!editMode}
> >
Edit Edit
</button> </button>
)} )}
{selectedLinks.length > 0 && {(permissions === true || permissions?.canDelete) && (
(permissions === true || permissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur(); (document?.activeElement as HTMLElement)?.blur();
@ -372,14 +368,14 @@ export default function Index() {
? 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" disabled={!editMode}
className="btn btn-sm bg-red-400 hover:bg-red-500 text-white w-fit ml-auto"
> >
Delete Delete
</button> </button>
)} )}
</div> </div>
</div> </div>
)}
{links.some((e) => e.collectionId === Number(router.query.id)) ? ( {links.some((e) => e.collectionId === Number(router.query.id)) ? (
<LinkComponent <LinkComponent

32
pages/links/index.tsx
View File

@ -3,9 +3,9 @@ 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 { Member, Sort, ViewMode } from "@/types/global";
import ViewDropdown from "@/components/ViewDropdown"; import ViewDropdown from "@/components/ViewDropdown";
import CardView from "@/components/LinkViews/Layouts/CardView"; import CardView from "@/components/LinkViews/Layouts/CardView";
import ListView from "@/components/LinkViews/Layouts/ListView"; import ListView from "@/components/LinkViews/Layouts/ListView";
@ -28,7 +28,7 @@ export default function Links() {
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false); const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const collectivePermissions = useCollectivePermissions( const collectivePermissions = useCollectivePermissions(
selectedLinks.map((link) => link.collectionId as number) links.map((link) => link.collectionId as number)
); );
useLinks({ sort: sortBy }); useLinks({ sort: sortBy });
@ -43,8 +43,7 @@ export default function Links() {
const bulkDeleteLinks = async () => { const bulkDeleteLinks = async () => {
const load = toast.loading( const load = toast.loading(
`Deleting ${selectedLinks.length} Link${ `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
selectedLinks.length > 1 ? "s" : ""
}...` }...`
); );
@ -56,8 +55,7 @@ export default function Links() {
response.ok && response.ok &&
toast.success( toast.success(
`Deleted ${selectedLinks.length} Link${ `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
selectedLinks.length > 1 ? "s" : ""
}!` }!`
); );
}; };
@ -71,6 +69,7 @@ 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">
@ -89,8 +88,7 @@ export default function Links() {
setEditMode(!editMode); setEditMode(!editMode);
setSelectedLinks([]); setSelectedLinks([]);
}} }}
className={`btn btn-square btn-sm btn-ghost ${ className={`btn btn-square btn-sm btn-ghost ${editMode
editMode
? "bg-primary/20 hover:bg-primary/20" ? "bg-primary/20 hover:bg-primary/20"
: "hover:bg-neutral/20" : "hover:bg-neutral/20"
}`} }`}
@ -103,9 +101,8 @@ export default function Links() {
</div> </div>
</div> </div>
{editMode && ( <div className={!editMode ? "w-full flex justify-end items-center min-h-[32px]" : "w-full flex justify-between items-center min-h-[32px]"}>
<div className="w-full flex justify-between items-center min-h-[32px]"> {links.length > 0 && editMode && (
{links.length > 0 && (
<div className="flex gap-3 ml-3"> <div className="flex gap-3 ml-3">
<input <input
type="checkbox" type="checkbox"
@ -126,18 +123,17 @@ export default function Links() {
</div> </div>
)} )}
<div className="flex gap-3"> <div className="flex gap-3">
{selectedLinks.length > 0 && {(collectivePermissions === true ||
(collectivePermissions === true ||
collectivePermissions?.canUpdate) && ( 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" disabled={!editMode}
className="btn btn-sm btn-accent text-white w-fit ml-auto"
> >
Edit Edit
</button> </button>
)} )}
{selectedLinks.length > 0 && {(collectivePermissions === true ||
(collectivePermissions === true ||
collectivePermissions?.canDelete) && ( collectivePermissions?.canDelete) && (
<button <button
onClick={(e) => { onClick={(e) => {
@ -146,6 +142,7 @@ export default function Links() {
? bulkDeleteLinks() ? bulkDeleteLinks()
: setBulkDeleteLinksModal(true); : setBulkDeleteLinksModal(true);
}} }}
disabled={!editMode}
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"
> >
Delete Delete
@ -153,7 +150,6 @@ export default function Links() {
)} )}
</div> </div>
</div> </div>
)}
{links[0] ? ( {links[0] ? (
<LinkComponent editMode={editMode} links={links} /> <LinkComponent editMode={editMode} links={links} />