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: initial edit board modal

Browse Source
This commit is contained in:
ascarbek 2023-03-21 10:50:59 +06:00 committed by Mike Abebe
parent 073adf6268
commit 0719f54dec
2 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardCell.tsx Normal file
View File

@ -0,0 +1,54 @@
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 { FieldType, SelectOptionCellDataPB } from '@/services/backend';
import { TextTypeSvg } from '$app/components/_shared/svg/TextTypeSvg';
import { NumberTypeSvg } from '$app/components/_shared/svg/NumberTypeSvg';
import { DateTypeSvg } from '$app/components/_shared/svg/DateTypeSvg';
import { SingleSelectTypeSvg } from '$app/components/_shared/svg/SingleSelectTypeSvg';
import { MultiSelectTypeSvg } from '$app/components/_shared/svg/MultiSelectTypeSvg';
import { ChecklistTypeSvg } from '$app/components/_shared/svg/ChecklistTypeSvg';
import { UrlTypeSvg } from '$app/components/_shared/svg/UrlTypeSvg';
import { useAppSelector } from '$app/stores/store';
export const EditBoardCell = ({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) => {
const { data } = useCell(cellIdentifier, cellCache, fieldController);
const databaseStore = useAppSelector((state) => state.database);
return (
<div className={'flex w-full items-center'}>
<div className={'flex w-[180px] cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-shade-6'}>
<div className={'h-5 w-5 flex-shrink-0'}>
{cellIdentifier.fieldType === FieldType.RichText && <TextTypeSvg></TextTypeSvg>}
{cellIdentifier.fieldType === FieldType.Number && <NumberTypeSvg></NumberTypeSvg>}
{cellIdentifier.fieldType === FieldType.DateTime && <DateTypeSvg></DateTypeSvg>}
{cellIdentifier.fieldType === FieldType.SingleSelect && <SingleSelectTypeSvg></SingleSelectTypeSvg>}
{cellIdentifier.fieldType === FieldType.MultiSelect && <MultiSelectTypeSvg></MultiSelectTypeSvg>}
{cellIdentifier.fieldType === FieldType.Checklist && <ChecklistTypeSvg></ChecklistTypeSvg>}
{cellIdentifier.fieldType === FieldType.URL && <UrlTypeSvg></UrlTypeSvg>}
</div>
<span className={'overflow-hidden text-ellipsis whitespace-nowrap'}>
{databaseStore.fields[cellIdentifier.fieldId].title}
</span>
</div>
<div className={'flex-1'}>
{(cellIdentifier.fieldType === FieldType.SingleSelect || cellIdentifier.fieldType === FieldType.MultiSelect) && (
<div>
{(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
<div key={index}>{option?.name || ''}</div>
)) || ''}
</div>
)}
{<div>{data as string}</div>}
</div>
</div>
);
};

41
frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardRow.tsx Normal file
View File

@ -0,0 +1,41 @@
import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
import { useRow } from '$app/components/_shared/database-hooks/useRow';
import { DatabaseController } from '$app/stores/effects/database/database_controller';
import { RowInfo } from '$app/stores/effects/database/row/row_cache';
import { EditBoardCell } from '$app/components/board/EditBoardRow/EditBoardCell';
export const EditBoardRow = ({
onClose,
viewId,
controller,
rowInfo,
}: {
onClose: () => void;
viewId: string;
controller: DatabaseController;
rowInfo: RowInfo;
}) => {
const { cells } = useRow(viewId, controller, rowInfo);
return (
<div className={'fixed inset-0 z-20 flex items-center justify-center bg-black/30 backdrop-blur-sm'}>
<div className={'relative flex min-w-[70%] flex-col gap-8 rounded-xl bg-white p-8'}>
<div onClick={() => onClose()} className={'absolute top-4 right-4'}>
<button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}>
<CloseSvg></CloseSvg>
</button>
</div>
<div className={'flex flex-col gap-4'}>
{cells.map((cell, cellIndex) => (
<EditBoardCell
key={cellIndex}
cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController}
></EditBoardCell>
))}
</div>
</div>
</div>
);
};