feat: allow setting search limit and pagination to increase performance

tiddly-gittly · Aug 21, 2023 · e0a63a1 · e0a63a1
1 parent 66bc192
commit e0a63a1
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 24 deletions.
diff --git a/src/tiddlywiki-calendar/calendar-widget/customView.ts b/src/tiddlywiki-calendar/calendar-widget/customView.ts
@@ -33,7 +33,7 @@ export function getCustomViews(locale: LocaleSingularArg): CalendarOptions['view
       buttonText: locale === 'zh-cn' ? '1日' : (getIsSmallScreen() ? '1d' : 'day'),
     },
     filterList: {
-      type: 'list',
+      type: 'listYear',
       duration: { years: 1000 },
     },
   };

diff --git a/src/tiddlywiki-calendar/calendar-widget/getEvents.ts b/src/tiddlywiki-calendar/calendar-widget/getEvents.ts
@@ -39,13 +39,11 @@ export const getEventOnFullCalendarViewChange = (context: IContext): EventSource
  * Get event only based on filter.
  */
 export const getEventByFilter = (context: IContext): EventSourceFunc => async (_argument: EventSourceFuncArg) => {
-  const { filter } = context;
-  const searchKeywords = $tw.wiki.getTiddlerText('$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout');
+  const { filter, parentWidget } = context;
+  const searchKeywords = $tw.wiki.getTiddlerText('$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords');
   if (!searchKeywords || !filter) return [];
-  const titles = $tw.wiki.filterTiddlers(filter)
-    .filter(function onlyUnique(value, index, array) {
-      return array.indexOf(value) === index;
-    });
+  // no need to uniq here, let filter itself do the uniq.
+  const titles = $tw.wiki.filterTiddlers(filter, parentWidget);
   const eventsOnPeriod = getEvents(titles, context);
   return eventsOnPeriod;
 };

diff --git a/src/tiddlywiki-calendar/calendar-widget/searchMode.ts b/src/tiddlywiki-calendar/calendar-widget/searchMode.ts
@@ -1,4 +1,6 @@
 import { CalendarOptions } from '@fullcalendar/core';
