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/add new field functionality done

Browse Source
This commit is contained in:
Mike Abebe 2023-04-05 17:25:07 +03:00
parent db1184ff0d
commit 4f08654fc3
4 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,7 +34,7 @@ export const Grid = ({ viewId }: { viewId: string }) => {
{/* table component view with text area for td */} {/* table component view with text area for td */}
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-4'>
<table className='w-full table-fixed text-sm'> <table className='w-full table-fixed text-sm'>
<GridTableHeader /> <GridTableHeader controller={controller} />
<GridTableRows onOpenRow={onOpenRow} allRows={rows} viewId={viewId} controller={controller} /> <GridTableRows onOpenRow={onOpenRow} allRows={rows} viewId={viewId} controller={controller} />
</table> </table>

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

@ -1,23 +1,15 @@
import { nanoid } from 'nanoid'; import { useAppSelector } from '../../../stores/store';
import { FieldType } from '@/services/backend/models/flowy-database/field_entities'; import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
import { gridActions } from '../../../stores/reducers/grid/slice'; import { TypeOptionController } from '@/appflowy_app/stores/effects/database/field/type_option/type_option_controller';
import { useAppDispatch, useAppSelector } from '../../../stores/store'; import { None } from 'ts-results';
export const useGridTableHeaderHooks = function () { export const useGridTableHeaderHooks = function (controller: DatabaseController) {
const dispatch = useAppDispatch();
const database = useAppSelector((state) => state.database); const database = useAppSelector((state) => state.database);
const onAddField = () => { const onAddField = async () => {
dispatch( // TODO: move this to database controller hook
gridActions.addField({ const fieldController = new TypeOptionController(controller.viewId, None);
field: { await fieldController.initialize();
fieldId: nanoid(8),
name: 'Name',
fieldOptions: {},
fieldType: FieldType.RichText,
},
})
);
}; };
return { return {

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

@ -8,15 +8,19 @@ import { MultiSelectTypeSvg } from '../../_shared/svg/MultiSelectTypeSvg';
import { ChecklistTypeSvg } from '../../_shared/svg/ChecklistTypeSvg'; import { ChecklistTypeSvg } from '../../_shared/svg/ChecklistTypeSvg';
import { UrlTypeSvg } from '../../_shared/svg/UrlTypeSvg'; import { UrlTypeSvg } from '../../_shared/svg/UrlTypeSvg';
import { FieldType } from '@/services/backend/models/flowy-database/field_entities'; import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
import { useTranslation } from 'react-i18next';
export const GridTableHeader = () => { export const GridTableHeader = ({ controller }: { controller: DatabaseController }) => {
const { fields, onAddField } = useGridTableHeaderHooks(); const { fields, onAddField } = useGridTableHeaderHooks(controller);
const { t } = useTranslation('');
return ( return (
<> <>
<thead> <thead>
<tr> <tr>
{fields.map((field, i) => { {fields.map((field) => {
return ( return (
<th key={field.fieldId} className='m-0 border border-l-0 border-shade-6 p-0'> <th key={field.fieldId} className='m-0 border border-l-0 border-shade-6 p-0'>
<div className={'flex cursor-pointer items-center px-4 py-2 hover:bg-main-secondary'}> <div className={'flex cursor-pointer items-center px-4 py-2 hover:bg-main-secondary'}>
@ -44,7 +48,7 @@ export const GridTableHeader = () => {
<i className='mr-2 h-5 w-5'> <i className='mr-2 h-5 w-5'>
<AddSvg /> <AddSvg />
</i> </i>
<span>New column</span> <span>{t('grid.field.newColumn')}</span>
</div> </div>
</th> </th>
</tr> </tr>

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

@ -1,8 +1,10 @@
import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller'; import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
import AddSvg from '../../_shared/svg/AddSvg'; import AddSvg from '../../_shared/svg/AddSvg';
import { useGridAddRow } from './GridAddRow.hooks'; import { useGridAddRow } from './GridAddRow.hooks';
import { useTranslation } from 'react-i18next';
export const GridAddRow = ({ controller }: { controller: DatabaseController }) => { export const GridAddRow = ({ controller }: { controller: DatabaseController }) => {
const { addRow } = useGridAddRow(controller); const { addRow } = useGridAddRow(controller);
const { t } = useTranslation('');
return ( return (
<div> <div>
@ -10,7 +12,7 @@ export const GridAddRow = ({ controller }: { controller: DatabaseController }) =
<i className='mr-2 h-5 w-5'> <i className='mr-2 h-5 w-5'>
<AddSvg /> <AddSvg />
</i> </i>
<span>New row</span> <span>{t('grid.row.newRow')}</span>
</button> </button>
</div> </div>
); );