From f86254c8ef74e5e6da71b2c21338a7cd24b80b92 Mon Sep 17 00:00:00 2001
From: ascarbek <ascarbek@gmail.com>
Date: Mon, 27 Mar 2023 18:42:23 +0600
Subject: [PATCH] chore: edit url cell

---
 .../_shared/EditRow/EditCellNumber.tsx        | 29 +++++++++++++
 .../_shared/EditRow/EditCellText.tsx          | 15 +++++--
 .../_shared/EditRow/EditCellUrl.tsx           | 43 +++++++++++++++++++
 .../_shared/EditRow/EditCellWrapper.tsx       | 29 +++++++------
 .../_shared/EditRow/EditCheckboxCell.tsx      | 23 ++++++++++
 .../components/board/BoardCell.tsx            |  7 +++
 .../components/board/BoardUrlCell.tsx         | 29 +++++++++++++
 7 files changed, 159 insertions(+), 16 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellNumber.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellUrl.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCheckboxCell.tsx
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/board/BoardUrlCell.tsx

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellNumber.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellNumber.tsx
new file mode 100644
index 0000000000..205ddd9257
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellNumber.tsx
@@ -0,0 +1,29 @@
+import { CellController } from '$app/stores/effects/database/cell/cell_controller';
+import { useEffect, useState } from 'react';
+
+export const EditCellNumber = ({
+  data,
+  cellController,
+}: {
+  data: string | undefined;
+  cellController: CellController<any, any>;
+}) => {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(data || '');
+  }, [data]);
+
+  const save = async () => {
+    await cellController?.saveCellData(value);
+  };
+
+  return (
+    <input
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={() => save()}
+      className={'w-full px-4 py-2'}
+    ></input>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx
index 357fbac9d7..65c09e9880 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx
@@ -1,11 +1,18 @@
 import { CellController } from '$app/stores/effects/database/cell/cell_controller';
 import { useEffect, useState, KeyboardEvent, useMemo } from 'react';
 
-export const EditCellText = ({ data, cellController }: { data: string; cellController: CellController<any, any> }) => {
+export const EditCellText = ({
+  data,
+  cellController,
+}: {
+  data: string | undefined;
+  cellController: CellController<any, any>;
+}) => {
   const [value, setValue] = useState('');
   const [contentRows, setContentRows] = useState(1);
+
   useEffect(() => {
-    setValue(data);
+    setValue(data || '');
   }, [data]);
 
   useEffect(() => {
@@ -21,9 +28,9 @@ export const EditCellText = ({ data, cellController }: { data: string; cellContr
   };
 
   return (
-    <div className={'px-4 py-2'}>
+    <div className={''}>
       <textarea
-        className={'h-full w-full resize-none'}
+        className={'mt-0.5 h-full w-full resize-none px-4 py-2'}
         rows={contentRows}
         value={value}
         onChange={(e) => onTextFieldChange(e.target.value)}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellUrl.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellUrl.tsx
new file mode 100644
index 0000000000..9b7e62c0f8
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellUrl.tsx
@@ -0,0 +1,43 @@
+import { URLCellDataPB } from '@/services/backend';
+import { CellController } from '$app/stores/effects/database/cell/cell_controller';
+import { useEffect, useState } from 'react';
+import { URLCellController } from '$app/stores/effects/database/cell/controller_builder';
+
+export const EditCellUrl = ({
+  data,
+  cellController,
+}: {
+  data: URLCellDataPB | undefined;
+  cellController: CellController<any, any>;
+}) => {
+  const [url, setUrl] = useState('');
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    setUrl((data as URLCellDataPB)?.url || '');
+  }, [data]);
+
+  const save = async () => {
+    await (cellController as URLCellController)?.saveCellData(url);
+    // console.log('saving url');
+  };
+
+  return (
+    <div className={'flex flex-col px-4 py-2'}>
+      <label className={'mb-1'}>URL:</label>
+      <input
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        className={'-mx-2 mb-4 rounded bg-white px-2 py-1'}
+        onBlur={() => save()}
+      />
+      <label className={'mb-1'}>Content:</label>
+      <input
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        className={'-mx-2 mb-2 rounded bg-white px-2 py-1'}
+        onBlur={() => save()}
+      />
+    </div>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx
index 6fe4f3d253..c094f9f26c 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx
@@ -2,16 +2,16 @@ import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
 import { useCell } from '$app/components/_shared/database-hooks/useCell';
 import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '$app/stores/effects/database/field/field_controller';
-import { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '@/services/backend';
+import { DateCellDataPB, FieldType, SelectOptionCellDataPB, URLCellDataPB } from '@/services/backend';
 import { useAppSelector } from '$app/stores/store';
-import { getBgColor } from '$app/components/_shared/getColor';
-import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg';
-import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg';
 import { EditCellText } from '$app/components/_shared/EditRow/EditCellText';
 import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
 import { EditCellDate } from '$app/components/_shared/EditRow/EditCellDate';
 import { useRef } from 'react';
 import { CellOptions } from '$app/components/_shared/EditRow/CellOptions';
+import { EditCellNumber } from '$app/components/_shared/EditRow/EditCellNumber';
+import { EditCheckboxCell } from '$app/components/_shared/EditRow/EditCheckboxCell';
+import { EditCellUrl } from '$app/components/_shared/EditRow/EditCellUrl';
 
 export const EditCellWrapper = ({
   cellIdentifier,
@@ -61,20 +61,25 @@ export const EditCellWrapper = ({
             ></CellOptions>
           )}
 
-        {cellIdentifier.fieldType === FieldType.Checkbox && (
-          <div className={'h-8 w-8 px-4 py-2'}>
-            {(data as boolean | undefined) ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>}
-          </div>
+        {cellIdentifier.fieldType === FieldType.Checkbox && cellController && (
+          <EditCheckboxCell data={data as boolean | undefined} cellController={cellController}></EditCheckboxCell>
         )}
 
         {cellIdentifier.fieldType === FieldType.DateTime && cellController && (
           <EditCellDate data={data as DateCellDataPB | undefined} cellController={cellController}></EditCellDate>
         )}
 
-        {(cellIdentifier.fieldType === FieldType.RichText ||
-          cellIdentifier.fieldType === FieldType.URL ||
-          cellIdentifier.fieldType === FieldType.Number) &&
-          cellController && <EditCellText data={data as string} cellController={cellController}></EditCellText>}
+        {cellIdentifier.fieldType === FieldType.Number && cellController && (
+          <EditCellNumber data={data as string | undefined} cellController={cellController}></EditCellNumber>
+        )}
+
+        {cellIdentifier.fieldType === FieldType.URL && cellController && (
+          <EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
+        )}
+
+        {cellIdentifier.fieldType === FieldType.RichText && cellController && (
+          <EditCellText data={data as string | undefined} cellController={cellController}></EditCellText>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCheckboxCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCheckboxCell.tsx
new file mode 100644
index 0000000000..25b3a50ff5
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCheckboxCell.tsx
@@ -0,0 +1,23 @@
+import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg';
+import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg';
+import { CellController } from '$app/stores/effects/database/cell/cell_controller';
+
+export const EditCheckboxCell = ({
+  data,
+  cellController,
+}: {
+  data: boolean | undefined;
+  cellController: CellController<any, any>;
+}) => {
+  const toggleValue = async () => {
+    await cellController?.saveCellData(!data);
+  };
+
+  return (
+    <div onClick={() => toggleValue()} className={'block px-4 py-2'}>
+      <button className={'h-5 w-5'}>
+        {data ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>}
+      </button>
+    </div>
+  );
+};
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 496fc30af7..e478e27955 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
@@ -5,6 +5,7 @@ import { FieldType } from '../../../services/backend';
 import { BoardOptionsCell } from './BoardOptionsCell';
 import { BoardDateCell } from './BoardDateCell';
 import { BoardTextCell } from './BoardTextCell';
+import { BoardUrlCell } from '$app/components/board/BoardUrlCell';
 
 export const BoardCell = ({
   cellIdentifier,
@@ -31,6 +32,12 @@ export const BoardCell = ({
           cellCache={cellCache}
           fieldController={fieldController}
         ></BoardDateCell>
+      ) : cellIdentifier.fieldType === FieldType.URL ? (
+        <BoardUrlCell
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        ></BoardUrlCell>
       ) : (
         <BoardTextCell
           cellIdentifier={cellIdentifier}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardUrlCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardUrlCell.tsx
new file mode 100644
index 0000000000..301a475b3d
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardUrlCell.tsx
@@ -0,0 +1,29 @@
+import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '$app/stores/effects/database/field/field_controller';
+import { useCell } from '$app/components/_shared/database-hooks/useCell';
+import { URLCellDataPB } from '@/services/backend';
+
+export const BoardUrlCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+
+  return (
+    <>
+      <a
+        className={'text-main-accent hover:underline'}
+        href={(data as URLCellDataPB | undefined)?.url || ''}
+        target={'_blank'}
+      >
+        {(data as URLCellDataPB | undefined)?.content || ''}
+      </a>
+    </>
+  );
+};