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/integrate url to grid

Browse Source
This commit is contained in:
Mike Abebe 2023-04-05 16:07:15 +03:00
parent 034d4d9bf4
commit 4d5a3ee13d
8 changed files with 88 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx
View File

@ -21,7 +21,7 @@ export const CellOptions = ({
<div
ref={ref}
onClick={() => onClick()}
className={'flex flex-wrap items-center gap-2 px-4 py-2 text-xs text-black'}
className={'flex w-full flex-wrap items-center gap-2 px-4 py-2 text-xs text-black'}
>
{data?.select_options?.map((option, index) => (
<div className={`${getBgColor(option.color)} rounded px-2 py-0.5`} key={index}>

2
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx
View File

@ -17,7 +17,7 @@ export const EditCellDate = ({
};
return (
<div ref={ref} onClick={() => onClick()} className={'px-4 py-2'}>
<div ref={ref} onClick={() => onClick()} className={'w-full px-4 py-2'}>
{data?.date || <>&nbsp;</>}
</div>
);

14
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
View File

@ -8,6 +8,8 @@ import { BoardUrlCell } from '../../board/BoardUrlCell';
import GridSingleSelectOptions from './GridSingleSelectOptions';
import GridTextCell from './GridTextCell';
import { GridCheckBox } from './GridCheckBox';
import { GridDate } from './GridDate';
import { GridUrl } from './GridUrl';
export const GridCell = ({
cellIdentifier,
@ -31,17 +33,9 @@ export const GridCell = ({
) : cellIdentifier.fieldType === FieldType.Checkbox ? (
<GridCheckBox cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
) : cellIdentifier.fieldType === FieldType.DateTime ? (
<BoardDateCell
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
></BoardDateCell>
<GridDate cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController}></GridDate>
) : cellIdentifier.fieldType === FieldType.URL ? (
<BoardUrlCell
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
></BoardUrlCell>
<GridUrl cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController}></GridUrl>
) : (
<GridTextCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
)}

2
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCheckBox.tsx
View File

@ -17,7 +17,7 @@ export const GridCheckBox = ({
return (
<div className='flex w-full justify-start'>
{cellController && <EditCheckboxCell cellController={cellController} data={data as unknown as boolean} />}
{cellController && <EditCheckboxCell cellController={cellController} data={data as 'Yes' | 'No' | undefined} />}
</div>
);
};

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

@ -0,0 +1,49 @@
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 { DateCellDataPB } from '@/services/backend';
import { EditCellDate } from '../../_shared/EditRow/EditCellDate';
import { useState } from 'react';
import { DatePickerPopup } from '../../_shared/EditRow/DatePickerPopup';
export const GridDate = ({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) => {
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
const [showDatePopup, setShowDatePopup] = useState(false);
const [datePickerTop, setdatePickerTop] = useState(0);
const [datePickerLeft, setdatePickerLeft] = useState(0);
const onEditDateClick = async (left: number, top: number) => {
setdatePickerLeft(left);
setdatePickerTop(top);
setShowDatePopup(true);
};
return (
<div className='flex w-full cursor-pointer justify-start'>
{cellController && (
<EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
)}
{showDatePopup && (
<DatePickerPopup
top={datePickerTop}
left={datePickerLeft}
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
onOutsideClick={() => setShowDatePopup(false)}
></DatePickerPopup>
)}
</div>
);
};

19
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
View File

@ -3,6 +3,7 @@ import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cach
import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
import { useState, useEffect } from 'react';
import { useCell } from '../../_shared/database-hooks/useCell';
import { EditCellText } from '../../_shared/EditRow/EditCellText';
export default function GridTextCell({
cellIdentifier,
@ -15,21 +16,9 @@ export default function GridTextCell({
}) {
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 '
/>
<div className='w-full'>
{cellController && <EditCellText data={data as string | undefined} cellController={cellController}></EditCellText>}
</div>
);
}

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

@ -0,0 +1,26 @@
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 { EditCellUrl } from '../../_shared/EditRow/EditCellUrl';
import { URLCellDataPB } from '@/services/backend/models/flowy-database/url_type_option_entities';
export const GridUrl = ({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) => {
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
return (
<>
{cellController && (
<EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
)}
</>
);
};

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

@ -23,7 +23,7 @@ export const GridTableRow = ({
{cells.map((cell, cellIndex) => {
return (
<td className='m-0 border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
<div className='flex w-full justify-end'>
<div className='flex w-full items-center justify-end'>
<GridCell
cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
@ -33,7 +33,7 @@ export const GridTableRow = ({
{cellIndex === 0 && (
<div
onClick={() => onOpenRow(row)}
className='hidden h-9 w-9 cursor-pointer rounded p-2 hover:bg-slate-200 group-hover:block '
className='mr-1 hidden h-9 w-9 cursor-pointer rounded p-2 hover:bg-slate-200 group-hover:block '
>
<FullView />
</div>