perf: filter relative (#1169)

* perf: do not trigger input filter when blur * fix: date filter e2e
teableio · Dec 17, 2024 · f31332f · f31332f
1 parent b2020fe
commit f31332f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/apps/nestjs-backend/test/data-helpers/caces/record-filter-query/date-field/utils.ts b/apps/nestjs-backend/test/data-helpers/caces/record-filter-query/date-field/utils.ts
@@ -6,6 +6,9 @@ import { DEFAULT_LINK_VALUE_INDEXS } from '../../../20x-link';
 export const getDates = () => {
   const tz = 'Asia/Singapore';
   const dateFieldName = x_20.fields[3].name;
+  dayjs.locale(dayjs.locale(), {
+    weekStart: 1,
+  });
   const dates = x_20.records
     .filter((r) => r.fields?.[dateFieldName])
     .map((r) => {

diff --git a/packages/sdk/src/components/editor/number/Editor.tsx b/packages/sdk/src/components/editor/number/Editor.tsx
@@ -6,9 +6,18 @@ import type { ICellEditor, IEditorRef } from '../type';
 
 export const NumberEditorBase: ForwardRefRenderFunction<
   IEditorRef<number>,
-  ICellEditor<number | null> & { placeholder?: string }
+  ICellEditor<number | null> & { placeholder?: string; saveOnChange?: boolean }
 > = (props, ref) => {
-  const { value, onChange, className, readonly, style, saveOnBlur = true, placeholder } = props;
+  const {
+    value,
+    onChange,
+    className,
+    readonly,
+    style,
+    saveOnBlur = true,
+    saveOnChange = false,
+    placeholder,
+  } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [str, setStr] = useState<string | null>(value ? value.toString() : '');
 
@@ -27,7 +36,9 @@ export const NumberEditorBase: ForwardRefRenderFunction<
   };
 
   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setStr(e.target.value);
+    const newValue = e.target.value;
+    setStr(newValue);
+    saveOnChange && onChange?.(parseStringToNumber(newValue));
   };
 
   return (
@@ -37,7 +48,7 @@ export const NumberEditorBase: ForwardRefRenderFunction<
       className={cn('h-10 sm:h-8', className)}
       value={str || ''}
       onChange={onChangeHandler}
-      onBlur={() => saveOnBlur && saveValue()}
+      onBlur={() => saveOnBlur && !saveOnChange && saveValue()}
       readOnly={readonly}
       placeholder={placeholder}
     />

diff --git a/...ges/sdk/src/components/filter/view-filter/component/filterDatePicker/FilterDatePicker.tsx b/...ges/sdk/src/components/filter/view-filter/component/filterDatePicker/FilterDatePicker.tsx
@@ -111,7 +111,7 @@ function FilterDatePicker(props: IFilerDatePickerProps) {
           <Input
             placeholder={t('filter.default.placeholder')}
             defaultValue={innerValue?.numberOfDays ?? ''}
-            className="h-8 w-24 placeholder:text-[13px]"
+            className="h-8 w-24 placeholder:text-xs"
             onInput={(e) => {
               // limit the number positive
               e.currentTarget.value = e.currentTarget.value?.replace(/\D/g, '');

diff --git a/packages/sdk/src/components/filter/view-filter/custom-component/BaseFieldValue.tsx b/packages/sdk/src/components/filter/view-filter/custom-component/BaseFieldValue.tsx
@@ -67,6 +67,7 @@ export function BaseFieldValue(props: IBaseFieldValue) {
         return (
           <NumberEditor
             value={value as number}
+            saveOnChange={true}
             onChange={onSelect as (value?: number | null) => void}
             className="min-w-28 max-w-40 placeholder:text-xs"
             placeholder={t('filter.default.placeholder')}
@@ -84,6 +85,7 @@ export function BaseFieldValue(props: IBaseFieldValue) {
       return (
         <NumberEditor
           value={value as number}
+          saveOnChange={true}
           onChange={onSelect as (value?: number | null) => void}
           className="min-w-28 max-w-40 placeholder:text-xs"
           placeholder={t('filter.default.placeholder')}