) => {
setTitle(event.target.value);
};
- const onTitleBlur = () => {
- dispatch(gridActions.updateGridTitle({ title }));
- setChangingTitle(false);
- };
-
const onTitleClick = () => {
setChangingTitle(true);
};
@@ -26,8 +20,9 @@ export const useGridTitleHooks = function () {
return {
title,
onTitleChange,
- onTitleBlur,
onTitleClick,
changingTitle,
+ showOptions,
+ setShowOptions,
};
};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.tsx
index 282af7be62..a50b08be87 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.tsx
@@ -1,15 +1,21 @@
import { useGridTitleHooks } from './GridTitle.hooks';
import { SettingsSvg } from '../../_shared/svg/SettingsSvg';
+import { GridTitleOptionsPopup } from './GridTitleOptionsPopup';
export const GridTitle = () => {
- const { title } = useGridTitleHooks();
+ const { title, showOptions, setShowOptions } = useGridTitleHooks();
return (
-
+
{title}
-
+
+
+
+
+ {showOptions && setShowOptions(!showOptions)} />}
+
);
};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx
new file mode 100644
index 0000000000..c57962ed93
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx
@@ -0,0 +1,55 @@
+import { IPopupItem, Popup } from '../../_shared/Popup';
+import { FilterSvg } from '../../_shared/svg/FilterSvg';
+import { GroupBySvg } from '../../_shared/svg/GroupBySvg';
+import { PropertiesSvg } from '../../_shared/svg/PropertiesSvg';
+import { SortSvg } from '../../_shared/svg/SortSvg';
+
+export const GridTitleOptionsPopup = ({ onClose }: { onClose?: () => void }) => {
+ const items: IPopupItem[] = [
+ {
+ icon: (
+
+
+
+ ),
+ onClick: () => {
+ console.log('filter');
+ },
+ title: 'Filter',
+ },
+ {
+ icon: (
+
+
+
+ ),
+ onClick: () => {
+ console.log('sort');
+ },
+ title: 'Sort',
+ },
+ {
+ icon: (
+
+
+
+ ),
+ onClick: () => {
+ console.log('fields');
+ },
+ title: 'Fields',
+ },
+ {
+ icon: (
+
+
+
+ ),
+ onClick: () => {
+ console.log('group by');
+ },
+ title: 'Group by',
+ },
+ ];
+ return
;
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridToolbar/GridToolbar.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridToolbar/GridToolbar.tsx
index ea88a4cf7b..6039a6147a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridToolbar/GridToolbar.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridToolbar/GridToolbar.tsx
@@ -1,17 +1,11 @@
import { GridAddView } from '../GridAddView/GridAddView';
import { SearchInput } from '../../_shared/SearchInput';
-import { GridSortButton } from './GridSortButton';
-import { GridFieldsButton } from './GridFieldsButton';
-import { GridFilterButton } from './GridFilterButton';
export const GridToolbar = () => {
return (
-
-
-
);
};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.hooks.ts
deleted file mode 100644
index 68c0f81ebd..0000000000
--- a/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.hooks.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const useGrid = () => {
- const loadGrid = async (id: string) => {
- console.log('loading grid');
- };
-
- return {
- loadGrid,
- };
-};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.tsx b/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.tsx
index ce8e474e05..b4a0f4157a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/views/GridPage.tsx
@@ -1,45 +1,22 @@
-import { GridAddView } from '../components/grid/GridAddView/GridAddView';
-import { GridTableCount } from '../components/grid/GridTableCount/GridTableCount';
-import { GridTableHeader } from '../components/grid/GridTableHeader/GridTableHeader';
-import { GridAddRow } from '../components/grid/GridTableRows/GridAddRow';
-import { GridTableRows } from '../components/grid/GridTableRows/GridTableRows';
-import { GridTitle } from '../components/grid/GridTitle/GridTitle';
-import { SearchInput } from '../components/_shared/SearchInput';
-import { GridToolbar } from '../components/grid/GridToolbar/GridToolbar';
import { useParams } from 'react-router-dom';
-import { useGrid } from './GridPage.hooks';
-import { useEffect } from 'react';
+
+import { useEffect, useState } from 'react';
+import { Grid } from '../components/grid/Grid/Grid';
export const GridPage = () => {
const params = useParams();
- const { loadGrid } = useGrid();
+ const [viewId, setViewId] = useState('');
useEffect(() => {
- void (async () => {
- if (!params?.id) return;
- await loadGrid(params.id);
- })();
+ if (params?.id?.length) {
+ setViewId(params.id);
+ // setDatabaseId('testDb');
+ }
}, [params]);
return (
-
-
Grid
-
-
-
-
-
-
- {/* table component view with text area for td */}
-
-
-
+
+
Grid: {viewId}
+ {viewId?.length && }
);
};