Client - register globally some custom components

fittrackee_client/src/App.vue

@@ -47,7 +47,6 @@
     onMounted,
   } from 'vue'
 
-  import Loader from '@/components/Common/Loader.vue'
   import Footer from '@/components/Footer.vue'
   import NavBar from '@/components/NavBar.vue'
   import NoConfig from '@/components/NoConfig.vue'
@@ -74,7 +73,6 @@
     name: 'App',
     components: {
       Footer,
-      Loader,
       NavBar,
       NoConfig,
     },

fittrackee_client/src/components/Common/CustomTextArea.vue

@@ -18,7 +18,7 @@
   import { defineComponent, ref, watch } from 'vue'
 
   export default defineComponent({
-    name: 'CustomTextarea',
+    name: 'CustomTextArea',
     props: {
       charLimit: {
         type: Number,

fittrackee_client/src/components/Common/Modal.vue

@@ -25,17 +25,11 @@
 <script lang="ts">
   import { ComputedRef, computed, defineComponent, onUnmounted } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
   import { ROOT_STORE } from '@/store/constants'
   import { useStore } from '@/use/useStore'
 
   export default defineComponent({
     name: 'Modal',
-    components: {
-      Card,
-      ErrorMessage,
-    },
     props: {
       title: {
         type: String,

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -19,7 +19,6 @@
   import { endOfMonth, startOfMonth } from 'date-fns'
   import { PropType, defineComponent } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import StatChart from '@/components/Common/StatsChart/index.vue'
   import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
@@ -27,7 +26,6 @@
   export default defineComponent({
     name: 'UserMonthStats',
     components: {
-      Card,
       StatChart,
     },
     props: {

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -30,14 +30,12 @@
   import { PropType, defineComponent } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import SportImage from '@/components/Common/Images/SportImage/index.vue'
   import { IRecord } from '@/types/workouts'
 
   export default defineComponent({
     name: 'RecordsCard',
     components: {
-      Card,
       SportImage,
     },
     props: {

fittrackee_client/src/components/NavBar.vue

@@ -77,7 +77,6 @@
   import { ComputedRef, computed, defineComponent, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Dropdown from '@/components/Common/Dropdown.vue'
   import UserPicture from '@/components/User/UserPicture.vue'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IDropdownOption } from '@/types/forms'
@@ -88,7 +87,6 @@
   export default defineComponent({
     name: 'NavBar',
     components: {
-      Dropdown,
       UserPicture,
     },
     emits: ['menuInteraction'],

fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue

@@ -12,13 +12,11 @@
 <script lang="ts">
   import { defineComponent } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import UserAuthForm from '@/components/User/UserAuthForm.vue'
 
   export default defineComponent({
     name: 'PasswordResetForm',
     components: {
-      Card,
       UserAuthForm,
     },
     props: {

fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue

@@ -106,20 +106,12 @@
     onMounted,
   } from 'vue'
 
-  import CustomTextArea from '@/components/Common/CustomTextArea.vue'
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
-  import Modal from '@/components/Common/Modal.vue'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IAuthUserProfile, IUserPayload } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
   export default defineComponent({
     name: 'UserInfosEdition',
-    components: {
-      CustomTextArea,
-      ErrorMessage,
-      Modal,
-    },
     props: {
       user: {
         type: Object as PropType<IAuthUserProfile>,

fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue

@@ -37,7 +37,6 @@
     ref,
   } from 'vue'
 
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
   import UserPicture from '@/components/User/UserPicture.vue'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IAppConfig } from '@/types/application'
@@ -48,7 +47,6 @@
   export default defineComponent({
     name: 'UserPictureEdition',
     components: {
-      ErrorMessage,
       UserPicture,
     },
     props: {

fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue

@@ -59,16 +59,12 @@
   } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IAuthUserProfile, IUserPreferencesPayload } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
   export default defineComponent({
     name: 'UserPreferencesEdition',
-    components: {
-      ErrorMessage,
-    },
     props: {
       user: {
         type: Object as PropType<IAuthUserProfile>,

fittrackee_client/src/components/User/ProfileEdition/index.vue

@@ -20,7 +20,6 @@
 <script lang="ts">
   import { PropType, computed, defineComponent, ref } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import UserInfosEdition from '@/components/User/ProfileEdition/UserInfosEdition.vue'
   import UserPictureEdition from '@/components/User/ProfileEdition/UserPictureEdition.vue'
   import UserPreferencesEdition from '@/components/User/ProfileEdition/UserPreferencesEdition.vue'
@@ -32,7 +31,6 @@
   export default defineComponent({
     name: 'ProfileEdition',
     components: {
-      Card,
       UserInfosEdition,
       UserPictureEdition,
       UserPreferencesEdition,

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -80,8 +80,6 @@
   import { ComputedRef, computed, defineComponent, reactive, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
-  import AlertMessage from '@/components/Common/AlertMessage.vue'
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
   import { IAppConfig } from '@/types/application'
   import { ILoginRegisterFormData } from '@/types/user'
@@ -89,10 +87,6 @@
 
   export default defineComponent({
     name: 'UserAuthForm',
-    components: {
-      AlertMessage,
-      ErrorMessage,
-    },
     props: {
       action: {
         type: String,

fittrackee_client/src/components/Workout/WorkoutChart.vue

@@ -42,7 +42,6 @@
   import { LineChart, useLineChart } from 'vue-chart-3'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import { IAuthUserProfile } from '@/types/user'
   import {
     IWorkoutChartData,
@@ -54,7 +53,6 @@
   export default defineComponent({
     name: 'WorkoutChart',
     components: {
-      Card,
       LineChart,
     },
     props: {

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -38,8 +38,6 @@
   } from 'vue'
   import { useRoute } from 'vue-router'
 
-  import Card from '@/components/Common/Card.vue'
-  import Modal from '@/components/Common/Modal.vue'
   import WorkoutCardTitle from '@/components/Workout/WorkoutDetail/WorkoutCardTitle.vue'
   import WorkoutData from '@/components/Workout/WorkoutDetail/WorkoutData.vue'
   import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
@@ -59,8 +57,6 @@
   export default defineComponent({
     name: 'WorkoutDetail',
     components: {
-      Card,
-      Modal,
       WorkoutCardTitle,
       WorkoutData,
       WorkoutMap,

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -219,10 +219,6 @@
   import { useI18n } from 'vue-i18n'
   import { useRouter } from 'vue-router'
 
-  import Card from '@/components/Common/Card.vue'
-  import CustomTextArea from '@/components/Common/CustomTextArea.vue'
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
-  import Loader from '@/components/Common/Loader.vue'
   import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { IAppConfig } from '@/types/application'
   import { ISport } from '@/types/sports'
@@ -235,12 +231,6 @@
 
   export default defineComponent({
     name: 'WorkoutEdition',
-    components: {
-      Card,
-      CustomTextArea,
-      ErrorMessage,
-      Loader,
-    },
     props: {
       authUser: {
         type: Object as PropType<IAuthUserProfile>,

fittrackee_client/src/components/Workout/WorkoutNotes.vue

@@ -12,13 +12,8 @@
 <script lang="ts">
   import { defineComponent } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
-
   export default defineComponent({
     name: 'WorkoutNotes',
-    components: {
-      Card,
-    },
     props: {
       notes: {
         type: String,

fittrackee_client/src/components/Workout/WorkoutSegments.vue

@@ -27,14 +27,10 @@
 <script lang="ts">
   import { PropType, defineComponent } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import { IWorkoutSegment } from '@/types/workouts'
 
   export default defineComponent({
     name: 'WorkoutSegments',
-    components: {
-      Card,
-    },
     props: {
       segments: {
         type: Object as PropType<IWorkoutSegment[]>,

fittrackee_client/src/custom-components.ts

@@ -0,0 +1,17 @@
+import AlertMessage from '@/components/Common/AlertMessage.vue'
+import Card from '@/components/Common/Card.vue'
+import CustomTextArea from '@/components/Common/CustomTextArea.vue'
+import Dropdown from '@/components/Common/Dropdown.vue'
+import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+import Loader from '@/components/Common/Loader.vue'
+import Modal from '@/components/Common/Modal.vue'
+
+export const customComponents = [
+  AlertMessage,
+  Card,
+  CustomTextArea,
+  Dropdown,
+  ErrorMessage,
+  Loader,
+  Modal,
+]

fittrackee_client/src/main.ts

@@ -6,11 +6,17 @@ import i18n from './i18n'
 import router from './router'
 import store from './store'
 
+import { customComponents } from '@/custom-components'
 import { clickOutsideDirective } from '@/directives'
 
-createApp(App)
+const app = createApp(App)
   .use(i18n)
   .use(store)
   .use(router)
   .directive('click-outside', clickOutsideDirective)
-  .mount('#app')
+
+customComponents.forEach((component) => {
+  app.component(component.name, component)
+})
+
+app.mount('#app')

fittrackee_client/src/views/DashBoard.vue

@@ -78,7 +78,6 @@
     onUnmounted,
   } from 'vue'
 
-  import Loader from '@/components/Common/Loader.vue'
   import Timeline from '@/components/Dashboard/Timeline.vue'
   import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
   import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
@@ -92,7 +91,6 @@
   export default defineComponent({
     name: 'Dashboard',
     components: {
-      Loader,
       Timeline,
       UserCalendar,
       UserMonthStats,

fittrackee_client/src/views/StatisticsView.vue

@@ -19,7 +19,6 @@
 <script lang="ts">
   import { ComputedRef, computed, defineComponent } from 'vue'
 
-  import Card from '@/components/Common/Card.vue'
   import Statistics from '@/components/Statistics/index.vue'
   import NoWorkouts from '@/components/Workouts/NoWorkouts.vue'
   import { USER_STORE, SPORTS_STORE } from '@/store/constants'
@@ -30,7 +29,6 @@
   export default defineComponent({
     name: 'StatisticsView',
     components: {
-      Card,
       NoWorkouts,
       Statistics,
     },