feat: add next n days task section and add setting item for enable/di…

…sable it

src/App.tsx

@@ -19,6 +19,8 @@ import * as api from './api';
 import Mousetrap from 'mousetrap';
 import 'mousetrap-global-bind';
 import './style.css';
+import getNextNDaysTaskQuery from './querys/next-n-days';
+import { fixPreferredDateFormat } from './utils';
 
 dayjs.extend(advancedFormat);
 
@@ -46,7 +48,7 @@ function App(props: IAppProps) {
  const [userConfigs, setUserConfigs] = useRecoilState(userConfigsState);
  const themeStyle = useRecoilValue(themeStyleState);
  const themeMode = useRecoilValue(themeModeState);
- const { hotkey, whereToPlaceNewTask } = useRecoilValue(settingsState);
+ const settings = useRecoilValue(settingsState);
 
  const refreshAll = useRecoilCallback(
  ({ snapshot, refresh }) =>
@@ -63,24 +65,25 @@ function App(props: IAppProps) {
  }, [props.userConfigs, setUserConfigs]);
 
  useEffect(() => {
- if (!hotkey) {
+ if (!settings.hotkey) {
  return;
  }
 
  // @ts-ignore
- Mousetrap.bindGlobal(hotkey, () => window.logseq.hideMainUI(), 'keydown');
+ Mousetrap.bindGlobal(settings.hotkey, () => window.logseq.hideMainUI(), 'keydown');
  return () => {
  // @ts-ignore
- Mousetrap.unbindGlobal(hotkey, 'keydown');
+ Mousetrap.unbindGlobal(settings.hotkey, 'keydown');
  };
- }, [hotkey]);
+ }, [settings.hotkey]);
 
  useEffect(() => {
  if (visible) {
  setTimeout(() => {
  inputRef.current?.focus();
  }, 0);
  refreshAll();
+ window.logseq.App.getUserConfigs().then(setUserConfigs);
 
  const keydownHandler = (ev: KeyboardEvent) => {
  if (ev.key === 'Escape') {
@@ -93,7 +96,7 @@ function App(props: IAppProps) {
  document.removeEventListener('keydown', keydownHandler);
  };
  }
- }, [visible, refreshAll]);
+ }, [visible, refreshAll, setUserConfigs]);
 
  useEffect(() => {
  if (themeMode === 'dark') {
@@ -113,8 +116,12 @@ function App(props: IAppProps) {
 
  const createNewTask = async (content: string) => {
  const { preferredDateFormat, preferredTodo } = userConfigs!;
- const date = dayjs().format(preferredDateFormat);
- await api.createNewTask(date, content, { preferredTodo, whereToPlaceNewTask });
+ const { whereToPlaceNewTask } = settings;
+ const date = dayjs().format(fixPreferredDateFormat(preferredDateFormat!));
+ await api.createNewTask(date, content, {
+ preferredTodo,
+ whereToPlaceNewTask,
+ });
  refreshAll();
  };
 
@@ -132,13 +139,23 @@ function App(props: IAppProps) {
  }}
  >
  <ErrorBoundary FallbackComponent={ErrorFallback}>
- <TaskInput
- ref={inputRef}
- onCreateTask={createNewTask}
- />
+ <TaskInput ref={inputRef} onCreateTask={createNewTask} />
  <div>
  <TaskSection title="Today" query={getTodayTaskQuery()} />
- <TaskSection title="Scheduled" query={getScheduledTaskQuery()} />
+ {settings.showNextNDaysTask && (
+ <TaskSection
+ title={`Next ${settings.numberOfNextNDays} Days`}
+ query={getNextNDaysTaskQuery(settings.numberOfNextNDays)}
+ />
+ )}
+ <TaskSection
+ title="Scheduled"
+ query={
+ settings.showNextNDaysTask
+ ? getScheduledTaskQuery(dayjs().add(settings.numberOfNextNDays, 'd'))
+ : getScheduledTaskQuery()
+ }
+ />
  <TaskSection
  title="Anytime"
  query={getAnytimeTaskQuery()}

src/components/TaskItem.tsx

@@ -16,6 +16,7 @@ import {
  toggleTaskStatus,
 } from '../api';
 import { settingsState } from '../state/settings';
+import { fixPreferredDateFormat } from '../utils';
 
 export interface ITaskItemProps {
  task: TaskEntityObject;
@@ -95,7 +96,7 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
  })}
  >
  {dayjs(task.scheduled.toString(), 'YYYYMMDD').format(
- preferredDateFormat,
+ fixPreferredDateFormat(preferredDateFormat!),
  )}
  </time>
  )}

src/querys/next-n-days.ts

@@ -0,0 +1,20 @@
+import dayjs from 'dayjs';
+
+export default function getNextNDaysTaskQuery(days: number) {
+ const start = dayjs().format('YYYYMMDD');
+ const next = dayjs().add(days, 'd').format('YYYYMMDD');
+
+ const query = `
+ [:find (pull ?b [*])
+ :where
+ [?b :block/marker ?marker]
+ [(contains? #{"NOW" "LATER" "TODO" "DOING" "WAITING"} ?marker)]
+ [?b :block/page ?p]
+ (or
+ [?b :block/scheduled ?d]
+ [?b :block/deadline ?d])
+ [(> ?d ${start})]]
+ [(> ?d ${next})]]
+ `;
+ return query;
+}

