mirror of
https://github.com/zadam/trilium.git
synced 2025-11-01 03:59:05 +01:00
405 lines
14 KiB
TypeScript
405 lines
14 KiB
TypeScript
import { ComponentChildren, VNode } from "preact";
|
|
import { t } from "../../services/i18n";
|
|
import Button from "../react/Button";
|
|
import { TabContext } from "./ribbon-interface";
|
|
import Dropdown from "../react/Dropdown";
|
|
import ActionButton from "../react/ActionButton";
|
|
import FormTextArea from "../react/FormTextArea";
|
|
import { AttributeType, SaveSearchNoteResponse } from "@triliumnext/commons";
|
|
import attributes, { removeOwnedAttributesByNameOrType } from "../../services/attributes";
|
|
import FNote from "../../entities/fnote";
|
|
import toast from "../../services/toast";
|
|
import froca from "../../services/froca";
|
|
import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
|
|
import { ParentComponent } from "../react/react_utils";
|
|
import { useNoteLabel, useNoteRelation, useSpacedUpdate, useTooltip, useTriliumEventBeta } from "../react/hooks";
|
|
import appContext from "../../components/app_context";
|
|
import server from "../../services/server";
|
|
import ws from "../../services/ws";
|
|
import tree from "../../services/tree";
|
|
import NoteAutocomplete from "../react/NoteAutocomplete";
|
|
import FormSelect from "../react/FormSelect";
|
|
|
|
interface SearchOption {
|
|
attributeName: string;
|
|
attributeType: "label" | "relation";
|
|
icon: string;
|
|
label: string;
|
|
tooltip?: string;
|
|
// TODO: Make mandatory once all components are ported.
|
|
component?: (props: SearchOptionProps) => VNode;
|
|
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
|
|
}
|
|
|
|
interface SearchOptionProps {
|
|
note: FNote;
|
|
refreshResults: () => void;
|
|
attributeName: string;
|
|
attributeType: "label" | "relation";
|
|
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
|
|
error?: { message: string };
|
|
}
|
|
|
|
const SEARCH_OPTIONS: SearchOption[] = [
|
|
{
|
|
attributeName: "searchString",
|
|
attributeType: "label",
|
|
icon: "bx bx-text",
|
|
label: t("search_definition.search_string"),
|
|
component: SearchStringOption
|
|
},
|
|
{
|
|
attributeName: "searchScript",
|
|
attributeType: "relation",
|
|
icon: "bx bx-code",
|
|
label: t("search_definition.search_script"),
|
|
component: SearchScriptOption
|
|
},
|
|
{
|
|
attributeName: "ancestor",
|
|
attributeType: "relation",
|
|
icon: "bx bx-filter-alt",
|
|
label: t("search_definition.ancestor"),
|
|
component: AncestorOption,
|
|
additionalAttributesToDelete: [ { type: "label", name: "ancestorDepth" } ]
|
|
},
|
|
{
|
|
attributeName: "fastSearch",
|
|
attributeType: "label",
|
|
icon: "bx bx-run",
|
|
label: t("search_definition.fast_search"),
|
|
tooltip: t("search_definition.fast_search_description")
|
|
},
|
|
{
|
|
attributeName: "includeArchivedNotes",
|
|
attributeType: "label",
|
|
icon: "bx bx-archive",
|
|
label: t("search_definition.include_archived"),
|
|
tooltip: t("search_definition.include_archived_notes_description")
|
|
},
|
|
{
|
|
attributeName: "orderBy",
|
|
attributeType: "label",
|
|
icon: "bx bx-arrow-from-top",
|
|
label: t("search_definition.order_by")
|
|
},
|
|
{
|
|
attributeName: "limit",
|
|
attributeType: "label",
|
|
icon: "bx bx-stop",
|
|
label: t("search_definition.limit"),
|
|
tooltip: t("search_definition.limit_description")
|
|
},
|
|
{
|
|
attributeName: "debug",
|
|
attributeType: "label",
|
|
icon: "bx bx-bug",
|
|
label: t("search_definition.debug"),
|
|
tooltip: t("search_definition.debug_description")
|
|
}
|
|
];
|
|
|
|
export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
|
|
const parentComponent = useContext(ParentComponent);
|
|
const [ searchOptions, setSearchOptions ] = useState<{ availableOptions: SearchOption[], activeOptions: SearchOption[] }>();
|
|
const [ error, setError ] = useState<{ message: string }>();
|
|
|
|
function refreshOptions() {
|
|
if (!note) return;
|
|
|
|
const availableOptions: SearchOption[] = [];
|
|
const activeOptions: SearchOption[] = [];
|
|
|
|
for (const searchOption of SEARCH_OPTIONS) {
|
|
const attr = note.getAttribute(searchOption.attributeType, searchOption.attributeName);
|
|
if (attr && searchOption.component) {
|
|
activeOptions.push(searchOption);
|
|
} else {
|
|
availableOptions.push(searchOption);
|
|
}
|
|
}
|
|
|
|
setSearchOptions({ availableOptions, activeOptions });
|
|
}
|
|
|
|
async function refreshResults() {
|
|
const noteId = note?.noteId;
|
|
if (!noteId) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await froca.loadSearchNote(noteId);
|
|
if (result?.error) {
|
|
setError({ message: result?.error})
|
|
} else {
|
|
setError(undefined);
|
|
}
|
|
} catch (e: any) {
|
|
toast.showError(e.message);
|
|
}
|
|
|
|
parentComponent?.triggerEvent("searchRefreshed", { ntxId });
|
|
}
|
|
|
|
// Refresh the list of available and active options.
|
|
useEffect(refreshOptions, [ note ]);
|
|
useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
|
|
if (loadResults.getAttributeRows().find((attrRow) => attributes.isAffecting(attrRow, note))) {
|
|
refreshOptions();
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="search-definition-widget">
|
|
<div className="search-settings">
|
|
{note &&
|
|
<table className="search-setting-table">
|
|
<tr>
|
|
<td className="title-column">{t("search_definition.add_search_option")}</td>
|
|
<td colSpan={2} className="add-search-option">
|
|
{searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType }) => (
|
|
<Button
|
|
icon={icon}
|
|
text={label}
|
|
title={tooltip}
|
|
onClick={() => {
|
|
const defaultValue = (attributeType === "relation" ? "root" : "");
|
|
attributes.setAttribute(note, attributeType, attributeName, defaultValue);
|
|
}}
|
|
/>
|
|
))}
|
|
</td>
|
|
</tr>
|
|
<tbody className="search-options">
|
|
{searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete }) => {
|
|
return component?.({
|
|
attributeName,
|
|
attributeType,
|
|
note,
|
|
refreshResults,
|
|
error,
|
|
additionalAttributesToDelete
|
|
});
|
|
})}
|
|
</tbody>
|
|
<tbody className="action-options">
|
|
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td colSpan={3}>
|
|
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
|
|
<Button
|
|
icon="bx bx-search"
|
|
text={t("search_definition.search_button")}
|
|
keyboardShortcut="Enter"
|
|
onClick={refreshResults}
|
|
/>
|
|
|
|
<Button
|
|
icon="bx bxs-zap"
|
|
text={t("search_definition.search_execute")}
|
|
onClick={async () => {
|
|
await server.post(`search-and-execute-note/${note.noteId}`);
|
|
refreshResults();
|
|
toast.showMessage(t("search_definition.actions_executed"), 3000);
|
|
}}
|
|
/>
|
|
|
|
{note.isHiddenCompletely() && <Button
|
|
icon="bx bx-save"
|
|
text={t("search_definition.save_to_note")}
|
|
onClick={async () => {
|
|
const { notePath } = await server.post<SaveSearchNoteResponse>("special-notes/save-search-note", { searchNoteId: note.noteId });
|
|
if (!notePath) {
|
|
return;
|
|
}
|
|
|
|
await ws.waitForMaxKnownEntityChangeId();
|
|
await appContext.tabManager.getActiveContext()?.setNote(notePath);
|
|
|
|
// Note the {{- notePathTitle}} in json file is not typo, it's unescaping
|
|
// See https://www.i18next.com/translation-function/interpolation#unescape
|
|
toast.showMessage(t("search_definition.search_note_saved", { notePathTitle: await tree.getNotePathTitle(notePath) }));
|
|
}}
|
|
/>}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SearchOption({ note, title, children, help, attributeName, attributeType, additionalAttributesToDelete }: {
|
|
note: FNote;
|
|
title: string,
|
|
children: ComponentChildren,
|
|
help: ComponentChildren,
|
|
attributeName: string,
|
|
attributeType: AttributeType,
|
|
additionalAttributesToDelete: { type: "label" | "relation", name: string }[]
|
|
}) {
|
|
return (
|
|
<tr>
|
|
<td className="title-column">{title}</td>
|
|
<td>{children}</td>
|
|
<td className="button-column">
|
|
{help && <Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>}
|
|
<ActionButton
|
|
icon="bx bx-x"
|
|
className="search-option-del"
|
|
onClick={() => {
|
|
removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
|
|
if (additionalAttributesToDelete) {
|
|
for (const { type, name } of additionalAttributesToDelete) {
|
|
removeOwnedAttributesByNameOrType(note, type, name);
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
function SearchStringOption({ note, refreshResults, error, ...restProps }: SearchOptionProps) {
|
|
const [ searchString, setSearchString ] = useNoteLabel(note, "searchString");
|
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
|
const currentValue = useRef(searchString ?? "");
|
|
const spacedUpdate = useSpacedUpdate(async () => {
|
|
const searchString = currentValue.current;
|
|
appContext.lastSearchString = searchString;
|
|
setSearchString(searchString);
|
|
|
|
if (note.title.startsWith(t("search_string.search_prefix"))) {
|
|
await server.put(`notes/${note.noteId}/title`, {
|
|
title: `${t("search_string.search_prefix")} ${searchString.length < 30 ? searchString : `${searchString.substr(0, 30)}…`}`
|
|
});
|
|
}
|
|
}, 1000);
|
|
|
|
// React to errors
|
|
const { showTooltip, hideTooltip } = useTooltip(inputRef, {
|
|
trigger: "manual",
|
|
title: `${t("search_string.error", { error: error?.message })}`,
|
|
html: true,
|
|
placement: "bottom"
|
|
});
|
|
|
|
// Auto-focus.
|
|
useEffect(() => inputRef.current?.focus(), []);
|
|
|
|
useEffect(() => {
|
|
if (error) {
|
|
showTooltip();
|
|
setTimeout(() => hideTooltip(), 4000);
|
|
} else {
|
|
hideTooltip();
|
|
}
|
|
}, [ error ]);
|
|
|
|
return <SearchOption
|
|
title={t("search_string.title_column")}
|
|
help={<>
|
|
<strong>{t("search_string.search_syntax")}</strong> - {t("search_string.also_see")} <a href="#" data-help-page="search.html">{t("search_string.complete_help")}</a>
|
|
<ul style="marigin-bottom: 0;">
|
|
<li>{t("search_string.full_text_search")}</li>
|
|
<li><code>#abc</code> - {t("search_string.label_abc")}</li>
|
|
<li><code>#year = 2019</code> - {t("search_string.label_year")}</li>
|
|
<li><code>#rock #pop</code> - {t("search_string.label_rock_pop")}</li>
|
|
<li><code>#rock or #pop</code> - {t("search_string.label_rock_or_pop")}</li>
|
|
<li><code>#year <= 2000</code> - {t("search_string.label_year_comparison")}</li>
|
|
<li><code>note.dateCreated >= MONTH-1</code> - {t("search_string.label_date_created")}</li>
|
|
</ul>
|
|
</>}
|
|
note={note} {...restProps}
|
|
>
|
|
<FormTextArea
|
|
inputRef={inputRef}
|
|
className="search-string"
|
|
placeholder={t("search_string.placeholder")}
|
|
currentValue={searchString ?? ""}
|
|
onChange={text => {
|
|
currentValue.current = text;
|
|
spacedUpdate.scheduleUpdate();
|
|
}}
|
|
onKeyDown={async (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
|
|
// this also in effect disallows new lines in query string.
|
|
// on one hand, this makes sense since search string is a label
|
|
// on the other hand, it could be nice for structuring long search string. It's probably a niche case though.
|
|
await spacedUpdate.updateNowIfNecessary();
|
|
refreshResults();
|
|
}
|
|
}}
|
|
/>
|
|
</SearchOption>
|
|
}
|
|
|
|
function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
|
|
const [ searchScript, setSearchScript ] = useNoteRelation(note, "searchScript");
|
|
|
|
return <SearchOption
|
|
title={t("search_script.title")}
|
|
help={<>
|
|
<p>{t("search_script.description1")}</p>
|
|
<p>{t("search_script.description2")}</p>
|
|
<p>{t("search_script.example_title")}</p>
|
|
<pre>{t("search_script.example_code")}</pre>
|
|
{t("search_script.note")}
|
|
</>}
|
|
note={note} {...restProps}
|
|
>
|
|
<NoteAutocomplete
|
|
noteId={searchScript !== "root" ? searchScript ?? undefined : undefined}
|
|
noteIdChanged={noteId => setSearchScript(noteId ?? "root")}
|
|
placeholder={t("search_script.placeholder")}
|
|
/>
|
|
</SearchOption>
|
|
}
|
|
|
|
function AncestorOption({ note, ...restProps}: SearchOptionProps) {
|
|
const [ ancestor, setAncestor ] = useNoteRelation(note, "ancestor");
|
|
const [ depth, setDepth ] = useNoteLabel(note, "ancestorDepth");
|
|
|
|
const options = useMemo(() => {
|
|
const options: { value: string | undefined; label: string }[] = [
|
|
{ value: "", label: t("ancestor.depth_doesnt_matter") },
|
|
{ value: "eq1", label: `${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})` }
|
|
];
|
|
|
|
for (let i=2; i<=9; i++) options.push({ value: "eq" + i, label: t("ancestor.depth_eq", { count: i }) });
|
|
for (let i=0; i<=9; i++) options.push({ value: "gt" + i, label: t("ancestor.depth_gt", { count: i }) });
|
|
for (let i=2; i<=9; i++) options.push({ value: "lt" + i, label: t("ancestor.depth_lt", { count: i }) });
|
|
|
|
return options;
|
|
}, []);
|
|
|
|
return <SearchOption
|
|
title={t("ancestor.label")}
|
|
note={note} {...restProps}
|
|
>
|
|
<div style={{display: "flex", alignItems: "center"}}>
|
|
<NoteAutocomplete
|
|
noteId={ancestor !== "root" ? ancestor ?? undefined : undefined}
|
|
noteIdChanged={noteId => setAncestor(noteId ?? "root")}
|
|
placeholder={t("ancestor.placeholder")}
|
|
/>
|
|
|
|
<div style="margin-left: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
|
|
<FormSelect
|
|
values={options}
|
|
keyProperty="value" titleProperty="label"
|
|
currentValue={depth ?? ""} onChange={(value) => setDepth(value ? value : null)}
|
|
style={{ flexShrink: 3 }}
|
|
/>
|
|
</div>
|
|
</SearchOption>;
|
|
} |