Skip to content

Commit

Permalink
Merge branch 'master' of github.com:bcgov/ECC-ECER
Browse files Browse the repository at this point in the history
  • Loading branch information
ytqsl committed Mar 27, 2024
2 parents 8baa1a5 + a8ce646 commit 6890dd0
Show file tree
Hide file tree
Showing 17 changed files with 186 additions and 173 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,73 @@
<template>
<v-card variant="outlined" color="grey-lightest" rounded="lg">
<slot></slot>
<v-card variant="outlined" :color="cardColor" rounded="lg">
<div class="float-right">
<v-tooltip v-model="show" location="top">
<template #activator="{ props }">
<v-btn icon="mdi-pencil" v-bind="props" :color="isValid ? 'primary' : 'error'" variant="plain" @click="setWizard(portalStage)" />
</template>
<span>Edit {{ title }}</span>
</v-tooltip>
</div>
<v-container>
<v-row align="center">
<v-col>
<h3 :class="isValid ? 'text-black' : 'text-error'">{{ title }}</h3>
<p v-if="!isValid" class="small text-error">
<v-icon icon="mdi-alert-circle" color="error" class="mr-2"></v-icon>
You must enter all required information in a valid format before submitting your application
</p>
</v-col>
</v-row>
<slot name="content"></slot>
</v-container>
</v-card>
</template>

