diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx index 43f0ef6f5a..3e9ffcef77 100644 --- a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx +++ b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback } from 'react'; import { useParams } from 'react-router-dom'; import { isDefined } from '@togglecorp/fujs'; import { @@ -27,17 +27,15 @@ import { UpdateAdminLevelMutationVariables, CreateAdminLevelMutationVariables, GalleryFileType, + AdminLevelType, } from '#generated/types'; import NonFieldError from '#components/NonFieldError'; import GalleryFileUpload from '#components/GalleryFileUpload'; -import { - AdminLevelGeoArea, -} from '#types'; import styles from './styles.css'; type AdminLevel = AdminLevelInputType & { clientId: string, id: string}; -type PartialAdminLevel = PartialForm; +type PartialAdminLevel = PartialForm; const CREATE_ADMIN_LEVEL = gql` mutation CreateAdminLevel( @@ -49,6 +47,22 @@ const CREATE_ADMIN_LEVEL = gql` ok errors result { + tolerance + title + staleGeoAreas + parentNameProp + parentCodeProp + codeProp + nameProp + geoShapeFile { + file { + url + } + id + title + mimeType + } + level id } } @@ -67,6 +81,22 @@ const UPDATE_ADMIN_LEVEL = gql` ok errors result { + tolerance + title + staleGeoAreas + parentNameProp + parentCodeProp + codeProp + nameProp + geoShapeFile { + file { + url + } + id + title + mimeType + } + level id } } @@ -86,7 +116,7 @@ type FormSchemaFields = ReturnType; const schema: FormSchema = { fields: (): FormSchemaFields => ({ clientId: [], - region: [requiredCondition], + region: [requiredStringCondition], title: [requiredStringCondition], level: [requiredCondition], geoShapeFile: [], @@ -98,19 +128,21 @@ const schema: FormSchema = { }), }; -const adminLevelKeySelector = (d: AdminLevelGeoArea) => d.id; -const adminLevelLabelSelector = (d: AdminLevelGeoArea) => d.title; +const adminLevelKeySelector = (d: AdminLevelType) => d.id; +const adminLevelLabelSelector = (d: AdminLevelType) => d.title; interface Props { - onSave: (adminLevel: AdminLevelGeoArea) => void; - onDelete: (id: number | undefined) => void; + regionId: string; + onSave: (adminLevel: AdminLevelType) => void; + onDelete: (id: string | undefined) => void; value: PartialAdminLevel; isPublished?: boolean; - adminLevelOptions?: AdminLevelGeoArea[]; + adminLevelOptions?: AdminLevelType[]; } function AddAdminLevelForm(props: Props) { const { + regionId, adminLevelOptions, onSave, value: valueFromProps, @@ -132,7 +164,7 @@ function AddAdminLevelForm(props: Props) { setPristine, validate, setError, - } = useForm(schema, valueFromProps); + } = useForm(schema, { ...valueFromProps, region: regionId }); const error = getErrorObject(riskyError); const alert = useAlert(); @@ -258,7 +290,7 @@ function AddAdminLevelForm(props: Props) { if (isDefined(valueFromProps.id)) { updateAdminLevel({ variables: { - id: String(valueFromProps.id), + id: valueFromProps.id, data: val, }, }); diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx index 8fa6d55a74..1f7d769342 100644 --- a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx +++ b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx @@ -3,21 +3,21 @@ import { TabPanel, } from '@the-deep/deep-ui'; import { PartialForm } from '@togglecorp/toggle-form'; - -import { AdminLevelGeoArea } from '#types'; +import { AdminLevelInputType, AdminLevelType } from '#generated/types'; import AddAdminLevelForm from './AddAdminLevelForm'; -type AdminLevel = AdminLevelGeoArea & { clientId: string }; -type PartialAdminLevel = PartialForm; +type AdminLevel = AdminLevelInputType & { clientId: string }; +type PartialAdminLevel = PartialForm; interface Props { - onSave: (adminLevel: AdminLevelGeoArea) => void; - onDelete: (id: number | undefined) => void; + onSave: (adminLevel: AdminLevelType) => void; + onDelete: (id: string | undefined) => void; value: PartialAdminLevel; isPublished?: boolean; - adminLevelOptions?: AdminLevelGeoArea[]; + adminLevelOptions?: AdminLevelType[]; name: string; + regionId: string; } function AddAdminLevelPane(props: Props) { @@ -28,6 +28,7 @@ function AddAdminLevelPane(props: Props) { isPublished, adminLevelOptions, name, + regionId, } = props; return ( @@ -35,6 +36,7 @@ function AddAdminLevelPane(props: Props) { name={name} > ; +type AdminLevel = AdminLevelType & { clientId: string }; +type PartialAdminLevel = PartialForm; // NOTE: clientId is only used to show active tab const tabKeySelector = (d: AdminLevel) => d.clientId; type Region = NonNullable['regions']>[number]>; +const PUBLISH_REGION = gql` + mutation PublishRegion($regionId: ID!) { + publishRegion(id: $regionId) { + ok + errors + } + } +`; + +const ADMIN_LEVELS = gql` + query AdminLevels($regionId: ID!) { + region(id: $regionId) { + adminLevels { + tolerance + title + staleGeoAreas + parentNameProp + parentCodeProp + codeProp + nameProp + geoShapeFile { + file { + url + } + id + title + mimeType + } + level + id + } + } + } +`; + interface Props { region: Region; className?: string; @@ -88,6 +126,7 @@ function RegionCard(props: Props) { adminLevels, setAdminLevels, ] = useState([]); + const alert = useAlert(); const adminLevelsLength = adminLevels.length; @@ -107,43 +146,38 @@ function RegionCard(props: Props) { const adminLevelQuery = useMemo( () => ({ - region: region.id, + regionId: region.id, }), [region.id], ); const { - pending: adminLevelsPending, - retrigger: getAdminLevels, - } = useRequest>({ - url: 'server://admin-levels/', - skip: !isExpanded, - query: adminLevelQuery, - method: 'GET', - onSuccess: (response) => { - if (response.results.length < 0) { - return; - } - // NOTE: this will be fixed on graphql endpoint - const adminLevelsWithClientId = response.results.map((al) => ({ - ...al, - clientId: al.id.toString(), - })); - setAdminLevels(adminLevelsWithClientId); - - if (onActiveAdminLevelChange) { - const [first] = adminLevelsWithClientId; - if (first) { - onActiveAdminLevelChange(first.id.toString()); + loading: adminLevelsPending, + refetch: getAdminLevels, + } = useQuery( + ADMIN_LEVELS, + { + skip: !isExpanded, + variables: adminLevelQuery, + onCompleted: (response) => { + const adminLevelResponse = response.region; + if (!adminLevelResponse || !adminLevelResponse.adminLevels) { + return; } - } + + const adminLevelsWithClientId = adminLevelResponse?.adminLevels.map((al) => ({ + ...al, + clientId: al.id, + })); + setAdminLevels(adminLevelsWithClientId); + }, }, - }); + ); const { pending: deleteAdminLevelPending, trigger: deleteAdminLevel, - } = useLazyRequest({ + } = useLazyRequest({ url: (ctx) => `server://admin-levels/${ctx}/`, method: 'DELETE', onSuccess: () => { @@ -190,15 +224,14 @@ function RegionCard(props: Props) { clientId, title: `Admin Level ${adminLevelsLength}`, level: adminLevelsLength, - region: +region.id, }; onTempAdminLevelChange(newAdminLevel); }, - [region.id, adminLevelsLength, onTempAdminLevelChange], + [adminLevelsLength, onTempAdminLevelChange], ); const handleAdminLevelSave = useCallback( - (value: AdminLevelGeoArea) => { + (value: AdminLevelType) => { if (onTempAdminLevelChange) { onTempAdminLevelChange(undefined); } @@ -208,7 +241,7 @@ function RegionCard(props: Props) { const index = newAdminLevels.findIndex((item) => item.id === value.id); const valueWithClientId = { ...value, - clientId: value.id.toString(), + clientId: value.id, }; if (index === -1) { newAdminLevels.push(valueWithClientId); @@ -219,7 +252,7 @@ function RegionCard(props: Props) { }); if (onActiveAdminLevelChange) { - onActiveAdminLevelChange(value.id.toString()); + onActiveAdminLevelChange(value.id); } if (onAdminLevelUpdate) { @@ -230,7 +263,7 @@ function RegionCard(props: Props) { ); const handleAdminLevelDelete = useCallback( - (id: number | undefined) => { + (id: string | undefined) => { if (!id) { if (onTempAdminLevelChange) { onTempAdminLevelChange(undefined); @@ -242,22 +275,55 @@ function RegionCard(props: Props) { [onTempAdminLevelChange, deleteAdminLevel], ); - const { - pending: pendingPublishRegion, - trigger: publishRegion, - } = useLazyRequest({ - url: `server://regions/${region.id}/publish/`, - body: {}, - method: 'POST', - onSuccess: () => { - onRegionPublishSuccess(); + const [ + publishRegion, + { + loading: pendingPublishRegion, }, - failureMessage: 'Failed to publish selected region.', - }); + ] = useMutation( + PUBLISH_REGION, + { + onCompleted: (response) => { + if (!response || !response.publishRegion) { + return; + } + + const { + ok, + errors, + } = response.publishRegion; + + if (errors) { + alert.show( + 'Failed to publish selected region.', + { variant: 'error' }, + ); + } + + if (ok) { + alert.show( + 'Region is successfully published!', + { variant: 'success' }, + ); + onRegionPublishSuccess(); + } + }, + onError: () => { + alert.show( + 'Failed to publish selected region.', + { variant: 'error' }, + ); + }, + }, + ); const handlePublishRegionClick = useCallback(() => { - publishRegion(null); - }, [publishRegion]); + publishRegion({ + variables: { + regionId: region.id, + }, + }); + }, [publishRegion, region.id]); const tabListRendererParams = useCallback( (key: string, data: PartialAdminLevel) => ({ @@ -276,8 +342,10 @@ function RegionCard(props: Props) { onDelete: handleAdminLevelDelete, isPublished, adminLevelOptions: adminLevels, + regionId: region.id, }), [ + region.id, isPublished, adminLevels, handleAdminLevelSave, diff --git a/app/views/ProjectEdit/GeoAreas/index.tsx b/app/views/ProjectEdit/GeoAreas/index.tsx index 9e3265fa05..288315e531 100644 --- a/app/views/ProjectEdit/GeoAreas/index.tsx +++ b/app/views/ProjectEdit/GeoAreas/index.tsx @@ -11,11 +11,9 @@ import { IoAdd, } from 'react-icons/io5'; -import { - AdminLevelGeoArea, -} from '#types'; import { useModalState } from '#hooks/stateManagement'; import { + AdminLevelType, CreateRegionMutation, RegionsForGeoAreasQuery, RegionsForGeoAreasQueryVariables, @@ -42,6 +40,7 @@ query RegionsForGeoAreas ($id: ID!) { codeProp parentNameProp parentCodeProp + parent } title public @@ -54,7 +53,7 @@ type NewRegionId = NonNullable const regionKeySelectorForRegionCard = (d: Region) => +d.id; -type AdminLevel = AdminLevelGeoArea & { clientId: string }; +type AdminLevel = AdminLevelType & { clientId: string }; type PartialAdminLevel = PartialForm; interface Props { @@ -114,6 +113,8 @@ function GeoAreas(props: Props) { [], ); + console.log('active', activeRegion, 'admin', activeAdminLevel); + const handleExpansion = useCallback( (expanded: boolean, name: string) => { handleRegionSet(expanded ? name : undefined);