gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

chore(react/note_icon): add back filter by category

Browse Source
This commit is contained in:
Elian Doran 2025-08-21 14:57:54 +03:00
parent cdde530b60
commit 3fa290a257
No known key found for this signature in database
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/client/src/widgets/note_icon.tsx
View File

@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
import server from "../services/server";
import type { Category, Icon } from "./icon_list";
import FormTextBox from "./react/FormTextBox";
import FormSelect from "./react/FormSelect";
interface IconToCountCache {
iconClassToCountMap: Record<string, number>;
@ -13,6 +14,7 @@ interface IconToCountCache {
interface IconData {
iconToCount: Record<string, number>;
categories: Category[];
icons: Icon[];
}
@ -49,7 +51,7 @@ export default function NoteIcon() {
function NoteIconList() {
const [ search, setSearch ] = useState<string>();
const [ categoryId, setCategoryId ] = useState<number>();
const [ categoryId, setCategoryId ] = useState<string>("0");
const [ iconData, setIconData ] = useState<IconData>();
useEffect(() => {
@ -62,7 +64,7 @@ function NoteIconList() {
let icons: Icon[] = fullIconData.icons;
if (search || categoryId) {
icons = icons.filter((icon) => {
if (categoryId && icon.category_id !== categoryId) {
if (categoryId !== "0" && String(icon.category_id) !== categoryId) {
return false;
}
@ -78,7 +80,8 @@ function NoteIconList() {
setIconData({
iconToCount,
icons
icons,
categories: fullIconData.categories
})
}
@ -88,7 +91,13 @@ function NoteIconList() {
return (
<>
<div class="filter-row">
<span>{t("note_icon.category")}</span> <select name="icon-category" class="form-select"></select>
<span>{t("note_icon.category")}</span>
<FormSelect
name="icon-category"
values={fullIconData?.categories ?? []}
currentValue={categoryId} onChange={setCategoryId}
keyProperty="id" titleProperty="name"
/>
<span>{t("note_icon.search")}</span>
<FormTextBox

11
apps/client/src/widgets/react/FormSelect.tsx
View File

@ -20,6 +20,7 @@ interface ValueConfig<T, Q> {
interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
id?: string;
name?: string;
onChange: OnChangeListener;
style?: CSSProperties;
}
@ -27,9 +28,9 @@ interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
/**
* Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
*/
export default function FormSelect<T>({ id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
export default function FormSelect<T>({ name, id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
return (
<FormSelectBody id={id} onChange={onChange} style={style}>
<FormSelectBody name={name} id={id} onChange={onChange} style={style}>
<FormSelectGroup {...restProps} />
</FormSelectBody>
);
@ -38,9 +39,9 @@ export default function FormSelect<T>({ id, onChange, style, ...restProps }: For
/**
* Similar to {@link FormSelect}, but the top-level elements are actually groups.
*/
export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
return (
<FormSelectBody id={id} onChange={onChange}>
<FormSelectBody name={name} id={id} onChange={onChange}>
{values.map(({ title, items }) => {
return (
<optgroup label={title}>
@ -52,7 +53,7 @@ export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty
)
}
function FormSelectBody({ id, children, onChange, style }: { id?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
function FormSelectBody({ id, name, children, onChange, style }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
return (
<select
id={id}