mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: update memo editor
This commit is contained in:
Steven
@ -12,6 +12,7 @@ import { useMemoStore } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import ActivityCalendar from "./ActivityCalendar";
|
||||
import Icon from "./Icon";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/Popover";
|
||||
|
||||
interface UserMemoStats {
|
||||
link: number;
|
||||
@ -26,15 +27,14 @@ const UserStatisticsView = () => {
|
||||
const memoStore = useMemoStore();
|
||||
const filterStore = useFilterStore();
|
||||
const [memoAmount, setMemoAmount] = useState(0);
|
||||
const [isRequesting, setIsRequesting] = useState(false);
|
||||
const [memoStats, setMemoStats] = useState<UserMemoStats>({ link: 0, taskList: 0, code: 0, incompleteTasks: 0 });
|
||||
const [activityStats, setActivityStats] = useState<Record<string, number>>({});
|
||||
const monthString = dayjs(new Date().toDateString()).format("YYYY-MM");
|
||||
const [selectedDate] = useState(new Date());
|
||||
const [monthString, setMonthString] = useState(dayjs(selectedDate.toDateString()).format("YYYY-MM"));
|
||||
const days = Math.ceil((Date.now() - currentUser.createTime!.getTime()) / 86400000);
|
||||
const filter = filterStore.state;
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
setIsRequesting(true);
|
||||
const { properties } = await memoServiceClient.listMemoProperties({
|
||||
name: `memos/-`,
|
||||
});
|
||||
@ -62,7 +62,6 @@ const UserStatisticsView = () => {
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
filter: filters.join(" && "),
|
||||
});
|
||||
|
||||
setActivityStats(
|
||||
Object.fromEntries(
|
||||
Object.entries(stats).filter(([date]) => {
|
||||
@ -70,7 +69,6 @@ const UserStatisticsView = () => {
|
||||
}),
|
||||
),
|
||||
);
|
||||
setIsRequesting(false);
|
||||
}, [memoStore.stateId]);
|
||||
|
||||
const handleRebuildMemoTags = async () => {
|
||||
@ -83,92 +81,94 @@ const UserStatisticsView = () => {
|
||||
|
||||
return (
|
||||
<div className="group w-full border mt-2 py-2 px-3 rounded-lg space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
|
||||
<div className="w-full mb-1 flex flex-row justify-between items-center">
|
||||
<p className="text-sm font-medium leading-6 dark:text-gray-400">
|
||||
{new Date().toLocaleDateString(i18n.language, { month: "long", day: "numeric" })}
|
||||
</p>
|
||||
<div className="group-hover:block hidden">
|
||||
<Tooltip title={"Refresh"} placement="top">
|
||||
<Icon.RefreshCcw
|
||||
className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
|
||||
onClick={handleRebuildMemoTags}
|
||||
/>
|
||||
</Tooltip>
|
||||
<div className="w-full mb-2 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">
|
||||
<Icon.CalendarDays className="w-5 h-auto mr-1 opacity-60" strokeWidth={1.5} />
|
||||
<span>{new Date(monthString).toLocaleString(i18n.language, { year: "numeric", month: "long" })}</span>
|
||||
<input
|
||||
className="inset-0 absolute z-1 opacity-0"
|
||||
type="month"
|
||||
value={monthString}
|
||||
onFocus={(e: any) => e.target.showPicker()}
|
||||
onChange={(e) => setMonthString(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="invisible group-hover:visible flex justify-end items-center">
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Icon.MoreVertical className="w-4 h-auto shrink-0 opacity-60" />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<button className="w-auto flex flex-row justify-between items-center gap-2 hover:opacity-80" onClick={handleRebuildMemoTags}>
|
||||
<Icon.RefreshCcw className="text-gray-400 w-4 h-auto cursor-pointer opacity-60" />
|
||||
<span className="text-sm shrink-0 text-gray-500 dark:text-gray-400">Refresh</span>
|
||||
</button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full pb-2">
|
||||
<ActivityCalendar month={monthString} selectedDate={new Date().toDateString()} data={activityStats} />
|
||||
<div className="w-full">
|
||||
<ActivityCalendar month={monthString} selectedDate={selectedDate.toDateString()} data={activityStats} />
|
||||
{memoAmount > 0 && (
|
||||
<p className="mt-1 w-full text-xs italic opacity-80">
|
||||
<span>{memoAmount}</span> memos in <span>{days}</span> days
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full grid grid-cols-1 gap-x-4">
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<div className="w-auto flex justify-start items-center">
|
||||
<Icon.CalendarDays className="w-4 h-auto mr-1" />
|
||||
<span className="block text-base sm:text-sm">Days</span>
|
||||
<Divider className="!my-2 opacity-50" />
|
||||
<div className="w-full flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap">
|
||||
<div
|
||||
className={clsx(
|
||||
"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" : "",
|
||||
)}
|
||||
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" />
|
||||
<span className="block text-sm">{t("memo.links")}</span>
|
||||
</div>
|
||||
<span>{days}</span>
|
||||
<span className="text-sm truncate">{memoStats.link}</span>
|
||||
</div>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<div className="w-auto flex justify-start items-center">
|
||||
<Icon.Library className="w-4 h-auto mr-1" />
|
||||
<span className="block text-base sm:text-sm">Memos</span>
|
||||
</div>
|
||||
{isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="">{memoAmount}</span>}
|
||||
</div>
|
||||
<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={clsx(
|
||||
"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" : "",
|
||||
)}
|
||||
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" />
|
||||
<span className="block text-sm">{t("memo.links")}</span>
|
||||
</div>
|
||||
<span className="text-sm truncate">{memoStats.link}</span>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"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" : "",
|
||||
)}
|
||||
onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: !filter.memoPropertyFilter?.hasTaskList })}
|
||||
>
|
||||
<div className="w-auto flex justify-start items-center mr-1">
|
||||
{memoStats.incompleteTasks > 0 ? (
|
||||
<Icon.ListTodo 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>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"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" : "",
|
||||
)}
|
||||
onClick={() => filterStore.setMemoPropertyFilter({ hasTaskList: !filter.memoPropertyFilter?.hasTaskList })}
|
||||
>
|
||||
<div className="w-auto flex justify-start items-center mr-1">
|
||||
{memoStats.incompleteTasks > 0 ? (
|
||||
<Tooltip title={"Done / Total"} placement="top" arrow>
|
||||
<div className="text-sm flex flex-row items-start justify-center">
|
||||
<span className="truncate">{memoStats.taskList - memoStats.incompleteTasks}</span>
|
||||
<span className="font-mono opacity-50">/</span>
|
||||
<span className="truncate">{memoStats.taskList}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Icon.ListTodo className="w-4 h-auto mr-1" />
|
||||
) : (
|
||||
<span className="text-sm truncate">{memoStats.taskList}</span>
|
||||
<Icon.CheckCircle className="w-4 h-auto mr-1" />
|
||||
)}
|
||||
<span className="block text-sm">{t("memo.to-do")}</span>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"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" : "",
|
||||
)}
|
||||
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" />
|
||||
<span className="block text-sm">{t("memo.code")}</span>
|
||||
</div>
|
||||
<span className="text-sm truncate">{memoStats.code}</span>
|
||||
{memoStats.incompleteTasks > 0 ? (
|
||||
<Tooltip title={"Done / Total"} placement="top" arrow>
|
||||
<div className="text-sm flex flex-row items-start justify-center">
|
||||
<span className="truncate">{memoStats.taskList - memoStats.incompleteTasks}</span>
|
||||
<span className="font-mono opacity-50">/</span>
|
||||
<span className="truncate">{memoStats.taskList}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span className="text-sm truncate">{memoStats.taskList}</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"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" : "",
|
||||
)}
|
||||
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" />
|
||||
<span className="block text-sm">{t("memo.code")}</span>
|
||||
</div>
|
||||
<span className="text-sm truncate">{memoStats.code}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user