From 9d25d003cadb6bd5cf8ff1969f33c70fad9c6e99 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sat, 8 Jul 2023 18:15:39 -0700 Subject: [PATCH] Bug Fix: company create from people + scroll settings (#545) --- .../internal/useHotkeysScopeStackAutoSync.ts | 1 - .../people/components/PeopleCompanyCell.tsx | 4 +- .../components/PeopleCompanyCreateCell.tsx | 38 +++--------- .../people/components/PeopleCompanyPicker.tsx | 4 ++ .../types/EditableCellDoubleTextEditMode.tsx | 13 +++++ .../ui/components/inputs/DoubleTextInput.tsx | 58 ------------------- .../ui/components/table/EntityTable.tsx | 10 +--- front/src/modules/ui/layout/Panel.tsx | 2 + front/src/pages/settings/SettingsProfile.tsx | 45 +++++++------- 9 files changed, 55 insertions(+), 120 deletions(-) delete mode 100644 front/src/modules/ui/components/inputs/DoubleTextInput.tsx diff --git a/front/src/modules/hotkeys/hooks/internal/useHotkeysScopeStackAutoSync.ts b/front/src/modules/hotkeys/hooks/internal/useHotkeysScopeStackAutoSync.ts index 3f5c362bf..b9a1f45a3 100644 --- a/front/src/modules/hotkeys/hooks/internal/useHotkeysScopeStackAutoSync.ts +++ b/front/src/modules/hotkeys/hooks/internal/useHotkeysScopeStackAutoSync.ts @@ -12,7 +12,6 @@ export function useHotkeysScopeStackAutoSync() { const hotkeysScopeStack = useRecoilValue(hotkeysScopeStackState); const customHotkeysScopes = useRecoilValue(customHotkeysScopesState); - useEffect(() => { if (hotkeysScopeStack.length === 0) { return; diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx index eb2c2cd63..e6ccd7c37 100644 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCell.tsx @@ -20,9 +20,7 @@ export function PeopleCompanyCell({ people }: OwnProps) { return ( diff --git a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx index c66863b0d..5c1bebc03 100644 --- a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx @@ -1,12 +1,10 @@ -import { useRef, useState } from 'react'; -import { useHotkeys } from 'react-hotkeys-hook'; +import { useState } from 'react'; import { v4 } from 'uuid'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState'; import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState'; -import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput'; -import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef'; +import { EditableCellDoubleTextEditMode } from '@/ui/components/editable-cell/types/EditableCellDoubleTextEditMode'; import { logError } from '@/utils/logs/logError'; import { Person, @@ -31,8 +29,6 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) { const [insertCompany] = useInsertCompanyMutation(); const [updatePeople] = useUpdatePeopleMutation(); - const containerRef = useRef(null); - function handleDoubleTextChange(leftValue: string, rightValue: string): void { setCompanyDomainName(leftValue); setCompanyName(rightValue); @@ -65,34 +61,18 @@ export function PeopleCompanyCreateCell({ people }: OwnProps) { // TODO: handle error better logError(error); } - setIsCreating(false); } - useHotkeys( - 'enter, escape', - () => { - handleCompanyCreate(companyName, companyDomainName); - }, - { - enableOnFormTags: true, - enableOnContentEditable: true, - preventDefault: true, - }, - [companyName, companyDomainName, handleCompanyCreate], - ); - - useListenClickOutsideArrayOfRef([containerRef], () => { - handleCompanyCreate(companyName, companyDomainName); - }); - return ( - handleCompanyCreate(companyName, companyDomainName)} + onExit={() => setIsCreating(false)} /> ); } diff --git a/front/src/modules/people/components/PeopleCompanyPicker.tsx b/front/src/modules/people/components/PeopleCompanyPicker.tsx index c13cbaf61..fa469bf25 100644 --- a/front/src/modules/people/components/PeopleCompanyPicker.tsx +++ b/front/src/modules/people/components/PeopleCompanyPicker.tsx @@ -1,5 +1,6 @@ import { Key } from 'ts-key-enum'; +import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack'; import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys'; import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; @@ -31,6 +32,8 @@ export function PeopleCompanyPicker({ people }: OwnProps) { const { closeEditableCell } = useEditableCell(); + const addToScopeStack = useAddToHotkeysScopeStack(); + const companies = useFilteredSearchEntityQuery({ queryHook: useSearchCompanyQuery, selectedIds: [people.company?.id ?? ''], @@ -59,6 +62,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) { function handleCreate() { setIsCreating(true); + addToScopeStack({ scope: InternalHotkeysScope.CellDoubleTextInput }); } useScopedHotkeys( diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx index a3a0c04f2..7daba6806 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellDoubleTextEditMode.tsx @@ -15,6 +15,8 @@ type OwnProps = { firstValuePlaceholder: string; secondValuePlaceholder: string; onChange: (firstValue: string, secondValue: string) => void; + onSubmit?: (firstValue: string, secondValue: string) => void; + onExit?: () => void; }; const StyledContainer = styled.div` @@ -34,6 +36,8 @@ export function EditableCellDoubleTextEditMode({ firstValuePlaceholder, secondValuePlaceholder, onChange, + onSubmit, + onExit, }: OwnProps) { const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left'); @@ -53,6 +57,9 @@ export function EditableCellDoubleTextEditMode({ () => { closeCell(); moveDown(); + if (onSubmit) { + onSubmit(firstValue, secondValue); + } }, InternalHotkeysScope.CellDoubleTextInput, [closeCell], @@ -61,6 +68,9 @@ export function EditableCellDoubleTextEditMode({ useScopedHotkeys( Key.Escape, () => { + if (onExit) { + onExit(); + } closeCell(); }, InternalHotkeysScope.CellDoubleTextInput, @@ -74,6 +84,9 @@ export function EditableCellDoubleTextEditMode({ setFocusPosition('right'); secondValueInputRef.current?.focus(); } else { + if (onExit) { + onExit(); + } closeCell(); moveRight(); } diff --git a/front/src/modules/ui/components/inputs/DoubleTextInput.tsx b/front/src/modules/ui/components/inputs/DoubleTextInput.tsx deleted file mode 100644 index 995e190a7..000000000 --- a/front/src/modules/ui/components/inputs/DoubleTextInput.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { ChangeEvent, useRef } from 'react'; -import styled from '@emotion/styled'; - -type OwnProps = { - leftValue: string; - rightValue: string; - leftValuePlaceholder: string; - rightValuePlaceholder: string; - onChange: (leftValue: string, rightValue: string) => void; -}; - -const StyledContainer = styled.div` - align-items: center; - display: flex; - justify-content: space-between; - - & > input:last-child { - border-left: 1px solid ${({ theme }) => theme.border.color.light}; - padding-left: ${({ theme }) => theme.spacing(2)}; - } -`; - -const StyledEditInplaceInput = styled.input` - height: 18px; - width: 45%; -`; - -export function DoubleTextInput({ - leftValue, - rightValue, - leftValuePlaceholder, - rightValuePlaceholder, - onChange, -}: OwnProps) { - const firstValueInputRef = useRef(null); - - return ( - - ) => { - onChange(event.target.value, rightValue); - }} - /> - ) => { - onChange(leftValue, event.target.value); - }} - /> - - ); -} diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx index 579743742..ed459ed70 100644 --- a/front/src/modules/ui/components/table/EntityTable.tsx +++ b/front/src/modules/ui/components/table/EntityTable.tsx @@ -91,12 +91,6 @@ const StyledTableWithHeader = styled.div` width: 100%; `; -const StyledTableScrollableContainer = styled.div` - flex: 1; - height: 100%; - overflow: auto; -`; - export function EntityTable({ data, columns, @@ -137,7 +131,7 @@ export function EntityTable({ availableSorts={availableSorts} onSortsUpdate={onSortsUpdate} /> - +
{table.getHeaderGroups().map((headerGroup) => ( @@ -171,7 +165,7 @@ export function EntityTable({ ))} - +
); } diff --git a/front/src/modules/ui/layout/Panel.tsx b/front/src/modules/ui/layout/Panel.tsx index 27947b09c..63e07e834 100644 --- a/front/src/modules/ui/layout/Panel.tsx +++ b/front/src/modules/ui/layout/Panel.tsx @@ -7,6 +7,8 @@ const StyledPanel = styled.div` border-radius: 8px; display: flex; flex-direction: row; + height: 100%; + overflow: auto; width: 100%; `; diff --git a/front/src/pages/settings/SettingsProfile.tsx b/front/src/pages/settings/SettingsProfile.tsx index 264f3b43c..5db4f645c 100644 --- a/front/src/pages/settings/SettingsProfile.tsx +++ b/front/src/pages/settings/SettingsProfile.tsx @@ -13,6 +13,7 @@ const StyledContainer = styled.div` display: flex; flex-direction: column; padding: ${({ theme }) => theme.spacing(8)}; + padding-bottom: ${({ theme }) => theme.spacing(10)}; width: 350px; > * + * { margin-top: ${({ theme }) => theme.spacing(8)}; @@ -33,27 +34,29 @@ export function SettingsProfile() { return ( - - Profile - - - - - - - - - - - - - +
+ + Profile + + + + + + + + + + + + + +
); }