chore: edit option name and color

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx

@@ -12,7 +12,7 @@ import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
 import useOutsideClick from '$app/components/_shared/useOutsideClick';
 import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc';
 import { useAppSelector } from '$app/stores/store';
-import { ISelectOptionType } from '$app/stores/reducers/database/slice';
+import { ISelectOption, ISelectOptionType } from '$app/stores/reducers/database/slice';
 
 export const CellOptionsPopup = ({
   top,
@@ -29,7 +29,7 @@ export const CellOptionsPopup = ({
   cellCache: CellCache;
   fieldController: FieldController;
   onOutsideClick: () => void;
-  openOptionDetail: (_left: number, _top: number) => void;
+  openOptionDetail: (_left: number, _top: number, _select_option: SelectOptionPB) => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -90,7 +90,7 @@ export const CellOptionsPopup = ({
     }
   };
 
-  const onOptionDetailClick: MouseEventHandler = (e) => {
+  const onOptionDetailClick = (e: any, option: ISelectOption) => {
     e.stopPropagation();
     let target = e.target as HTMLElement;
 
@@ -99,8 +99,14 @@ export const CellOptionsPopup = ({
       target = target.parentElement;
     }
 
+    const selectOption = new SelectOptionPB({
+      id: option.selectOptionId,
+      name: option.title,
+      color: option.color || SelectOptionColorPB.Purple,
+    });
+
     const { right: _left, top: _top } = target.getBoundingClientRect();
-    openOptionDetail(_left, _top);
+    openOptionDetail(_left, _top, selectOption);
   };
 
   return (
@@ -163,7 +169,7 @@ export const CellOptionsPopup = ({
                       <CheckmarkSvg></CheckmarkSvg>
                     </button>
                   )}
-                  <button onClick={onOptionDetailClick} className={'h-6 w-6 p-1'}>
+                  <button onClick={(e) => onOptionDetailClick(e, option)} className={'h-6 w-6 p-1'}>
                     <Details2Svg></Details2Svg>
                   </button>
                 </div>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx

@@ -3,7 +3,7 @@ import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '$app/stores/effects/database/field/field_controller';
 import { KeyboardEventHandler, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SelectOptionCellDataPB, SelectOptionColorPB } from '@/services/backend';
+import { SelectOptionCellDataPB, SelectOptionColorPB, SelectOptionPB } from '@/services/backend';
 import { getBgColor } from '$app/components/_shared/getColor';
 import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
 import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc';
@@ -15,6 +15,7 @@ export const EditCellOptionPopup = ({
   left,
   top,
   cellIdentifier,
+  editingSelectOption,
   cellCache,
   fieldController,
   onOutsideClick,
@@ -22,6 +23,7 @@ export const EditCellOptionPopup = ({
   left: number;
   top: number;
   cellIdentifier: CellIdentifier;
+  editingSelectOption: SelectOptionPB;
   cellCache: CellCache;
   fieldController: FieldController;
   onOutsideClick: () => void;
@@ -46,6 +48,10 @@ export const EditCellOptionPopup = ({
     }
   }, [ref, window, top, left]);
 
+  useEffect(() => {
+    setValue(editingSelectOption.name);
+  }, [editingSelectOption]);
+
   const onKeyDown: KeyboardEventHandler = async (e) => {
     if (e.key === 'Enter' && value.length > 0) {
       await new SelectOptionCellBackendService(cellIdentifier).createOption({ name: value });
@@ -59,8 +65,31 @@ export const EditCellOptionPopup = ({
     }
   };
 
-  const onDeleteOptionClick = () => {
-    console.log('delete option');
+  const onBlur = async () => {
+    const svc = new SelectOptionCellBackendService(cellIdentifier);
+    await svc.updateOption(
+      new SelectOptionPB({
+        id: editingSelectOption.id,
+        color: editingSelectOption.color,
+        name: value,
+      })
+    );
+  };
+
+  const onColorClick = async (color: SelectOptionColorPB) => {
+    const svc = new SelectOptionCellBackendService(cellIdentifier);
+    await svc.updateOption(
+      new SelectOptionPB({
+        id: editingSelectOption.id,
+        color,
+        name: editingSelectOption.name,
+      })
+    );
+  };
+
+  const onDeleteOptionClick = async () => {
+    const svc = new SelectOptionCellBackendService(cellIdentifier);
+    await svc.deleteOption([editingSelectOption]);
   };
 
   return (
@@ -80,6 +109,7 @@ export const EditCellOptionPopup = ({
             value={value}
             onChange={(e) => setValue(e.target.value)}
             onKeyDown={onKeyDown}
+            onBlur={() => onBlur()}
           />
           <div className={'font-mono text-shade-3'}>{value.length}/30</div>
         </div>
@@ -97,86 +127,131 @@ export const EditCellOptionPopup = ({
         <div className={'-mx-4 h-[1px] bg-shade-6'}></div>
         <div className={'my-2 font-medium text-shade-3'}>{t('grid.selectOption.colorPanelTitle')}</div>
         <div className={'flex flex-col'}>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Purple)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Purple)}`}></div>
               <span>{t('grid.selectOption.purpleColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Purple && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Pink)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Pink)}`}></div>
               <span>{t('grid.selectOption.pinkColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Pink && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.LightPink)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.LightPink)}`}></div>
               <span>{t('grid.selectOption.lightPinkColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.LightPink && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Orange)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Orange)}`}></div>
               <span>{t('grid.selectOption.orangeColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Orange && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Yellow)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Yellow)}`}></div>
               <span>{t('grid.selectOption.yellowColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Yellow && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Lime)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Lime)}`}></div>
               <span>{t('grid.selectOption.limeColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Lime && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Green)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Green)}`}></div>
               <span>{t('grid.selectOption.greenColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Green && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Aqua)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Aqua)}`}></div>
               <span>{t('grid.selectOption.aquaColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Aqua && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
-          <div className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}>
+          <div
+            className={'flex cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-main-secondary'}
+            onClick={() => onColorClick(SelectOptionColorPB.Blue)}
+          >
             <div className={'flex items-center gap-2'}>
               <div className={`h-4 w-4 rounded-full ${getBgColor(SelectOptionColorPB.Blue)}`}></div>
               <span>{t('grid.selectOption.blueColor')}</span>
             </div>
-            <i className={'block h-3 w-3'}>
-              <CheckmarkSvg></CheckmarkSvg>
-            </i>
+            {editingSelectOption.color === SelectOptionColorPB.Blue && (
+              <i className={'block h-3 w-3'}>
+                <CheckmarkSvg></CheckmarkSvg>
+              </i>
+            )}
           </div>
         </div>
       </div>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx

@@ -11,7 +11,7 @@ import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
 import { ChangeFieldTypePopup } from '$app/components/_shared/EditRow/ChangeFieldTypePopup';
 import { TypeOptionController } from '$app/stores/effects/database/field/type_option/type_option_controller';
 import { Some } from 'ts-results';
-import { FieldType } from '@/services/backend';
+import { FieldType, SelectOptionPB } from '@/services/backend';
 import { CellOptionsPopup } from '$app/components/_shared/EditRow/CellOptionsPopup';
 import { DatePickerPopup } from '$app/components/_shared/EditRow/DatePickerPopup';
 import { DragDropContext, Droppable, OnDragEndResponder } from 'react-beautiful-dnd';
@@ -53,6 +53,8 @@ export const EditRow = ({
   const [editCellOptionTop, setEditCellOptionTop] = useState(0);
   const [editCellOptionLeft, setEditCellOptionLeft] = useState(0);
 
+  const [editingSelectOption, setEditingSelectOption] = useState<SelectOptionPB | undefined>();
+
   useEffect(() => {
     setUnveil(true);
   }, []);
@@ -111,7 +113,8 @@ export const EditRow = ({
     setShowDatePicker(true);
   };
 
-  const onOpenOptionDetailClick = (_left: number, _top: number) => {
+  const onOpenOptionDetailClick = (_left: number, _top: number, _select_option: SelectOptionPB) => {
+    setEditingSelectOption(_select_option);
     setShowEditCellOption(true);
     setEditCellOptionLeft(_left);
     setEditCellOptionTop(_top);
@@ -226,11 +229,12 @@ export const EditRow = ({
             onOutsideClick={() => setShowDatePicker(false)}
           ></DatePickerPopup>
         )}
-        {showEditCellOption && editingCell && (
+        {showEditCellOption && editingCell && editingSelectOption && (
           <EditCellOptionPopup
             top={editCellOptionTop}
             left={editCellOptionLeft}
             cellIdentifier={editingCell}
+            editingSelectOption={editingSelectOption}
             cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
             fieldController={controller.fieldController}
             onOutsideClick={() => {