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
Show Stats 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 { CellCache } from '$app/stores/effects/database/cell/cell_cache';
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 { useTranslation } from 'react-i18next';
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 useOutsideClick from '$app/components/_shared/useOutsideClick';
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 = ({
top,
@ -33,6 +34,7 @@ export const CellOptionsPopup = ({
const [adjustedTop, setAdjustedTop] = useState(-100);
const [value, setValue] = useState('');
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
const databaseStore = useAppSelector((state) => state.database);
useEffect(() => {
if (!ref.current) return;
@ -73,6 +75,11 @@ export const CellOptionsPopup = ({
setValue('');
};
useEffect(() => {
console.log('loaded data: ', data);
console.log('have stored ', databaseStore.fields[cellIdentifier.fieldId]);
}, [data]);
return (
<div
ref={ref}
@ -105,18 +112,27 @@ export const CellOptionsPopup = ({
<div className={'-mx-4 h-[1px] bg-shade-6'}></div>
<div className={'font-semibold text-shade-3'}>{t('grid.selectOption.panelTitle') || ''}</div>
<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
key={index}
onClick={() => onToggleOptionClick(option)}
onClick={() =>
onToggleOptionClick(
new SelectOptionPB({
id: option.selectOptionId,
name: option.title,
color: option.color || SelectOptionColorPB.Purple,
})
)
}
className={
'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'}>
{(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'}>
<CheckmarkSvg></CheckmarkSvg>
@ -127,7 +143,8 @@ export const CellOptionsPopup = ({
</button>
</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];
await group.createRow();
const newGroups = controller.groups.value;
newGroups.forEach((g) => {
console.log(g.name, g.rows);
});
setGroups([...controller.groups.value]);
};