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>
This commit is contained in:
Lucas Bordeau
@ -1,3 +1,5 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
|
||||
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
|
||||
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
|
||||
@ -12,7 +14,7 @@ export type OwnProps = {
|
||||
};
|
||||
|
||||
export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
|
||||
const [searchFilter] = useRecoilScopedState(
|
||||
const [searchFilter, setSearchFilter] = useRecoilScopedState(
|
||||
relationPickerSearchFilterScopedState,
|
||||
);
|
||||
|
||||
@ -27,6 +29,10 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
|
||||
onSubmit(selectedCompany ?? null);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setSearchFilter('');
|
||||
}, [setSearchFilter]);
|
||||
|
||||
return (
|
||||
<SingleEntitySelect
|
||||
onEntitySelected={handleEntitySelected}
|
||||
|
||||
146
front/src/modules/companies/components/CompanyProgressPicker.tsx
Normal file
146
front/src/modules/companies/components/CompanyProgressPicker.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -1,75 +1,45 @@
|
||||
import { useCallback, useContext, useState } from 'react';
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { useRecoilCallback, useRecoilState } from 'recoil';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
import { GET_PIPELINE_PROGRESS } from '@/pipeline/graphql/queries/getPipelineProgress';
|
||||
import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
|
||||
import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
|
||||
import { NewButton } from '@/ui/board/components/NewButton';
|
||||
import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext';
|
||||
import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
|
||||
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
|
||||
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
|
||||
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
|
||||
import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
|
||||
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useCreateOneCompanyPipelineProgressMutation } from '~/generated/graphql';
|
||||
|
||||
import { useCreateCompanyProgress } from '../hooks/useCreateCompanyProgress';
|
||||
import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
|
||||
|
||||
export function NewCompanyProgressButton() {
|
||||
const [isCreatingCard, setIsCreatingCard] = useState(false);
|
||||
const [pipeline] = useRecoilState(currentPipelineState);
|
||||
const pipelineStageId = useContext(BoardColumnIdContext);
|
||||
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
|
||||
const {
|
||||
goBackToPreviousHotkeyScope,
|
||||
setHotkeyScopeAndMemorizePreviousScope,
|
||||
} = usePreviousHotkeyScope();
|
||||
|
||||
const [createOneCompanyPipelineProgress] =
|
||||
useCreateOneCompanyPipelineProgressMutation({
|
||||
refetchQueries: [
|
||||
getOperationName(GET_PIPELINE_PROGRESS) ?? '',
|
||||
getOperationName(GET_PIPELINES) ?? '',
|
||||
],
|
||||
});
|
||||
const createCompanyProgress = useCreateCompanyProgress();
|
||||
|
||||
const handleEntitySelect = useRecoilCallback(
|
||||
({ set }) =>
|
||||
async (company: any) => {
|
||||
if (!company) return;
|
||||
function handleEntitySelect(company: any) {
|
||||
setIsCreatingCard(false);
|
||||
goBackToPreviousHotkeyScope();
|
||||
|
||||
if (!pipelineStageId) throw new Error('pipelineStageId is not defined');
|
||||
if (!pipelineStageId) {
|
||||
enqueueSnackBar('Pipeline stage id is not defined', {
|
||||
variant: 'error',
|
||||
});
|
||||
|
||||
setIsCreatingCard(false);
|
||||
throw new Error('Pipeline stage id is not defined');
|
||||
}
|
||||
|
||||
goBackToPreviousHotkeyScope();
|
||||
|
||||
const newUuid = uuidv4();
|
||||
|
||||
set(boardCardIdsByColumnIdFamilyState(pipelineStageId), (oldValue) => [
|
||||
...oldValue,
|
||||
newUuid,
|
||||
]);
|
||||
|
||||
await createOneCompanyPipelineProgress({
|
||||
variables: {
|
||||
uuid: newUuid,
|
||||
pipelineStageId: pipelineStageId,
|
||||
pipelineId: pipeline?.id ?? '',
|
||||
companyId: company.id ?? '',
|
||||
},
|
||||
});
|
||||
},
|
||||
[
|
||||
goBackToPreviousHotkeyScope,
|
||||
createOneCompanyPipelineProgress,
|
||||
pipelineStageId,
|
||||
pipeline?.id,
|
||||
],
|
||||
);
|
||||
createCompanyProgress(company, pipelineStageId);
|
||||
}
|
||||
|
||||
const handleNewClick = useCallback(() => {
|
||||
setIsCreatingCard(true);
|
||||
@ -89,7 +59,7 @@ export function NewCompanyProgressButton() {
|
||||
const companies = useFilteredSearchCompanyQuery({ searchFilter });
|
||||
|
||||
return (
|
||||
<>
|
||||
<RecoilScope>
|
||||
{isCreatingCard ? (
|
||||
<SingleEntitySelect
|
||||
onEntitySelected={(value) => handleEntitySelect(value)}
|
||||
@ -104,6 +74,6 @@ export function NewCompanyProgressButton() {
|
||||
) : (
|
||||
<NewButton onClick={handleNewClick} />
|
||||
)}
|
||||
</>
|
||||
</RecoilScope>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user