From 5da5d92b8a6034c6d35d66a78327e503fb87eddd Mon Sep 17 00:00:00 2001
From: Mike Abebe <mikiastilahun@gmail.com>
Date: Wed, 22 Mar 2023 08:51:27 +0300
Subject: [PATCH] fix/move grid view options to dropdown

---
 .../components/_shared/svg/GroupBySvg.tsx     | 11 ++++
 .../components/grid/Grid/Grid.tsx             | 29 ++++++++++
 .../grid/GridTableRows/GridTableItem.tsx      |  2 +-
 .../grid/GridTitle/GridTitle.hooks.ts         | 13 ++---
 .../components/grid/GridTitle/GridTitle.tsx   | 16 ++++--
 .../grid/GridTitle/GridTitleOptionsPopup.tsx  | 55 +++++++++++++++++++
 .../grid/GridToolbar/GridToolbar.tsx          |  6 --
 .../src/appflowy_app/views/GridPage.hooks.ts  |  9 ---
 .../src/appflowy_app/views/GridPage.tsx       | 45 ++++-----------
 9 files changed, 122 insertions(+), 64 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/GroupBySvg.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitleOptionsPopup.tsx
 delete mode 100644 frontend/appflowy_tauri/src/appflowy_app/views/GridPage.hooks.ts

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/GroupBySvg.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/GroupBySvg.tsx
new file mode 100644
index 0000000000..32b21884b5
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/GroupBySvg.tsx
@@ -0,0 +1,11 @@
+export const GroupBySvg = () => {
+  return (
+    <svg width='100%' height='100%' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M10 2H13C13.5523 2 14 2.44772 14 3V6' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M6 2H3C2.44772 2 2 2.44772 2 3V6' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M6 14H3C2.44772 14 2 13.5523 2 13V10' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M10 14H13C13.5523 14 14 13.5523 14 13V10' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <rect x='6' y='6' width='4' height='4' rx='1' stroke='#333333' />
+    </svg>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
new file mode 100644
index 0000000000..e8d2216b32
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
@@ -0,0 +1,29 @@
+import { GridTableCount } from '../GridTableCount/GridTableCount';
+import { GridTableHeader } from '../GridTableHeader/GridTableHeader';
+import { GridAddRow } from '../GridTableRows/GridAddRow';
+import { GridTableRows } from '../GridTableRows/GridTableRows';
+import { GridTitle } from '../GridTitle/GridTitle';
+import { GridToolbar } from '../GridToolbar/GridToolbar';
+
+export const Grid = ({ viewId }: { viewId: string }) => {
+  return (
+    <div className='mx-auto mt-8 flex flex-col gap-8 px-8'>
+      <div className='flex w-full  items-center justify-between'>
+        <GridTitle />
+        <GridToolbar />
+      </div>
+
+      {/* table component view with text area for td */}
+      <div className='flex flex-col gap-4'>
+        <table className='w-full table-fixed text-sm'>
+          <GridTableHeader />
+          <GridTableRows />
+        </table>
+
+        <GridAddRow />
+      </div>
+
+      <GridTableCount />
+    </div>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx
index 82f0f78e46..99c3fe7856 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx
@@ -15,7 +15,7 @@ export const GridTableItem = ({
   return (
     <div>
       <input
-        className='h-full w-full rounded-lg border border-transparent p-2 hover:border-main-accent'
+        className='h-full w-full rounded-lg border border-transparent p-2 focus:border-main-accent'
         type='text'
         value={value}
         onChange={onValueChange}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.hooks.ts
index 91483a821a..ba04669f12 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTitle/GridTitle.hooks.ts
@@ -1,7 +1,5 @@
+import { useAppDispatch, useAppSelector } from '@/appflowy_app/stores/store';
 import { useState } from 'react';
-import { gridActions } from '../../../stores/reducers/grid/slice';
-
-import { useAppDispatch, useAppSelector } from '../../../stores/store';
 
 export const useGridTitleHooks = function () {
   const dispatch = useAppDispatch();
@@ -9,16 +7,12 @@ export const useGridTitleHooks = function () {
 
   const [title, setTitle] = useState(grid.title);
   const [changingTitle, setChangingTitle] = useState(false);
+  const [showOptions, setShowOptions] = useState(false);
 
   const onTitleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     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 (
-    <div className={'flex items-center text-xl font-semibold'}>
+    <div className={'relative flex items-center '}>
       <div>{title}</div>
-      <button className={'ml-2 h-5 w-5'}>
-        <SettingsSvg></SettingsSvg>
-      </button>
+
+      <div className='flex '>
+        <button className={'ml-2 h-5 w-5 '} onClick={() => setShowOptions(!showOptions)}>
+          <SettingsSvg></SettingsSvg>
+        </button>
+
+        {showOptions && <GridTitleOptionsPopup onClose={() => setShowOptions(!showOptions)} />}
+      </div>
     </div>
   );
 };
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: (
+        <i className={'h-[16px] w-[16px] text-black'}>
+          <FilterSvg />
+        </i>
+      ),
+      onClick: () => {
+        console.log('filter');
+      },
+      title: 'Filter',
+    },
+    {
+      icon: (
+        <i className={'h-[16px] w-[16px] text-black'}>
+          <SortSvg />
+        </i>
+      ),
+      onClick: () => {
+        console.log('sort');
+      },
+      title: 'Sort',
+    },
+    {
+      icon: (
+        <i className={'h-[16px] w-[16px] text-black'}>
+          <PropertiesSvg />
+        </i>
+      ),
+      onClick: () => {
+        console.log('fields');
+      },
+      title: 'Fields',
+    },
+    {
+      icon: (
+        <i className={'h-[16px] w-[16px] text-black'}>
+          <GroupBySvg />
+        </i>
+      ),
+      onClick: () => {
+        console.log('group by');
+      },
+      title: 'Group by',
+    },
+  ];
+  return <Popup items={items} className={'absolute top-full z-10 w-fit'} onOutsideClick={onClose} />;
+};
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 (
     <div className='flex shrink-0 items-center gap-4'>
       <SearchInput />
       <GridAddView />
-      <GridFilterButton></GridFilterButton>
-      <GridSortButton></GridSortButton>
-      <GridFieldsButton></GridFieldsButton>
     </div>
   );
 };
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 (
-    <div className='mx-auto mt-8 flex flex-col gap-8 px-8'>
-      <h1 className='text-4xl font-bold'>Grid</h1>
-
-      <div className='flex w-full  items-center justify-between'>
-        <GridTitle />
-        <GridToolbar />
-      </div>
-
-      {/* table component view with text area for td */}
-      <div className='flex flex-col gap-4'>
-        <table className='w-full table-fixed text-sm'>
-          <GridTableHeader />
-          <GridTableRows />
-        </table>
-
-        <GridAddRow />
-      </div>
-
-      <GridTableCount />
+    <div className='flex h-full flex-col gap-8 px-8 pt-8'>
+      <h1 className='text-4xl font-bold'>Grid: {viewId}</h1>
+      {viewId?.length && <Grid viewId={viewId} />}
     </div>
   );
 };