<script lang="ts">
import type { PropType } from "vue";
import { defineComponent } from "vue";
import { useApplicationStore } from "@/store/application";
import { useWizardStore } from "@/store/wizard";
import type { Components } from "@/types/openapi";
export default defineComponent({
name: "PreviewCard",
props: {
isValid: {
type: Boolean,
default: true,
},
title: {
type: String,
required: true,
},
portalStage: {
type: String as PropType<Components.Schemas.PortalStage>,
required: true,
},
},
setup: () => {
const wizardStore = useWizardStore();
const applicationStore = useApplicationStore();
return {
wizardStore,
applicationStore,
};
},
data: () => ({
show: false,
}),
computed: {
cardColor() {
return this.isValid ? "grey-lightest" : "error";
},
},
methods: {
setWizard(stage: Components.Schemas.PortalStage) {
this.wizardStore.setCurrentStep(stage);
this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
},
},
});
</script>
Original file line number Diff line number Diff line change
@@ -1,23 +1,37 @@
<template>
<WizardHeader class="mb-6" />
<v-stepper v-model="wizardStore.step" min-height="100dvh" flat color="primary" :items="getStepTitles()" :alt-labels="true" :mobile="$vuetify.display.mobile">
<template v-for="step in wizard.steps" :key="step.stage" #[step.key]>
<v-container>
<h3>{{ step.title }}</h3>
<h4>{{ step.subtitle }}</h4>
<DeclarationStepContent v-if="step.stage == 'Declaration'" class="mt-6" />
<v-row>
<v-col cols="12">
<EceForm
:form="step.form"
:form-data="wizardStore.wizardData"
@updated-form-data="wizardStore.setWizardData"
@updated-validation="$emit('updatedValidation', $event)"
/>
</v-col>
</v-row>
</v-container>
</template>
<v-stepper v-model="wizardStore.step" min-height="100dvh" :alt-labels="true" :mobile="$vuetify.display.mobile">
<v-stepper-header>
<template v-for="(step, index) in Object.values(wizard.steps)" :key="step.stage">
<v-stepper-item
color="primary"
:step="wizardStore.step"
:value="index + 1"
:title="step.title"
:rules="wizardStore.step <= index + 1 ? [] : [() => wizardStore.validationState[step.stage]]"
></v-stepper-item>
<v-divider v-if="index !== Object.values(wizard.steps).length - 1" :key="`divider-${index}`" />
</template>
</v-stepper-header>
<v-stepper-window v-model="wizardStore.step">
<v-stepper-window-item v-for="(step, index) in Object.values(wizard.steps)" :key="step.stage" :value="index + 1">
<v-container>
<h3>{{ step.title }}</h3>
<h4>{{ step.subtitle }}</h4>
<DeclarationStepContent v-if="step.stage == 'Declaration'" class="mt-6" />
<v-row>
<v-col cols="12">
<EceForm
:form="step.form"
:form-data="wizardStore.wizardData"
@updated-form-data="wizardStore.setWizardData"
@updated-validation="$emit('updatedValidation', $event)"
/>
</v-col>
</v-row>
</v-container>
</v-stepper-window-item>
</v-stepper-window>
<template #actions>
<slot name="actions"></slot>
</template>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
<template>
<PreviewCard>
<v-container>
<v-row align="center">
<v-col>
<h3 class="font-black">Certification Selection</h3>
</v-col>
<v-col align="end">
<v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('CertificationType')" />
</v-col>
</v-row>
<PreviewCard :is-valid="wizardStore.validationState.CertificationType" title="Certification Selection" portal-stage="CertificationType">
<template #content>
<v-row>
<v-col cols="4">
<p class="small">Certification Type</p>
Expand All @@ -17,18 +9,16 @@
<p class="small font-weight-bold">{{ certificationType }}</p>
</v-col>
</v-row>
</v-container>
</template>
</PreviewCard>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PreviewCard from "@/components/PreviewCard.vue";
import { useApplicationStore } from "@/store/application";
import { useWizardStore } from "@/store/wizard";
import type { EcePreviewProps } from "@/types/input";
import type { Components } from "@/types/openapi";
export default defineComponent({
name: "EceCertificationTypePreview",
components: {
Expand All @@ -42,10 +32,8 @@ export default defineComponent({
},
setup: () => {
const wizardStore = useWizardStore();
const applicationStore = useApplicationStore();
return {
wizardStore,
applicationStore,
};
},
computed: {
Expand All @@ -70,11 +58,5 @@ export default defineComponent({
return certificationType;
},
},
methods: {
setWizard(stage: Components.Schemas.PortalStage) {
this.wizardStore.setCurrentStep(stage);
this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
},
},
});
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<v-col cols="12" md="8" lg="6" xl="4">
<v-text-field
v-model="firstName"
:rules="[Rules.required()]"
label="First Name"
:rules="[Rules.required('Enter your reference\'s first name')]"
label="Reference First Name"
variant="outlined"
color="primary"
maxlength="100"
Expand All @@ -29,8 +29,8 @@
<v-col cols="12" md="8" lg="6" xl="4">
<v-text-field
v-model="lastName"
:rules="[Rules.required()]"
label="Last Name"
:rules="[Rules.required('Enter your reference\'s last name')]"
label="Reference Last Name"
variant="outlined"
color="primary"
maxlength="100"
Expand All @@ -42,8 +42,8 @@
<v-col cols="12" md="8" lg="6" xl="4">
<v-text-field
v-model="phoneNumber"
:rules="[Rules.phoneNumber()]"
label="Phone Number (Optional)"
:rules="[Rules.phoneNumber('Enter your reference\'s 10-digit phone number')]"
label="Reference Phone Number (Optional)"
variant="outlined"
color="primary"
type="number"
Expand All @@ -56,8 +56,8 @@
<v-col cols="12" md="8" lg="6" xl="4">
<v-text-field
v-model="emailAddress"
:rules="[Rules.required(), Rules.email()]"
label="Email"
:rules="[Rules.required('Enter your reference\'s email in the format \'[email protected]\''), Rules.email('Enter your reference\'s email in the format \'[email protected]\'')]"
label="Reference Email"
variant="outlined"
color="primary"
maxlength="100"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
<template>
<PreviewCard>
<v-container>
<v-row align="center">
<v-col>
<h3 class="font-black">Character Reference</h3>
</v-col>
<v-col align="end">
<v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('CharacterReferences')" />
</v-col>
</v-row>
<PreviewCard :is-valid="wizardStore.validationState.CharacterReferences" title="Character Reference" portal-stage="CharacterReferences">
<template #content>
<v-row>
<v-col cols="4">
<p class="small">Reference Last Name</p>
Expand Down Expand Up @@ -41,15 +33,14 @@
<p class="small font-weight-bold">{{ characterReference.phoneNumber }}</p>
</v-col>
</v-row>
</v-container>
</template>
</PreviewCard>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PreviewCard from "@/components/PreviewCard.vue";
import { useApplicationStore } from "@/store/application";
import { useWizardStore } from "@/store/wizard";
import type { EcePreviewProps } from "@/types/input";
import type { Components } from "@/types/openapi";
Expand All @@ -67,10 +58,8 @@ export default defineComponent({
},
setup: () => {
const wizardStore = useWizardStore();
const applicationStore = useApplicationStore();
return {
wizardStore,
applicationStore,
};
},
computed: {
Expand All @@ -84,11 +73,5 @@ export default defineComponent({
};
},
},
methods: {
setWizard(stage: Components.Schemas.PortalStage) {
this.wizardStore.setCurrentStep(stage);
this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
},
},
});
</script>
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
<template>
<PreviewCard>
<v-container>
<v-row align="center">
<v-col>
<h3 class="font-black">Contact Information</h3>
</v-col>
<v-col align="end">
<v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('ContactInformation')" />
</v-col>
</v-row>
<PreviewCard :is-valid="wizardStore.validationState.ContactInformation" title="Contact Information" portal-stage="ContactInformation">
<template #content>
<v-row>
<v-col cols="4">
<p class="small">Legal Last Name</p>
Expand Down Expand Up @@ -97,7 +89,7 @@
<p class="small font-weight-bold">{{ alternatePhoneNumber }}</p>
</v-col>
</v-row>
</v-container>
</template>
</PreviewCard>
</template>

Expand All @@ -106,10 +98,8 @@ import { defineComponent } from "vue";
import type { AddressesData } from "@/components/inputs/EceAddresses.vue";
import PreviewCard from "@/components/PreviewCard.vue";
import { useApplicationStore } from "@/store/application";
import { useWizardStore } from "@/store/wizard";
import type { EcePreviewProps } from "@/types/input";
import type { Components } from "@/types/openapi";
export default defineComponent({
name: "EceContactInformationPreview",
components: {
Expand All @@ -123,10 +113,8 @@ export default defineComponent({
},
setup: () => {
const wizardStore = useWizardStore();
const applicationStore = useApplicationStore();
return {
wizardStore,
applicationStore,
};
},
computed: {
Expand Down Expand Up @@ -166,11 +154,5 @@ export default defineComponent({
return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.profile.form.inputs.alternateContactNumber.id] ?? "";
},
},
methods: {
setWizard(stage: Components.Schemas.PortalStage) {
this.wizardStore.setCurrentStep(stage);
this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
},
},
});
</script>
Loading

0 comments on commit 6890dd0

Please sign in to comment.