WIP: Added a Search Feature

src/settings/base/settings.ts

@@ -1,3 +1,7 @@
+import { writable } from 'svelte/store';
+export const searchText = writable("");
+export const searchField = writable("");
+
 export type ProjectId = string;
 export type ViewId = string;
 

src/ui/app/View.svelte

@@ -9,11 +9,13 @@
     ViewDefinition,
     ViewId,
   } from "src/settings/settings";
-  import { applyFilter, matchesCondition } from "./filterFunctions";
+  import { applyFilter, matchesCondition, applySearch } from "./filterFunctions";
 
   import { useView } from "./useView";
   import { applySort, sortRecords } from "./viewSort";
 
+  import { searchText, searchField } from "src/settings/settings";
+
   /**
    * Specify the project.
    */
@@ -76,14 +78,24 @@
   $: viewFilter = view.filter ?? { conjunction: "and", conditions: [] };
   $: filteredFrame = applyFilter(frame, viewFilter);
 
+  // initialize search field and frame
+  let filteredAndSearchedFrame = frame;
+  $searchField = "name";
+
+  $: if ($searchText !== '') {
+    filteredAndSearchedFrame = applySearch(filteredFrame, { conjunction: "and", conditions: [{field: $searchField, operator: "contains", value: $searchText, enabled: true}] });
+  } else {
+    filteredAndSearchedFrame = filteredFrame;
+  }
+
   $: viewSort =
     view.sort.criteria.length > 0
       ? view.sort
       : ({
           criteria: [{ field: "path", order: "asc", enabled: true }],
         } satisfies SortDefinition);
 
-  $: sortedFrame = applySort(filteredFrame, viewSort);
+  $: sortedFrame = applySort(filteredAndSearchedFrame, viewSort);
 
   let recordCache: Record<string, DataRecord | undefined>;
   $: {

src/ui/app/filterFunctions.ts

@@ -96,6 +96,44 @@ export function applyFilter(
   });
 }
 
+export function matchesConditionSearch(
+  cond: FilterCondition,
+  record: DataRecord
+): boolean {
+  const { operator } = cond;
+
+  const value: Optional<DataValue> = record.values[cond.field];
+
+  if (isStringFilterOperator(operator) && cond.value !== undefined) {
+    return stringFns[operator](value?.toString().toLowerCase() ?? "", cond.value.toLowerCase());
+  }
+  return false;
+}
+
+export function matchesSearchConditions(
+  filter: FilterDefinition,
+  record: DataRecord
+) {
+  const validConds = filter.conditions.filter((cond) => {
+    return cond?.enabled ?? true;
+  });
+
+  if (!validConds.length) return true;
+
+  return validConds.every((cond) => matchesConditionSearch(cond, record));
+}
+
+export function applySearch(
+  frame: DataFrame,
+  filter: FilterDefinition
+): DataFrame {
+  return produce(frame, (draft) => {
+    draft.records = draft.records.filter((record) =>
+      matchesSearchConditions(filter, record)
+    );
+  });
+}
+
 export const baseFns: Record<
   BaseFilterOperator,
   (value: Optional<DataValue>) => boolean

src/ui/views/Board/BoardOptionsProvider.svelte

@@ -11,6 +11,9 @@
   import { BoardSettingsModal } from "./settings/settingsModal";
   import { app } from "src/lib/stores/obsidian";
 
+  import { Select } from "obsidian-svelte";
+  import { searchText, searchField } from "src/settings/settings";
+
   export let config: BoardConfig;
   export let onConfigChange: (cfg: BoardConfig) => void;
 
@@ -47,6 +50,19 @@
 <ViewLayout>
   <ViewHeader>
     <ViewToolbar variant="secondary">
+      <svelte:fragment slot="left">
+        <input type="text" bind:value={$searchText} placeholder="Search"/>
+        <Select
+          options={fields.map((field) => ({
+            label: field.name,
+            value: field.name,
+          }))}
+          value={$searchField}
+          on:change={({ detail : value }) => {
+            $searchField = value;
+          }}
+        />
+      </svelte:fragment>
       <BoardOptions
         slot="right"
         {fields}

src/ui/views/Table/TableView.svelte

@@ -11,6 +11,8 @@
   import { CreateNoteModal } from "src/ui/modals/createNoteModal";
   import { EditNoteModal } from "src/ui/modals/editNoteModal";
 
+  import { searchText, searchField } from "src/settings/settings";
+
   import type {
     GridColDef,
     GridRowProps,
@@ -30,7 +32,7 @@
   import { sortFields } from "./helpers";
   import type { ProjectDefinition } from "src/settings/settings";
   import { CreateFieldModal } from "src/ui/modals/createFieldModal";
-  import { Icon } from "obsidian-svelte";
+  import { Icon, Select } from "obsidian-svelte";
   import { TextLabel } from "./components/DataGrid/GridCell/GridTextCell";
   import { fieldIcon } from "../helpers";
 
@@ -217,6 +219,19 @@
 <ViewLayout>
   <ViewHeader>
     <ViewToolbar variant="secondary">
+      <svelte:fragment slot="left">
+        <input type="text" bind:value={$searchText} placeholder="Search"/>
+        <Select
+          options={fields.map((field) => ({
+            label: field.name,
+            value: field.name,
+          }))}
+          value={$searchField}
+          on:change={({ detail : value }) => {
+            $searchField = value;
+          }}
+        />
+      </svelte:fragment>
       <svelte:fragment slot="right">
         <SwitchSelect
           label={$i18n.t("views.table.hide-fields")}