Enable Date edition on People view (#105)

* Enable Date edition on People view

* Fix linter

front/src/components/table/editable-cell/EditableDate.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import EditableCellWrapper from './EditableCellWrapper';
+import DatePicker from '../../form/DatePicker';
+
+export type EditableDateProps = {
+  value: Date;
+  changeHandler: (date: Date) => void;
+  shouldAlignRight?: boolean;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+function EditableDate({
+  value,
+  changeHandler,
+  shouldAlignRight,
+}: EditableDateProps) {
+  const [inputValue, setInputValue] = useState(value);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const onEditModeChange = (isEditMode: boolean) => {
+    setIsEditMode(isEditMode);
+  };
+
+  return (
+    <EditableCellWrapper
+      onEditModeChange={onEditModeChange}
+      shouldAlignRight={shouldAlignRight}
+    >
+      <StyledContainer>
+        <DatePicker
+          isOpen={isEditMode}
+          date={inputValue}
+          onChangeHandler={(date: Date) => {
+            changeHandler(date);
+            setInputValue(date);
+          }}
+        />
+      </StyledContainer>
+    </EditableCellWrapper>
+  );
+}
+
+export default EditableDate;

front/src/components/table/editable-cell/EditableText.tsx

@@ -26,7 +26,7 @@ const StyledInplaceInput = styled.input<StyledEditModeProps>`
 `;
 
 const StyledNoEditText = styled.div`
-  max-width: 200px;
+  width: 100%;
 `;
 
 function EditableText({

front/src/components/table/editable-cell/__stories__/EditableDate.stories.tsx

@@ -0,0 +1,29 @@
+import EditableDate, { EditableDateProps } from '../EditableDate';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../../layout/styles/themes';
+import { StoryFn } from '@storybook/react';
+
+const component = {
+  title: 'EditableDate',
+  component: EditableDate,
+};
+
+export default component;
+
+const Template: StoryFn<typeof EditableDate> = (args: EditableDateProps) => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <div data-testid="content-editable-parent">
+        <EditableDate {...args} />
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export const EditableDateStory = Template.bind({});
+EditableDateStory.args = {
+  value: new Date(),
+  changeHandler: () => {
+    console.log('changed');
+  },
+};

front/src/components/table/editable-cell/__tests__/EditableDate.test.tsx

@@ -0,0 +1,37 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import { EditableDateStory } from '../__stories__/EditableDate.stories';
+import { act } from 'react-dom/test-utils';
+
+it('Checks the EditableDate editing event bubbles up', async () => {
+  const changeHandler = jest.fn(() => null);
+  const { getByTestId, getByText } = render(
+    <EditableDateStory
+      value={new Date('2021-03-03')}
+      changeHandler={changeHandler}
+    />,
+  );
+
+  const parent = getByTestId('content-editable-parent');
+
+  const wrapper = parent.querySelector('div');
+
+  if (!wrapper) {
+    throw new Error('Cell Wrapper not found');
+  }
+  act(() => {
+    fireEvent.click(wrapper);
+  });
+
+  const dateDisplay = parent.querySelector('div');
+
+  if (!dateDisplay) {
+    throw new Error('Editable input not found');
+  }
+
+  expect(getByText('March 2021')).toBeInTheDocument();
+  act(() => {
+    fireEvent.click(getByText('5'));
+  });
+  expect(changeHandler).toHaveBeenCalledWith(new Date('2021-03-05'));
+});