#1866 - Remove props any from the vue application

sources/packages/web/src/components/aest/OfferingApplicationBanner.vue

@@ -13,7 +13,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const precedingOffering = ref({} as PrecedingOfferingSummaryAPIOutDTO);
     const bannerText = computed(() => {
       if (precedingOffering.value?.applicationsCount > 1) {

sources/packages/web/src/components/aest/OfferingChangeRequest.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, ref, SetupContext, defineComponent } from "vue";
+import { onMounted, ref, defineComponent } from "vue";
 import { EducationProgramOfferingService } from "@/services/EducationProgramOfferingService";
 import { OfferingStatus, OfferingRelationType } from "@/types";
 import { EducationProgramOfferingAPIOutDTO } from "@/services/http/dto";
@@ -34,7 +34,7 @@ export default defineComponent({
   //TODO: This emit needs to be removed when the program and offering header component
   //TODO: is enhanced to load header values with it's own API call.
   emits: ["getHeaderDetails"],
-  setup(props: any, context: SetupContext) {
+  setup(props, context) {
     const initialData = ref({} as EducationProgramOfferingAPIOutDTO);
 
     onMounted(async () => {

sources/packages/web/src/components/aest/institution/modals/AssessOfferingModal.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { ref, reactive, computed, defineComponent } from "vue";
+import { ref, reactive, computed, defineComponent, PropType } from "vue";
 import ModalDialogBase from "@/components/generic/ModalDialogBase.vue";
 import { useModalDialog, useRules } from "@/composables";
 import ErrorSummary from "@/components/generic/ErrorSummary.vue";
@@ -43,7 +43,7 @@ export default defineComponent({
   components: { ModalDialogBase, CheckPermissionRole, ErrorSummary },
   props: {
     offeringStatus: {
-      type: String,
+      type: String as PropType<OfferingStatus>,
       required: true,
     },
     processing: {
@@ -52,7 +52,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const { checkNotesLengthRule } = useRules();
     const { showDialog, showModal, resolvePromise } = useModalDialog<
       OfferingAssessmentAPIInDTO | boolean

sources/packages/web/src/components/common/AppealRequestsForm.vue

@@ -18,7 +18,7 @@
 </template>
 <script lang="ts">
 import { AESTRoutesConst } from "@/constants/routes/RouteConstants";
-import { SetupContext, defineComponent } from "vue";
+import { defineComponent } from "vue";
 import { useFormioUtils } from "@/composables";
 import { StudentAppealRequest } from "@/types";
 
@@ -35,7 +35,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(_props: any, context: SetupContext) {
+  setup(_props, context) {
     const { checkFormioValidity } = useFormioUtils();
     const appealForms: any[] = [];
     const appealFormLoaded = (form: any) => {

sources/packages/web/src/components/common/IdleTimeChecker.vue

@@ -15,7 +15,14 @@
 </template>
 
 <script lang="ts">
-import { onMounted, ref, computed, watch, defineComponent } from "vue";
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent,
+  PropType,
+} from "vue";
 import { ClientIdType } from "@/types";
 import {
   ModalDialog,
@@ -36,12 +43,12 @@ export default defineComponent({
   components: { ConfirmExtendTime },
   props: {
     clientIdType: {
-      type: String,
+      type: String as PropType<ClientIdType>,
       required: true,
       default: "" as ClientIdType,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const interval = ref();
     const extendTimeModal = ref({} as ModalDialog<boolean>);
     const { isAuthenticated } = useInstitutionAuth();

sources/packages/web/src/components/common/InstitutionUserSummary.vue

@@ -225,7 +225,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const snackBar = useSnackBar();
     const { institutionUserRoleToDisplay } = useFormatters();
     const usersListAndCount = ref({} as InstitutionUserSummary);

sources/packages/web/src/components/common/LocationSummary.vue

@@ -128,7 +128,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const formatter = useFormatters();
     const router = useRouter();
     const clientType = computed(() => AuthService.shared.authClientType);

sources/packages/web/src/components/common/OfferingSummary.vue

@@ -125,7 +125,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const router = useRouter();
     const loading = ref(false);
     const searchBox = ref("");

sources/packages/web/src/components/common/ProgramDetails.vue

@@ -110,7 +110,7 @@ export default defineComponent({
       default: {} as EducationProgramAPIOutDTO,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const router = useRouter();
     const clientType = computed(() => AuthService.shared.authClientType);
 

sources/packages/web/src/components/common/ProgramOfferingDetailHeader.vue

@@ -83,7 +83,7 @@ export default defineComponent({
       default: {} as ProgramOfferingHeader,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const router = useRouter();
     const { dateOnlyLongString } = useFormatters();
     const showApprovalDetails = computed(

sources/packages/web/src/components/common/ScholasticStandingForm.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { ref, SetupContext, watch, defineComponent } from "vue";
+import { ref, watch, defineComponent, PropType } from "vue";
 import {
   ActiveApplicationDataAPIOutDTO,
   ScholasticStandingSubmittedDetailsAPIOutDTO,
@@ -24,17 +24,17 @@ import { FormIOForm } from "@/types";
 
 interface ScholasticStanding
   extends ScholasticStandingSubmittedDetailsAPIOutDTO {
-  readonly: boolean;
+  readOnly: boolean;
 }
 interface ScholasticStandingBeforeSubmission
   extends ActiveApplicationDataAPIOutDTO {
-  readonly: boolean;
+  readOnly: boolean;
 }
 export default defineComponent({
   emits: ["submit", "cancel"],
   props: {
     initialData: {
-      type: Object,
+      type: Object as PropType<ScholasticStandingSubmittedDetailsAPIOutDTO>,
       required: true,
     },
     readOnly: {
@@ -48,7 +48,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props: any, context: SetupContext) {
+  setup(props, context) {
     const data = ref(
       {} as ScholasticStanding | ScholasticStandingBeforeSubmission,
     );

sources/packages/web/src/components/common/StudentAppealForm.vue

@@ -2,7 +2,7 @@
   <formio :formName="formName" @loaded="formLoaded"></formio>
 </template>
 <script lang="ts">
-import { SetupContext, defineComponent } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   emits: ["appealFormLoaded"],
@@ -12,7 +12,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props: any, context: SetupContext) {
+  setup(_props, context) {
     const formLoaded = (form: any) => {
       context.emit("appealFormLoaded", form);
     };

sources/packages/web/src/components/common/StudentApplication.vue

@@ -29,7 +29,7 @@ import {
   FormIOCustomEvent,
   FormIOForm,
 } from "@/types";
-import { ref, SetupContext, watch, defineComponent } from "vue";
+import { ref, watch, defineComponent } from "vue";
 import {
   useFormioComponentLoader,
   useFormioDropdownLoader,
@@ -65,7 +65,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props: any, context: SetupContext) {
+  setup(props, context) {
     // Component's names on Form.IO definition that will be manipulated.
     const LOCATIONS_DROPDOWN_KEY = "selectedLocation";
     const PROGRAMS_DROPDOWN_KEY = "selectedProgram";

sources/packages/web/src/components/common/StudentProfileForm.vue

@@ -36,7 +36,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const initialData = ref({} as StudentProfileFormModel);
 
     const saveLabel = computed(() =>

sources/packages/web/src/components/common/notes/Notes.vue

@@ -104,7 +104,7 @@ export default defineComponent({
     },
   },
   emits: ["submitData"],
-  setup(props: any, context: any) {
+  setup(_props, context) {
     const { dateOnlyLongString, timeOnlyInHoursAndMinutes } = useFormatters();
     const showModal = ref(false);
     const createNotesModal = ref({} as ModalDialog<NoteAPIInDTO | boolean>);

sources/packages/web/src/components/common/restriction/AddRestriction.vue

@@ -70,7 +70,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const { checkNotesLengthRule } = useRules();
     const restrictionCategories = ref([] as SelectItemType[]);
     const restrictionReasons = ref([] as SelectItemType[]);

sources/packages/web/src/components/common/restriction/ViewRestriction.vue

@@ -116,7 +116,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const NOTES_MAX_CHARACTERS = 500;
     const { checkMaxCharacters } = useValidators();
     const { showDialog, showModal, resolvePromise } = useModalDialog<

sources/packages/web/src/components/generic/BCLogo.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import { useAuth } from "@/composables";
-import { SetupContext, defineComponent } from "vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   props: {
     subtitle: {
@@ -30,7 +30,7 @@ export default defineComponent({
     },
   },
   emits: ["click"],
-  setup(_props: any, context: SetupContext) {
+  setup(_props, context) {
     const { executeLogout } = useAuth();
     const logoClick = () => {
       context.emit("click");

sources/packages/web/src/components/generic/Banner.vue

@@ -35,7 +35,7 @@ export default defineComponent({
       type: String,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const bannerIcon = computed(() => {
       switch (props.type) {
         case BannerTypes.Success:

sources/packages/web/src/components/generic/BodyHeader.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const fullTitleMessage = computed(() => {
       if (props.recordsCount) {
         return `${props.title} (${props.recordsCount})`;

sources/packages/web/src/components/generic/CheckPermissionRole.vue

@@ -15,7 +15,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const { hasRole } = useAuth();
 
     const notAllowed = computed(() => {

sources/packages/web/src/components/generic/ChipLabel.vue

@@ -19,7 +19,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const chipColor = computed(() => {
       switch (props.status) {
         case StatusChipTypes.Success:

sources/packages/web/src/components/generic/ChipStatus.vue

@@ -19,7 +19,7 @@ export default defineComponent({
       required: false,
     },
   },
-  setup(props: any) {
+  setup(props) {
     const chipColor = computed(() => {
       switch (props.status) {
         case StatusChipTypes.Success:

sources/packages/web/src/components/generic/FormioModalDialog.vue

@@ -24,7 +24,7 @@ import ModalDialogBase from "@/components/generic/ModalDialogBase.vue";
 import { useFormioUtils, useModalDialog } from "@/composables";
 import { FormIOForm } from "@/types";
 import formio from "@/components/generic/formio.vue";
-import { SetupContext, defineComponent } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   components: {
@@ -38,7 +38,7 @@ export default defineComponent({
     maxWidth: { type: Number, required: false },
   },
   emits: ["loaded"],
-  setup(_props: any, context: SetupContext) {
+  setup(_props, context) {
     const { checkFormioValidity } = useFormioUtils();
     const { showDialog, resolvePromise, showModal } = useModalDialog<
       FormIOForm | boolean

sources/packages/web/src/components/generic/HeaderNavigator.vue

@@ -31,8 +31,8 @@
   </v-row>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useRouter } from "vue-router";
+import { defineComponent, PropType } from "vue";
+import { RouteLocationRaw, useRouter } from "vue-router";
 
 export default defineComponent({
   props: {
@@ -43,15 +43,17 @@ export default defineComponent({
       type: String,
     },
     routeLocation: {
-      type: Object,
+      type: Object as PropType<RouteLocationRaw>,
     },
   },
 
-  setup(props: any) {
+  setup(props) {
     const router = useRouter();
 
     const goBack = () => {
-      router.push(props.routeLocation);
+      if (props.routeLocation) {
+        router.push(props.routeLocation);
+      }
     };
     return { goBack };
   },

sources/packages/web/src/components/generic/SnackBar.vue

@@ -33,21 +33,18 @@
   </v-snackbar>
 </template>
 <script lang="ts">
-import { computed, reactive, watch, defineComponent } from "vue";
+import { computed, reactive, watch, defineComponent, PropType } from "vue";
 import { SnackBarOptions, SnackBarType } from "@/types";
 import { useSnackBar } from "@/composables";
 
 export default defineComponent({
   props: {
     snackBarOptions: {
-      type: Object,
+      type: Object as PropType<SnackBarOptions>,
       required: true,
-      default() {
-        return {} as SnackBarOptions;
-      },
     },
   },
-  setup(props: any) {
+  setup(props) {
     const snackBar = useSnackBar();
     const snackBarChoices = reactive(
       (props.snackBarOptions as SnackBarOptions) ??