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: change field type

Browse Source
This commit is contained in:
ascarbek 2023-03-24 20:20:56 +06:00
parent 27a8eea6e2
commit 5ddb5100ad
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/ChangeFieldTypePopup.tsx
View File

@ -23,7 +23,7 @@ export const ChangeFieldTypePopup = ({
}: { }: {
top: number; top: number;
right: number; right: number;
onClick: () => void; onClick: (newType: FieldType) => void;
onOutsideClick: () => void; onOutsideClick: () => void;
}) => { }) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
@ -53,7 +53,7 @@ export const ChangeFieldTypePopup = ({
<div className={'flex flex-col'}> <div className={'flex flex-col'}>
{typesOrder.map((t, i) => ( {typesOrder.map((t, i) => (
<button <button
onClick={() => onClick()} onClick={() => onClick(t)}
key={i} key={i}
className={'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-2 pr-8 hover:bg-main-secondary'} className={'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-2 pr-8 hover:bg-main-secondary'}
> >

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

@ -9,6 +9,9 @@ import { EditFieldPopup } from '$app/components/_shared/EditRow/EditFieldPopup';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc'; import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
import { ChangeFieldTypePopup } from '$app/components/_shared/EditRow/ChangeFieldTypePopup'; import { ChangeFieldTypePopup } from '$app/components/_shared/EditRow/ChangeFieldTypePopup';
import { TypeOptionController } from '$app/stores/effects/database/field/type_option/type_option_controller';
import { Some } from 'ts-results';
import { FieldType } from '@/services/backend';
export const EditRow = ({ export const EditRow = ({
onClose, onClose,
@ -31,7 +34,7 @@ export const EditRow = ({
const [showChangeFieldTypePopup, setShowChangeFieldTypePopup] = useState(false); const [showChangeFieldTypePopup, setShowChangeFieldTypePopup] = useState(false);
const [changeFieldTypeTop, setChangeFieldTypeTop] = useState(0); const [changeFieldTypeTop, setChangeFieldTypeTop] = useState(0);
const [changeFieldTypeRight, setChangeFieldTypeRight] = useState(0); const [changeFieldTypeRight, setChangeFieldTypeRight] = useState(0);
const [editingCell, setEditingCell] = useState<{ cellIdentifier: CellIdentifier; fieldId: string } | null>(null); const [editingCell, setEditingCell] = useState<CellIdentifier | null>(null);
useEffect(() => { useEffect(() => {
setUnveilBackdrop(true); setUnveilBackdrop(true);
@ -40,8 +43,8 @@ export const EditRow = ({
}, 300); }, 300);
}, []); }, []);
const onEditFieldClick = (cell: { cellIdentifier: CellIdentifier; fieldId: string }, top: number, right: number) => { const onEditFieldClick = (cellIdentifier: CellIdentifier, top: number, right: number) => {
setEditingCell(cell); setEditingCell(cellIdentifier);
setEditFieldTop(top); setEditFieldTop(top);
setEditFieldRight(right); setEditFieldRight(right);
setShowFieldEditor(true); setShowFieldEditor(true);
@ -67,6 +70,17 @@ export const EditRow = ({
}, 300); }, 300);
}; };
const changeFieldTypeClick = async (newType: FieldType) => {
if (!editingCell) return;
const currentField = controller.fieldController.getField(editingCell.fieldId);
if (!currentField) return;
const typeOptionController = new TypeOptionController(viewId, Some(currentField));
await typeOptionController.switchToField(newType);
setShowChangeFieldTypePopup(false);
};
return ( return (
<div <div
className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${ className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
@ -90,7 +104,7 @@ export const EditRow = ({
cellIdentifier={cell.cellIdentifier} cellIdentifier={cell.cellIdentifier}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()} cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController} fieldController={controller.fieldController}
onEditFieldClick={(top: number, right: number) => onEditFieldClick(cell, top, right)} onEditFieldClick={(top: number, right: number) => onEditFieldClick(cell.cellIdentifier, top, right)}
></EditCellWrapper> ></EditCellWrapper>
))} ))}
</div> </div>
@ -98,10 +112,10 @@ export const EditRow = ({
<EditFieldPopup <EditFieldPopup
top={editFieldTop} top={editFieldTop}
right={editFieldRight} right={editFieldRight}
cellIdentifier={editingCell.cellIdentifier} cellIdentifier={editingCell}
viewId={viewId} viewId={viewId}
onOutsideClick={onOutsideEditFieldClick} onOutsideClick={onOutsideEditFieldClick}
fieldInfo={controller.fieldController.getField(editingCell.cellIdentifier.fieldId)} fieldInfo={controller.fieldController.getField(editingCell.fieldId)}
changeFieldTypeClick={onChangeFieldTypeClick} changeFieldTypeClick={onChangeFieldTypeClick}
></EditFieldPopup> ></EditFieldPopup>
)} )}
@ -109,7 +123,7 @@ export const EditRow = ({
<ChangeFieldTypePopup <ChangeFieldTypePopup
top={changeFieldTypeTop} top={changeFieldTypeTop}
right={changeFieldTypeRight} right={changeFieldTypeRight}
onClick={() => setShowChangeFieldTypePopup(false)} onClick={(newType) => changeFieldTypeClick(newType)}
onOutsideClick={() => setShowChangeFieldTypePopup(false)} onOutsideClick={() => setShowChangeFieldTypePopup(false)}
></ChangeFieldTypePopup> ></ChangeFieldTypePopup>
)} )}