gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 10:08:52 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

chore(react/ribbon): dynamic rendering of search options

Browse Source
This commit is contained in:
Elian Doran 2025-08-24 15:59:22 +03:00
parent 759398d804
commit b6d5a6ec2e
No known key found for this signature in database
10 changed files with 72 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
View File

@ -1,4 +1,4 @@
import { ComponentChildren } from "preact";
import { ComponentChildren, VNode } from "preact";
import { t } from "../../services/i18n";
import Button from "../react/Button";
import { TabContext } from "./ribbon-interface";
@ -18,53 +18,72 @@ import appContext from "../../components/app_context";
import server from "../../services/server";
interface SearchOption {
searchOption: string;
attributeName: string;
attributeType: "label" | "relation";
icon: string;
label: string;
tooltip?: string;
// TODO: Make mandatory once all components are ported.
component?: (props: SearchOptionProps) => VNode;
}
interface SearchOptionProps {
note: FNote;
refreshResults: () => void;
attributeName: string;
attributeType: "label" | "relation";
}
const SEARCH_OPTIONS: SearchOption[] = [
{
searchOption: "searchString",
attributeName: "searchString",
attributeType: "label",
icon: "bx bx-text",
label: t("search_definition.search_string")
label: t("search_definition.search_string"),
component: SearchStringOption
},
{
searchOption: "searchScript",
attributeName: "searchScript",
attributeType: "relation",
icon: "bx bx-code",
label: t("search_definition.search_script")
},
{
searchOption: "ancestor",
attributeName: "ancestor",
attributeType: "relation",
icon: "bx bx-filter-alt",
label: t("search_definition.ancestor")
},
{
searchOption: "fastSearch",
attributeName: "fastSearch",
attributeType: "label",
icon: "bx bx-run",
label: t("search_definition.fast_search"),
tooltip: t("search_definition.fast_search_description")
},
{
searchOption: "includeArchivedNotes",
attributeName: "includeArchivedNotes",
attributeType: "label",
icon: "bx bx-archive",
label: t("search_definition.include_archived"),
tooltip: t("search_definition.include_archived_notes_description")
},
{
searchOption: "orderBy",
attributeName: "orderBy",
attributeType: "label",
icon: "bx bx-arrow-from-top",
label: t("search_definition.order_by")
},
{
searchOption: "limit",
attributeName: "limit",
attributeType: "label",
icon: "bx bx-stop",
label: t("search_definition.limit"),
tooltip: t("search_definition.limit_description")
},
{
searchOption: "debug",
attributeName: "debug",
attributeType: "label",
icon: "bx bx-bug",
label: t("search_definition.debug"),
tooltip: t("search_definition.debug_description")
@ -97,43 +116,52 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
return (
<div className="search-definition-widget">
<div className="search-settings">
<table className="search-setting-table">
<tr>
<td className="title-column">{t("search_definition.add_search_option")}</td>
<td colSpan={2} className="add-search-option">
{SEARCH_OPTIONS.map(({ icon, label, tooltip }) => (
<Button
icon={icon}
text={label}
title={tooltip}
/>
))}
</td>
</tr>
<tbody className="search-options">
<SearchStringOption
refreshResults={refreshResults}
note={note}
/>
</tbody>
<tbody className="action-options">
</tbody>
<tbody>
{note &&
<table className="search-setting-table">
<tr>
<td colSpan={3}>
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
<td className="title-column">{t("search_definition.add_search_option")}</td>
<td colSpan={2} className="add-search-option">
{SEARCH_OPTIONS.map(({ icon, label, tooltip }) => (
<Button
icon="bx bx-search"
text={t("search_definition.search_button")}
keyboardShortcut="Enter"
onClick={refreshResults}
icon={icon}
text={label}
title={tooltip}
/>
</div>
))}
</td>
</tr>
</tbody>
</table>
<tbody className="search-options">
{SEARCH_OPTIONS.map(({ attributeType, attributeName, component }) => {
const attr = note.getAttribute(attributeType, attributeName);
if (attr && component) {
return component({
attributeName,
attributeType,
note,
refreshResults
});
}
})}
</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}
/>
</div>
</td>
</tr>
</tbody>
</table>
}
</div>
</div>
)
@ -163,7 +191,7 @@ function SearchOption({ note, title, children, help, attributeName, attributeTyp
)
}
function SearchStringOption({ note, refreshResults }: { note: FNote, refreshResults: () => void }) {
function SearchStringOption({ note, refreshResults }: SearchOptionProps) {
const currentValue = useRef("");
const spacedUpdate = useSpacedUpdate(async () => {
const searchString = currentValue.current;

18
apps/client/src/widgets/ribbon_widgets/search_definition.ts
View File

@ -153,24 +153,6 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
this.$searchOptions.empty();
for (const OptionClass of OPTION_CLASSES) {
const { attributeType, optionName } = OptionClass;
const attr = this.note.getAttribute(attributeType as AttributeType, optionName);
this.$widget.find(`[data-search-option-add='${optionName}'`).toggle(!attr);
if (attr) {
const searchOption = new OptionClass(attr, this.note).setParent(this);
this.child(searchOption);
const renderedEl = searchOption.render();
if (renderedEl) {
this.$searchOptions.append(renderedEl);
}
}
}
const actions = bulkActionService.parseActions(this.note);
const renderedEls = actions
.map((action) => renderReactWidget(this, action.doRender()))

7
apps/client/src/widgets/search_options/ancestor.ts
View File

@ -51,13 +51,6 @@ const TPL = /*html*/`
</tr>`;
export default class Ancestor extends AbstractSearchOption {
static get optionName() {
return "ancestor";
}
static get attributeType() {
return "relation";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
}

7
apps/client/src/widgets/search_options/debug.ts
View File

@ -20,13 +20,6 @@ const TPL = /*html*/`
</tr>`;
export default class Debug extends AbstractSearchOption {
static get optionName() {
return "debug";
}
static get attributeType() {
return "label";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "debug");
}

6
apps/client/src/widgets/search_options/fast_search.ts
View File

@ -19,12 +19,6 @@ const TPL = /*html*/`
</tr>`;
export default class FastSearch extends AbstractSearchOption {
static get optionName() {
return "fastSearch";
}
static get attributeType() {
return "label";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "fastSearch");

6
apps/client/src/widgets/search_options/include_archived_notes.ts
View File

@ -13,12 +13,6 @@ const TPL = /*html*/`
</tr>`;
export default class IncludeArchivedNotes extends AbstractSearchOption {
static get optionName() {
return "includeArchivedNotes";
}
static get attributeType() {
return "label";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "includeArchivedNotes");

7
apps/client/src/widgets/search_options/limit.ts
View File

@ -26,13 +26,6 @@ export default class Limit extends AbstractSearchOption {
private $limit!: JQuery<HTMLElement>;
static get optionName() {
return "limit";
}
static get attributeType() {
return "label";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10");
}

7
apps/client/src/widgets/search_options/order_by.ts
View File

@ -37,13 +37,6 @@ const TPL = /*html*/`
export default class OrderBy extends AbstractSearchOption {
static get optionName() {
return "orderBy";
}
static get attributeType() {
return "label";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "orderBy", "relevancy");
await AbstractSearchOption.setAttribute(noteId, "label", "orderDirection", "asc");

6
apps/client/src/widgets/search_options/search_script.ts
View File

@ -33,12 +33,6 @@ const TPL = /*html*/`
</tr>`;
export default class SearchScript extends AbstractSearchOption {
static get optionName() {
return "searchScript";
}
static get attributeType() {
return "relation";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "relation", "searchScript", "root");

7
apps/client/src/widgets/search_options/search_string.ts
View File

@ -11,13 +11,6 @@ export default class SearchString extends AbstractSearchOption {
private $searchString!: JQuery<HTMLElement>;
private spacedUpdate!: SpacedUpdate;
static get optionName() {
return "searchString";
}
static get attributeType() {
return "label";
}
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "searchString");
}