Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: edit option name and color

Browse Source
This commit is contained in:
ascarbek 2023-04-07 22:03:40 +06:00
parent 6bbf6873d6
commit e3b7864a91
3 changed files with 132 additions and 47 deletions
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow
CellOptionsPopup.tsxEditCellOptionPopup.tsxEditRow.tsx

16
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 useOutsideClick from '$app/components/_shared/useOutsideClick';
import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc'; import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc';
import { useAppSelector } from '$app/stores/store'; 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 = ({ export const CellOptionsPopup = ({
top, top,
@ -29,7 +29,7 @@ export const CellOptionsPopup = ({
cellCache: CellCache; cellCache: CellCache;
fieldController: FieldController; fieldController: FieldController;
onOutsideClick: () => void; onOutsideClick: () => void;
openOptionDetail: (_left: number, _top: number) => void; openOptionDetail: (_left: number, _top: number, _select_option: SelectOptionPB) => void;
}) => { }) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(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(); e.stopPropagation();
let target = e.target as HTMLElement; let target = e.target as HTMLElement;
@ -99,8 +99,14 @@ export const CellOptionsPopup = ({
target = target.parentElement; 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(); const { right: _left, top: _top } = target.getBoundingClientRect();
openOptionDetail(_left, _top); openOptionDetail(_left, _top, selectOption);
}; };
return ( return (
@ -163,7 +169,7 @@ export const CellOptionsPopup = ({
<CheckmarkSvg></CheckmarkSvg> <CheckmarkSvg></CheckmarkSvg>
</button> </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> <Details2Svg></Details2Svg>
</button> </button>
</div> </div>

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

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