+import { getIsSmallScreen } from './constants';
+import { IContext } from './initCalendar';
 
 export function getSearchModeSettings(): CalendarOptions {
   return {
@@ -14,3 +16,21 @@ export function getSearchModeSettings(): CalendarOptions {
     eventStartEditable: false,
   };
 }
+
+export function getSearchModeToolbarSettings(context: IContext): CalendarOptions {
+  return {
+    headerToolbar: getIsSmallScreen() || context.hideToolbar === true
+      ? false
+      : {
+        // Use prev next for changing limit of search result
+        left: `prev,next`,
+        center: 'title',
+      },
+    footerToolbar: getIsSmallScreen() && context.hideToolbar !== true
+      ? {
+        right: `prev,next`,
+        center: 'title',
+      }
+      : false,
+  };
+}
diff --git a/src/tiddlywiki-calendar/calendar-widget/widget.ts b/src/tiddlywiki-calendar/calendar-widget/widget.ts
@@ -50,7 +50,11 @@ class CalendarWidget extends Widget {
       // this won't cause this.render to be called...
       refreshed = true;
     }
-    if (getIsSearchMode() && changedTiddlers['$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout'].modified === true) {
+    if (
+      getIsSearchMode() &&
+      (changedTiddlers['$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords'].modified === true ||
+        changedTiddlers['$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/pagination'].modified === true)
+    ) {
       this.#calendar?.getEventSourceById(tiddlerEventSourceID)?.refetch();
       refreshed = true;
     }

diff --git a/src/tiddlywiki-calendar/plugin.info b/src/tiddlywiki-calendar/plugin.info
@@ -4,7 +4,7 @@
   "description": "Widget and Page Layout displaying tiddlers on calendar and agenda, based on created, modified, startDate and endDate fields. ",
   "core-version": ">=5.3.0",
   "plugin-type": "plugin",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "dependents": ["$:/plugins/kixam/datepicker", "$:/plugins/tiddlywiki/browser-sniff"],
   "list": "readme tiddlywiki-ui/ControlPanel/Settings tree"
 }
diff --git a/src/tiddlywiki-calendar/tiddlywiki-ui/ControlPanel/Defaults/searchPageLimit.tid b/src/tiddlywiki-calendar/tiddlywiki-ui/ControlPanel/Defaults/searchPageLimit.tid
@@ -0,0 +1,3 @@
+title: $:/plugins/linonetwo/tw-calendar/settings/searchPageLimit
+
+10
diff --git a/src/tiddlywiki-calendar/tiddlywiki-ui/ControlPanel/Settings.tid b/src/tiddlywiki-calendar/tiddlywiki-ui/ControlPanel/Settings.tid
@@ -59,4 +59,6 @@ Auto add prefix to all created event.
 	<option value='6'>Saturday</option>
 </$select>
 ;SlotDuration: The frequency for displaying time slots.
-:<$edit-text tiddler="$:/plugins/linonetwo/tw-calendar/settings/slotDuration" tabindex=-1 focus=false cancelPopups="yes" fileDrop=no tag="input" />
+:<$edit-text tiddler="$:/plugins/linonetwo/tw-calendar/settings/slotDuration" tabindex=-1 focus=false cancelPopups="yes" fileDrop=no tag="input" />
+;Search Page Limit: In search layout, the maximum number of events to display in the list. (Too large will have performance impact).
+:<$edit-text tiddler="$:/plugins/linonetwo/tw-calendar/settings/searchPageLimit" type="number" min="0" step="1" tabindex=-1 focus=false cancelPopups="yes" fileDrop=no tag="input" />
diff --git a/src/tiddlywiki-calendar/tiddlywiki-ui/PageLayout/CalendarLayout.css b/src/tiddlywiki-calendar/tiddlywiki-ui/PageLayout/CalendarLayout.css
@@ -8,6 +8,11 @@ div.tc-page-container.tw-calendar-layout-container {
   width: 100%;
 }
 
+.tw-calendar-draggable-region {
+  cursor: grab;
+  -webkit-app-region: drag;
+}
+
 .tw-calendar-search-layout-main-area {
   height: 100%;
   width: 100%;
@@ -28,6 +33,14 @@ div.tc-page-container.tw-calendar-layout-container {
   justify-content: center;
   align-items: center;
 }
+.tw-calendar-search-bar .tw-calendar-search-bar-pagination {
+  height: 100%;
+  padding: 0 1em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
 .tw-calendar-search-bar .tw-calendar-search-bar-text-field {
   width: 100%;
   display: flex;

diff --git a/src/tiddlywiki-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout.tid b/src/tiddlywiki-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout.tid
@@ -23,22 +23,41 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 <$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
 
 <main class="tw-calendar-search-layout-main-area">
+	<$set name="pagination" value={{$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/pagination}} emptyValue="0">
+		<$set name="count" value={{{ [{$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords}length[]compare:number:gt[0]] :then[all[tiddlers]!is[system]field:calendarEntry[yes]search:caption,text,keywords:words{$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords}count[]] }}} emptyValue="0">
+			<$let limit={{{ [<pagination>add{$:/plugins/linonetwo/tw-calendar/settings/searchPageLimit}] }}} >
 
-	<div class="tw-calendar-search-bar">
-		<div class="tw-calendar-search-bar-icon">
-			<$button to=<<currentTiddler>> tooltip={{$:/language/Buttons/FullScreen/Hint}} style="width: 85%;height: 85%;">
-				{{$:/plugins/linonetwo/tw-calendar/Images/ExitLayout}}
-				<$action-setfield $tiddler="$:/layout" text="" />
-			</$button>
-		</div>
-		<$edit-text tag="input" tiddler="$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout" field="text" focus="yes" class="tc-titlebar tc-edit-texteditor tw-calendar-search-bar-text-field"/>
-		<div class="tw-calendar-search-bar-icon">
-			{{$:/plugins/linonetwo/tw-calendar/tiddlywiki-ui/Images/CalendarSearchImage}}
-		</div>
-	</div>
-
-	<$calendar height="calc(100vh - 2.35em - 2 * (2px + 0.1em))" filter="[all[tiddlers]!is[system]field:calendarEntry[yes]search:caption,text,keywords:words{$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout}]" />
+				<div class="tw-calendar-search-bar">
+					<div class="tw-calendar-search-bar-icon">
+						<$button to=<<currentTiddler>> tooltip={{$:/language/Buttons/FullScreen/Hint}} style="width: 85%;height: 85%;">
+							{{$:/plugins/linonetwo/tw-calendar/Images/ExitLayout}}
+							<$action-setfield $tiddler="$:/layout" text="" />
+						</$button>
+					</div>
+					<$edit-text tag="input" tiddler="$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords" field="text" focus="yes" class="tc-titlebar tc-edit-texteditor tw-calendar-search-bar-text-field"/>
+						<div class="tw-calendar-search-bar-pagination tw-calendar-draggable-region">
+							<$button style="width: 85%;height: 85%;">
+								{{$:/core/images/chevron-left}}
+								<$action-setfield $tiddler="$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/pagination" text={{{ [<pagination>subtract{$:/plugins/linonetwo/tw-calendar/settings/searchPageLimit}] }}} />
+							</$button>
 
+							<<pagination>> ~ <$text text={{{ [<pagination>add{$:/plugins/linonetwo/tw-calendar/settings/searchPageLimit}] }}} /> / <$text text=<<count>> />
+
+							<$button style="width: 85%;height: 85%;">
+								{{$:/core/images/chevron-right}}
+								<$action-setfield $tiddler="$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/pagination" text=<<limit>> />
+							</$button>
+						</div>
+					<div class="tw-calendar-search-bar-icon tw-calendar-draggable-region">
+						{{$:/plugins/linonetwo/tw-calendar/tiddlywiki-ui/Images/CalendarSearchImage}}
+					</div>
+				</div>
+
+				<$calendar height="calc(100vh - 2.35em - 2 * (2px + 0.1em))" filter="[all[tiddlers]!is[system]field:calendarEntry[yes]search:caption,text,keywords:words{$:/state/linonetwo/tw-calendar/tiddlywiki-ui/PageLayout/EventsCalendarSearchLayout/keywords}rest<pagination>first<limit>]" />
+
+			</$let>
+		</$set>
+	</$set>
 </main>
 
 </$navigator>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		title: $:/plugins/linonetwo/tw-calendar/settings/searchPageLimit

		10