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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}