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: import reorganize and edit option on grid

Browse Source
This commit is contained in:
ascarbek 2023-04-09 18:38:18 +06:00
parent a33fc3dd60
commit 44585079b6
17 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,11 +72,7 @@ export const CellOptionsPopup = ({
};
const onToggleOptionClick = async (option: SelectOptionPB) => {
if (
(data as SelectOptionCellDataPB | undefined)?.select_options?.find(
(selectedOption) => selectedOption.id === option.id
)
) {
if ((data as SelectOptionCellDataPB)?.select_options?.find((selectedOption) => selectedOption.id === option.id)) {
await new SelectOptionCellBackendService(cellIdentifier).unselectOption([option.id]);
} else {
await new SelectOptionCellBackendService(cellIdentifier).selectOption([option.id]);
@ -121,7 +117,7 @@ export const CellOptionsPopup = ({
<div className={'flex flex-col gap-2 p-2'}>
<div className={'border-shades-3 flex flex-1 items-center gap-2 rounded border bg-main-selector px-2 '}>
<div className={'flex flex-wrap items-center gap-2 text-black'}>
{(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
{(data as SelectOptionCellDataPB)?.select_options?.map((option, index) => (
<div className={`${getBgColor(option.color)} flex items-center gap-0.5 rounded px-1 py-0.5`} key={index}>
<span>{option?.name || ''}</span>
<button onClick={() => onUnselectOptionClick(option)} className={'h-5 w-5 cursor-pointer'}>
@ -162,7 +158,7 @@ export const CellOptionsPopup = ({
>
<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(
{(data as SelectOptionCellDataPB)?.select_options?.find(
(selectedOption) => selectedOption.id === option.selectOptionId
) && (
<button className={'h-5 w-5 p-1'}>

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

@ -1,11 +1,8 @@
import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
import { FieldController } from '$app/stores/effects/database/field/field_controller';
import { KeyboardEventHandler, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SelectOptionCellDataPB, SelectOptionColorPB, SelectOptionPB } from '@/services/backend';
import { SelectOptionColorPB, SelectOptionPB } from '@/services/backend';
import { getBgColor } from '$app/components/_shared/getColor';
import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc';
import useOutsideClick from '$app/components/_shared/useOutsideClick';
import { TrashSvg } from '$app/components/_shared/svg/TrashSvg';
@ -16,36 +13,39 @@ export const EditCellOptionPopup = ({
top,
cellIdentifier,
editingSelectOption,
cellCache,
fieldController,
onOutsideClick,
}: {
left: number;
top: number;
cellIdentifier: CellIdentifier;
editingSelectOption: SelectOptionPB;
cellCache: CellCache;
fieldController: FieldController;
onOutsideClick: () => void;
}) => {
const ref = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation('');
const [adjustedTop, setAdjustedTop] = useState(-100);
const [adjustedLeft, setAdjustedLeft] = useState(-100);
const [value, setValue] = useState('');
useOutsideClick(ref, async () => {
await onBlur();
onOutsideClick();
});
useEffect(() => {
if (!ref.current) return;
const { height } = ref.current.getBoundingClientRect();
const { height, width } = ref.current.getBoundingClientRect();
if (top + height > window.innerHeight) {
setAdjustedTop(window.innerHeight - height);
} else {
setAdjustedTop(top);
}
if (left + width > window.innerWidth) {
setAdjustedLeft(window.innerWidth - width);
} else {
setAdjustedLeft(left);
}
}, [ref, window, top, left]);
useEffect(() => {
@ -97,9 +97,9 @@ export const EditCellOptionPopup = ({
ref={ref}
onKeyDown={onKeyDownWrapper}
className={`fixed z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md transition-opacity duration-300 ${
adjustedTop === -100 ? 'opacity-0' : 'opacity-100'
adjustedTop === -100 && adjustedLeft === -100 ? 'opacity-0' : 'opacity-100'
}`}
style={{ top: `${adjustedTop}px`, left: `${left}px` }}
style={{ top: `${adjustedTop}px`, left: `${adjustedLeft}px` }}
>
<div className={'flex flex-col gap-2 p-2'}>
<div className={'border-shades-3 flex flex-1 items-center gap-2 rounded border bg-main-selector px-2 '}>

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

@ -69,10 +69,7 @@ export const EditCellWrapper = ({
cellIdentifier.fieldType === FieldType.MultiSelect ||
cellIdentifier.fieldType === FieldType.Checklist) &&
cellController && (
<CellOptions
data={data as SelectOptionCellDataPB | undefined}
onEditClick={onEditOptionsClick}
></CellOptions>
<CellOptions data={data as SelectOptionCellDataPB} onEditClick={onEditOptionsClick}></CellOptions>
)}
{cellIdentifier.fieldType === FieldType.Checkbox && cellController && (
@ -83,7 +80,7 @@ export const EditCellWrapper = ({
)}
{cellIdentifier.fieldType === FieldType.DateTime && (
<EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
<EditCellDate data={data as DateCellDataPB} onEditClick={onEditDateClick}></EditCellDate>
)}
{cellIdentifier.fieldType === FieldType.Number && cellController && (
@ -91,7 +88,7 @@ export const EditCellWrapper = ({
)}
{cellIdentifier.fieldType === FieldType.URL && cellController && (
<EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
<EditCellUrl data={data as URLCellDataPB} cellController={cellController}></EditCellUrl>
)}
{cellIdentifier.fieldType === FieldType.RichText && cellController && (

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

@ -235,8 +235,6 @@ export const EditRow = ({
left={editCellOptionLeft}
cellIdentifier={editingCell}
editingSelectOption={editingSelectOption}
cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
fieldController={controller.fieldController}
onOutsideClick={() => {
setShowEditCellOption(false);
}}

1
frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
View File

@ -1,4 +1,3 @@
import { SettingsSvg } from '../_shared/svg/SettingsSvg';
import { SearchInput } from '../_shared/SearchInput';
import { BoardGroup } from './BoardGroup';
import { NewBoardBlock } from './NewBoardBlock';

1
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardGroupFieldsPopup.tsx
View File

@ -2,7 +2,6 @@ import { useAppSelector } from '$app/stores/store';
import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
import { useRef } from 'react';
import useOutsideClick from '$app/components/_shared/useOutsideClick';
import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
export const BoardGroupFieldsPopup = ({ hidePopup }: { hidePopup: () => void }) => {

2
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx
View File

@ -18,7 +18,7 @@ export const BoardOptionsCell = ({
return (
<div className={'flex flex-wrap items-center gap-2 py-2 text-xs text-black'}>
{(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
{(data as SelectOptionCellDataPB)?.select_options?.map((option, index) => (
<div className={`${getBgColor(option.color)} rounded px-2 py-0.5`} key={index}>
{option?.name || ''}
</div>

8
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardUrlCell.tsx
View File

@ -17,12 +17,8 @@ export const BoardUrlCell = ({
return (
<>
<a
className={'text-main-accent hover:underline'}
href={(data as URLCellDataPB | undefined)?.url || ''}
target={'_blank'}
>
{(data as URLCellDataPB | undefined)?.content || ''}
<a className={'text-main-accent hover:underline'} href={(data as URLCellDataPB).url || ''} target={'_blank'}>
{(data as URLCellDataPB).content || ''}
</a>
</>
);

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

@ -1,4 +1,4 @@
import { useDatabase } from '../../_shared/database-hooks/useDatabase';
import { useDatabase } from '$app/components/_shared/database-hooks/useDatabase';
import { GridTableCount } from '../GridTableCount/GridTableCount';
import { GridTableHeader } from '../GridTableHeader/GridTableHeader';
import { GridAddRow } from '../GridTableRows/GridAddRow';

1
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridAddView/GridAddView.tsx
View File

@ -1,4 +1,3 @@
import { Link } from 'react-router-dom';
import AddSvg from '../../_shared/svg/AddSvg';
export const GridAddView = () => {

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

@ -2,9 +2,6 @@ import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell
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';
import { GridCheckBox } from './GridCheckBox';

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

@ -30,9 +30,7 @@ export const GridDate = ({
return (
<div className='flex w-full cursor-pointer justify-start'>
{cellController && (
<EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
)}
{cellController && <EditCellDate data={data as DateCellDataPB} onEditClick={onEditDateClick}></EditCellDate>}
{showDatePopup && (
<DatePickerPopup

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

@ -1,11 +1,12 @@
import { useState } from 'react';
import { CellOptions } from '../../_shared/EditRow/CellOptions';
import { CellOptions } from '$app/components/_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';
import { CellOptionsPopup } from '../../_shared/EditRow/CellOptionsPopup';
import { useCell } from '$app/components/_shared/database-hooks/useCell';
import { SelectOptionCellDataPB, SelectOptionPB } from '@/services/backend/models/flowy-database/select_type_option';
import { CellOptionsPopup } from '$app/components/_shared/EditRow/CellOptionsPopup';
import { EditCellOptionPopup } from '$app/components/_shared/EditRow/EditCellOptionPopup';
export default function GridSingleSelectOptions({
cellIdentifier,
@ -22,12 +23,25 @@ export default function GridSingleSelectOptions({
const [changeOptionsTop, setChangeOptionsTop] = useState(0);
const [changeOptionsLeft, setChangeOptionsLeft] = useState(0);
const [showEditCellOption, setShowEditCellOption] = useState(false);
const [editCellOptionTop, setEditCellOptionTop] = useState(0);
const [editCellOptionLeft, setEditCellOptionLeft] = useState(0);
const [editingSelectOption, setEditingSelectOption] = useState<SelectOptionPB | undefined>();
const onEditOptionsClick = async (left: number, top: number) => {
setChangeOptionsLeft(left);
setChangeOptionsTop(top);
setShowOptionsPopup(true);
};
const onOpenOptionDetailClick = (_left: number, _top: number, _select_option: SelectOptionPB) => {
setEditingSelectOption(_select_option);
setShowEditCellOption(true);
setEditCellOptionLeft(_left);
setEditCellOptionTop(_top);
};
return (
<>
<div className='flex w-full cursor-pointer justify-start'>
@ -42,8 +56,20 @@ export default function GridSingleSelectOptions({
cellCache={cellCache}
fieldController={fieldController}
onOutsideClick={() => setShowOptionsPopup(false)}
openOptionDetail={onOpenOptionDetailClick}
/>
)}
{showEditCellOption && editingSelectOption && (
<EditCellOptionPopup
top={editCellOptionTop}
left={editCellOptionLeft}
cellIdentifier={cellIdentifier}
editingSelectOption={editingSelectOption}
onOutsideClick={() => {
setShowEditCellOption(false);
}}
></EditCellOptionPopup>
)}
</>
);
}

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

@ -17,10 +17,6 @@ export const GridUrl = ({
const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
return (
<>
{cellController && (
<EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
)}
</>
<>{cellController && <EditCellUrl data={data as URLCellDataPB} cellController={cellController}></EditCellUrl>}</>
);
};

2
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableCount/GridTableCount.hooks.ts
View File

@ -1,4 +1,4 @@
import { useAppSelector } from '../../../stores/store';
import { useAppSelector } from '$app/stores/store';
export const useGridTableCount = () => {
const { grid } = useAppSelector((state) => state);

2
frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
View File

@ -1,4 +1,4 @@
import { useAppSelector } from '../../../stores/store';
import { useAppSelector } from '$app/stores/store';
import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
import { TypeOptionController } from '@/appflowy_app/stores/effects/database/field/type_option/type_option_controller';
import { None } from 'ts-results';

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

@ -17,7 +17,6 @@ export const GridTableRow = ({
}) => {
const { cells } = useRow(viewId, controller, row);
console.log({ cells });
return (
<tr className='group'>
{cells.map((cell, cellIndex) => {