chore: save and get checkbox cell

This commit is contained in:
ascarbek 2023-04-03 21:33:33 +06:00
parent 2c13cccb4f
commit 2f2736df20
4 changed files with 43 additions and 6 deletions

View File

@ -76,7 +76,10 @@ export const EditCellWrapper = ({
)} )}
{cellIdentifier.fieldType === FieldType.Checkbox && cellController && ( {cellIdentifier.fieldType === FieldType.Checkbox && cellController && (
<EditCheckboxCell data={data as boolean | undefined} cellController={cellController}></EditCheckboxCell> <EditCheckboxCell
data={data as 'Yes' | 'No' | undefined}
cellController={cellController}
></EditCheckboxCell>
)} )}
{cellIdentifier.fieldType === FieldType.DateTime && ( {cellIdentifier.fieldType === FieldType.DateTime && (

View File

@ -1,22 +1,26 @@
import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg'; import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg';
import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg'; import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg';
import { CellController } from '$app/stores/effects/database/cell/cell_controller'; import { CheckboxCellController } from '$app/stores/effects/database/cell/controller_builder';
export const EditCheckboxCell = ({ export const EditCheckboxCell = ({
data, data,
cellController, cellController,
}: { }: {
data: boolean | undefined; data: 'Yes' | 'No' | undefined;
cellController: CellController<any, any>; cellController: CheckboxCellController;
}) => { }) => {
const toggleValue = async () => { const toggleValue = async () => {
await cellController?.saveCellData(!data); if (data === 'Yes') {
await cellController?.saveCellData('No');
} else {
await cellController?.saveCellData('Yes');
}
}; };
return ( return (
<div onClick={() => toggleValue()} className={'block px-4 py-2'}> <div onClick={() => toggleValue()} className={'block px-4 py-2'}>
<button className={'h-5 w-5'}> <button className={'h-5 w-5'}>
{data ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>} {data === 'Yes' ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>}
</button> </button>
</div> </div>
); );

View File

@ -6,6 +6,7 @@ import { BoardOptionsCell } from './BoardOptionsCell';
import { BoardDateCell } from './BoardDateCell'; import { BoardDateCell } from './BoardDateCell';
import { BoardTextCell } from './BoardTextCell'; import { BoardTextCell } from './BoardTextCell';
import { BoardUrlCell } from '$app/components/board/BoardUrlCell'; import { BoardUrlCell } from '$app/components/board/BoardUrlCell';
import { BoardCheckboxCell } from '$app/components/board/BoardCheckboxCell';
export const BoardCell = ({ export const BoardCell = ({
cellIdentifier, cellIdentifier,
@ -38,6 +39,12 @@ export const BoardCell = ({
cellCache={cellCache} cellCache={cellCache}
fieldController={fieldController} fieldController={fieldController}
></BoardUrlCell> ></BoardUrlCell>
) : cellIdentifier.fieldType === FieldType.Checkbox ? (
<BoardCheckboxCell
cellIdentifier={cellIdentifier}
cellCache={cellCache}
fieldController={fieldController}
></BoardCheckboxCell>
) : ( ) : (
<BoardTextCell <BoardTextCell
cellIdentifier={cellIdentifier} cellIdentifier={cellIdentifier}

View File

@ -0,0 +1,23 @@
import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg';
import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg';
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 { useCell } from '$app/components/_shared/database-hooks/useCell';
export const BoardCheckboxCell = ({
cellIdentifier,
cellCache,
fieldController,
}: {
cellIdentifier: CellIdentifier;
cellCache: CellCache;
fieldController: FieldController;
}) => {
const { data } = useCell(cellIdentifier, cellCache, fieldController);
return (
<i className={'h-5 w-5'}>
{data === 'Yes' ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>}
</i>
);
};