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

Edit Mode

This commit is contained in:
Isaac Wise 2024-02-10 23:55:00 -06:00
parent 44daffbae6
commit 8ecedf7cae
7 changed files with 91 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/LinkViews/Layouts/CardView.tsx
View File

@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function CardView({ export default function CardView({
links, links,
showCheckbox = true, showCheckbox = true,
editMode
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
showCheckbox?: boolean; showCheckbox?: boolean;
editMode?: boolean;
}) { }) {
return ( return (
<div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5"> <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@ -18,6 +20,7 @@ export default function CardView({
count={i} count={i}
flipDropdown={i === links.length - 1} flipDropdown={i === links.length - 1}
showCheckbox={showCheckbox} showCheckbox={showCheckbox}
editMode={editMode}
/> />
); );
})} })}

4
components/LinkViews/Layouts/ListView.tsx
View File

@ -4,9 +4,11 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function ListView({ export default function ListView({
links, links,
showCheckbox = true, showCheckbox = true,
editMode
}: { }: {
links: LinkIncludingShortenedCollectionAndTags[]; links: LinkIncludingShortenedCollectionAndTags[];
showCheckbox?: boolean; showCheckbox?: boolean;
editMode?: boolean;
}) { }) {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
@ -18,6 +20,8 @@ export default function ListView({
count={i} count={i}
showCheckbox={showCheckbox} showCheckbox={showCheckbox}
flipDropdown={i === links.length - 1} flipDropdown={i === links.length - 1}
editMode={editMode}
/> />
); );
})} })}

4
components/LinkViews/LinkCard.tsx
View File

