mirror of
https://github.com/zadam/trilium.git
synced 2025-12-17 12:54:24 +01:00
feat(layout/search_definition): integrate view options directly in search parameters
This commit is contained in:
Elian Doran
parent
6b9b9a96c3
commit
a7ca839afb
@ -889,7 +889,8 @@
|
||||
"search_parameters": "Search Parameters",
|
||||
"unknown_search_option": "Unknown search option {{searchOptionName}}",
|
||||
"search_note_saved": "Search note has been saved into {{- notePathTitle}}",
|
||||
"actions_executed": "Actions have been executed."
|
||||
"actions_executed": "Actions have been executed.",
|
||||
"view_options": "View options:"
|
||||
},
|
||||
"similar_notes": {
|
||||
"title": "Similar Notes",
|
||||
|
||||
@ -4,29 +4,8 @@ body.experimental-feature-new-layout {
|
||||
}
|
||||
|
||||
.title-actions {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
padding-inline-start: 15px;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0.2em;
|
||||
font-size: 0.8em;
|
||||
|
||||
.collapsible-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
input.form-control {
|
||||
padding: 2px 8px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
20
apps/client/src/widgets/note_bars/CollectionProperties.css
Normal file
20
apps/client/src/widgets/note_bars/CollectionProperties.css
Normal file
@ -0,0 +1,20 @@
|
||||
.collection-properties {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
font-size: 0.8em;
|
||||
|
||||
.dropdown-menu {
|
||||
input.form-control {
|
||||
padding: 2px 8px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,14 @@
|
||||
import "./CollectionProperties.css";
|
||||
|
||||
import { t } from "i18next";
|
||||
import { useContext } from "preact/hooks";
|
||||
import { Fragment } from "preact/jsx-runtime";
|
||||
|
||||
import FNote from "../../entities/fnote";
|
||||
import { getHelpUrlForNote } from "../../services/in_app_help";
|
||||
import { openInAppHelpFromUrl } from "../../services/utils";
|
||||
import { ViewTypeOptions } from "../collections/interface";
|
||||
import ActionButton from "../react/ActionButton";
|
||||
import Dropdown from "../react/Dropdown";
|
||||
import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
|
||||
import FormTextBox from "../react/FormTextBox";
|
||||
@ -12,9 +17,6 @@ import Icon from "../react/Icon";
|
||||
import { ParentComponent } from "../react/react_utils";
|
||||
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
|
||||
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
|
||||
import ActionButton from "../react/ActionButton";
|
||||
import { getHelpUrlForNote } from "../../services/in_app_help";
|
||||
import { openInAppHelpFromUrl } from "../../services/utils";
|
||||
|
||||
const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
|
||||
grid: "bx bxs-grid",
|
||||
@ -30,12 +32,12 @@ export default function CollectionProperties({ note }: { note: FNote }) {
|
||||
const [ viewType, setViewType ] = useViewType(note);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="collection-properties">
|
||||
<ViewTypeSwitcher viewType={viewType} setViewType={setViewType} />
|
||||
<ViewOptions note={note} viewType={viewType} />
|
||||
<div className="spacer" />
|
||||
<HelpButton note={note} />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -187,9 +189,9 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
|
||||
{index < property.options.length - 1 && <FormDropdownDivider />}
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
return renderItem(option);
|
||||
}
|
||||
return renderItem(option);
|
||||
|
||||
})}
|
||||
</FormDropdownSubmenu>
|
||||
);
|
||||
|
||||
@ -60,7 +60,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
|
||||
title: t("book_properties.book_properties"),
|
||||
icon: "bx bx-book",
|
||||
content: CollectionPropertiesTab,
|
||||
show: ({ note }) => !isNewLayout && note?.type === "book" || note?.type === "search",
|
||||
show: ({ note }) => !isNewLayout && (note?.type === "book" || note?.type === "search"),
|
||||
toggleCommand: "toggleRibbonTabBookProperties"
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,360 +1,361 @@
|
||||
import FormTextArea from "../react/FormTextArea";
|
||||
import NoteAutocomplete from "../react/NoteAutocomplete";
|
||||
import FormSelect from "../react/FormSelect";
|
||||
import Icon from "../react/Icon";
|
||||
import FormTextBox from "../react/FormTextBox";
|
||||
import { AttributeType } from "@triliumnext/commons";
|
||||
import { ComponentChildren, VNode } from "preact";
|
||||
import { useEffect, useMemo, useRef } from "preact/hooks";
|
||||
|
||||
import appContext from "../../components/app_context";
|
||||
import FNote from "../../entities/fnote";
|
||||
import { removeOwnedAttributesByNameOrType } from "../../services/attributes";
|
||||
import { AttributeType } from "@triliumnext/commons";
|
||||
import { useNoteLabel, useNoteRelation, useSpacedUpdate, useTooltip } from "../react/hooks";
|
||||
import { t } from "../../services/i18n";
|
||||
import { useEffect, useMemo, useRef } from "preact/hooks";
|
||||
import appContext from "../../components/app_context";
|
||||
import server from "../../services/server";
|
||||
import FormSelect from "../react/FormSelect";
|
||||
import FormTextArea from "../react/FormTextArea";
|
||||
import FormTextBox from "../react/FormTextBox";
|
||||
import HelpRemoveButtons from "../react/HelpRemoveButtons";
|
||||
import { useNoteLabel, useNoteRelation, useSpacedUpdate, useTooltip } from "../react/hooks";
|
||||
import Icon from "../react/Icon";
|
||||
import NoteAutocomplete from "../react/NoteAutocomplete";
|
||||
|
||||
export interface SearchOption {
|
||||
attributeName: string;
|
||||
attributeType: "label" | "relation";
|
||||
icon: string;
|
||||
label: string;
|
||||
tooltip?: string;
|
||||
component: (props: SearchOptionProps) => VNode;
|
||||
defaultValue?: string;
|
||||
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
|
||||
attributeName: string;
|
||||
attributeType: "label" | "relation";
|
||||
icon: string;
|
||||
label: string;
|
||||
tooltip?: string;
|
||||
component: (props: SearchOptionProps) => VNode;
|
||||
defaultValue?: string;
|
||||
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
|
||||
}
|
||||
|
||||
interface SearchOptionProps {
|
||||
note: FNote;
|
||||
refreshResults: () => void;
|
||||
attributeName: string;
|
||||
attributeType: "label" | "relation";
|
||||
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
|
||||
defaultValue?: string;
|
||||
error?: { message: string };
|
||||
note: FNote;
|
||||
refreshResults: () => void;
|
||||
attributeName: string;
|
||||
attributeType: "label" | "relation";
|
||||
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
|
||||
defaultValue?: string;
|
||||
error?: { message: string };
|
||||
}
|
||||
|
||||
export const SEARCH_OPTIONS: SearchOption[] = [
|
||||
{
|
||||
attributeName: "searchString",
|
||||
attributeType: "label",
|
||||
icon: "bx bx-text",
|
||||
label: t("search_definition.search_string"),
|
||||
component: SearchStringOption
|
||||
},
|
||||
{
|
||||
attributeName: "searchScript",
|
||||
attributeType: "relation",
|
||||
defaultValue: "root",
|
||||
icon: "bx bx-code",
|
||||
label: t("search_definition.search_script"),
|
||||
component: SearchScriptOption
|
||||
},
|
||||
{
|
||||
attributeName: "ancestor",
|
||||
attributeType: "relation",
|
||||
defaultValue: "root",
|
||||
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"),
|
||||
component: FastSearchOption
|
||||
},
|
||||
{
|
||||
attributeName: "includeArchivedNotes",
|
||||
attributeType: "label",
|
||||
icon: "bx bx-archive",
|
||||
label: t("search_definition.include_archived"),
|
||||
tooltip: t("search_definition.include_archived_notes_description"),
|
||||
component: IncludeArchivedNotesOption
|
||||
},
|
||||
{
|
||||
attributeName: "orderBy",
|
||||
attributeType: "label",
|
||||
defaultValue: "relevancy",
|
||||
icon: "bx bx-arrow-from-top",
|
||||
label: t("search_definition.order_by"),
|
||||
component: OrderByOption,
|
||||
additionalAttributesToDelete: [ { type: "label", name: "orderDirection" } ]
|
||||
},
|
||||
{
|
||||
attributeName: "limit",
|
||||
attributeType: "label",
|
||||
defaultValue: "10",
|
||||
icon: "bx bx-stop",
|
||||
label: t("search_definition.limit"),
|
||||
tooltip: t("search_definition.limit_description"),
|
||||
component: LimitOption
|
||||
},
|
||||
{
|
||||
attributeName: "debug",
|
||||
attributeType: "label",
|
||||
icon: "bx bx-bug",
|
||||
label: t("search_definition.debug"),
|
||||
tooltip: t("search_definition.debug_description"),
|
||||
component: DebugOption
|
||||
}
|
||||
{
|
||||
attributeName: "searchString",
|
||||
attributeType: "label",
|
||||
icon: "bx bx-text",
|
||||
label: t("search_definition.search_string"),
|
||||
component: SearchStringOption
|
||||
},
|
||||
{
|
||||
attributeName: "searchScript",
|
||||
attributeType: "relation",
|
||||
defaultValue: "root",
|
||||
icon: "bx bx-code",
|
||||
label: t("search_definition.search_script"),
|
||||
component: SearchScriptOption
|
||||
},
|
||||
{
|
||||
attributeName: "ancestor",
|
||||
attributeType: "relation",
|
||||
defaultValue: "root",
|
||||
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"),
|
||||
component: FastSearchOption
|
||||
},
|
||||
{
|
||||
attributeName: "includeArchivedNotes",
|
||||
attributeType: "label",
|
||||
icon: "bx bx-archive",
|
||||
label: t("search_definition.include_archived"),
|
||||
tooltip: t("search_definition.include_archived_notes_description"),
|
||||
component: IncludeArchivedNotesOption
|
||||
},
|
||||
{
|
||||
attributeName: "orderBy",
|
||||
attributeType: "label",
|
||||
defaultValue: "relevancy",
|
||||
icon: "bx bx-arrow-from-top",
|
||||
label: t("search_definition.order_by"),
|
||||
component: OrderByOption,
|
||||
additionalAttributesToDelete: [ { type: "label", name: "orderDirection" } ]
|
||||
},
|
||||
{
|
||||
attributeName: "limit",
|
||||
attributeType: "label",
|
||||
defaultValue: "10",
|
||||
icon: "bx bx-stop",
|
||||
label: t("search_definition.limit"),
|
||||
tooltip: t("search_definition.limit_description"),
|
||||
component: LimitOption
|
||||
},
|
||||
{
|
||||
attributeName: "debug",
|
||||
attributeType: "label",
|
||||
icon: "bx bx-bug",
|
||||
label: t("search_definition.debug"),
|
||||
tooltip: t("search_definition.debug_description"),
|
||||
component: DebugOption
|
||||
}
|
||||
];
|
||||
|
||||
function SearchOption({ note, title, titleIcon, children, help, attributeName, attributeType, additionalAttributesToDelete }: {
|
||||
note: FNote;
|
||||
title: string,
|
||||
titleIcon?: string,
|
||||
children?: ComponentChildren,
|
||||
help?: ComponentChildren,
|
||||
attributeName: string,
|
||||
attributeType: AttributeType,
|
||||
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[]
|
||||
note: FNote;
|
||||
title: string,
|
||||
titleIcon?: string,
|
||||
children?: ComponentChildren,
|
||||
help?: ComponentChildren,
|
||||
attributeName: string,
|
||||
attributeType: AttributeType,
|
||||
additionalAttributesToDelete?: { type: "label" | "relation", name: string }[]
|
||||
}) {
|
||||
return (
|
||||
<tr className={attributeName}>
|
||||
<td className="title-column">
|
||||
{titleIcon && <><Icon icon={titleIcon} />{" "}</>}
|
||||
{title}
|
||||
</td>
|
||||
<td>{children}</td>
|
||||
<HelpRemoveButtons
|
||||
help={help}
|
||||
removeText={t("abstract_search_option.remove_this_search_option")}
|
||||
onRemove={() => {
|
||||
removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
|
||||
if (additionalAttributesToDelete) {
|
||||
for (const { type, name } of additionalAttributesToDelete) {
|
||||
removeOwnedAttributesByNameOrType(note, type, name);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</tr>
|
||||
)
|
||||
return (
|
||||
<tr className={attributeName}>
|
||||
<td className="title-column">
|
||||
{titleIcon && <><Icon icon={titleIcon} />{" "}</>}
|
||||
{title}
|
||||
</td>
|
||||
<td>{children}</td>
|
||||
<HelpRemoveButtons
|
||||
help={help}
|
||||
removeText={t("abstract_search_option.remove_this_search_option")}
|
||||
onRemove={() => {
|
||||
removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
|
||||
if (additionalAttributesToDelete) {
|
||||
for (const { type, name } of additionalAttributesToDelete) {
|
||||
removeOwnedAttributesByNameOrType(note, type, name);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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);
|
||||
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();
|
||||
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)}…`}`
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</SearchOption>
|
||||
}, 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");
|
||||
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>
|
||||
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 [ 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")})` }
|
||||
];
|
||||
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 }) });
|
||||
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 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")}
|
||||
/>
|
||||
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-inline-start: 10px; margin-inline-end: 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>;
|
||||
<div style="margin-inline-start: 10px; margin-inline-end: 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>;
|
||||
}
|
||||
|
||||
function FastSearchOption({ ...restProps }: SearchOptionProps) {
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-run" title={t("fast_search.fast_search")}
|
||||
help={t("fast_search.description")}
|
||||
{...restProps}
|
||||
/>
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-run" title={t("fast_search.fast_search")}
|
||||
help={t("fast_search.description")}
|
||||
{...restProps}
|
||||
/>;
|
||||
}
|
||||
|
||||
function DebugOption({ ...restProps }: SearchOptionProps) {
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-bug" title={t("debug.debug")}
|
||||
help={<>
|
||||
<p>{t("debug.debug_info")}</p>
|
||||
{t("debug.access_info")}
|
||||
</>}
|
||||
{...restProps}
|
||||
/>
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-bug" title={t("debug.debug")}
|
||||
help={<>
|
||||
<p>{t("debug.debug_info")}</p>
|
||||
{t("debug.access_info")}
|
||||
</>}
|
||||
{...restProps}
|
||||
/>;
|
||||
}
|
||||
|
||||
function IncludeArchivedNotesOption({ ...restProps }: SearchOptionProps) {
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-archive" title={t("include_archived_notes.include_archived_notes")}
|
||||
{...restProps}
|
||||
/>
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-archive" title={t("include_archived_notes.include_archived_notes")}
|
||||
{...restProps}
|
||||
/>;
|
||||
}
|
||||
|
||||
function OrderByOption({ note, ...restProps }: SearchOptionProps) {
|
||||
const [ orderBy, setOrderBy ] = useNoteLabel(note, "orderBy");
|
||||
const [ orderDirection, setOrderDirection ] = useNoteLabel(note, "orderDirection");
|
||||
const [ orderBy, setOrderBy ] = useNoteLabel(note, "orderBy");
|
||||
const [ orderDirection, setOrderDirection ] = useNoteLabel(note, "orderDirection");
|
||||
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-arrow-from-top"
|
||||
title={t("order_by.order_by")}
|
||||
note={note} {...restProps}
|
||||
>
|
||||
<FormSelect
|
||||
className="w-auto d-inline"
|
||||
currentValue={orderBy ?? "relevancy"} onChange={setOrderBy}
|
||||
keyProperty="value" titleProperty="title"
|
||||
values={[
|
||||
{ value: "relevancy", title: t("order_by.relevancy") },
|
||||
{ value: "title", title: t("order_by.title") },
|
||||
{ value: "dateCreated", title: t("order_by.date_created") },
|
||||
{ value: "dateModified", title: t("order_by.date_modified") },
|
||||
{ value: "contentSize", title: t("order_by.content_size") },
|
||||
{ value: "contentAndAttachmentsSize", title: t("order_by.content_and_attachments_size") },
|
||||
{ value: "contentAndAttachmentsAndRevisionsSize", title: t("order_by.content_and_attachments_and_revisions_size") },
|
||||
{ value: "revisionCount", title: t("order_by.revision_count") },
|
||||
{ value: "childrenCount", title: t("order_by.children_count") },
|
||||
{ value: "parentCount", title: t("order_by.parent_count") },
|
||||
{ value: "ownedLabelCount", title: t("order_by.owned_label_count") },
|
||||
{ value: "ownedRelationCount", title: t("order_by.owned_relation_count") },
|
||||
{ value: "targetRelationCount", title: t("order_by.target_relation_count") },
|
||||
{ value: "random", title: t("order_by.random") }
|
||||
]}
|
||||
/>
|
||||
{" "}
|
||||
<FormSelect
|
||||
className="w-auto d-inline"
|
||||
currentValue={orderDirection ?? "asc"} onChange={setOrderDirection}
|
||||
keyProperty="value" titleProperty="title"
|
||||
values={[
|
||||
{ value: "asc", title: t("order_by.asc") },
|
||||
{ value: "desc", title: t("order_by.desc") }
|
||||
]}
|
||||
/>
|
||||
</SearchOption>
|
||||
return <SearchOption
|
||||
titleIcon="bx bx-arrow-from-top"
|
||||
title={t("order_by.order_by")}
|
||||
note={note} {...restProps}
|
||||
>
|
||||
<FormSelect
|
||||
className="w-auto d-inline"
|
||||
currentValue={orderBy ?? "relevancy"} onChange={setOrderBy}
|
||||
keyProperty="value" titleProperty="title"
|
||||
values={[
|
||||
{ value: "relevancy", title: t("order_by.relevancy") },
|
||||
{ value: "title", title: t("order_by.title") },
|
||||
{ value: "dateCreated", title: t("order_by.date_created") },
|
||||
{ value: "dateModified", title: t("order_by.date_modified") },
|
||||
{ value: "contentSize", title: t("order_by.content_size") },
|
||||
{ value: "contentAndAttachmentsSize", title: t("order_by.content_and_attachments_size") },
|
||||
{ value: "contentAndAttachmentsAndRevisionsSize", title: t("order_by.content_and_attachments_and_revisions_size") },
|
||||
{ value: "revisionCount", title: t("order_by.revision_count") },
|
||||
{ value: "childrenCount", title: t("order_by.children_count") },
|
||||
{ value: "parentCount", title: t("order_by.parent_count") },
|
||||
{ value: "ownedLabelCount", title: t("order_by.owned_label_count") },
|
||||
{ value: "ownedRelationCount", title: t("order_by.owned_relation_count") },
|
||||
{ value: "targetRelationCount", title: t("order_by.target_relation_count") },
|
||||
{ value: "random", title: t("order_by.random") }
|
||||
]}
|
||||
/>
|
||||
{" "}
|
||||
<FormSelect
|
||||
className="w-auto d-inline"
|
||||
currentValue={orderDirection ?? "asc"} onChange={setOrderDirection}
|
||||
keyProperty="value" titleProperty="title"
|
||||
values={[
|
||||
{ value: "asc", title: t("order_by.asc") },
|
||||
{ value: "desc", title: t("order_by.desc") }
|
||||
]}
|
||||
/>
|
||||
</SearchOption>;
|
||||
}
|
||||
|
||||
function LimitOption({ note, defaultValue, ...restProps }: SearchOptionProps) {
|
||||
const [ limit, setLimit ] = useNoteLabel(note, "limit");
|
||||
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>
|
||||
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>;
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ import appContext from "../../components/app_context";
|
||||
import FNote from "../../entities/fnote";
|
||||
import attributes from "../../services/attributes";
|
||||
import bulk_action, { ACTION_GROUPS } from "../../services/bulk_action";
|
||||
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
|
||||
import froca from "../../services/froca";
|
||||
import { t } from "../../services/i18n";
|
||||
import server from "../../services/server";
|
||||
@ -15,6 +16,7 @@ import tree from "../../services/tree";
|
||||
import { getErrorMessage } from "../../services/utils";
|
||||
import ws from "../../services/ws";
|
||||
import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
|
||||
import CollectionProperties from "../note_bars/CollectionProperties";
|
||||
import Button from "../react/Button";
|
||||
import Dropdown from "../react/Dropdown";
|
||||
import { FormListHeader, FormListItem } from "../react/FormList";
|
||||
@ -24,6 +26,8 @@ import { ParentComponent } from "../react/react_utils";
|
||||
import { TabContext } from "./ribbon-interface";
|
||||
import { SEARCH_OPTIONS, SearchOption } from "./SearchDefinitionOptions";
|
||||
|
||||
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
|
||||
|
||||
export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabContext, "note" | "ntxId" | "hidden">) {
|
||||
const parentComponent = useContext(ParentComponent);
|
||||
const [ searchOptions, setSearchOptions ] = useState<{ availableOptions: SearchOption[], activeOptions: SearchOption[] }>();
|
||||
@ -78,85 +82,90 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
|
||||
return (
|
||||
<div className="search-definition-widget">
|
||||
<div className="search-settings">
|
||||
{note && !hidden &&
|
||||
<table className="search-setting-table">
|
||||
<tbody>
|
||||
<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, defaultValue }) => (
|
||||
<Button
|
||||
size="small"
|
||||
icon={icon}
|
||||
text={label}
|
||||
title={tooltip}
|
||||
onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
|
||||
/>
|
||||
))}
|
||||
{note && !hidden && (
|
||||
<table className="search-setting-table">
|
||||
<tbody>
|
||||
<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, defaultValue }) => (
|
||||
<Button
|
||||
size="small"
|
||||
icon={icon}
|
||||
text={label}
|
||||
title={tooltip}
|
||||
onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AddBulkActionButton note={note} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody className="search-options">
|
||||
{searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete, defaultValue }) => {
|
||||
const Component = component;
|
||||
return <Component
|
||||
attributeName={attributeName}
|
||||
attributeType={attributeType}
|
||||
note={note}
|
||||
refreshResults={refreshResults}
|
||||
error={error}
|
||||
additionalAttributesToDelete={additionalAttributesToDelete}
|
||||
defaultValue={defaultValue}
|
||||
/>;
|
||||
})}
|
||||
</tbody>
|
||||
<BulkActionsList note={note} />
|
||||
<tbody className="search-actions">
|
||||
<tr>
|
||||
<td colSpan={3}>
|
||||
<div className="search-actions-container">
|
||||
<Button
|
||||
icon="bx bx-search"
|
||||
text={t("search_definition.search_button")}
|
||||
keyboardShortcut="Enter"
|
||||
onClick={refreshResults}
|
||||
/>
|
||||
<AddBulkActionButton note={note} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody className="search-options">
|
||||
{searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete, defaultValue }) => {
|
||||
const Component = component;
|
||||
return <Component
|
||||
attributeName={attributeName}
|
||||
attributeType={attributeType}
|
||||
note={note}
|
||||
refreshResults={refreshResults}
|
||||
error={error}
|
||||
additionalAttributesToDelete={additionalAttributesToDelete}
|
||||
defaultValue={defaultValue}
|
||||
/>;
|
||||
})}
|
||||
|
||||
<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);
|
||||
}}
|
||||
/>
|
||||
{isNewLayout && <tr className="view-options">
|
||||
<td className="title-column">{t("search_definition.view_options")}</td>
|
||||
<td><CollectionProperties note={note} /></td>
|
||||
</tr>}
|
||||
</tbody>
|
||||
<BulkActionsList note={note} />
|
||||
<tbody className="search-actions">
|
||||
<tr>
|
||||
<td colSpan={3}>
|
||||
<div className="search-actions-container">
|
||||
<Button
|
||||
icon="bx bx-search"
|
||||
text={t("search_definition.search_button")}
|
||||
keyboardShortcut="Enter"
|
||||
onClick={refreshResults}
|
||||
/>
|
||||
|
||||
{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;
|
||||
}
|
||||
<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);
|
||||
}}
|
||||
/>
|
||||
|
||||
await ws.waitForMaxKnownEntityChangeId();
|
||||
await appContext.tabManager.getActiveContext()?.setNote(notePath);
|
||||
{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;
|
||||
}
|
||||
|
||||
// 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>
|
||||
}
|
||||
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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user