From da4553180124e6dd3497cf6ecbb1b2d652191d18 Mon Sep 17 00:00:00 2001
From: Mike Abebe <mikiastilahun@gmail.com>
Date: Tue, 4 Apr 2023 09:23:21 +0300
Subject: [PATCH] feat/show edit popup on expand icon click

---
 .../components/_shared/svg/FullView.tsx       | 10 ++++
 .../components/board/BoardCell.tsx            | 17 ++++---
 .../components/grid/GridCell/GridCell.tsx     | 47 +++++++++++++++++++
 .../grid/GridCell/GridSingleSelectOptions.tsx | 35 ++++++++++++++
 .../components/grid/GridCell/GridTextCell.tsx | 35 ++++++++++++++
 .../grid/GridTableRows/GridTableCell.tsx      | 10 +---
 .../grid/GridTableRows/GridTableRow.tsx       | 30 ++++++++----
 7 files changed, 160 insertions(+), 24 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/FullView.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridSingleSelectOptions.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/FullView.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/FullView.tsx
new file mode 100644
index 0000000000..ba642b202e
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/FullView.tsx
@@ -0,0 +1,10 @@
+export const FullView = () => {
+  return (
+    <svg width='100%' height='100%' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M6 13H3V10' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M10 3H13V6' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M3 13L7 9' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M13 3L9 7' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
index e478e27955..45222f4a56 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
@@ -1,11 +1,13 @@
 import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
 import { CellCache } from '../../stores/effects/database/cell/cell_cache';
 import { FieldController } from '../../stores/effects/database/field/field_controller';
-import { FieldType } from '../../../services/backend';
+import { FieldType, SelectOptionCellDataPB } from '../../../services/backend';
 import { BoardOptionsCell } from './BoardOptionsCell';
 import { BoardDateCell } from './BoardDateCell';
 import { BoardTextCell } from './BoardTextCell';
 import { BoardUrlCell } from '$app/components/board/BoardUrlCell';
+import { useCell } from '../_shared/database-hooks/useCell';
+import { CellOptions } from '../_shared/EditRow/CellOptions';
 
 export const BoardCell = ({
   cellIdentifier,
@@ -16,16 +18,19 @@ export const BoardCell = ({
   cellCache: CellCache;
   fieldController: FieldController;
 }) => {
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
   return (
     <>
       {cellIdentifier.fieldType === FieldType.SingleSelect ||
       cellIdentifier.fieldType === FieldType.MultiSelect ||
       cellIdentifier.fieldType === FieldType.Checklist ? (
-        <BoardOptionsCell
-          cellIdentifier={cellIdentifier}
-          cellCache={cellCache}
-          fieldController={fieldController}
-        ></BoardOptionsCell>
+        <CellOptions
+          data={data as SelectOptionCellDataPB}
+          onEditClick={(top: number, left: number) => {
+            console.log(top, left);
+          }}
+        />
       ) : cellIdentifier.fieldType === FieldType.DateTime ? (
         <BoardDateCell
           cellIdentifier={cellIdentifier}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
new file mode 100644
index 0000000000..158549b159
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
@@ -0,0 +1,47 @@
+import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
+import { FieldType } from '@/services/backend';
+import { BoardDateCell } from '../../board/BoardDateCell';
+import { BoardUrlCell } from '../../board/BoardUrlCell';
+
+import GridSingleSelectOptions from './GridSingleSelectOptions';
+import GridTextCell from './GridTextCell';
+
+export const GridCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  return (
+    <>
+      {cellIdentifier.fieldType === FieldType.MultiSelect || cellIdentifier.fieldType === FieldType.Checklist ? (
+        <p> Select solutions</p>
+      ) : cellIdentifier.fieldType === FieldType.SingleSelect ? (
+        <GridSingleSelectOptions
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        />
+      ) : cellIdentifier.fieldType === FieldType.DateTime ? (
+        <BoardDateCell
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        ></BoardDateCell>
+      ) : cellIdentifier.fieldType === FieldType.URL ? (
+        <BoardUrlCell
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        ></BoardUrlCell>
+      ) : (
+        <GridTextCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
+      )}
+    </>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridSingleSelectOptions.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridSingleSelectOptions.tsx
new file mode 100644
index 0000000000..1fece97012
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridSingleSelectOptions.tsx
@@ -0,0 +1,35 @@
+import { useState, useEffect, useRef } from 'react';
+import { CellOptions } from '../../_shared/EditRow/CellOptions';
+import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
+import { useCell } from '../../_shared/database-hooks/useCell';
+import { SelectOptionCellDataPB } from '@/services/backend/models/flowy-database/select_type_option';
+
+export default function GridSingleSelectOptions({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  const [value, setValue] = useState((data as SelectOptionCellDataPB) || '');
+  const [showOptionsPopup, setShowOptionsPopup] = useState(false);
+
+  useEffect(() => {
+    if (data) setValue(data as SelectOptionCellDataPB);
+  }, [data]);
+  return (
+    <>
+      <div className='flex w-full justify-start' ref={ref}>
+        <CellOptions data={data as SelectOptionCellDataPB} onEditClick={() => setShowOptionsPopup(!showOptionsPopup)} />
+      </div>
+    </>
+  );
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
new file mode 100644
index 0000000000..0f0ecc4b24
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
@@ -0,0 +1,35 @@
+import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
+import { useState, useEffect } from 'react';
+import { useCell } from '../../_shared/database-hooks/useCell';
+
+export default function GridTextCell({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) {
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  const [value, setValue] = useState((data as string) || '');
+
+  useEffect(() => {
+    if (data) setValue(data as string);
+  }, [data]);
+  return (
+    <input
+      value={value}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+      onBlur={async () => {
+        await cellController?.saveCellData(value);
+      }}
+      className='min-h-[32px] w-full p-2 focus:border focus:border-main-accent focus:outline-none '
+    />
+  );
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
index e5e6fe029a..ae011b8d7f 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
@@ -1,22 +1,16 @@
 import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
 import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
-import { BoardCell } from '../../board/BoardCell';
+import { GridCell } from '../GridCell/GridCell';
 
 export const GridTableCell = ({
   cellIdentifier,
   cellCache,
   fieldController,
-  onClick,
 }: {
   cellIdentifier: CellIdentifier;
   cellCache: CellCache;
   fieldController: FieldController;
-  onClick: () => void;
 }) => {
-  return (
-    <div onClick={() => onClick()} className='w-full rounded-lg border border-transparent group-active:bg-main-accent'>
-      <BoardCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
-    </div>
-  );
+  return <GridCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />;
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
index 5e39f44716..d1e1dbe541 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
@@ -1,7 +1,8 @@
 import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
 import { RowInfo } from '@/appflowy_app/stores/effects/database/row/row_cache';
 import { useRow } from '../../_shared/database-hooks/useRow';
-import { GridTableCell } from './GridTableCell';
+import { FullView } from '../../_shared/svg/FullView';
+import { GridCell } from '../GridCell/GridCell';
 
 export const GridTableRow = ({
   viewId,
@@ -18,17 +19,26 @@ export const GridTableRow = ({
 
   console.log({ cells });
   return (
-    <tr>
+    <tr className='group'>
       {cells.map((cell, cellIndex) => {
         return (
-          <td className='m-0 border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
-            <GridTableCell
-              onClick={() => onOpenRow(row)}
-              key={cellIndex}
-              cellIdentifier={cell.cellIdentifier}
-              cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
-              fieldController={controller.fieldController}
-            />
+          <td className='m-0  border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
+            <div className='flex w-full justify-end'>
+              <GridCell
+                cellIdentifier={cell.cellIdentifier}
+                cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
+                fieldController={controller.fieldController}
+              />
+
+              {cellIndex === 0 && (
+                <div
+                  onClick={() => onOpenRow(row)}
+                  className='hidden h-9 w-9  cursor-pointer rounded p-2 hover:bg-slate-200 group-hover:block '
+                >
+                  <FullView />
+                </div>
+              )}
+            </div>
           </td>
         );
       })}