@ -25,12 +25,14 @@ type Props = {
className?: string; className?: string;
flipDropdown?: boolean; flipDropdown?: boolean;
showCheckbox?: boolean; showCheckbox?: boolean;
editMode?: boolean;
}; };
export default function LinkCard({ export default function LinkCard({
link, link,
flipDropdown, flipDropdown,
showCheckbox = true, showCheckbox = true,
editMode
}: Props) { }: Props) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { account } = useAccountStore(); const { account } = useAccountStore();
@ -101,7 +103,7 @@ 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 && {showCheckbox && editMode &&
(permissions === true || (permissions === true ||
permissions?.canCreate || permissions?.canCreate ||
permissions?.canDelete) && ( permissions?.canDelete) && (

13
components/LinkViews/LinkList.tsx
View File

@ -22,12 +22,14 @@ type Props = {
className?: string; className?: string;
flipDropdown?: boolean; flipDropdown?: boolean;
showCheckbox?: boolean; showCheckbox?: boolean;
editMode?: boolean;
}; };
export default function LinkCardCompact({ export default function LinkCardCompact({
link, link,
flipDropdown, flipDropdown,
showCheckbox = true, showCheckbox = true,
editMode,
}: Props) { }: Props) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { account } = useAccountStore(); const { account } = useAccountStore();
@ -73,11 +75,10 @@ export default function LinkCardCompact({
return ( return (
<> <>
<div <div
className={`border-neutral-content relative items-center flex ${ className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3" } duration-200 rounded-lg`}
} duration-200 rounded-lg`}
> >
{showCheckbox && {showCheckbox && editMode &&
(permissions === true || (permissions === true ||
permissions?.canCreate || permissions?.canCreate ||
permissions?.canDelete) && ( permissions?.canDelete) && (
@ -128,8 +129,8 @@ export default function LinkCardCompact({
collection={collection} collection={collection}
position="top-3 right-3" position="top-3 right-3"
flipDropdown={flipDropdown} flipDropdown={flipDropdown}
// toggleShowInfo={() => setShowInfo(!showInfo)} // toggleShowInfo={() => setShowInfo(!showInfo)}
// linkInfo={showInfo} // linkInfo={showInfo}
/> />
{showInfo ? ( {showInfo ? (
<div> <div>

2
components/SortDropdown.tsx
View File

@ -14,7 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
tabIndex={0} tabIndex={0}
role="button" role="button"
onMouseDown={dropdownTriggerer} onMouseDown={dropdownTriggerer}
className="btn btn-sm btn-square btn-ghost" className="btn btn-sm btn-square btn-ghost border-none"
> >
<i className="bi-chevron-expand text-neutral text-2xl"></i> <i className="bi-chevron-expand text-neutral text-2xl"></i>
</div> </div>

20
components/ViewDropdown.tsx
View File

@ -1,4 +1,4 @@
import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import React, { Dispatch, SetStateAction, useEffect } from "react";
import useLocalSettingsStore from "@/store/localSettings"; import useLocalSettingsStore from "@/store/localSettings";
import { ViewMode } from "@/types/global"; import { ViewMode } from "@/types/global";
@ -26,22 +26,20 @@ 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 ${ className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.Card
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" }`}
}`}
> >
<i className="bi-grid w-4 h-4 text-neutral"></i> <i className="bi-grid w-4 h-4 text-neutral"></i>
</button> </button>
<button <button
onClick={(e) => onChangeViewMode(e, ViewMode.List)} onClick={(e) => onChangeViewMode(e, ViewMode.List)}
className={`btn btn-square btn-sm btn-ghost ${ className={`btn btn-square btn-sm btn-ghost ${viewMode == ViewMode.List
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" }`}
}`}
> >
<i className="bi bi-view-stacked w-4 h-4 text-neutral"></i> <i className="bi bi-view-stacked w-4 h-4 text-neutral"></i>
</button> </button>

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

@ -96,6 +96,7 @@ export default function Index() {
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false); const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
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 [viewMode, setViewMode] = useState<string>( const [viewMode, setViewMode] = useState<string>(
localStorage.getItem("viewMode") || ViewMode.Card localStorage.getItem("viewMode") || ViewMode.Card
@ -120,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" : ""
}...` }...`
); );
@ -133,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" : ""
}!` }!`
); );
}; };
@ -144,9 +143,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%, ${ 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%)`,
}} }}
> >
{activeCollection && ( {activeCollection && (
@ -309,62 +307,77 @@ export default function Index() {
<div className="divider my-0"></div> <div className="divider my-0"></div>
<div className="flex justify-between items-end gap-5"> <div className="flex justify-between items-center gap-5">
<p>Showing {activeCollection?._count?.links} results</p> <p>Showing {activeCollection?._count?.links} results</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div
role="button"
onClick={() => setEditMode(!editMode)}
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>
<SortDropdown sortBy={sortBy} setSort={setSortBy} /> <SortDropdown sortBy={sortBy} setSort={setSortBy} />
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} /> <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
</div> </div>
</div> </div>
<div className="w-full flex justify-between items-center min-h-[32px]"> {editMode && (
{links.length > 0 && ( <div className="w-full flex justify-between items-center min-h-[32px]">
<div className="flex gap-3 ml-3"> {links.length > 0 && (
<input <div className="flex gap-3 ml-3">
type="checkbox" <input
className="checkbox checkbox-primary" type="checkbox"
onChange={() => handleSelectAll()} className="checkbox checkbox-primary"
checked={ onChange={() => handleSelectAll()}
selectedLinks.length === links.length && links.length > 0 checked={
} selectedLinks.length === links.length && links.length > 0
/> }
{selectedLinks.length > 0 && ( />
<span> {selectedLinks.length > 0 && (
{selectedLinks.length}{" "} <span>
{selectedLinks.length === 1 ? "link" : "links"} selected {selectedLinks.length}{" "}
</span> {selectedLinks.length === 1 ? "link" : "links"} selected
)} </span>
)}
</div>
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(permissions === true || permissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
>
Edit
</button>
)}
{selectedLinks.length > 0 &&
(permissions === true || permissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey
? 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"
>
Delete
</button>
)}
</div> </div>
)}
<div className="flex gap-3">
{selectedLinks.length > 0 &&
(permissions === true || permissions?.canUpdate) && (
<button
onClick={() => setBulkEditLinksModal(true)}
className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
>
Edit
</button>
)}
{selectedLinks.length > 0 &&
(permissions === true || permissions?.canDelete) && (
<button
onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
e.shiftKey
? 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"
>
Delete
</button>
)}
</div> </div>
</div>
)}
{links.some((e) => e.collectionId === Number(router.query.id)) ? ( {links.some((e) => e.collectionId === Number(router.query.id)) ? (
<LinkComponent <LinkComponent
editMode={editMode}
links={links.filter( links={links.filter(
(e) => e.collection.id === activeCollection?.id (e) => e.collection.id === activeCollection?.id
)} )}