Feat/add opportunity (#1267)

* Renamed AuthAutoRouter * Moved RecoilScope * Refactored old WithTopBarContainer to make it less transclusive * Created new add opportunity button and refactored DropdownButton * Added tests * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/layout/components/PageHeader.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/pages/opportunities/Opportunities.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Fix lint * Fix lint --------- Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com> Co-authored-by: Thaïs <guigon.thais@gmail.com>
2023-08-23 18:57:08 +02:00
parent 74ab0142c7
commit 64cef963bc
23 changed files with 696 additions and 97 deletions
--- a/front/src/modules/companies/components/CompanyProgressPicker.tsx
+++ b/front/src/modules/companies/components/CompanyProgressPicker.tsx
@ -0,0 +1,146 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import { useRecoilState } from 'recoil';
+
+import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import { IconChevronDown } from '@/ui/icon';
+import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
+import { useEntitySelectSearch } from '@/ui/input/relation-picker/hooks/useEntitySelectSearch';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
+
+export type OwnProps = {
+  companyId: string | null;
+  onSubmit: (
+    newCompanyId: EntityForSelect | null,
+    newPipelineStageId: string | null,
+  ) => void;
+  onCancel?: () => void;
+};
+
+export function CompanyProgressPicker({
+  companyId,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
+
+  const companies = useFilteredSearchCompanyQuery({
+    searchFilter,
+    selectedIds: companyId ? [companyId] : [],
+  });
+
+  const [isProgressSelectionUnfolded, setIsProgressSelectionUnfolded] =
+    useState(false);
+
+  const [selectedPipelineStageId, setSelectedPipelineStageId] = useState<
+    string | null
+  >(null);
+
+  useListenClickOutside({
+    refs: [containerRef],
+    callback: (event) => {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      event.preventDefault();
+
+      onCancel?.();
+    },
+  });
+
+  const theme = useTheme();
+
+  const [currentPipeline] = useRecoilState(currentPipelineState);
+
+  const currentPipelineStages = useMemo(
+    () => currentPipeline?.pipelineStages ?? [],
+    [currentPipeline],
+  );
+
+  function handlePipelineStageChange(newPipelineStageId: string) {
+    setSelectedPipelineStageId(newPipelineStageId);
+    setIsProgressSelectionUnfolded(false);
+  }
+
+  async function handleEntitySelected(
+    selectedCompany: EntityForSelect | null | undefined,
+  ) {
+    onSubmit(selectedCompany ?? null, selectedPipelineStageId);
+  }
+
+  useEffect(() => {
+    if (currentPipelineStages?.[0]?.id) {
+      setSelectedPipelineStageId(currentPipelineStages?.[0]?.id);
+    }
+  }, [currentPipelineStages]);
+
+  const selectedPipelineStage = useMemo(
+    () =>
+      currentPipelineStages.find(
+        (pipelineStage) => pipelineStage.id === selectedPipelineStageId,
+      ),
+    [currentPipelineStages, selectedPipelineStageId],
+  );
+
+  return (
+    <DropdownMenu
+      ref={containerRef}
+      data-testid={`company-progress-dropdown-menu`}
+    >
+      {isProgressSelectionUnfolded ? (
+        <DropdownMenuItemsContainer>
+          {currentPipelineStages.map((pipelineStage, index) => (
+            <DropdownMenuItem
+              key={pipelineStage.id}
+              data-testid={`select-pipeline-stage-${index}`}
+              onClick={() => {
+                handlePipelineStageChange(pipelineStage.id);
+              }}
+            >
+              {pipelineStage.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuItemsContainer>
+      ) : (
+        <>
+          <DropdownMenuHeader
+            data-testid="selected-pipeline-stage"
+            endIcon={<IconChevronDown size={theme.icon.size.md} />}
+            onClick={() => setIsProgressSelectionUnfolded(true)}
+          >
+            {selectedPipelineStage?.name}
+          </DropdownMenuHeader>
+          <DropdownMenuSeparator />
+          <DropdownMenuInput
+            value={searchFilter}
+            onChange={handleSearchFilterChange}
+            autoFocus
+          />
+          <DropdownMenuSeparator />
+          <RecoilScope>
+            <SingleEntitySelectBase
+              onEntitySelected={handleEntitySelected}
+              onCancel={onCancel}
+              entities={{
+                loading: companies.loading,
+                entitiesToSelect: companies.entitiesToSelect,
+                selectedEntity: companies.selectedEntities[0],
+              }}
+            />
+          </RecoilScope>
+        </>
+      )}
+    </DropdownMenu>
+  );
+}