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

fix: select options for new row

Browse Source
This commit is contained in:
ascarbek
2023-03-27 02:58:12 +06:00
parent a8a35dcbec
commit c50c23bc3a
2 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx
View File

@ -3,7 +3,7 @@ import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
import { useCell } from '$app/components/_shared/database-hooks/useCell'; import { useCell } from '$app/components/_shared/database-hooks/useCell';
import { CellCache } from '$app/stores/effects/database/cell/cell_cache'; 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 { SelectOptionCellDataPB, SelectOptionPB } 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 { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Details2Svg } from '$app/components/_shared/svg/Details2Svg'; import { Details2Svg } from '$app/components/_shared/svg/Details2Svg';
@ -11,7 +11,8 @@ import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
import { CloseSvg } from '$app/components/_shared/svg/CloseSvg'; 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 { CellController } from '$app/stores/effects/database/cell/cell_controller'; import { useAppSelector } from '$app/stores/store';
import { ISelectOptionType } from '$app/stores/reducers/database/slice';
export const CellOptionsPopup = ({ export const CellOptionsPopup = ({
top, top,
@ -33,6 +34,7 @@ export const CellOptionsPopup = ({
const [adjustedTop, setAdjustedTop] = useState(-100); const [adjustedTop, setAdjustedTop] = useState(-100);
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController); const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
const databaseStore = useAppSelector((state) => state.database);
useEffect(() => { useEffect(() => {
if (!ref.current) return; if (!ref.current) return;
@ -73,6 +75,11 @@ export const CellOptionsPopup = ({
setValue(''); setValue('');
}; };
useEffect(() => {
console.log('loaded data: ', data);
console.log('have stored ', databaseStore.fields[cellIdentifier.fieldId]);
}, [data]);
return ( return (
<div <div
ref={ref} ref={ref}
@ -105,18 +112,27 @@ export const CellOptionsPopup = ({
<div className={'-mx-4 h-[1px] bg-shade-6'}></div> <div className={'-mx-4 h-[1px] bg-shade-6'}></div>
<div className={'font-semibold text-shade-3'}>{t('grid.selectOption.panelTitle') || ''}</div> <div className={'font-semibold text-shade-3'}>{t('grid.selectOption.panelTitle') || ''}</div>
<div className={'flex flex-col gap-1'}> <div className={'flex flex-col gap-1'}>
{(data as SelectOptionCellDataPB | undefined)?.options.map((option, index) => ( {(databaseStore.fields[cellIdentifier.fieldId]?.fieldOptions as ISelectOptionType).selectOptions.map(
(option, index) => (
<div <div
key={index} key={index}
onClick={() => onToggleOptionClick(option)} onClick={() =>
onToggleOptionClick(
new SelectOptionPB({
id: option.selectOptionId,
name: option.title,
color: option.color || SelectOptionColorPB.Purple,
})
)
}
className={ className={
'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 hover:bg-main-secondary' 'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 hover:bg-main-secondary'
} }
> >
<div className={`${getBgColor(option.color)} rounded px-2 py-0.5`}>{option.name}</div> <div className={`${getBgColor(option.color)} rounded px-2 py-0.5`}>{option.title}</div>
<div className={'flex items-center'}> <div className={'flex items-center'}>
{(data as SelectOptionCellDataPB | undefined)?.select_options?.find( {(data as SelectOptionCellDataPB | undefined)?.select_options?.find(
(selectedOption) => selectedOption.id === option.id (selectedOption) => selectedOption.id === option.selectOptionId
) && ( ) && (
<button className={'h-5 w-5 p-1'}> <button className={'h-5 w-5 p-1'}>
<CheckmarkSvg></CheckmarkSvg> <CheckmarkSvg></CheckmarkSvg>
@ -127,7 +143,8 @@ export const CellOptionsPopup = ({
</button> </button>
</div> </div>
</div> </div>
))} )
)}
</div> </div>
</div> </div>
</div> </div>

6
frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
View File

@ -72,12 +72,6 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
const group = groups[index]; const group = groups[index];
await group.createRow(); await group.createRow();
const newGroups = controller.groups.value;
newGroups.forEach((g) => {
console.log(g.name, g.rows);
});
setGroups([...controller.groups.value]); setGroups([...controller.groups.value]);
}; };