admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor/inplace input (#541)

Browse Source 
* wip

* Changed all other components

* Removed console log

* Console.log

* lint

* Removed internal state

* Fix

* Lint
This commit is contained in:
Lucas Bordeau
2023-07-09 01:45:52 +02:00
committed by GitHub
parent b3d0061e0d
commit e03d5ed8a7
47 changed files with 680 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
front/src/pages/companies/companies-columns.tsx
View File

@ -3,8 +3,8 @@ import { createColumnHelper } from '@tanstack/react-table';
import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import {
IconBuildingSkyscraper,
@ -44,10 +44,10 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="URL" viewIcon={<IconLink size={16} />} />
),
cell: (props) => (
<EditableText
content={props.row.original.domainName || ''}
<EditableCellText
value={props.row.original.domainName || ''}
placeholder="Domain name"
changeHandler={(value) => {
onChange={(value) => {
const company = { ...props.row.original };
company.domainName = value;
updateCompany({
@ -66,10 +66,10 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="Employees" viewIcon={<IconUsers size={16} />} />
),
cell: (props) => (
<EditableText
content={props.row.original.employees?.toString() || ''}
<EditableCellText
value={props.row.original.employees?.toString() || ''}
placeholder="Employees"
changeHandler={(value) => {
onChange={(value) => {
const company = { ...props.row.original };
updateCompany({
@ -89,10 +89,10 @@ export const useCompaniesColumns = () => {
<ColumnHead viewName="Address" viewIcon={<IconMap size={16} />} />
),
cell: (props) => (
<EditableText
content={props.row.original.address || ''}
<EditableCellText
value={props.row.original.address || ''}
placeholder="Address"
changeHandler={(value) => {
onChange={(value) => {
const company = { ...props.row.original };
company.address = value;
updateCompany({
@ -114,13 +114,13 @@ export const useCompaniesColumns = () => {
/>
),
cell: (props) => (
<EditableDate
<EditableCellDate
value={
props.row.original.createdAt
? new Date(props.row.original.createdAt)
: new Date()
}
changeHandler={(value: Date) => {
onChange={(value: Date) => {
const company = { ...props.row.original };
company.createdAt = value.toISOString();
updateCompany({

6
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,8 +1,10 @@
import { useCallback, useMemo } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import { BoardActionBarButtonDeletePipelineProgress } from '@/pipeline-progress/components/BoardActionBarButtonDeletePipelineProgress';
import { EntityBoardActionBar } from '@/pipeline-progress/components/EntityBoardActionBar';
import { GET_PIPELINES } from '@/pipeline-progress/queries';
import { IconTargetArrow } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
@ -23,6 +25,7 @@ export function Opportunities() {
const pipelineId = pipelines.data?.findManyPipeline[0].id;
const { initialBoard, items } = useBoard(pipelineId || '');
const columns = useMemo(
() =>
initialBoard?.map(({ id, colorCode, title }) => ({
@ -40,12 +43,13 @@ export function Opportunities() {
async (
pipelineProgress: Pick<PipelineProgress, 'id' | 'amount' | 'closeDate'>,
) => {
updatePipelineProgress({
await updatePipelineProgress({
variables: {
id: pipelineProgress.id,
amount: pipelineProgress.amount,
closeDate: pipelineProgress.closeDate || null,
},
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
},
[updatePipelineProgress],

24
front/src/pages/people/people-columns.tsx
View File

@ -3,9 +3,9 @@ import { createColumnHelper } from '@tanstack/react-table';
import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
import { EditableCellPhone } from '@/ui/components/editable-cell/types/EditableCellPhone';
import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import {
IconBuildingSkyscraper,
@ -55,10 +55,10 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="Email" viewIcon={<IconMail size={16} />} />
),
cell: (props) => (
<EditableText
<EditableCellText
placeholder="Email"
content={props.row.original.email || ''}
changeHandler={async (value: string) => {
value={props.row.original.email || ''}
onChange={async (value: string) => {
const person = props.row.original;
await updatePerson({
variables: {
@ -87,7 +87,7 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="Phone" viewIcon={<IconPhone size={16} />} />
),
cell: (props) => (
<EditablePhone
<EditableCellPhone
placeholder="Phone"
value={props.row.original.phone || ''}
changeHandler={async (value: string) => {
@ -112,13 +112,13 @@ export const usePeopleColumns = () => {
/>
),
cell: (props) => (
<EditableDate
<EditableCellDate
value={
props.row.original.createdAt
? new Date(props.row.original.createdAt)
: new Date()
}
changeHandler={async (value: Date) => {
onChange={async (value: Date) => {
const person = { ...props.row.original };
await updatePerson({
variables: {
@ -137,11 +137,11 @@ export const usePeopleColumns = () => {
<ColumnHead viewName="City" viewIcon={<IconMap size={16} />} />
),
cell: (props) => (
<EditableText
<EditableCellText
editModeHorizontalAlign="right"
placeholder="City"
content={props.row.original.city || ''}
changeHandler={async (value: string) => {
value={props.row.original.city || ''}
onChange={async (value: string) => {
const person = { ...props.row.original };
await updatePerson({
variables: {