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

chore: update memo relation dialog

Browse Source
This commit is contained in:
Steven 2024-01-25 08:59:10 +08:00
parent f654d3c90e
commit 08ac60cc70
8 changed files with 107 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
web/src/components/CreateMemoRelationDialog.tsx
View File

@ -1,8 +1,10 @@
import { Button, IconButton, Input } from "@mui/joy";
import { isNaN, unionBy } from "lodash-es";
import { Autocomplete, AutocompleteOption, Button, Chip, IconButton } from "@mui/joy";
import React, { useState } from "react";
import { toast } from "react-hot-toast";
import useDebounce from "react-use/lib/useDebounce";
import { memoServiceClient } from "@/grpcweb";
import { getDateTimeString } from "@/helpers/datetime";
import useCurrentUser from "@/hooks/useCurrentUser";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { useTranslate } from "@/utils/i18n";
import { generateDialog } from "./Dialog";
@ -16,46 +18,58 @@ interface Props extends DialogProps {
const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
const { destroy, onCancel, onConfirm } = props;
const t = useTranslate();
const [memoId, setMemoId] = useState<string>("");
const [memoList, setMemoList] = useState<Memo[]>([]);
const user = useCurrentUser();
const [searchText, setSearchText] = useState<string>("");
const [isFetching, setIsFetching] = useState<boolean>(true);
const [fetchedMemos, setFetchedMemos] = useState<Memo[]>([]);
const [selectedMemos, setSelectedMemos] = useState<Memo[]>([]);
const filteredMemos = fetchedMemos.filter((memo) => !selectedMemos.includes(memo));
const handleMemoIdInputKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter") {
handleSaveBtnClick();
}
};
const handleMemoIdChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
const memoId = event.target.value;
setMemoId(memoId.trim());
};
const handleSaveBtnClick = async () => {
const id = Number(memoId);
if (isNaN(id)) {
toast.error("Invalid memo id");
return;
}
try {
const { memo } = await memoServiceClient.getMemo({
id,
});
if (!memo) {
toast.error("Not found memo");
return;
useDebounce(
async () => {
setIsFetching(true);
try {
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
if (searchText) {
filters.push(`content_search == [${JSON.stringify(searchText)}]`);
}
const { memos } = await memoServiceClient.listMemos({
limit: 10,
filter: filters.length > 0 ? filters.join(" && ") : undefined,
});
setFetchedMemos(memos);
} catch (error: any) {
console.error(error);
toast.error(error.response.data.message);
}
setIsFetching(false);
},
300,
[searchText]
);
setMemoId("");
setMemoList(unionBy([memo, ...memoList], "id"));
} catch (error: any) {
console.error(error);
toast.error(error.response.data.message);
const getHighlightedContent = (content: string) => {
const index = content.toLowerCase().indexOf(searchText.toLowerCase());
if (index === -1) {
return content;
}
let before = content.slice(0, index);
if (before.length > 20) {
before = "..." + before.slice(before.length - 20);
}
const highlighted = content.slice(index, index + searchText.length);
let after = content.slice(index + searchText.length);
if (after.length > 20) {
after = after.slice(0, 20) + "...";
}
};
const handleDeleteMemoRelation = async (memo: Memo) => {
setMemoList(memoList.filter((m) => m !== memo));
return (
<>
{before}
<mark className="font-medium">{highlighted}</mark>
{after}
</>
);
};
const handleCloseDialog = () => {
@ -67,7 +81,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
const handleConfirmBtnClick = async () => {
if (onConfirm) {
onConfirm(memoList.map((memo) => memo.id));
onConfirm(selectedMemos.map((memo) => memo.id));
}
destroy();
};
@ -81,37 +95,49 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
</IconButton>
</div>
<div className="dialog-content-container !w-80">
<Input
className="mb-2"
<Autocomplete
className="w-full"
size="md"
placeholder={"Input memo ID. e.g. 26"}
value={memoId}
onChange={handleMemoIdChanged}
onKeyDown={handleMemoIdInputKeyDown}
fullWidth
endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
/>
{memoList.length > 0 && (
<>
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
{memoList.map((memo) => (
<div
className="max-w-[50%] text-sm px-2 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:opacity-60 hover:line-through"
key={memo.name}
onClick={() => handleDeleteMemoRelation(memo)}
>
<span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<Icon.X className="opacity-60 w-4 h-auto shrink-0 ml-1" />
clearOnBlur
disableClearable
placeholder={"Search content"}
noOptionsText={"No memos found"}
options={filteredMemos}
loading={isFetching}
inputValue={searchText}
value={selectedMemos}
multiple
onInputChange={(_, value) => setSearchText(value.trim())}
getOptionKey={(option) => option.name}
getOptionLabel={(option) => option.content}
isOptionEqualToValue={(option, value) => option.id === value.id}
renderOption={(props, option) => (
<AutocompleteOption {...props}>
<div className="w-full flex flex-col justify-start items-start">
<p className="text-xs text-gray-400 select-none">{getDateTimeString(option.displayTime)}</p>
<p className="mt-0.5 text-sm leading-5 line-clamp-2">
{searchText ? getHighlightedContent(option.content) : option.content}
</p>
</div>
</AutocompleteOption>
)}
renderTags={(memos) =>
memos.map((memo) => (
<Chip key={memo.name} className="!max-w-full !rounded" variant="outlined" color="neutral">
<div className="w-full flex flex-col justify-start items-start">
<p className="text-xs text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</p>
<span className="w-full text-sm leading-5 truncate">{memo.content}</span>
</div>
))}
</div>
</>
)}
</Chip>
))
}
onChange={(_, value) => setSelectedMemos(value)}
/>
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
<Button variant="plain" color="neutral" onClick={handleCloseDialog}>
{t("common.cancel")}
</Button>
<Button onClick={handleConfirmBtnClick} disabled={memoList.length === 0}>
<Button onClick={handleConfirmBtnClick} disabled={selectedMemos.length === 0}>
{t("common.confirm")}
</Button>
</div>

2
web/src/components/MemoEditor/RelationListView.tsx
View File

@ -43,7 +43,7 @@ const RelationListView = (props: Props) => {
>
<Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
<span className="mx-1 max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" />
<Icon.X className="w-4 h-auto cursor-pointer shrink-0 opacity-60 hover:opacity-100" />
</div>
);
})}

4
web/src/pages/Archived.tsx
View File

@ -34,10 +34,10 @@ const Archived = () => {
const filters = [`creator == "${user.name}"`, "row_status == 'ARCHIVED'"];
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
contentSearch.push(JSON.stringify(`#${tagQuery}`));
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
contentSearch.push(JSON.stringify(textQuery));
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);

6
web/src/pages/Explore.tsx
View File

@ -32,10 +32,10 @@ const Explore = () => {
const filters = [`row_status == "NORMAL"`, `visibilities == [${user ? "'PUBLIC', 'PROTECTED'" : "'PUBLIC'"}]`];
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
contentSearch.push(JSON.stringify(`#${tagQuery}`));
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
contentSearch.push(JSON.stringify(textQuery));
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
@ -56,7 +56,7 @@ const Explore = () => {
<div className="relative w-full h-auto flex flex-col justify-start items-start px-4 sm:px-6">
<MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => (
<MemoView key={memo.id} memo={memo} showCreator />
<MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showCreator />
))}
{isRequesting ? (
<div className="flex flex-col justify-start items-center w-full my-4">

6
web/src/pages/Home.tsx
View File

@ -42,10 +42,10 @@ const Home = () => {
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
contentSearch.push(JSON.stringify(`#${tagQuery}`));
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
contentSearch.push(JSON.stringify(textQuery));
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
@ -73,7 +73,7 @@ const Home = () => {
<div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
<MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => (
<MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinned />
<MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showVisibility showPinned />
))}
{isRequesting ? (
<div className="flex flex-col justify-start items-center w-full my-4">

2
web/src/pages/MemoDetail.tsx
View File

@ -198,7 +198,7 @@ const MemoDetail = () => {
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
</div>
{comments.map((comment) => (
<MemoView key={comment.id} memo={comment} showCreator />
<MemoView key={`${memo.id}-${memo.displayTime}`} memo={comment} showCreator />
))}
</>
)}

10
web/src/pages/Timeline.tsx
View File

@ -69,10 +69,10 @@ const Timeline = () => {
const filters = [`row_status == "NORMAL"`];
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
contentSearch.push(JSON.stringify(`#${tagQuery}`));
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
contentSearch.push(JSON.stringify(textQuery));
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
@ -90,10 +90,10 @@ const Timeline = () => {
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
contentSearch.push(JSON.stringify(`#${tagQuery}`));
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
contentSearch.push(JSON.stringify(textQuery));
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
@ -159,7 +159,7 @@ const Timeline = () => {
<div className={classNames("flex flex-col justify-start items-start", md ? "w-[calc(100%-8rem)]" : "w-full")}>
{group.memos.map((memo, index) => (
<div
key={`${memo.id}-${memo.createTime}`}
key={`${memo.id}-${memo.displayTime}`}
className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
>
<MemoView className="!border !border-gray-100 dark:!border-zinc-700" memo={memo} />

6
web/src/pages/UserProfile.tsx
View File

@ -67,10 +67,10 @@ const UserProfile = () => {
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
const contentSearch: string[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
contentSearch.push(JSON.stringify(`#${tagQuery}`));
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
contentSearch.push(JSON.stringify(textQuery));
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
@ -107,7 +107,7 @@ const UserProfile = () => {
</div>
<MemoFilter className="px-2 pb-3" />
{sortedMemos.map((memo) => (
<MemoView key={memo.id} memo={memo} showVisibility showPinned />
<MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showVisibility showPinned />
))}
{isRequesting ? (
<div className="flex flex-col justify-start items-center w-full my-4">