feat(layout/inline-title): template switcher

This commit is contained in:
Elian Doran 2025-12-13 13:24:32 +02:00
parent 4c2fe8a846
commit e0f6ba808c
No known key found for this signature in database
2 changed files with 53 additions and 13 deletions

View File

@ -1755,7 +1755,8 @@
"created_on": "Created on <Value />",
"last_modified": "Last modified on <Value />",
"note_type_switcher_label": "Switch from {{type}} to:",
"note_type_switcher_others": "More note types"
"note_type_switcher_others": "More note types",
"note_type_switcher_templates": "Templates"
},
"search_result": {
"no_notes_found": "No notes have been found for given search parameters.",

View File

@ -6,6 +6,9 @@ import { ComponentChild } from "preact";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Trans } from "react-i18next";
import FNote from "../../entities/fnote";
import attributes from "../../services/attributes";
import froca from "../../services/froca";
import { t } from "../../services/i18n";
import { ViewScope } from "../../services/link";
import { NOTE_TYPES, NoteTypeMapping } from "../../services/note_types";
@ -168,24 +171,60 @@ function NoteTypeSwitcher() {
onClick={() => switchNoteType(note.noteId, noteType)}
/>
))}
<BadgeWithDropdown
text={t("note_title.note_type_switcher_others")}
icon="bx bx-dots-vertical-rounded"
>
{restNoteTypes.map(noteType => (
<FormListItem
key={noteType.type}
icon={`bx ${noteType.icon}`}
onClick={() => switchNoteType(note.noteId, noteType)}
>{noteType.title}</FormListItem>
))}
</BadgeWithDropdown>
<MoreNoteTypes noteId={note.noteId} restNoteTypes={restNoteTypes} />
<TemplateNoteTypes noteId={note.noteId} />
</>
)}
</div>
);
}
function MoreNoteTypes({ noteId, restNoteTypes }: { noteId: string, restNoteTypes: NoteTypeMapping[] }) {
return (
<BadgeWithDropdown
text={t("note_title.note_type_switcher_others")}
icon="bx bx-dots-vertical-rounded"
>
{restNoteTypes.map(noteType => (
<FormListItem
key={noteType.type}
icon={`bx ${noteType.icon}`}
onClick={() => switchNoteType(noteId, noteType)}
>{noteType.title}</FormListItem>
))}
</BadgeWithDropdown>
);
}
function TemplateNoteTypes({ noteId }: { noteId: string }) {
const [ templates, setTemplates ] = useState<FNote[]>([]);
async function refreshTemplates() {
const templateNoteIds = await server.get<string[]>("search-templates");
const templateNotes = await froca.getNotes(templateNoteIds);
setTemplates(templateNotes);
}
useEffect(() => {
refreshTemplates();
}, []);
return (
<BadgeWithDropdown
text={t("note_title.note_type_switcher_templates")}
icon="bx bx-copy-alt"
>
{templates.map(template => (
<FormListItem
key={template.noteId}
icon={template.getIcon()}
onClick={() => attributes.setRelation(noteId, "template", template.noteId)}
>{template.title}</FormListItem>
))}
</BadgeWithDropdown>
);
}
function switchNoteType(noteId: string, { type, mime }: NoteTypeMapping) {
return server.put(`notes/${noteId}/type`, { type, mime });
}