Skip to content

Commit

Permalink
Merge pull request #226 from bcgov/feature/stepper-style
Browse files Browse the repository at this point in the history 
Stepper style updates
  • Loading branch information
@kyle1morel
kyle1morel authored Dec 19, 2024
2 parents 28b92b8 + c0e1a8d commit 8ee81ae
Show file tree
Hide file tree
Showing 17 changed files with 334 additions and 160 deletions.
6 changes: 3 additions & 3 deletions app/src/controllers/submission.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,10 +298,10 @@ const controller = {
trackingId: x.trackingId,
status: x.status ?? PermitStatus.APPLIED,
needed: x.needed ?? PermitNeeded.YES,
statusLastVerified: x.statusLastVerified,
statusLastVerified: null,
issuedPermitId: null,
authStatus: x.authStatus ?? PermitAuthorizationStatus.IN_REVIEW,
submittedDate: null,
submittedDate: x.submittedDate,
adjudicationDate: null
}));
}
Expand All @@ -314,7 +314,7 @@ const controller = {
trackingId: null,
status: x.status ?? PermitStatus.NEW,
needed: x.needed ?? PermitNeeded.UNDER_INVESTIGATION,
statusLastVerified: x.statusLastVerified,
statusLastVerified: null,
issuedPermitId: null,
authStatus: x.authStatus ?? PermitAuthorizationStatus.NONE,
submittedDate: null,
Expand Down
2 changes: 1 addition & 1 deletion app/src/validators/appliedPermit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ export const appliedPermit = Joi.object({
status: Joi.string()
.valid(...PERMIT_STATUS_LIST)
.allow(null),
statusLastVerified: Joi.date().max('now').allow(null),
submittedDate: Joi.date().max('now').allow(null),
trackingId: Joi.string().allow(null)
});
28 changes: 12 additions & 16 deletions app/tests/unit/controllers/submission.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,20 +467,19 @@ describe('createSubmission', () => {
permitTypeId: 1,
trackingId: '123',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
},
{
permitTypeId: 3,
trackingId: '456',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
}
],
investigatePermits: [
{
permitTypeId: 12,
needed: PermitNeeded.UNDER_INVESTIGATION,
statusLastVerified: now
needed: PermitNeeded.UNDER_INVESTIGATION
}
]
},
Expand All @@ -506,7 +505,7 @@ describe('createSubmission', () => {
activityId: '00000000',
trackingId: '123',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
})
);
expect(createPermitSpy).toHaveBeenNthCalledWith(
Expand All @@ -516,16 +515,15 @@ describe('createSubmission', () => {
activityId: '00000000',
trackingId: '456',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
})
);
expect(createPermitSpy).toHaveBeenNthCalledWith(
3,
expect.objectContaining({
permitTypeId: 12,
activityId: '00000000',
needed: PermitNeeded.UNDER_INVESTIGATION,
statusLastVerified: now
needed: PermitNeeded.UNDER_INVESTIGATION
})
);
});
Expand Down Expand Up @@ -809,20 +807,19 @@ describe('submitDraft', () => {
permitTypeId: 1,
trackingId: '123',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
},
{
permitTypeId: 3,
trackingId: '456',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
}
],
investigatePermits: [
{
permitTypeId: 12,
needed: PermitNeeded.UNDER_INVESTIGATION,
statusLastVerified: now
needed: PermitNeeded.UNDER_INVESTIGATION
}
]
},
Expand All @@ -849,7 +846,7 @@ describe('submitDraft', () => {
activityId: '00000000',
trackingId: '123',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
})
);
expect(createPermitSpy).toHaveBeenNthCalledWith(
Expand All @@ -859,16 +856,15 @@ describe('submitDraft', () => {
activityId: '00000000',
trackingId: '456',
status: PermitStatus.APPLIED,
statusLastVerified: now
submittedDate: now
})
);
expect(createPermitSpy).toHaveBeenNthCalledWith(
3,
expect.objectContaining({
permitTypeId: 12,
activityId: '00000000',
needed: PermitNeeded.UNDER_INVESTIGATION,
statusLastVerified: now
needed: PermitNeeded.UNDER_INVESTIGATION
})
);
});
Expand Down
14 changes: 7 additions & 7 deletions app/tests/unit/validators/appliedPermits.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('appliedPermitsSchema', () => {
const appliedPermits = {
permitTypeId: '123AC!',
status: PermitStatus.NEW,
statusLastVerified: '2021-01-01',
submittedDate: '2021-01-01',
trackingId: 'test'
};
const result = appliedPermit.validate(appliedPermits);
Expand All @@ -16,7 +16,7 @@ describe('appliedPermitsSchema', () => {
it('should not accept null for permitTypeId', () => {
const appliedPermits = {
status: PermitStatus.APPLIED,
statusLastVerified: '2021-01-01',
submittedDate: '2021-01-01',
trackingId: 'test tracking id'
};
const result = appliedPermit.validate(appliedPermits);
Expand All @@ -27,7 +27,7 @@ describe('appliedPermitsSchema', () => {
const appliedPermits = {
permitTypeId: 123,
status: PermitStatus.COMPLETED,
statusLastVerified: '2021-01-01',
submittedDate: '2021-01-01',
trackingId: 'test'
};
const result = appliedPermit.validate(appliedPermits);
Expand All @@ -38,18 +38,18 @@ describe('appliedPermitsSchema', () => {
const appliedPermits = {
permitTypeId: 123,
status: 'Test',
statusLastVerified: '2021-01-01',
submittedDate: '2021-01-01',
trackingId: 'test'
};
const result = appliedPermit.validate(appliedPermits);
expect(result.error).toBeDefined();
});

it('should only accept a valid date for statusLastVerified', () => {
it('should only accept a valid date for submitted date', () => {
const appliedPermits = {
permitTypeId: 123,
status: PermitStatus.APPLIED,
statusLastVerified: 'not-a-date',
submittedDate: 'not-a-date',
trackingId: 'test'
};
const result = appliedPermit.validate(appliedPermits);
Expand All @@ -60,7 +60,7 @@ describe('appliedPermitsSchema', () => {
const appliedPermits = {
permitTypeId: 123,
status: PermitStatus.APPLIED,
statusLastVerified: new Date(Date.now() + 1000).toISOString(),
submittedDate: new Date(Date.now() + 1000).toISOString(),
trackingId: 'test'
};
const result = appliedPermit.validate(appliedPermits);
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/assets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,14 @@ label {
color: $app-primary !important;
}

.app-error-background {
background-color: $app-error !important;
}

.app-error-border {
border-color: $app-error !important;
}

.app-error-color {
color: $app-error !important;
}
Expand Down
53 changes: 42 additions & 11 deletions frontend/src/components/form/StepperHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,61 @@ const {
activeStep,
clickCallback = () => {},
title,
icon
icon,
errors = false
} = defineProps<{
index: number;
activeStep: number;
clickCallback?: Function;
title: string;
icon: string;
errors?: boolean;
}>();
</script>

<template>
<Button
class="p-button-text"
@click="clickCallback()"
>
<font-awesome-icon
class="pr-2"
:icon="`fa-solid ${icon}`"
/>
<div class="flex flex-column align-items-center">
<Button
class="bg-transparent border-none inline-flex flex-column gap-2 p-1"
:class="[{ 'outer-border': index === activeStep, 'outer-border-error': index === activeStep && errors }]"
@click="clickCallback()"
>
<span
class="border-circle border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center"
:class="[
{
'bg-primary border-primary': index <= activeStep,
'surface-border': index > activeStep,
'border-1, p-4': index === activeStep,
'app-error-background app-error-border': errors
}
]"
>
<font-awesome-icon
:icon="`fa-solid ${icon}`"
:class="[
{ 'app-primary-color': index > activeStep && !errors, 'app-error-background app-error-border': errors }
]"
/>
</span>
</Button>
<span
class="text-xl"
:class="{ 'font-bold': index === activeStep }"
:class="{ 'font-bold': index === activeStep, underline: index === activeStep, 'app-error-color': errors }"
>
{{ title }}
</span>
</Button>
</div>
</template>

<style lang="scss" scoped>
.outer-border {
border-radius: 50%;
box-shadow: 0 0 0 3px #c1ddfc; // TODO: Blue 30
}
.outer-border-error {
border-radius: 50%;
box-shadow: 0 0 0 3px $app-error !important;
}
</style>
Loading

0 comments on commit 8ee81ae

Please sign in to comment.