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

feat: add month toggle on hover (#3972)

Browse Source 
* Add month toggle on hover

* Lint
This commit is contained in:
Xavier Hocquet 2024-10-01 22:37:05 -05:00 committed by GitHub
parent 4c0c7431c8
commit 32123e0c21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,17 @@ import { Divider, Tooltip } from "@mui/joy";
import clsx from "clsx";
import dayjs from "dayjs";
import { countBy } from "lodash-es";
import { CalendarDaysIcon, CheckCircleIcon, Code2Icon, LinkIcon, ListTodoIcon, MoreVerticalIcon, RefreshCcwIcon } from "lucide-react";
import {
CalendarDaysIcon,
CheckCircleIcon,
ChevronLeftIcon,
ChevronRightIcon,
Code2Icon,
LinkIcon,
ListTodoIcon,
MoreVerticalIcon,
RefreshCcwIcon,
} from "lucide-react";
import { useState } from "react";
import toast from "react-hot-toast";
import { memoServiceClient } from "@/grpcweb";
@ -31,7 +41,7 @@ const UserStatisticsView = () => {
const [memoStats, setMemoStats] = useState<UserMemoStats>({ link: 0, taskList: 0, code: 0, incompleteTasks: 0 });
const [activityStats, setActivityStats] = useState<Record<string, number>>({});
const [selectedDate] = useState(new Date());
const [monthString, setMonthString] = useState(dayjs(selectedDate.toDateString()).format("YYYY-MM"));
const [visibleMonthString, setVisibleMonthString] = useState(dayjs(selectedDate.toDateString()).format("YYYY-MM"));
const days = Math.ceil((Date.now() - currentUser.createTime!.getTime()) / 86400000);
useAsyncEffect(async () => {
@ -79,16 +89,24 @@ const UserStatisticsView = () => {
<div className="w-full mb-1 flex flex-row justify-between items-center">
<div className="relative text-base font-medium leading-6 flex flex-row items-center dark:text-gray-400">
<CalendarDaysIcon className="w-5 h-auto mr-1 opacity-60" strokeWidth={1.5} />
<span>{dayjs(monthString).toDate().toLocaleString(i18n.language, { year: "numeric", month: "long" })}</span>
<span>{dayjs(visibleMonthString).toDate().toLocaleString(i18n.language, { year: "numeric", month: "long" })}</span>
<input
className="inset-0 absolute z-1 opacity-0"
type="month"
value={monthString}
value={visibleMonthString}
onFocus={(e: any) => e.target.showPicker()}
onChange={(e) => setMonthString(e.target.value || dayjs().format("YYYY-MM"))}
onChange={(e) => setVisibleMonthString(e.target.value || dayjs().format("YYYY-MM"))}
/>
</div>
<div className="invisible group-hover:visible flex justify-end items-center">
<ChevronLeftIcon
className="w-4 h-auto shrink-0 opacity-60"
onClick={() => setVisibleMonthString(dayjs(visibleMonthString).subtract(1, "month").format("YYYY-MM"))}
/>
<ChevronRightIcon
className="w-4 h-auto shrink-0 opacity-60"
onClick={() => setVisibleMonthString(dayjs(visibleMonthString).add(1, "month").format("YYYY-MM"))}
/>
<Popover>
<PopoverTrigger>
<MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-60" />
@ -103,7 +121,12 @@ const UserStatisticsView = () => {
</div>
</div>
<div className="w-full">
<ActivityCalendar month={monthString} selectedDate={selectedDate.toDateString()} data={activityStats} onClick={onCalendarClick} />
<ActivityCalendar
month={visibleMonthString}
selectedDate={selectedDate.toDateString()}
data={activityStats}
onClick={onCalendarClick}
/>
{memoAmount > 0 && (
<p className="mt-1 w-full text-xs italic opacity-80">
<span>{memoAmount}</span> memos in <span>{days}</span> {days > 1 ? "days" : "day"}