Complete labelIdentifer, relationPicker first implementation (#2618)

* Fix first column main identifier * Fixes
2023-11-21 18:32:36 +01:00
parent dd125ddfcc
commit 726e375616
27 changed files with 165 additions and 91 deletions
--- a/front/src/modules/ui/input/components/internal/relation-picker/RelationPicker.tsx
+++ b/front/src/modules/ui/input/components/internal/relation-picker/RelationPicker.tsx
@ -37,7 +37,8 @@ export const RelationPicker = ({
  }, [initialSearchFilter, setRelationPickerSearchFilter]);

  const { findManyQuery } = useObjectMetadataItem({
-    objectNameSingular: fieldDefinition.metadata.objectMetadataNameSingular,
+    objectNameSingular:
+      fieldDefinition.metadata.relationObjectMetadataNameSingular,
  });

  const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
@ -49,8 +50,8 @@ export const RelationPicker = ({
    filters: [
      {
        fieldNames:
-          searchQuery?.filterFields?.(
-            fieldDefinition.metadata.objectMetadataNameSingular,
+          searchQuery?.computeFilterFields?.(
+            fieldDefinition.metadata.relationObjectMetadataNameSingular,
          ) ?? [],
        filter: relationPickerSearchFilter,
      },
@ -59,10 +60,10 @@ export const RelationPicker = ({
    mappingFunction: (record: any) =>
      identifiersMapper?.(
        record,
-        fieldDefinition.metadata.objectMetadataNameSingular,
+        fieldDefinition.metadata.relationObjectMetadataNameSingular,
      ),
    selectedIds: recordId ? [recordId] : [],
-    objectNamePlural: fieldDefinition.metadata.objectMetadataNamePlural,
+    objectNamePlural: fieldDefinition.metadata.relationObjectMetadataNamePlural,
  });

  const handleEntitySelected = async (selectedUser: any | null | undefined) => {
--- a/front/src/modules/ui/input/components/internal/relation-picker/types/SearchQuery.tsx
+++ b/front/src/modules/ui/input/components/internal/relation-picker/types/SearchQuery.tsx
@ -1,3 +1,3 @@
 export type SearchQuery = {
-  filterFields: (relationPickerType: string) => string[];
+  computeFilterFields: (relationPickerType: string) => string[];
 };
--- a/front/src/modules/ui/object/field/components/FieldDisplay.tsx
+++ b/front/src/modules/ui/object/field/components/FieldDisplay.tsx
@ -1,5 +1,6 @@
 import { useContext } from 'react';

+import { ChipFieldDisplay } from '@/ui/object/field/meta-types/display/components/ChipFieldDisplay';
 import { FullNameFieldDisplay } from '@/ui/object/field/meta-types/display/components/FullNameFieldDisplay';
 import { LinkFieldDisplay } from '@/ui/object/field/meta-types/display/components/LinkFieldDisplay';
 import { RelationFieldDisplay } from '@/ui/object/field/meta-types/display/components/RelationFieldDisplay';
@ -24,8 +25,14 @@ import { isFieldRelation } from '../types/guards/isFieldRelation';
 import { isFieldText } from '../types/guards/isFieldText';

 export const FieldDisplay = () => {
-  const { fieldDefinition } = useContext(FieldContext);
+  const { fieldDefinition, isLabelIdentifier } = useContext(FieldContext);

+  if (
+    isLabelIdentifier &&
+    (isFieldText(fieldDefinition) || isFieldFullName(fieldDefinition))
+  ) {
+    return <ChipFieldDisplay />;
+  }
  return (
    <>
      {isFieldRelation(fieldDefinition) ? (
--- a/front/src/modules/ui/object/field/contexts/FieldContext.ts
+++ b/front/src/modules/ui/object/field/contexts/FieldContext.ts
@ -10,12 +10,7 @@ export type GenericFieldContextType = {
  entityId: string;
  recoilScopeId?: string;
  hotkeyScope: string;
-  isMainIdentifier: boolean;
-  mainIdentifierMapper?: (record: any) => {
-    name: string;
-    avatarUrl?: string;
-    avatarType: string;
-  };
+  isLabelIdentifier: boolean;
  basePathToShowPage?: string;
 };

--- a/front/src/modules/ui/object/field/meta-types/stories/FieldContextProvider.tsx
+++ b/front/src/modules/ui/object/field/meta-types/stories/FieldContextProvider.tsx
@ -18,7 +18,7 @@ export const FieldContextProvider = ({
    <FieldContext.Provider
      value={{
        entityId: entityId ?? '1',
-        isMainIdentifier: false,
+        isLabelIdentifier: false,
        recoilScopeId: '1',
        hotkeyScope: 'hotkey-scope',
        fieldDefinition,
--- a/front/src/modules/ui/object/field/meta-types/display/components/ChipFieldDisplay.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/ChipFieldDisplay.tsx
@ -1,10 +1,24 @@
+import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+import { useChipField } from '@/ui/object/field/meta-types/hooks/useChipField';
+
 export const ChipFieldDisplay = () => {
-  // const { avatarFieldValue, contentFieldValue, entityId } = useChipField();
-  // return (
-  //   <ChipDisplay
-  //     displayName={contentFieldValue}
-  //     avatarUrlValue={avatarFieldValue}
-  //     entityId={entityId}
-  //   />
-  // );
+  const {
+    record,
+    entityId,
+    identifiersMapper,
+    objectNameSingular,
+    basePathToShowPage,
+  } = useChipField();
+
+  const identifiers = identifiersMapper?.(record, objectNameSingular ?? '');
+
+  return (
+    <EntityChip
+      name={identifiers?.name ?? ''}
+      avatarUrl={identifiers?.avatarUrl}
+      avatarType={identifiers?.avatarType}
+      entityId={entityId}
+      linkToEntity={basePathToShowPage + entityId}
+    />
+  );
 };
--- a/front/src/modules/ui/object/field/meta-types/display/components/DoubleTextChipFieldDisplay.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/DoubleTextChipFieldDisplay.tsx
@ -1,11 +0,0 @@
-export const DoubleTextChipFieldDisplay = () => {
-  // const {} = useFullNameField();
-  // const content = [firstValue, secondValue].filter(Boolean).join(' ');
-  // return (
-  //   <ChipDisplay
-  //     displayName={content}
-  //     avatarUrlValue={avatarUrl}
-  //     entityId={entityId}
-  //   />
-  // );
-};
--- a/front/src/modules/ui/object/field/meta-types/display/components/RelationFieldDisplay.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/RelationFieldDisplay.tsx
@ -13,7 +13,7 @@ export const RelationFieldDisplay = () => {

  const objectIdentifiers = identifiersMapper(
    fieldValue,
-    fieldDefinition.metadata.objectMetadataNameSingular,
+    fieldDefinition.metadata.relationObjectMetadataNameSingular,
  );

  return (
--- a/front/src/modules/ui/object/field/meta-types/display/components/stories/DateFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/stories/DateFieldDisplay.stories.tsx
@ -26,7 +26,7 @@ const meta: Meta = {
      <FieldContext.Provider
        value={{
          entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
          fieldDefinition: {
            fieldMetadataId: 'date',
            label: 'Date',
--- a/front/src/modules/ui/object/field/meta-types/display/components/stories/EmailFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/stories/EmailFieldDisplay.stories.tsx
@ -25,7 +25,7 @@ const meta: Meta = {
      <FieldContext.Provider
        value={{
          entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
          fieldDefinition: {
            fieldMetadataId: 'email',
            label: 'Email',
--- a/front/src/modules/ui/object/field/meta-types/display/components/stories/NumberFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/stories/NumberFieldDisplay.stories.tsx
@ -24,7 +24,7 @@ const meta: Meta = {
      <FieldContext.Provider
        value={{
          entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
          fieldDefinition: {
            fieldMetadataId: 'number',
            label: 'Number',
--- a/front/src/modules/ui/object/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
@ -25,7 +25,7 @@ const meta: Meta = {
      <FieldContext.Provider
        value={{
          entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
          fieldDefinition: {
            fieldMetadataId: 'phone',
            label: 'Phone',
--- a/front/src/modules/ui/object/field/meta-types/display/components/stories/TextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/stories/TextFieldDisplay.stories.tsx
@ -24,7 +24,7 @@ const meta: Meta = {
      <FieldContext.Provider
        value={{
          entityId: '',
-          isMainIdentifier: false,
+          isLabelIdentifier: false,
          fieldDefinition: {
            fieldMetadataId: 'text',
            label: 'Text',
--- a/front/src/modules/ui/object/field/meta-types/hooks/useChipField.ts
+++ b/front/src/modules/ui/object/field/meta-types/hooks/useChipField.ts
@ -0,0 +1,31 @@
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
+import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
+import { isFieldFullName } from '@/ui/object/field/types/guards/isFieldFullName';
+import { isFieldText } from '@/ui/object/field/types/guards/isFieldText';
+
+import { FieldContext } from '../../contexts/FieldContext';
+
+export const useChipField = () => {
+  const { entityId, fieldDefinition, basePathToShowPage } =
+    useContext(FieldContext);
+
+  const objectNameSingular =
+    isFieldText(fieldDefinition) || isFieldFullName(fieldDefinition)
+      ? fieldDefinition.metadata.objectMetadataNameSingular
+      : undefined;
+
+  const record = useRecoilValue<any | null>(entityFieldsFamilyState(entityId));
+
+  const { identifiersMapper } = useRelationPicker();
+
+  return {
+    basePathToShowPage,
+    entityId,
+    objectNameSingular,
+    record,
+    identifiersMapper,
+  };
+};
--- a/front/src/modules/ui/object/field/types/FieldMetadata.ts
+++ b/front/src/modules/ui/object/field/types/FieldMetadata.ts
@ -9,6 +9,7 @@ export type FieldBooleanMetadata = {
 };

 export type FieldTextMetadata = {
+  objectMetadataNameSingular: string;
  placeHolder: string;
  fieldName: string;
 };
@ -36,6 +37,7 @@ export type FieldCurrencyMetadata = {
 };

 export type FieldFullNameMetadata = {
+  objectMetadataNameSingular: string;
  placeHolder: string;
  fieldName: string;
 };
@ -64,8 +66,8 @@ export type FieldRelationMetadata = {
  fieldName: string;
  useEditButton?: boolean;
  relationType?: FieldDefinitionRelationType;
-  objectMetadataNameSingular: string;
-  objectMetadataNamePlural: string;
+  relationObjectMetadataNameSingular: string;
+  relationObjectMetadataNamePlural: string;
 };

 export type FieldMetadata =
--- a/front/src/modules/ui/object/record-table/components/RecordTableCell.tsx
+++ b/front/src/modules/ui/object/record-table/components/RecordTableCell.tsx
@ -60,7 +60,8 @@ export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => {
              fieldDefinition: columnDefinition,
              useUpdateEntityMutation: () => [updateEntityMutation, {}],
              hotkeyScope: customHotkeyScope,
-              isMainIdentifier:
+              basePathToShowPage: objectMetadataConfig?.basePathToShowPage,
+              isLabelIdentifier:
                columnDefinition.fieldMetadataId ===
                objectMetadataConfig?.labelIdentifierFieldMetadataId,
            }}