gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

chore(react/ribbon): port limit

Browse Source
This commit is contained in:
Elian Doran 2025-08-24 18:34:29 +03:00
parent 73f20d01e4
commit f8916a6e35
No known key found for this signature in database
2 changed files with 24 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@ import tree from "../../services/tree";
import NoteAutocomplete from "../react/NoteAutocomplete";
import FormSelect from "../react/FormSelect";
import Icon from "../react/Icon";
import FormTextBox from "../react/FormTextBox";
interface SearchOption {
attributeName: string;
@ -39,6 +40,7 @@ interface SearchOptionProps {
attributeName: string;
attributeType: "label" | "relation";
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
defaultValue?: string;
error?: { message: string };
}
@ -95,9 +97,11 @@ const SEARCH_OPTIONS: SearchOption[] = [
{
attributeName: "limit",
attributeType: "label",
defaultValue: "10",
icon: "bx bx-stop",
label: t("search_definition.limit"),
tooltip: t("search_definition.limit_description")
tooltip: t("search_definition.limit_description"),
component: LimitOption
},
{
attributeName: "debug",
@ -179,14 +183,15 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
</td>
</tr>
<tbody className="search-options">
{searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete }) => {
{searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete, defaultValue }) => {
return component?.({
attributeName,
attributeType,
note,
refreshResults,
error,
additionalAttributesToDelete
additionalAttributesToDelete,
defaultValue
});
})}
</tbody>
@ -483,3 +488,19 @@ function OrderByOption({ note, ...restProps }: SearchOptionProps) {
/>
</SearchOption>
}
function LimitOption({ note, defaultValue, ...restProps }: SearchOptionProps) {
const [ limit, setLimit ] = useNoteLabel(note, "limit");
return <SearchOption
titleIcon="bx bx-stop"
title={t("limit.limit")}
help={t("limit.take_first_x_results")}
note={note} {...restProps}
>
<FormTextBox
type="number" min="1" step="1"
currentValue={limit ?? defaultValue} onChange={setLimit}
/>
</SearchOption>
}

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

@ -1,49 +0,0 @@
import AbstractSearchOption from "./abstract_search_option.js";
import { t } from "../../services/i18n.js";
const TPL = /*html*/`
<tr data-search-option-conf="limit">
<td class="title-column">
<span class="bx bx-stop"></span>
${t("limit.limit")}
</td>
<td>
<input name="limit" class="form-control" type="number" min="1" step="1" />
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
${t("limit.take_first_x_results")}
</div>
</div>
<span class="bx bx-x icon-action search-option-del"></span>
</td>
</tr>`;
export default class Limit extends AbstractSearchOption {
private $limit!: JQuery<HTMLElement>;
static async create(noteId: string) {
await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10");
}
doRender() {
const $option = $(TPL);
this.$limit = $option.find("input[name=limit]");
this.$limit.on("change", () => this.update());
this.$limit.on("input", () => this.update());
this.$limit.val(this.note.getLabelValue("limit") ?? "");
return $option;
}
async update() {
const limit = String(this.$limit.val());
await this.setAttribute("label", "limit", limit);
}
}