mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat/generic editable cell all types (#987)

Browse Source 
* Added generic relation cell

* Deactivated debug

* Added default warning

* Put back display component

* Removed unused types

* wip

* Renamed to view field

* Use new view field structure to have chip working

* Finished

* Added a temp feature flag

* Added double text chip cell

* Ok

* Finished tables

* Fixed icon size

* Fixed bug on date field

* Use icon index

* Fix

* Fixed naming

* Fix

* removed file from merge

* Fixed tests

* Coverage
This commit is contained in:
Lucas Bordeau
2023-07-29 23:48:43 +02:00
committed by GitHub
parent dc18bc40b0
commit d9f6ae8663
77 changed files with 1730 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/table/editable-cell/types/EditableCellDate.tsx
View File

@ -20,7 +20,7 @@ export function EditableCellDate({
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<EditableCellDateEditMode onChange={onChange} value={value} />
<EditableCellDateEditMode onSubmit={onChange} value={value} />
}
nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
editHotkeyScope={{ scope: TableHotkeyScope.CellDateEditMode }}

6
front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx
View File

@ -16,17 +16,17 @@ const EditableCellDateEditModeContainer = styled.div`
export type EditableDateProps = {
value: Date;
onChange: (date: Date) => void;
onSubmit: (date: Date) => void;
};
export function EditableCellDateEditMode({
value,
onChange,
onSubmit,
}: EditableDateProps) {
const { closeEditableCell } = useEditableCell();
function handleDateChange(newDate: Date) {
onChange(newDate);
onSubmit(newDate);
closeEditableCell();
}

2
front/src/modules/ui/table/editable-cell/types/EditableCellDoubleTextEditMode.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { Key } from 'ts-key-enum';
import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode';
import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';

4
front/src/modules/ui/table/editable-cell/types/EditableCellPhone.tsx
View File

@ -1,5 +1,5 @@
import { InplaceInputPhoneDisplayMode } from '@/ui/display/component/InplaceInputPhoneDisplayMode';
import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode';
import { EditableCell } from '../components/EditableCell';
@ -13,7 +13,7 @@ export function EditableCellPhone({ value, placeholder, onSubmit }: OwnProps) {
return (
<EditableCell
editModeContent={
<InplaceInputTextEditMode
<InplaceInputTextCellEditMode
autoFocus
placeholder={placeholder || ''}
value={value}

4
front/src/modules/ui/table/editable-cell/types/EditableCellText.tsx
View File

@ -1,5 +1,5 @@
import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode';
import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode';
import { CellSkeleton } from '../components/CellSkeleton';
import { EditableCell } from '../components/EditableCell';
@ -23,7 +23,7 @@ export function EditableCellText({
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<InplaceInputTextEditMode
<InplaceInputTextCellEditMode
placeholder={placeholder || ''}
autoFocus
value={value}

4
front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx
View File

@ -1,4 +1,4 @@
import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode';
import { RawLink } from '../../../link/components/RawLink';
import { CellSkeleton } from '../components/CellSkeleton';
@ -25,7 +25,7 @@ export function EditableCellURL({
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<InplaceInputTextEditMode
<InplaceInputTextCellEditMode
placeholder={placeholder}
autoFocus
value={url}

4
front/src/modules/ui/table/editable-cell/types/EditableChip.tsx
View File

@ -1,7 +1,7 @@
import { ReactNode, useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { InplaceInputTextEditMode } from '../../../inplace-input/components/InplaceInputTextEditMode';
import { InplaceInputTextCellEditMode } from '../../../inplace-input/components/InplaceInputTextCellEditMode';
import { EditableCell } from '../components/EditableCell';
export type EditableChipProps = {
@ -52,7 +52,7 @@ export function EditableCellChip({
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<InplaceInputTextEditMode
<InplaceInputTextCellEditMode
placeholder={placeholder || ''}
autoFocus
value={inputValue}