fix: 0716 bugs

AppFlowy-IO · Jul 16, 2024 · f55a185 · f55a185
1 parent 7ac9341
commit f55a185
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 42 deletions.
diff --git a/...tend/appflowy_web_app/src/application/database-yjs/fields/number/__tests__/format.test.ts b/...tend/appflowy_web_app/src/application/database-yjs/fields/number/__tests__/format.test.ts
@@ -50,7 +50,7 @@ describe('currencyFormaterMap', () => {
   test('should return the correct formatter for EUR', () => {
     const formater = currencyFormaterMap[NumberFormat.EUR];
 
-    const result = ['€0', '€1', '€0.5', '€0.57', '€1,000', '€10,000', '€1,000,000', '€10,000,000', '€1,000,000'];
+    const result = ['€0', '€1', '€0,5', '€0,57', '€1.000', '€10.000', '€1.000.000', '€10.000.000', '€1.000.000'];
 
     testCases.forEach((testCase, index) => {
       expect(formater(testCase)).toBe(result[index]);

diff --git a/frontend/appflowy_web_app/src/application/database-yjs/fields/number/format.ts b/frontend/appflowy_web_app/src/application/database-yjs/fields/number/format.ts
@@ -32,11 +32,18 @@ export const currencyFormaterMap: Record<NumberFormat, (n: number) => string> =
     })
       .format(n)
       .replace('$', 'CA$'),
-  [NumberFormat.EUR]: (n: number) =>
-    new Intl.NumberFormat('en-IE', {
+  [NumberFormat.EUR]: (n: number) => {
+    const formattedAmount = new Intl.NumberFormat('de-DE', {
       ...commonProps,
       currency: 'EUR',
-    }).format(n),
+    })
+      .format(n)
+      .replace('€', '')
+      .trim();
+
+    return `€${formattedAmount}`;
+  },
+
   [NumberFormat.Pound]: (n: number) =>
     new Intl.NumberFormat('en-GB', {
       ...commonProps,

diff --git a/frontend/appflowy_web_app/src/application/database-yjs/selector.ts b/frontend/appflowy_web_app/src/application/database-yjs/selector.ts
@@ -307,6 +307,7 @@ export function useGroupsSelector() {
   useEffect(() => {
     if (!viewId) return;
     const view = database?.get(YjsDatabaseKey.views)?.get(viewId);
+
     const groupOrders = view?.get(YjsDatabaseKey.groups);
 
     if (!groupOrders) return;
@@ -384,6 +385,8 @@ export function useRowsByGroup(groupId: string) {
   const fields = useDatabaseFields();
   const [notFound, setNotFound] = useState(false);
   const [groupResult, setGroupResult] = useState<Map<string, Row[]>>(new Map());
+  const view = useDatabaseView();
+  const layoutSetting = view?.get(YjsDatabaseKey.layout_settings)?.get('1');
 
   useEffect(() => {
     if (!fieldId || !rowOrders || !rows) return;
@@ -417,7 +420,10 @@ export function useRowsByGroup(groupId: string) {
     };
   }, [fieldId, fields, rowOrders, rows]);
 
-  const visibleColumns = columns.filter((column) => column.visible);
+  const visibleColumns = columns.filter((column) => {
+    if (column.id === fieldId) return !layoutSetting?.get(YjsDatabaseKey.hide_ungrouped_column);
+    return column.visible;
+  });
 
   return {
     fieldId,
@@ -532,19 +538,6 @@ export function useRowDataSelector(rowId: string) {
   const rowSharedRoot = rowDoc?.getMap(YjsEditorKey.data_section);
   const row = rowSharedRoot?.get(YjsEditorKey.database_row);
 
-  useEffect(() => {
-    if (!row) return;
-
-    const observerEvent = () => {
-      console.log('row', row.toJSON());
-    };
-
-    row?.observeDeep(observerEvent);
-
-    return () => {
-      row?.unobserveDeep(observerEvent);
-    };
-  }, [row]);
   return {
     row,
   };

diff --git a/frontend/appflowy_web_app/src/application/db/index.ts b/frontend/appflowy_web_app/src/application/db/index.ts
@@ -94,13 +94,3 @@ export async function clearData() {
     console.error('Error listing databases:', e);
   }
 }
-
-window.addEventListener('keydown', (e) => {
-  if (e.key.toLowerCase() === 'r' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
-    e.stopPropagation();
-    e.preventDefault();
-    void clearData().then(() => {
-      window.location.reload();
-    });
-  }
-});
diff --git a/frontend/appflowy_web_app/src/components/_shared/scroller/AFScroller.tsx b/frontend/appflowy_web_app/src/components/_shared/scroller/AFScroller.tsx
@@ -16,9 +16,10 @@ export const AFScroller = React.forwardRef(
       <Scrollbars
         onScroll={onScroll}
         autoHide
+        hideTracksWhenNotNeeded
         ref={(el) => {
           if (!el) return;
-          
+
           const scrollEl = el.container?.firstChild as HTMLElement;
 
           if (!scrollEl) return;

diff --git a/frontend/appflowy_web_app/src/components/app/AppConfig.tsx b/frontend/appflowy_web_app/src/components/app/AppConfig.tsx
@@ -1,3 +1,4 @@
+import { clearData } from '@/application/db';
 import { EventType, on } from '@/application/session';
 import { isTokenValid } from '@/application/session/token';
 import { useAppLanguage } from '@/components/app/useAppLanguage';
@@ -88,6 +89,23 @@ function AppConfig({ children }: { children: React.ReactNode }) {
     };
   }, [closeSnackbar, enqueueSnackbar]);
 
+  useEffect(() => {
+    const handleClearData = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === 'r' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+        e.stopPropagation();
+        e.preventDefault();
+        void clearData().then(() => {
+          window.location.reload();
+        });
+      }
+    };
+
+    window.addEventListener('keydown', handleClearData);
+    return () => {
+      window.removeEventListener('keydown', handleClearData);
+    };
+  });
+
   return (
     <AFConfigContext.Provider
       value={{

diff --git a/frontend/appflowy_web_app/src/components/database/board/Board.tsx b/frontend/appflowy_web_app/src/components/database/board/Board.tsx
@@ -7,6 +7,7 @@ export function Board() {
   const database = useDatabase();
   const groups = useGroupsSelector();
 
+  console.log('groups', database);
   if (!database) {
     return (
       <div className={'flex w-full flex-1 flex-col items-center justify-center'}>

diff --git a/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx b/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx
@@ -8,7 +8,7 @@ export function Calendar() {
   const { dayPropGetter, localizer, formats, events, emptyEvents } = useCalendarSetup();
 
   return (
-    <div className={'database-calendar h-full max-h-[960px] px-16 pt-4 max-md:px-4'}>
+    <div className={'database-calendar h-full max-h-[960px] px-16 pb-6 pt-4 max-md:px-4'}>
       <BigCalendar
         components={{
           toolbar: (props) => <Toolbar {...props} emptyEvents={emptyEvents} />,

diff --git a/frontend/appflowy_web_app/src/components/database/components/board/card/Card.tsx b/frontend/appflowy_web_app/src/components/database/components/board/card/Card.tsx
@@ -43,7 +43,7 @@ export const Card = memo(({ groupFieldId, rowId, onResize, isDragging }: CardPro
       style={{
         minHeight: '38px',
       }}
-      className='relative flex flex-col gap-2 rounded-lg border border-line-border p-3 text-xs shadow-sm hover:bg-fill-list-active hover:shadow'
+      className='relative flex flex-col gap-2 rounded-lg border border-line-border p-3 text-xs shadow-sm'
     >
       {showFields.map((field, index) => {
         return <CardField index={index} key={field.fieldId} rowId={rowId} fieldId={field.fieldId} />;

diff --git a/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/NoDate.tsx b/frontend/appflowy_web_app/src/components/database/components/calendar/toolbar/NoDate.tsx
@@ -30,15 +30,12 @@ function NoDate({ emptyEvents }: { emptyEvents: CalendarEvent[] }) {
         setOpen(false);
       }}
     >
-      <Button
-        size={'small'}
-        variant={'outlined'}
-        className={'whitespace-nowrap rounded-md border-line-divider'}
-        color={'inherit'}
-        onClick={() => setOpen(true)}
+      <span
+        className={' whitespace-nowrap rounded-md border border-line-divider border-line-divider p-1 px-2'}
+        // onClick={() => setOpen(true)}
       >
         {`${t('calendar.settings.noDateTitle')} (${emptyEvents.length})`}
-      </Button>
+      </span>
     </RichTooltip>
   );
 }

diff --git a/frontend/appflowy_web_app/src/components/database/components/cell/date/DateTimeCell.tsx b/frontend/appflowy_web_app/src/components/database/components/cell/date/DateTimeCell.tsx
@@ -35,8 +35,8 @@ export function DateTimeCell({ cell, fieldId, style, placeholder }: CellProps<Da
     ) : null;
   return (
     <div style={style} className={'flex cursor-text items-center gap-1'}>
-      {hasReminder && <ReminderSvg className={'h-4 w-4'} />}
       {dateStr}
+      {hasReminder && <ReminderSvg className={'h-4 w-4'} />}
     </div>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid/grid-table/GridTable.tsx b/frontend/appflowy_web_app/src/components/database/components/grid/grid-table/GridTable.tsx
@@ -126,7 +126,7 @@ export const GridTable = ({ scrollLeft, columnWidth, columns, onScrollLeft }: Gr
           columnCount={columns.length}
           columnWidth={(index) => columnWidth(index, width)}
           rowHeight={rowHeight}
-          className={'grid-table'}
+          className={'grid-table pb-6'}
           overscanRowCount={5}
           overscanColumnCount={5}
           style={{

diff --git a/frontend/appflowy_web_app/src/styles/mixin.scss b/frontend/appflowy_web_app/src/styles/mixin.scss
@@ -9,8 +9,8 @@
 
 @mixin scrollbar-style {
   ::-webkit-scrollbar, &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+    width: 8px;
+    height: 8px;
   }
 
   &:hover {