usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-11-10 17:02:21 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: update memo filters

Browse source
This commit is contained in:
Steven 2024-06-04 23:03:51 +08:00
parent bddfe00b5c
commit 2b49025f4a
2 changed files with 18 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
web/src/components/MemoFilter.tsx
View file

@ -14,14 +14,7 @@ const MemoFilter = (props: Props) => {
const location = useLocation();
const filterStore = useFilterStore();
const filter = filterStore.state;
const showFilter = Boolean(
filter.tag ||
filter.text ||
filter.visibility ||
filter.memoPropertyFilter?.hasLink ||
filter.memoPropertyFilter?.hasTaskList ||
filter.memoPropertyFilter?.hasCode,
);
const showFilter = Boolean(filter.tag || filter.text || filter.visibility);
useEffect(() => {
filterStore.clearFilter();
@ -75,39 +68,6 @@ const MemoFilter = (props: Props) => {
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.memoPropertyFilter?.hasLink && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoPropertyFilter({ hasLink: false });
}}
>
<Icon.Link className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> Has Link
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.memoPropertyFilter?.hasTaskList && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoPropertyFilter({ hasTaskList: false });
}}
>
<Icon.CheckCircle className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> Has Task
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.memoPropertyFilter?.hasCode && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoPropertyFilter({ hasCode: false });
}}
>
<Icon.Code2 className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> Has Code
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
</div>
);
};

23
web/src/components/UserStatisticsView.tsx
View file

@ -1,4 +1,5 @@
import { Divider, Tooltip } from "@mui/joy";
import clsx from "clsx";
import { useState } from "react";
import toast from "react-hot-toast";
import { memoServiceClient } from "@/grpcweb";
@ -29,6 +30,7 @@ const UserStatisticsView = (props: Props) => {
const [memoStats, setMemoStats] = useState<UserMemoStats>({ links: 0, todos: 0, code: 0 });
const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
const memos = Object.values(memoStore.getState().memoMapByName);
const filter = filterStore.state;
useAsyncEffect(async () => {
setIsRequesting(true);
@ -91,8 +93,11 @@ const UserStatisticsView = (props: Props) => {
<Divider className="!my-1 opacity-50" />
<div className="w-full mt-1 flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap">
<div
className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80"
onClick={() => filterStore.setMemoPropertyFilter({ hasLink: true })}
className={clsx(
"w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80",
filter.memoPropertyFilter?.hasLink ? "bg-blue-50 dark:bg-blue-900 shadow" : "",
)}
onClick={() => filterStore.setMemoPropertyFilter({ hasLink: !filter.memoPropertyFilter?.hasLink })}
>
<div className="w-auto flex justify-start items-center mr-1">
<Icon.Link className="w-4 h-auto mr-1" />
@ -101,8 +106,11 @@ const UserStatisticsView = (props: Props) => {
<span className="text-sm truncate">{memoStats.links}</span>
</div>
<div
className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80"
onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: true })}
className={clsx(
"w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80",
filter.memoPropertyFilter?.hasTaskList ? "bg-blue-50 dark:bg-blue-900 shadow" : "",
)}
onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: !filter.memoPropertyFilter?.hasTaskList })}
>
<div className="w-auto flex justify-start items-center mr-1">
<Icon.CheckCircle className="w-4 h-auto mr-1" />
@ -111,8 +119,11 @@ const UserStatisticsView = (props: Props) => {
<span className="text-sm truncate">{memoStats.todos}</span>
</div>
<div
className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80"
onClick={() => filterStore.setMemoPropertyFilter({ hasCode: true })}
className={clsx(
"w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:opacity-80",
filter.memoPropertyFilter?.hasCode ? "bg-blue-50 dark:bg-blue-900 shadow" : "",
)}
onClick={() => filterStore.setMemoPropertyFilter({ hasCode: !filter.memoPropertyFilter?.hasCode })}
>
<div className="w-auto flex justify-start items-center mr-1">
<Icon.Code2 className="w-4 h-auto mr-1" />