Feat/generic editable board card (#1089)

* Fixed BoardColumnMenu * Fixed naming * Optimized board loading * Added GenericEditableField * Introduce GenericEditableField for BoardCards * remove logs * delete unused files * fix stories --------- Co-authored-by: corentin <corentin@twenty.com>
2023-08-09 05:08:37 +02:00
parent 77d356f78a
commit 3666980ccc
103 changed files with 1551 additions and 922 deletions
--- a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
+++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
@ -0,0 +1,102 @@
+import { useContext } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { PeoplePicker } from '@/people/components/PeoplePicker';
+import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+  ViewFieldRelationValue,
+} from '@/ui/editable-field/types/ViewField';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+import { useEditableField } from '../hooks/useEditableField';
+import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
+import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+
+const RelationPickerContainer = styled.div`
+  left: 0px;
+  position: absolute;
+  top: -8px;
+`;
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
+};
+
+function RelationPicker({
+  fieldDefinition,
+  fieldValue,
+  handleEntitySubmit,
+  handleCancel,
+}: {
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldValue: ViewFieldRelationValue;
+  handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
+  handleCancel: () => void;
+}) {
+  switch (fieldDefinition.metadata.relationType) {
+    case Entity.Person: {
+      return (
+        <PeoplePicker
+          personId={fieldValue?.id ?? null}
+          onSubmit={handleEntitySubmit}
+          onCancel={handleCancel}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
+      );
+      return <> </>;
+  }
+}
+
+export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
+  const currentEntityId = useContext(BoardCardIdContext);
+
+  // TODO: we could use a hook that would return the field value with the right type
+  const [fieldValue, setFieldValue] = useRecoilState<any | null>(
+    genericEntityFieldFamilySelector({
+      entityId: currentEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateGenericEntityField();
+  const { closeEditableField } = useEditableField();
+
+  function handleSubmit(newRelation: EntityForSelect | null) {
+    if (newRelation?.id === fieldValue?.id) return;
+
+    setFieldValue({
+      id: newRelation?.id ?? null,
+      displayName: newRelation?.name ?? null,
+      avatarUrl: newRelation?.avatarUrl ?? null,
+    });
+
+    if (currentEntityId && updateField) {
+      updateField(currentEntityId, viewField, newRelation);
+    }
+
+    closeEditableField();
+  }
+
+  function handleCancel() {
+    closeEditableField();
+  }
+
+  return (
+    <RelationPickerContainer>
+      <RelationPicker
+        fieldDefinition={viewField}
+        fieldValue={fieldValue}
+        handleEntitySubmit={handleSubmit}
+        handleCancel={handleCancel}
+      />
+    </RelationPickerContainer>
+  );
+}