chore(react/ribbon): port ancestor (without depth)

This commit is contained in:
Elian Doran
2025-08-24 17:29:48 +03:00
parent ac3a8edf2b
commit 4b212232c8
2 changed files with 19 additions and 18 deletions

View File

@@ -56,7 +56,8 @@ const SEARCH_OPTIONS: SearchOption[] = [
attributeName: "ancestor", attributeName: "ancestor",
attributeType: "relation", attributeType: "relation",
icon: "bx bx-filter-alt", icon: "bx bx-filter-alt",
label: t("search_definition.ancestor") label: t("search_definition.ancestor"),
component: AncestorOption
}, },
{ {
attributeName: "fastSearch", attributeName: "fastSearch",
@@ -341,8 +342,7 @@ function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
<pre>{t("search_script.example_code")}</pre> <pre>{t("search_script.example_code")}</pre>
{t("search_script.note")} {t("search_script.note")}
</>} </>}
note={note} note={note} {...restProps}
{...restProps}
> >
<NoteAutocomplete <NoteAutocomplete
noteId={searchScript !== "root" ? searchScript ?? undefined : undefined} noteId={searchScript !== "root" ? searchScript ?? undefined : undefined}
@@ -351,3 +351,18 @@ function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
/> />
</SearchOption> </SearchOption>
} }
function AncestorOption({ note, ...restProps}: SearchOptionProps) {
const [ ancestor, setAncestor ] = useNoteRelation(note, "ancestor");
return <SearchOption
title={t("ancestor.label")}
note={note} {...restProps}
>
<NoteAutocomplete
noteId={ancestor !== "root" ? ancestor ?? undefined : undefined}
noteIdChanged={noteId => setAncestor(noteId ?? "root")}
placeholder={t("ancestor.placeholder")}
/>
</SearchOption>;
}

View File

@@ -5,14 +5,7 @@ import { t } from "../../services/i18n.js";
const TPL = /*html*/` const TPL = /*html*/`
<tr> <tr>
<td colspan="2"> <td colspan="2">
<div style="display: flex; align-items: center;"> <div style="margin-left: 10px; margin-right: 10px">${t("ancestor.depth_label")}:</div>
<div style="margin-right: 10px">${t("ancestor.label")}:</div>
<div class="input-group" style="flex-shrink: 2">
<input class="ancestor form-control" placeholder="${t("ancestor.placeholder")}">
</div>
<div style="margin-left: 10px; margin-right: 10px">${t("ancestor.depth_label")}:</div>
<select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3"> <select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3">
<option value="">${t("ancestor.depth_doesnt_matter")}</option> <option value="">${t("ancestor.depth_doesnt_matter")}</option>
<option value="eq1">${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})</option> <option value="eq1">${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})</option>
@@ -45,16 +38,9 @@ const TPL = /*html*/`
</select> </select>
</div> </div>
</td> </td>
<td class="button-column">
<span class="bx bx-x icon-action search-option-del"></span>
</td>
</tr>`; </tr>`;
export default class Ancestor extends AbstractSearchOption { export default class Ancestor extends AbstractSearchOption {
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
}
doRender() { doRender() {
const $option = $(TPL); const $option = $(TPL);
const $ancestor = $option.find(".ancestor"); const $ancestor = $option.find(".ancestor");