diff --git a/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx b/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx index 7cb89db..e458ad6 100644 --- a/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx +++ b/app/views/EditProject/UpdateProjectForm/ValidateProjectSpecifics/ObjectSourceInput/index.tsx @@ -1,11 +1,21 @@ -import { useContext } from 'react'; +import { + useContext, + useMemo, +} from 'react'; +import { + isDefined, + isNotDefined, +} from '@togglecorp/fujs'; import { EntriesAsList, getErrorObject, LeafError, ObjectError, } from '@togglecorp/toggle-form'; +import { gql } from 'urql'; +import Alert from '#components/Alert'; +import Button from '#components/Button'; import Container from '#components/Container'; import AssetInput from '#components/domain/AssetInput'; import RadioInput from '#components/RadioInput'; @@ -13,15 +23,45 @@ import TextInput from '#components/TextInput'; import EnumsContext from '#contexts/EnumsContext'; import { ProjectAssetInputTypeEnum, + useTestAoiObjectsQuery, + useTestTaskingManagerProjectQuery, ValidateObjectSourceTypeEnum, } from '#generated/types/graphql'; import { + formatNumber, keySelector, labelSelector, } from '#utils/common'; import { PartialValidateObjectSourceInputFields } from './schema'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const TEST_AOI_OBJECTS_QUERY = gql` +query TestAoiObjects($assetId: ID, $projectId: ID, $ohsomeFilter: String) { + testAoiObjects(assetId: $assetId, projectId: $projectId, ohsomeFilter: $ohsomeFilter) { + ok + error + objectCount + assetId + projectId + ohsomeFilter + } +} +`; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const TEST_TASKING_MANAGER_PROJECT_QUERY = gql` +query TestTaskingManagerProject($hotTmId: String, $ohsomeFilter: String) { + testTaskingManagerProject(hotTmId: $hotTmId, ohsomeFilter: $ohsomeFilter) { + ok + error + objectCount + hotTmId + ohsomeFilter + } +} +`; + interface Props { value: PartialValidateObjectSourceInputFields | undefined, error: LeafError | ObjectError, @@ -43,6 +83,37 @@ function ObjectSourceInput(props: Props) { const error = getErrorObject(formError); + const [ + { + data: testAoiObjectsResponse, + fetching: testAoiObjectsPending, + error: testAoiObjectsError, + }, + triggerTestAoiObjects, + ] = useTestAoiObjectsQuery({ + variables: { + projectId, + assetId: value?.aoiGeometry, + ohsomeFilter: value?.ohsomeFilter, + }, + pause: true, + }); + + const [ + { + data: testTaskingManagerProjectResponse, + fetching: testTaskingManagerProjectPending, + error: testTaskingManagerProjectError, + }, + triggerTestTaskingManagerProject, + ] = useTestTaskingManagerProjectQuery({ + variables: { + hotTmId: value?.taskingManagerProjectId, + ohsomeFilter: value?.ohsomeFilter, + }, + pause: true, + }); + const { validateObjectSourceTypeOptions, } = useContext(EnumsContext); @@ -53,10 +124,175 @@ function ObjectSourceInput(props: Props) { TaskingManager, } = ValidateObjectSourceTypeEnum; + const headerDescription = useMemo(() => { + if (isNotDefined(value?.sourceType)) { + return null; + } + + if (value.sourceType === AoiGeojsonFile) { + if (isDefined(testAoiObjectsError)) { + return ( + + ); + } + + if (isNotDefined(testAoiObjectsResponse)) { + return null; + } + + const { + testAoiObjects: { + ok, + error: testError, + objectCount, + assetId, + ohsomeFilter, + }, + } = testAoiObjectsResponse; + + if (assetId !== value.aoiGeometry || ohsomeFilter !== value.ohsomeFilter) { + return null; + } + + return ( + + ); + } + + if (value.sourceType === TaskingManager) { + if (isDefined(testTaskingManagerProjectError)) { + return ( + + ); + } + if (isNotDefined(testTaskingManagerProjectResponse)) { + return null; + } + + const { + testTaskingManagerProject: { + ok, + error: testError, + objectCount, + hotTmId, + ohsomeFilter, + }, + } = testTaskingManagerProjectResponse; + + if (hotTmId !== value.taskingManagerProjectId || ohsomeFilter !== value.ohsomeFilter) { + return null; + } + + return ( + + ); + } + + return null; + }, [ + AoiGeojsonFile, + TaskingManager, + testAoiObjectsResponse, + testAoiObjectsError, + testTaskingManagerProjectResponse, + testTaskingManagerProjectError, + value?.sourceType, + value?.taskingManagerProjectId, + value?.ohsomeFilter, + value?.aoiGeometry, + ]); + + const actions = useMemo(() => { + if (isNotDefined(value?.sourceType)) { + return null; + } + + if (value.sourceType === AoiGeojsonFile) { + if (isNotDefined(value?.aoiGeometry) || isNotDefined(value.ohsomeFilter)) { + return null; + } + + return ( + + ); + } + + if (value.sourceType === TaskingManager) { + if (isNotDefined(value.taskingManagerProjectId) || isNotDefined(value.ohsomeFilter)) { + return null; + } + + return ( + + ); + } + + return null; + }, [ + AoiGeojsonFile, + TaskingManager, + testAoiObjectsPending, + testTaskingManagerProjectPending, + triggerTestAoiObjects, + triggerTestTaskingManagerProject, + value?.aoiGeometry, + value?.ohsomeFilter, + value?.sourceType, + value?.taskingManagerProjectId, + ]); + return (