mirror of https://github.com/usememos/memos.git
fix(editor): filter RelationList to only show referencing memos
- Filter out COMMENT type relations, only show REFERENCE type - When editing a memo, only show relations where current memo is the source - Pass memoName through EditorMetadata to RelationList for filtering
This commit is contained in:
parent
7053edae27
commit
9a3451b9d1
|
|
@ -5,7 +5,7 @@ import AttachmentList from "./AttachmentList";
|
|||
import LocationDisplay from "./LocationDisplay";
|
||||
import RelationList from "./RelationList";
|
||||
|
||||
export const EditorMetadata: FC<EditorMetadataProps> = () => {
|
||||
export const EditorMetadata: FC<EditorMetadataProps> = ({ memoName }) => {
|
||||
const { state, actions, dispatch } = useEditorContext();
|
||||
|
||||
return (
|
||||
|
|
@ -17,7 +17,11 @@ export const EditorMetadata: FC<EditorMetadataProps> = () => {
|
|||
onRemoveLocalFile={(previewUrl) => dispatch(actions.removeLocalFile(previewUrl))}
|
||||
/>
|
||||
|
||||
<RelationList relations={state.metadata.relations} onRelationsChange={(relations) => dispatch(actions.setMetadata({ relations }))} />
|
||||
<RelationList
|
||||
relations={state.metadata.relations}
|
||||
onRelationsChange={(relations) => dispatch(actions.setMetadata({ relations }))}
|
||||
memoName={memoName}
|
||||
/>
|
||||
|
||||
{state.metadata.location && (
|
||||
<LocationDisplay location={state.metadata.location} onRemove={() => dispatch(actions.setMetadata({ location: undefined }))} />
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@ import { useEffect, useState } from "react";
|
|||
import RelationCard from "@/components/MemoView/components/metadata/RelationCard";
|
||||
import { memoServiceClient } from "@/connect";
|
||||
import type { MemoRelation } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import { MemoRelation_Memo, MemoRelation_MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
|
||||
import { MemoRelation_Memo, MemoRelation_MemoSchema, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
|
||||
|
||||
interface RelationListProps {
|
||||
relations: MemoRelation[];
|
||||
onRelationsChange?: (relations: MemoRelation[]) => void;
|
||||
parentPage?: string;
|
||||
memoName?: string;
|
||||
}
|
||||
|
||||
const RelationItemCard: FC<{
|
||||
|
|
@ -37,12 +38,13 @@ const RelationItemCard: FC<{
|
|||
);
|
||||
};
|
||||
|
||||
const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, parentPage }) => {
|
||||
const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, parentPage, memoName }) => {
|
||||
const referenceRelations = relations.filter((r) => r.type === MemoRelation_Type.REFERENCE && (!memoName || r.memo?.name === memoName));
|
||||
const [fetchedMemos, setFetchedMemos] = useState<Record<string, MemoRelation_Memo>>({});
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const missingSnippetRelations = relations.filter((relation) => !relation.relatedMemo?.snippet && relation.relatedMemo?.name);
|
||||
const missingSnippetRelations = referenceRelations.filter((relation) => !relation.relatedMemo?.snippet && relation.relatedMemo?.name);
|
||||
if (missingSnippetRelations.length > 0) {
|
||||
const requests = missingSnippetRelations.map(async (relation) => {
|
||||
const memo = await memoServiceClient.getMemo({ name: relation.relatedMemo!.name });
|
||||
|
|
@ -58,7 +60,7 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
|
|||
});
|
||||
}
|
||||
})();
|
||||
}, [relations]);
|
||||
}, [referenceRelations]);
|
||||
|
||||
const handleDeleteRelation = (memoName: string) => {
|
||||
if (onRelationsChange) {
|
||||
|
|
@ -66,7 +68,7 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
|
|||
}
|
||||
};
|
||||
|
||||
if (relations.length === 0) {
|
||||
if (referenceRelations.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -74,11 +76,11 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
|
|||
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
|
||||
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
|
||||
<LinkIcon className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground">Relations ({relations.length})</span>
|
||||
<span className="text-xs font-medium text-muted-foreground">Relations ({referenceRelations.length})</span>
|
||||
</div>
|
||||
|
||||
<div className="p-1 sm:p-1.5 flex flex-col gap-0.5">
|
||||
{relations.map((relation) => {
|
||||
{referenceRelations.map((relation) => {
|
||||
const relatedMemo = relation.relatedMemo!;
|
||||
const memo = relatedMemo.snippet ? relatedMemo : fetchedMemos[relatedMemo.name] || relatedMemo;
|
||||
return <RelationItemCard key={memo.name} memo={memo} onRemove={() => handleDeleteRelation(memo.name)} parentPage={parentPage} />;
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
|
|||
|
||||
{/* Metadata and toolbar grouped together at bottom */}
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<EditorMetadata />
|
||||
<EditorMetadata memoName={memoName} />
|
||||
<EditorToolbar onSave={handleSave} onCancel={onCancel} memoName={memoName} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@ export interface EditorToolbarProps {
|
|||
memoName?: string;
|
||||
}
|
||||
|
||||
export interface EditorMetadataProps {}
|
||||
export interface EditorMetadataProps {
|
||||
memoName?: string;
|
||||
}
|
||||
|
||||
export interface FocusModeOverlayProps {
|
||||
isActive: boolean;
|
||||
|
|
|
|||
Loading…
Reference in New Issue