Skip to content

Commit

Permalink
fix(vehicles-bulk-mileage): Fixes after testing review (#16295)
Browse files Browse the repository at this point in the history 
* fix: testing fixes v1

* fix: testing comments v2

* fix: better message

* fix: function name

* fix: duplicate loading

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@thorkellmani @kodiakhq
thorkellmani and kodiakhq[bot] authored Oct 7, 2024
1 parent c7ad42c commit eeabe7f
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 98 deletions.
23 changes: 20 additions & 3 deletions libs/service-portal/assets/src/lib/messages.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,10 @@ export const vehicleMessage = defineMessages({
id: 'sp.vehicles:vehicle-mileage-intro',
defaultMessage: `Sýnir kílómetrastöðu fyrir hvert ár. Athugið að einungis er hægt að skrá einu sinni fyrir hvert tímabil, <href>sjá nánar um það hér.</href>`,
},
vehicleBulkMileageIntro: {
id: 'sp.vehicles:vehicle-bulk-mileage-intro',
defaultMessage: `Yfirlit yfir skráða kílómetrastöðu. Að minnsta kosti 30 dagar verða að líða á milli skráningar kílómetrastöðu, <href>sjá nánar um það hér.</href>`,
},
historyIntro: {
id: 'sp.vehicles:vehicles-history-intro',
defaultMessage: `Hér má nálgast upplýsingar um þinn ökutækjaferil úr ökutækjaskrá Samgöngustofu.`,
Expand Down Expand Up @@ -912,6 +916,10 @@ export const vehicleMessage = defineMessages({
id: 'sp.vehicles:bulk-post-mileage',
defaultMessage: 'Magnskrá kílómetrastöðu',
},
bulkPostMileageWithFile: {
id: 'sp.vehicles:bulk-post-mileage-with-file',
defaultMessage: 'Magnskrá með skjali',
},
jobOverview: {
id: 'sp.vehicles:job-overview',
defaultMessage: 'Yfirlit skráninga',
Expand Down Expand Up @@ -1018,21 +1026,30 @@ export const vehicleMessage = defineMessages({
},
fileUploadAcceptedTypes: {
id: 'sp.vehicles:file-upload-accepted-types',
defaultMessage: 'Tekið er við skjölum með endingu; .csv, .xls',
defaultMessage: 'Tekið er við skjölum með endingu; .csv',
},
dataAboutJob: {
id: 'sp.vehicles:data-about-job',
defaultMessage: 'Hér finnur þú upplýsingar um skráningu',
defaultMessage:
'Hér finnur þú upplýsingar um skráningu. Að vinna úr magnskráningarskjali getur tekið þónokkrar mínútur. ',
},
refreshDataAboutJob: {
id: 'sp.vehicles:refresh-data-about-job',
defaultMessage:
'Til að sækja nýjustu stöðu er hægt að smella á "Uppfæra stöðu"',
'Til að sækja nýjustu stöðu á skráningarkeyrslunni er hægt að smella á "Uppfæra stöðu"',
},
refreshJob: {
id: 'sp.vehicles:refresh-job',
defaultMessage: 'Uppfæra stöðu',
},
mileagePostSuccess: {
id: 'sp.vehicles:mileage-post-success',
defaultMessage: 'Kílómetraskráning tókst',
},
mileagePutSuccess: {
id: 'sp.vehicles:mileage-put-success',
defaultMessage: 'Uppfærsla á kílómetraskráningu tókst',
},
mileageHistoryFetchFailed: {
id: 'sp.vehicles:mileage-history-fetch-failed',
defaultMessage: 'Eitthvað fór úrskeiðis við að sækja fyrri skráningar',
Expand Down
6 changes: 3 additions & 3 deletions libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,12 @@ const VehicleBulkMileage = () => {
const [vehicles, setVehicles] = useState<Array<VehicleType>>([])
const [page, setPage] = useState<number>(1)
const [totalPages, setTotalPages] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10)

const { data, loading, error, fetchMore } = useVehiclesListQuery({
const { data, loading, error } = useVehiclesListQuery({
variables: {
input: {
page,
pageSize,
pageSize: 10,
},
},
})
Expand Down Expand Up @@ -111,6 +110,7 @@ const VehicleBulkMileage = () => {
totalPages={totalPages}
renderLink={(page, className, children) => (
<button
aria-label={formatMessage(m.goToPage)}
onClick={() => {
setPage(page)
}}
Expand Down
115 changes: 74 additions & 41 deletions libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { InputController } from '@island.is/shared/form-fields'
import * as styles from './VehicleBulkMileage.css'
import { displayWithUnit } from '../../utils/displayWithUnit'
import { isReadDateToday } from '../../utils/readDate'
import { useDebounce } from 'react-use'

const ORIGIN_CODE = 'ISLAND.IS'

Expand All @@ -32,42 +33,44 @@ interface Props {
export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
const { formatMessage } = useLocale()
const [postError, setPostError] = useState<string | null>(null)
const [postSuccess, setPostSuccess] = useState(false)
const [postStatus, setPostStatus] = useState<
'initial' | 'posting' | 'post-success' | 'put-success' | 'error'
>('initial')

const [executeRegistrationsQuery, { data, loading, error }] =
useVehicleMileageRegistrationHistoryLazyQuery({
variables: {
input: {
permno: vehicle.vehicleId,
},
const [
executeRegistrationsQuery,
{ data, loading, error, refetch: registrationsRefetch },
] = useVehicleMileageRegistrationHistoryLazyQuery({
variables: {
input: {
permno: vehicle.vehicleId,
},
})
},
})

const [putAction, { loading: putActionLoading }] =
usePutSingleVehicleMileageMutation({
onError: () => {
setPostError(formatMessage(m.errorTitle))
setPostSuccess(false)
},
onCompleted: () => {
setPostError(null)
setPostSuccess(true)
},
})
const [putAction] = usePutSingleVehicleMileageMutation({
onError: () => {
setPostError(formatMessage(m.errorTitle))
setPostStatus('error')
},
onCompleted: () => {
setPostError(null)
setPostStatus('put-success')
},
})

const [postAction, { loading: postActionLoading }] =
usePostSingleVehicleMileageMutation({
onError: () => {
setPostError(formatMessage(m.errorTitle))
setPostSuccess(false)
},
onCompleted: () => {
setPostError(null)
setPostSuccess(true)
},
})
const [postAction] = usePostSingleVehicleMileageMutation({
onError: () => {
setPostError(formatMessage(m.errorTitle))
setPostStatus('error')
},
onCompleted: () => {
setPostError(null)
setPostStatus('post-success')
},
})

const [executeMileageQuery, { data: mileageData, loading: mileageLoading }] =
const [executeMileageQuery, { data: mileageData, refetch: mileageRefetch }] =
useGetUsersMileageLazyQuery({
variables: { input: { permno: vehicle.vehicleId } },
})
Expand All @@ -79,6 +82,27 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
trigger,
} = useFormContext()

const postMileage = () => {
const formerPostStatus = postStatus
setPostError(null)
setPostStatus('posting')
if (formerPostStatus !== 'initial') {
mileageRefetch()
} else {
executeMileageQuery()
}
}

useDebounce(
() => {
if (postStatus === 'put-success' || postStatus === 'post-success') {
registrationsRefetch()
}
},
500,
[postStatus, registrationsRefetch],
)

const getValueFromForm = async (
formFieldId: string,
skipEmpty = false,
Expand All @@ -94,13 +118,11 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
}

const onSaveButtonClick = async () => {
setPostError(null)
setPostSuccess(false)
executeMileageQuery()
postMileage()
}

useEffect(() => {
const postMileage = async () => {
const post = async () => {
const formValue = await getValueFromForm(vehicle.vehicleId)
if (formValue) {
if (
Expand Down Expand Up @@ -134,7 +156,7 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
}

if (mileageData) {
postMileage()
post()
}
}, [mileageData])

Expand Down Expand Up @@ -247,11 +269,12 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
value: (
<VehicleBulkMileageSaveButton
submissionStatus={
postError
postStatus === 'error'
? 'error'
: postActionLoading || putActionLoading || mileageLoading
: postStatus === 'posting'
? 'loading'
: postSuccess
: postStatus === 'post-success' ||
postStatus === 'put-success'
? 'success'
: 'idle'
}
Expand All @@ -261,6 +284,16 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
},
]}
>
{(postStatus === 'post-success' || postStatus === 'put-success') && (
<AlertMessage
type="success"
message={formatMessage(
postStatus === 'post-success'
? vehicleMessage.mileagePostSuccess
: vehicleMessage.mileagePutSuccess,
)}
/>
)}
{error ? (
<AlertMessage
type="error"
Expand All @@ -271,7 +304,7 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
headerArray={[
formatMessage(vehicleMessage.date),
formatMessage(vehicleMessage.registration),
formatMessage(vehicleMessage.annualUsage),
//formatMessage(vehicleMessage.annualUsage),
formatMessage(vehicleMessage.odometer),
]}
loading={loading}
Expand All @@ -281,7 +314,7 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
(r) => [
formatDate(r.date),
r.originCode,
'-',
//'-',
displayWithUnit(r.mileage, 'km', true),
],
) ?? []
Expand Down
51 changes: 41 additions & 10 deletions ...ice-portal/assets/src/screens/VehicleBulkMileageJobDetail/VehicleBulkMileageJobDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { VehiclesBulkMileageRegistrationRequestOverview } from '@island.is/servi
import { displayWithUnit } from '../../utils/displayWithUnit'
import { isDefined } from '@island.is/shared/utils'
import { vehicleMessage } from '../../lib/messages'
import { NetworkStatus } from '@apollo/client'

type UseParams = {
id: string
Expand All @@ -36,26 +37,36 @@ const VehicleBulkMileageJobDetail = () => {
const { formatMessage } = useLocale()
const { id } = useParams() as UseParams

const { data, loading, error, refetch } = useGetJobsStatusQuery({
variables: {
input: {
requestId: id,
const { data, loading, error, refetch, networkStatus } =
useGetJobsStatusQuery({
notifyOnNetworkStatusChange: true,
variables: {
input: {
requestId: id,
},
},
},
})
})

const {
data: registrationData,
loading: registrationLoading,
error: registrationError,
refetch: registrationRefresh,
networkStatus: registrationNetworkStatus,
} = useGetJobRegistrationsQuery({
notifyOnNetworkStatusChange: true,
variables: {
input: {
guid: id,
},
},
})

const handleRefresh = () => {
refetch()
registrationRefresh()
}

const jobsStatus: VehiclesBulkMileageRegistrationRequestStatus | undefined =
data?.vehicleBulkMileageRegistrationRequestStatus ?? undefined

Expand Down Expand Up @@ -86,6 +97,11 @@ const VehicleBulkMileageJobDetail = () => {
downloadFile(`magnskraning_villur`, ['Ökutæki', 'Villur'], data, 'csv')
}

const displayRegistrationData =
registrations?.requests.length &&
!registrationLoading &&
!(registrationNetworkStatus === NetworkStatus.refetch)

return (
<Box>
<IntroHeader
Expand All @@ -101,7 +117,16 @@ const VehicleBulkMileageJobDetail = () => {
serviceProviderTooltip={formatMessage(m.vehiclesTooltip)}
>
<Box marginTop={'containerGutter'}>
<Button variant="utility" icon="reload" onClick={() => refetch()}>
<Button
variant="utility"
icon={
loading || networkStatus === NetworkStatus.refetch
? undefined
: 'reload'
}
loading={loading || networkStatus === NetworkStatus.refetch}
onClick={handleRefresh}
>
{formatMessage(vehicleMessage.refreshJob)}
</Button>
</Box>
Expand All @@ -118,6 +143,8 @@ const VehicleBulkMileageJobDetail = () => {
<Stack space={8}>
<TableGrid
title={formatMessage(vehicleMessage.jobStatus)}
loading={loading || networkStatus === NetworkStatus.refetch}
emptyMessage={vehicleMessage.noJobsFound}
dataArray={
data?.vehicleBulkMileageRegistrationRequestStatus
? [
Expand Down Expand Up @@ -181,6 +208,7 @@ const VehicleBulkMileageJobDetail = () => {
size="default"
variant="utility"
onClick={handleFileDownload}
disabled={!displayRegistrationData}
>
{formatMessage(vehicleMessage.downloadErrors)}
</Button>
Expand All @@ -201,7 +229,7 @@ const VehicleBulkMileageJobDetail = () => {
</T.Head>

<T.Body>
{!!registrations?.requests.length &&
{displayRegistrationData &&
registrations?.requests.map((j) => (
<T.Row key={j.vehicleId}>
<T.Data>
Expand All @@ -223,10 +251,13 @@ const VehicleBulkMileageJobDetail = () => {
))}
</T.Body>
</T.Table>
{(!registrations || registrationLoading) && (
{!displayRegistrationData && (
<EmptyTable
message={formatMessage(vehicleMessage.noRegistrationsFound)}
loading={registrationLoading}
loading={
registrationLoading ||
registrationNetworkStatus === NetworkStatus.refetch
}
/>
)}
</Box>
Expand Down
Loading

0 comments on commit eeabe7f

Please sign in to comment.