From 4d5a3ee13da5552156caaee483eab3eb440f0bca Mon Sep 17 00:00:00 2001
From: Mike Abebe <mikiastilahun@gmail.com>
Date: Wed, 5 Apr 2023 16:07:15 +0300
Subject: [PATCH] feat/integrate url to grid

---
 .../_shared/EditRow/CellOptions.tsx           |  2 +-
 .../_shared/EditRow/EditCellDate.tsx          |  2 +-
 .../components/grid/GridCell/GridCell.tsx     | 14 ++----
 .../components/grid/GridCell/GridCheckBox.tsx |  2 +-
 .../components/grid/GridCell/GridDate.tsx     | 49 +++++++++++++++++++
 .../components/grid/GridCell/GridTextCell.tsx | 19 ++-----
 .../components/grid/GridCell/GridUrl.tsx      | 26 ++++++++++
 .../grid/GridTableRows/GridTableRow.tsx       |  4 +-
 8 files changed, 88 insertions(+), 30 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridDate.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridUrl.tsx

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
index 63aeeab62a..9308141527 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
@@ -21,7 +21,7 @@ export const CellOptions = ({
     <div
       ref={ref}
       onClick={() => onClick()}
-      className={'flex flex-wrap items-center gap-2 px-4 py-2 text-xs text-black'}
+      className={'flex w-full flex-wrap items-center gap-2 px-4 py-2 text-xs text-black'}
     >
       {data?.select_options?.map((option, index) => (
         <div className={`${getBgColor(option.color)} rounded px-2 py-0.5`} key={index}>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
index faf24eaf3a..e4661ceeaf 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
@@ -17,7 +17,7 @@ export const EditCellDate = ({
   };
 
   return (
-    <div ref={ref} onClick={() => onClick()} className={'px-4 py-2'}>
+    <div ref={ref} onClick={() => onClick()} className={'w-full px-4 py-2'}>
       {data?.date || <>&nbsp;</>}
     </div>
   );
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
index 1c9d86f967..4473b59de9 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
@@ -8,6 +8,8 @@ import { BoardUrlCell } from '../../board/BoardUrlCell';
 import GridSingleSelectOptions from './GridSingleSelectOptions';
 import GridTextCell from './GridTextCell';
 import { GridCheckBox } from './GridCheckBox';
+import { GridDate } from './GridDate';
+import { GridUrl } from './GridUrl';
 
 export const GridCell = ({
   cellIdentifier,
@@ -31,17 +33,9 @@ export const GridCell = ({
       ) : cellIdentifier.fieldType === FieldType.Checkbox ? (
         <GridCheckBox cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
       ) : cellIdentifier.fieldType === FieldType.DateTime ? (
-        <BoardDateCell
-          cellIdentifier={cellIdentifier}
-          cellCache={cellCache}
-          fieldController={fieldController}
-        ></BoardDateCell>
+        <GridDate cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController}></GridDate>
       ) : cellIdentifier.fieldType === FieldType.URL ? (
-        <BoardUrlCell
-          cellIdentifier={cellIdentifier}
-          cellCache={cellCache}
-          fieldController={fieldController}
-        ></BoardUrlCell>
+        <GridUrl cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController}></GridUrl>
       ) : (
         <GridTextCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
       )}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCheckBox.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCheckBox.tsx
index de666731e9..1c3c3be40e 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCheckBox.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCheckBox.tsx
@@ -17,7 +17,7 @@ export const GridCheckBox = ({
 
   return (
     <div className='flex w-full justify-start'>
-      {cellController && <EditCheckboxCell cellController={cellController} data={data as unknown as boolean} />}
+      {cellController && <EditCheckboxCell cellController={cellController} data={data as 'Yes' | 'No' | undefined} />}
     </div>
   );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridDate.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridDate.tsx
new file mode 100644
index 0000000000..366d7c925a
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridDate.tsx
@@ -0,0 +1,49 @@
+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 { DateCellDataPB } from '@/services/backend';
+import { EditCellDate } from '../../_shared/EditRow/EditCellDate';
+import { useState } from 'react';
+import { DatePickerPopup } from '../../_shared/EditRow/DatePickerPopup';
+
+export const GridDate = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  const [showDatePopup, setShowDatePopup] = useState(false);
+  const [datePickerTop, setdatePickerTop] = useState(0);
+  const [datePickerLeft, setdatePickerLeft] = useState(0);
+
+  const onEditDateClick = async (left: number, top: number) => {
+    setdatePickerLeft(left);
+    setdatePickerTop(top);
+    setShowDatePopup(true);
+  };
+
+  return (
+    <div className='flex w-full cursor-pointer justify-start'>
+      {cellController && (
+        <EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
+      )}
+
+      {showDatePopup && (
+        <DatePickerPopup
+          top={datePickerTop}
+          left={datePickerLeft}
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+          onOutsideClick={() => setShowDatePopup(false)}
+        ></DatePickerPopup>
+      )}
+    </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
index 0f0ecc4b24..66d8f019a2 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
@@ -3,6 +3,7 @@ import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cach
 import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
 import { useState, useEffect } from 'react';
 import { useCell } from '../../_shared/database-hooks/useCell';
+import { EditCellText } from '../../_shared/EditRow/EditCellText';
 
 export default function GridTextCell({
   cellIdentifier,
@@ -15,21 +16,9 @@ export default function GridTextCell({
 }) {
   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 '
-    />
+    <div className='w-full'>
+      {cellController && <EditCellText data={data as string | undefined} cellController={cellController}></EditCellText>}
+    </div>
   );
 }
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridUrl.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridUrl.tsx
new file mode 100644
index 0000000000..1e66c4d2e7
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridUrl.tsx
@@ -0,0 +1,26 @@
+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 { EditCellUrl } from '../../_shared/EditRow/EditCellUrl';
+import { URLCellDataPB } from '@/services/backend/models/flowy-database/url_type_option_entities';
+
+export const GridUrl = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  return (
+    <>
+      {cellController && (
+        <EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
+      )}
+    </>
+  );
+};
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 d1e1dbe541..f15afb2eab 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
@@ -23,7 +23,7 @@ export const GridTableRow = ({
       {cells.map((cell, cellIndex) => {
         return (
           <td className='m-0  border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
-            <div className='flex w-full justify-end'>
+            <div className='flex w-full items-center justify-end'>
               <GridCell
                 cellIdentifier={cell.cellIdentifier}
                 cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
@@ -33,7 +33,7 @@ export const GridTableRow = ({
               {cellIndex === 0 && (
                 <div
                   onClick={() => onOpenRow(row)}
-                  className='hidden h-9 w-9  cursor-pointer rounded p-2 hover:bg-slate-200 group-hover:block '
+                  className='mr-1 hidden h-9 w-9  cursor-pointer rounded p-2 hover:bg-slate-200 group-hover:block '
                 >
                   <FullView />
                 </div>