ecer-5028 adding start and end dates to professional development

Author: SoLetsDev

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ProfessionalDevelopmentCard.vue

@@ -6,11 +6,18 @@
           <v-col>
             <p class="font-weight-bold">{{ professionalDevelopment.courseName }}</p>
           </v-col>
+          <v-spacer></v-spacer>
+          <v-col class="text-wrap" cols="auto">
+            <p>
+              {{
+                `${formatDate(professionalDevelopment.startDate || "", "LLLL d, yyyy")} - ${formatDate(professionalDevelopment.endDate || "", "LLLL d, yyyy")}`
+              }}
+            </p>
+          </v-col>
+          <v-spacer></v-spacer>
           <v-col>
             <p>{{ `${professionalDevelopment.numberOfHours} hours` }}</p>
           </v-col>
-
-          <div></div>
         </v-row>
       </v-card-title>
     </template>
@@ -44,6 +51,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { useLoadingStore } from "@/store/loading";
+import { formatDate } from "@/utils/format";
 
 import type { ProfessionalDevelopmentExtended } from "./inputs/EceProfessionalDevelopment.vue";
 
@@ -57,7 +65,7 @@ export default defineComponent({
   },
   setup() {
     const loadingStore = useLoadingStore();
-    return { loadingStore };
+    return { loadingStore, formatDate };
   },
   emits: {
     edit: (_reference: ProfessionalDevelopmentExtended) => true,