src/querys/scheduled.ts

@@ -1,7 +1,8 @@
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
+
+export default function getScheduledTaskQuery(startDate: Dayjs | Date = new Date()) {
+ const start = dayjs(startDate).format('YYYYMMDD');
 
-export default function getScheduledTaskQuery() {
- const today = dayjs().format('YYYYMMDD');
  const query = `
  [:find (pull ?b [*])
  :where
@@ -11,7 +12,7 @@ export default function getScheduledTaskQuery() {
  (or
  [?b :block/scheduled ?d]
  [?b :block/deadline ?d])
- [(> ?d ${today})]]
+ [(> ?d ${start})]]
  `;
  return query;
 }

src/settings.ts

@@ -15,6 +15,20 @@ const settings: SettingSchemaDesc[] = [
  description: 'Where to place new task on journal page',
  default: '',
  },
+ {
+ key: 'showNextNDaysTask',
+ type: 'boolean',
+ title: 'show next n days task section',
+ description: 'Show next N days task section after today',
+ default: false,
+ },
+ {
+ key: 'numberOfNextNDays',
+ type: 'number',
+ title: 'how many number of days task',
+ description: 'How many number of days task show in section',
+ default: 14,
+ },
  {
  key: 'openInRightSidebar',
  type: 'boolean',

src/state/settings.ts

@@ -1,7 +1,10 @@
 import { atom, AtomEffect } from 'recoil';
+import settings from '../settings';
 
 interface IPluginSettings {
  hotkey: string;
+ showNextNDaysTask: boolean;
+ numberOfNextNDays: number;
  lightPrimaryBackgroundColor: string;
  lightSecondaryBackgroundColor: string;
  darkPrimaryBackgroundColor: string;
@@ -11,17 +14,6 @@ interface IPluginSettings {
  whereToPlaceNewTask: string;
 }
 
-const DEFAULT_SETTINGS = {
- hotkey: 'mod+shift+t',
- sectionTitleColor: '#0a0a0a',
- lightPrimaryBackgroundColor: '#ffffff',
- lightSecondaryBackgroundColor: '#f7f7f7',
- darkPrimaryBackgroundColor: '#002B37',
- darkSecondaryBackgroundColor: '#106ba3',
- openInRightSidebar: false,
- whereToPlaceNewTask: '',
-};
-
 const settingsChangedEffect: AtomEffect<IPluginSettings> = ({ setSelf }) => {
  setSelf({ ...logseq.settings } as unknown as IPluginSettings);
  const unlisten = logseq.onSettingsChanged((newSettings) => {
@@ -32,6 +24,6 @@ const settingsChangedEffect: AtomEffect<IPluginSettings> = ({ setSelf }) => {
 
 export const settingsState = atom<IPluginSettings>({
  key: 'settings',
- default: DEFAULT_SETTINGS,
+ default: settings.reduce((result, item) => ({ ...result, [item.key]: item.default }), {}) as IPluginSettings,
  effects: [settingsChangedEffect],
 });

src/state/user-configs.ts

@@ -10,31 +10,12 @@ export const DEFAULT_USER_CONFIGS: Partial<AppUserConfigs> = {
  preferredDateFormat: 'MMM do, yyyy',
 };
 
-function fixPreferredDateFormat(preferredDateFormat: string) {
- const format = preferredDateFormat
- .replace('yyyy', 'YYYY')
- .replace('dd', 'DD')
- .replace('do', 'Do')
- .replace('EEEE', 'dddd')
- .replace('EEE', 'ddd')
- .replace('EE', 'dd')
- .replace('E', 'dd');
- return format;
-}
-
 const updateUserConfigsEffect: AtomEffect<Partial<AppUserConfigs>> = ({
  setSelf,
  trigger,
 }) => {
  if (trigger === 'get') {
- window.logseq.App.getUserConfigs()
- .then((configs) => ({
- ...configs,
- preferredDateFormat: fixPreferredDateFormat(
- configs.preferredDateFormat,
- ),
- }))
- .then(setSelf);
+ window.logseq.App.getUserConfigs().then(setSelf);
  }
 };
 

src/utils.ts

@@ -7,3 +7,15 @@ export function getBlockUUID(block: BlockEntity) {
  // @ts-ignore
  return block.uuid.$uuid$;
 }
+
+export function fixPreferredDateFormat(preferredDateFormat: string) {
+ const format = preferredDateFormat
+ .replace('yyyy', 'YYYY')
+ .replace('dd', 'DD')
+ .replace('do', 'Do')
+ .replace('EEEE', 'dddd')
+ .replace('EEE', 'ddd')
+ .replace('EE', 'dd')
+ .replace('E', 'dd');
+ return format;
+}