YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update statistics view

Browse Source
This commit is contained in:
Steven
2024-06-05 08:48:40 +08:00
parent 797f5a123c
commit d0ac866eb1
1 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/components/UserStatisticsView.tsx
View File

@ -15,9 +15,10 @@ interface Props {
} }
interface UserMemoStats { interface UserMemoStats {
links: number; link: number;
todos: number; taskList: number;
code: number; code: number;
incompleteTasks: number;
} }
const UserStatisticsView = (props: Props) => { const UserStatisticsView = (props: Props) => {
@ -27,7 +28,7 @@ const UserStatisticsView = (props: Props) => {
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const [memoAmount, setMemoAmount] = useState(0); const [memoAmount, setMemoAmount] = useState(0);
const [isRequesting, setIsRequesting] = useState(false); const [isRequesting, setIsRequesting] = useState(false);
const [memoStats, setMemoStats] = useState<UserMemoStats>({ links: 0, todos: 0, code: 0 }); const [memoStats, setMemoStats] = useState<UserMemoStats>({ link: 0, taskList: 0, code: 0, incompleteTasks: 0 });
const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000); const days = Math.ceil((Date.now() - user.createTime!.getTime()) / 86400000);
const memos = Object.values(memoStore.getState().memoMapByName); const memos = Object.values(memoStore.getState().memoMapByName);
const filter = filterStore.state; const filter = filterStore.state;
@ -37,17 +38,20 @@ const UserStatisticsView = (props: Props) => {
const { properties } = await memoServiceClient.listMemoProperties({ const { properties } = await memoServiceClient.listMemoProperties({
name: `memos/-`, name: `memos/-`,
}); });
const memoStats: UserMemoStats = { links: 0, todos: 0, code: 0 }; const memoStats: UserMemoStats = { link: 0, taskList: 0, code: 0, incompleteTasks: 0 };
properties.forEach((property) => { properties.forEach((property) => {
if (property.hasLink) { if (property.hasLink) {
memoStats.links += 1; memoStats.link += 1;
} }
if (property.hasTaskList) { if (property.hasTaskList) {
memoStats.todos += 1; memoStats.taskList += 1;
} }
if (property.hasCode) { if (property.hasCode) {
memoStats.code += 1; memoStats.code += 1;
} }
if (property.hasIncompleteTasks) {
memoStats.incompleteTasks += 1;
}
}); });
setMemoStats(memoStats); setMemoStats(memoStats);
setMemoAmount(properties.length); setMemoAmount(properties.length);
@ -94,7 +98,7 @@ const UserStatisticsView = (props: Props) => {
<div className="w-full mt-1 flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap"> <div className="w-full mt-1 flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap">
<div <div
className={clsx( 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", "w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:shadow",
filter.memoPropertyFilter?.hasLink ? "bg-blue-50 dark:bg-blue-900 shadow" : "", filter.memoPropertyFilter?.hasLink ? "bg-blue-50 dark:bg-blue-900 shadow" : "",
)} )}
onClick={() => filterStore.setMemoPropertyFilter({ hasLink: !filter.memoPropertyFilter?.hasLink })} onClick={() => filterStore.setMemoPropertyFilter({ hasLink: !filter.memoPropertyFilter?.hasLink })}
@ -103,11 +107,11 @@ const UserStatisticsView = (props: Props) => {
<Icon.Link className="w-4 h-auto mr-1" /> <Icon.Link className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.links")}</span> <span className="block text-sm">{t("memo.links")}</span>
</div> </div>
<span className="text-sm truncate">{memoStats.links}</span> <span className="text-sm truncate">{memoStats.link}</span>
</div> </div>
<div <div
className={clsx( 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", "w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:shadow",
filter.memoPropertyFilter?.hasTaskList ? "bg-blue-50 dark:bg-blue-900 shadow" : "", filter.memoPropertyFilter?.hasTaskList ? "bg-blue-50 dark:bg-blue-900 shadow" : "",
)} )}
onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: !filter.memoPropertyFilter?.hasTaskList })} onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: !filter.memoPropertyFilter?.hasTaskList })}
@ -116,11 +120,19 @@ const UserStatisticsView = (props: Props) => {
<Icon.CheckCircle className="w-4 h-auto mr-1" /> <Icon.CheckCircle className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.to-do")}</span> <span className="block text-sm">{t("memo.to-do")}</span>
</div> </div>
<span className="text-sm truncate">{memoStats.todos}</span> {memoStats.incompleteTasks > 0 && (
<>
<Tooltip title={"Incomplete tasks"} placement="top" arrow>
<span className="text-sm truncate">{memoStats.taskList - memoStats.incompleteTasks}</span>
</Tooltip>
<span className="text-sm font-mono opacity-50">/</span>
</>
)}
<span className="text-sm truncate">{memoStats.taskList}</span>
</div> </div>
<div <div
className={clsx( 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", "w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:shadow",
filter.memoPropertyFilter?.hasCode ? "bg-blue-50 dark:bg-blue-900 shadow" : "", filter.memoPropertyFilter?.hasCode ? "bg-blue-50 dark:bg-blue-900 shadow" : "",
)} )}
onClick={() => filterStore.setMemoPropertyFilter({ hasCode: !filter.memoPropertyFilter?.hasCode })} onClick={() => filterStore.setMemoPropertyFilter({ hasCode: !filter.memoPropertyFilter?.hasCode })}