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

* feat: add support for time-shortcut

* update

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
Zeng1998 2022-11-11 19:14:38 +08:00 committed by GitHub
parent 421f4dbf60
commit 9b827b4801
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 72 additions and 14 deletions

View File

@ -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(() => {
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} />
)}

View File

@ -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;

View File

@ -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;
}

View File

@ -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",

View File

@ -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ẻ",

View File

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

View File

@ -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;