Fix Activity Picker part 1 (#2678)

* Fix Activity Picker part 1

* Fix

front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useMemo, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { useHandleCheckableActivityTargetChange } from '@/activities/hooks/useHandleCheckableActivityTargetChange';
+import { ActivityTarget } from '@/activities/types/ActivityTarget';
+import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
+import { useInlineCell } from '@/ui/object/record-inline-cell/hooks/useInlineCell';
+import { assertNotNull } from '~/utils/assert';
+
+type ActivityTargetInlineCellEditModeProps = {
+  activity?: Pick<GraphQLActivity, 'id'> & {
+    activityTargets?: {
+      edges: Array<{
+        node: Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>;
+      }> | null;
+    };
+  };
+};
+
+const StyledSelectContainer = styled.div`
+  left: 0px;
+  position: absolute;
+  top: -8px;
+`;
+
+export const ActivityTargetInlineCellEditMode = ({
+  activity,
+}: ActivityTargetInlineCellEditModeProps) => {
+  const [searchFilter, setSearchFilter] = useState('');
+
+  const initialPeopleIds = useMemo(
+    () =>
+      activity?.activityTargets?.edges
+        ?.filter(({ node }) => node.personId !== null)
+        .map(({ node }) => node.personId)
+        .filter(assertNotNull) ?? [],
+    [activity?.activityTargets],
+  );
+
+  const initialCompanyIds = useMemo(
+    () =>
+      activity?.activityTargets?.edges
+        ?.filter(({ node }) => node.companyId !== null)
+        .map(({ node }) => node.companyId)
+        .filter(assertNotNull) ?? [],
+    [activity?.activityTargets],
+  );
+
+  const initialSelectedEntityIds = useMemo(
+    () =>
+      [...initialPeopleIds, ...initialCompanyIds].reduce<
+        Record<string, boolean>
+      >((result, entityId) => ({ ...result, [entityId]: true }), {}),
+    [initialPeopleIds, initialCompanyIds],
+  );
+
+  const [selectedEntityIds, setSelectedEntityIds] = useState<
+    Record<string, boolean>
+  >(initialSelectedEntityIds);
+
+  // const personsForMultiSelect = useFilteredSearchPeopleQuery({
+  //   searchFilter,
+  //   selectedIds: initialPeopleIds,
+  // });
+
+  // const companiesForMultiSelect = useFilteredSearchCompanyQuery({
+  //   searchFilter,
+  //   selectedIds: initialCompanyIds,
+  // });
+
+  // const selectedEntities = flatMapAndSortEntityForSelectArrayOfArrayByName([
+  //   personsForMultiSelect.selectedEntities,
+  //   companiesForMultiSelect.selectedEntities,
+  // ]);
+
+  // const filteredSelectedEntities =
+  //   flatMapAndSortEntityForSelectArrayOfArrayByName([
+  //     personsForMultiSelect.filteredSelectedEntities,
+  //     companiesForMultiSelect.filteredSelectedEntities,
+  //   ]);
+
+  // const entitiesToSelect = flatMapAndSortEntityForSelectArrayOfArrayByName([
+  //   personsForMultiSelect.entitiesToSelect,
+  //   companiesForMultiSelect.entitiesToSelect,
+  // ]);
+
+  const handleCheckItemsChange = useHandleCheckableActivityTargetChange({
+    activity,
+  });
+  const { closeInlineCell: closeEditableField } = useInlineCell();
+
+  const handleSubmit = useCallback(() => {
+    //handleCheckItemsChange(selectedEntityIds, entitiesToSelect);
+    closeEditableField();
+  }, [closeEditableField]);
+
+  const handleCancel = () => {
+    closeEditableField();
+  };
+
+  return (
+    <StyledSelectContainer>
+      {/* <MultipleEntitySelect
+        entities={{
+          entitiesToSelect,
+          filteredSelectedEntities,
+          selectedEntities,
+          loading: false,
+        }}
+        onChange={setSelectedEntityIds}
+        onSearchFilterChange={setSearchFilter}
+        searchFilter={searchFilter}
+        value={selectedEntityIds}
+        onCancel={handleCancel}
+        onSubmit={handleSubmit}
+      /> */}
+    </StyledSelectContainer>
+  );
+};

front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -0,0 +1,50 @@
+import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
+import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
+import { ActivityTarget } from '@/activities/types/ActivityTarget';
+import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
+import { Company } from '@/companies/types/Company';
+import { Person } from '@/people/types/Person';
+import { IconArrowUpRight, IconPencil } from '@/ui/display/icon';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { RecordInlineCellContainer } from '@/ui/object/record-inline-cell/components/RecordInlineCellContainer';
+import { FieldRecoilScopeContext } from '@/ui/object/record-inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+type ActivityTargetsInlineCellProps = {
+  activity?: Pick<GraphQLActivity, 'id'> & {
+    activityTargets?: {
+      edges: Array<{
+        node: Pick<ActivityTarget, 'id' | 'personId' | 'companyId'> & {
+          person?: Pick<Person, 'id' | 'name' | 'avatarUrl'> | null;
+          company?: Pick<Company, 'id' | 'domainName' | 'name'> | null;
+        };
+      }> | null;
+    };
+  };
+};
+
+export const ActivityTargetsInlineCell = ({
+  activity,
+}: ActivityTargetsInlineCellProps) => {
+  return (
+    <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
+      <RecordInlineCellContainer
+        buttonIcon={IconPencil}
+        customEditHotkeyScope={{
+          scope: RelationPickerHotkeyScope.RelationPicker,
+        }}
+        IconLabel={IconArrowUpRight}
+        editModeContent={
+          <ActivityTargetInlineCellEditMode activity={activity} />
+        }
+        label="Relations"
+        displayModeContent={
+          <ActivityTargetChips targets={activity?.activityTargets?.edges} />
+        }
+        isDisplayModeContentEmpty={
+          activity?.activityTargets?.edges?.length === 0
+        }
+      />
+    </RecoilScope>
+  );
+};