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

feat/show edit popup on expand icon click

Browse Source
This commit is contained in:
Mike Abebe 2023-04-04 09:23:21 +03:00
parent 7970e7fae3
commit da45531801
7 changed files with 160 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/FullView.tsx Normal file
View File

@ -0,0 +1,10 @@
export const FullView = () => {
return (
<svg width='100%' height='100%' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M6 13H3V10' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
<path d='M10 3H13V6' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
<path d='M3 13L7 9' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
<path d='M13 3L9 7' stroke='#333333' strokeLinecap='round' strokeLinejoin='round' />
</svg>
);
};

17
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
View File

@ -1,11 +1,13 @@
import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '../../stores/effects/database/cell/cell_cache';
import { FieldController } from '../../stores/effects/database/field/field_controller';
import { FieldType } from '../../../services/backend';
import { FieldType, SelectOptionCellDataPB } from '../../../services/backend';
import { BoardOptionsCell } from './BoardOptionsCell';
import { BoardDateCell } from './BoardDateCell';
import { BoardTextCell } from './BoardTextCell';
import { BoardUrlCell } from '$app/components/board/BoardUrlCell';
import { useCell } from '../_shared/database-hooks/useCell';
import { CellOptions } from '../_shared/EditRow/CellOptions';
export const BoardCell = ({
cellIdentifier,
@ -16,16 +18,19 @@ export const BoardCell = ({
cellCache: CellCache;
fieldController: FieldController;
}) => {
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
return (
<>
{cellIdentifier.fieldType === FieldType.SingleSelect ||
cellIdentifier.fieldType === FieldType.MultiSelect ||
cellIdentifier.fieldType === FieldType.Checklist ? (
<BoardOptionsCell
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
></BoardOptionsCell>
<CellOptions
data={data as SelectOptionCellDataPB}
onEditClick={(top: number, left: number) => {
console.log(top, left);
}}
/>
) : cellIdentifier.fieldType === FieldType.DateTime ? (
<BoardDateCell
cellIdentifier={cellIdentifier}

47
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx Normal file
View File

@ -0,0 +1,47 @@
import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
import { FieldType } from '@/services/backend';
import { BoardDateCell } from '../../board/BoardDateCell';
import { BoardUrlCell } from '../../board/BoardUrlCell';
import GridSingleSelectOptions from './GridSingleSelectOptions';
import GridTextCell from './GridTextCell';
export const GridCell = ({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) => {
return (
<>
{cellIdentifier.fieldType === FieldType.MultiSelect || cellIdentifier.fieldType === FieldType.Checklist ? (
<p> Select solutions</p>
) : cellIdentifier.fieldType === FieldType.SingleSelect ? (
<GridSingleSelectOptions
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
/>
) : cellIdentifier.fieldType === FieldType.DateTime ? (
<BoardDateCell
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
></BoardDateCell>
) : cellIdentifier.fieldType === FieldType.URL ? (
<BoardUrlCell
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
></BoardUrlCell>
) : (
<GridTextCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
)}
</>
);
};

35
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridSingleSelectOptions.tsx Normal file
View File

@ -0,0 +1,35 @@
import { useState, useEffect, useRef } from 'react';
import { CellOptions } from '../../_shared/EditRow/CellOptions';
import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
import { useCell } from '../../_shared/database-hooks/useCell';
import { SelectOptionCellDataPB } from '@/services/backend/models/flowy-database/select_type_option';
export default function GridSingleSelectOptions({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) {
const ref = useRef<HTMLDivElement>(null);
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
const [value, setValue] = useState((data as SelectOptionCellDataPB) || '');
const [showOptionsPopup, setShowOptionsPopup] = useState(false);
useEffect(() => {
if (data) setValue(data as SelectOptionCellDataPB);
}, [data]);
return (
<>
<div className='flex w-full justify-start' ref={ref}>
<CellOptions data={data as SelectOptionCellDataPB} onEditClick={() => setShowOptionsPopup(!showOptionsPopup)} />
</div>
</>
);
}

35
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx Normal file
View File

@ -0,0 +1,35 @@
import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
import { useState, useEffect } from 'react';
import { useCell } from '../../_shared/database-hooks/useCell';
export default function GridTextCell({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) {
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
const [value, setValue] = useState((data as string) || '');
useEffect(() => {
if (data) setValue(data as string);
}, [data]);
return (
<input
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
onBlur={async () => {
await cellController?.saveCellData(value);
}}
className='min-h-[32px] w-full p-2 focus:border focus:border-main-accent focus:outline-none '
/>
);
}

10
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
View File

@ -1,22 +1,16 @@
import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
import { BoardCell } from '../../board/BoardCell';
import { GridCell } from '../GridCell/GridCell';
export const GridTableCell = ({
cellIdentifier,
cellCache,
fieldController,
onClick,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
onClick: () => void;
}) => {
return (
<div onClick={() => onClick()} className='w-full rounded-lg border border-transparent group-active:bg-main-accent'>
<BoardCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
</div>
);
return <GridCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />;
};

30
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
View File

@ -1,7 +1,8 @@
import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
import { RowInfo } from '@/appflowy_app/stores/effects/database/row/row_cache';
import { useRow } from '../../_shared/database-hooks/useRow';
import { GridTableCell } from './GridTableCell';
import { FullView } from '../../_shared/svg/FullView';
import { GridCell } from '../GridCell/GridCell';
export const GridTableRow = ({
viewId,
@ -18,17 +19,26 @@ export const GridTableRow = ({
console.log({ cells });
return (
<tr>
<tr className='group'>
{cells.map((cell, cellIndex) => {
return (
<td className='m-0 border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
<GridTableCell
onClick={() => onOpenRow(row)}
key={cellIndex}
cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController}
/>
<td className='m-0 border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
<div className='flex w-full justify-end'>
<GridCell
cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController}
/>
{cellIndex === 0 && (
<div
onClick={() => onOpenRow(row)}
className='hidden h-9 w-9 cursor-pointer rounded p-2 hover:bg-slate-200 group-hover:block '
>
<FullView />
</div>
)}
</div>
</td>
);
})}