From e3b7864a911225897c3f9061d3a52155e972164a Mon Sep 17 00:00:00 2001 From: ascarbek Date: Fri, 7 Apr 2023 22:03:40 +0600 Subject: [PATCH] chore: edit option name and color --- .../_shared/EditRow/CellOptionsPopup.tsx | 16 +- .../_shared/EditRow/EditCellOptionPopup.tsx | 153 +++++++++++++----- .../components/_shared/EditRow/EditRow.tsx | 10 +- 3 files changed, 132 insertions(+), 47 deletions(-) diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx index 825f396b92..fd2f145609 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx +++ b/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(null); const inputRef = useRef(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 = ({ )} - diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx index f57bc37925..7be4aa9f70 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx +++ b/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()} />
{value.length}/30
@@ -97,86 +127,131 @@ export const EditCellOptionPopup = ({
{t('grid.selectOption.colorPanelTitle')}
-
+
onColorClick(SelectOptionColorPB.Purple)} + >
{t('grid.selectOption.purpleColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Purple && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Pink)} + >
{t('grid.selectOption.pinkColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Pink && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.LightPink)} + >
{t('grid.selectOption.lightPinkColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.LightPink && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Orange)} + >
{t('grid.selectOption.orangeColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Orange && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Yellow)} + >
{t('grid.selectOption.yellowColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Yellow && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Lime)} + >
{t('grid.selectOption.limeColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Lime && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Green)} + >
{t('grid.selectOption.greenColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Green && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Aqua)} + >
{t('grid.selectOption.aquaColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Aqua && ( + + + + )}
-
+
onColorClick(SelectOptionColorPB.Blue)} + >
{t('grid.selectOption.blueColor')}
- - - + {editingSelectOption.color === SelectOptionColorPB.Blue && ( + + + + )}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx index cc7afbc68b..eb4e42140a 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx +++ b/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(); + 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)} > )} - {showEditCellOption && editingCell && ( + {showEditCellOption && editingCell && editingSelectOption && ( {