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
No known key found for this signature in database
2 changed files with 19 additions and 18 deletions

View File

@ -56,7 +56,8 @@ const SEARCH_OPTIONS: SearchOption[] = [
attributeName: "ancestor",
attributeType: "relation",
icon: "bx bx-filter-alt",
label: t("search_definition.ancestor")
label: t("search_definition.ancestor"),
component: AncestorOption
},
{
attributeName: "fastSearch",
@ -341,8 +342,7 @@ function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
<pre>{t("search_script.example_code")}</pre>
{t("search_script.note")}
</>}
note={note}
{...restProps}
note={note} {...restProps}
>
<NoteAutocomplete
noteId={searchScript !== "root" ? searchScript ?? undefined : undefined}
@ -350,4 +350,19 @@ function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
placeholder={t("search_script.placeholder")}
/>
</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*/`
<tr>
<td colspan="2">
<div style="display: flex; align-items: center;">
<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>
<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">
<option value="">${t("ancestor.depth_doesnt_matter")}</option>
<option value="eq1">${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})</option>
@ -45,16 +38,9 @@ const TPL = /*html*/`
</select>
</div>
</td>
<td class="button-column">
<span class="bx bx-x icon-action search-option-del"></span>
</td>
</tr>`;
export default class Ancestor extends AbstractSearchOption {
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
}
doRender() {
const $option = $(TPL);
const $ancestor = $option.find(".ancestor");