feat: add support for time-shortcut (#434)

* feat: add support for time-shortcut

* update

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/CreateShortcutDialog.tsx

@@ -8,6 +8,7 @@ import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
 import Selector from "./common/Selector";
 import "../less/create-shortcut-dialog.less";
+import dayjs from "dayjs";
 
 interface Props extends DialogProps {
   shortcutId?: ShortcutId;
@@ -176,8 +177,15 @@ const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterIn
           return { text: t, value: t };
         });
 
+  const maxDatetimeValue = dayjs().format("9999-12-31T23:59");
+
   useEffect(() => {
-    setValue(filter.value.value);
+    if (type === "DISPLAY_TIME") {
+      const nowDatetimeValue = dayjs().format("YYYY-MM-DDTHH:mm");
+      handleValueChange(nowDatetimeValue);
+    } else {
+      setValue(filter.value.value);
+    }
   }, [type]);
 
   const handleRelationChange = (value: string) => {
@@ -260,6 +268,16 @@ const MemoFilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterIn
           }}
           placeholder={t("filter.text-placeholder")}
         />
+      ) : type === "DISPLAY_TIME" ? (
+        <input
+          className="datetime-selector"
+          type="datetime-local"
+          value={value}
+          max={maxDatetimeValue}
+          onChange={(event) => {
+            handleValueChange(event.target.value);
+          }}
+        />
       ) : (
         <Selector className="value-selector" dataSource={valueDataSource} value={value} handleValueChanged={handleValueChange} />
       )}

web/src/helpers/filter.ts

@@ -1,4 +1,5 @@
 import { TAG_REG, LINK_REG } from "../labs/marked/parser";
+import dayjs from "dayjs";
 
 export const relationConsts = [
   { text: "And", value: "AND" },
@@ -58,6 +59,20 @@ export const filterConsts = {
       },
     ],
   },
+  DISPLAY_TIME: {
+    text: "Display Time",
+    value: "DISPLAY_TIME",
+    operators: [
+      {
+        text: "filter.operator.before",
+        value: "BEFORE",
+      },
+      {
+        text: "filter.operator.after",
+        value: "AFTER",
+      },
+    ],
+  },
 };
 
 export const memoSpecialTypes = filterConsts["TYPE"].values;
@@ -152,6 +167,12 @@ export const checkShouldShowMemo = (memo: Memo, filter: Filter) => {
       }
       shouldShow = contained;
     }
+  } else if (type === "DISPLAY_TIME") {
+    if (operator === "BEFORE") {
+      return memo.displayTs < dayjs(value).valueOf();
+    } else {
+      return memo.displayTs > dayjs(value).valueOf();
+    }
   }
 
   return shouldShow;

web/src/less/create-shortcut-dialog.less

@@ -73,15 +73,15 @@
     }
 
     &.type-selector {
-      @apply w-20;
-    }
-
-    &.operator-selector {
       @apply w-24;
     }
 
+    &.operator-selector {
+      @apply w-20;
+    }
+
     &.value-selector {
-      flex-grow: 1;
+    @apply grow;
     }
   }
 
@@ -90,6 +90,11 @@
     @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
   }
 
+  > input.datetime-selector{
+    max-width: calc(100% - 152px);
+    @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
+  }
+
   > .remove-btn {
     @apply w-4 h-auto ml-1 cursor-pointer opacity-60 hover:opacity-80;
   }

web/src/locales/en.json

@@ -112,7 +112,9 @@
       "contains": "Contains",
       "not-contains": "Does not contain",
       "is": "Is",
-      "is-not": "Is Not"
+      "is-not": "Is Not",
+      "before": "Before",
+      "after": "After"
     },
     "value": {
       "not-tagged": "No tags",

web/src/locales/vi.json

@@ -109,10 +109,12 @@
   "filter": {
     "new-filter": "Bộ lọc mới",
     "operator": {
-      "contains": "Contains",
-      "not-contains": "Does not contain",
-      "is": "Is",
-      "is-not": "Is Not"
+      "contains": "Chứa",
+      "not-contains": "Không chứa",
+      "is": "Là",
+      "is-not": "không phải",
+      "before": "Trước",
+      "after": "sau"
     },
     "value": {
       "not-tagged": "Không có thẻ",

web/src/locales/zh.json

@@ -112,7 +112,9 @@
       "contains": "包含",
       "not-contains": "不包含",
       "is": "是",
-      "is-not": "不是"
+      "is-not": "不是",
+      "before": "早于",
+      "after": "晚于"
     },
     "value": {
       "not-tagged": "无标签",

web/src/types/filter.d.ts

@@ -33,6 +33,14 @@ interface TextFilter extends BaseFilter {
   };
 }
 
-type FilterType = "TEXT" | "TYPE" | "TAG";
+interface DisplayTimeFilter extends BaseFilter {
+  type: "DISPLAY_TIME";
+  value: {
+    operator: "BEFORE" | "AFTER";
+    value: string;
+  };
+}
 
-type Filter = BaseFilter | TagFilter | TypeFilter | TextFilter;
+type FilterType = "TEXT" | "TYPE" | "TAG" | "DISPLAY_TIME";
+
+type Filter = BaseFilter | TagFilter | TypeFilter | TextFilter | DisplayTimeFilter;