From d78470062dabfa66f8c89a9f6fd0494ec7c19fdb Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 23 Oct 2021 15:29:39 +0200
Subject: [PATCH] Client - register globally some custom components

---
 fittrackee_client/src/App.vue                   |  2 --
 .../src/components/Common/CustomTextArea.vue    |  2 +-
 .../src/components/Common/Modal.vue             |  6 ------
 .../src/components/Dashboard/UserMonthStats.vue |  2 --
 .../Dashboard/UserRecords/RecordsCard.vue       |  2 --
 fittrackee_client/src/components/NavBar.vue     |  2 --
 .../User/PasswordReset/PasswordResetForm.vue    |  2 --
 .../User/ProfileEdition/UserInfosEdition.vue    |  8 --------
 .../User/ProfileEdition/UserPictureEdition.vue  |  2 --
 .../ProfileEdition/UserPreferencesEdition.vue   |  4 ----
 .../components/User/ProfileEdition/index.vue    |  2 --
 .../src/components/User/UserAuthForm.vue        |  6 ------
 .../src/components/Workout/WorkoutChart.vue     |  2 --
 .../components/Workout/WorkoutDetail/index.vue  |  4 ----
 .../src/components/Workout/WorkoutEdition.vue   | 10 ----------
 .../src/components/Workout/WorkoutNotes.vue     |  5 -----
 .../src/components/Workout/WorkoutSegments.vue  |  4 ----
 fittrackee_client/src/custom-components.ts      | 17 +++++++++++++++++
 fittrackee_client/src/main.ts                   | 10 ++++++++--
 fittrackee_client/src/views/DashBoard.vue       |  2 --
 fittrackee_client/src/views/StatisticsView.vue  |  2 --
 21 files changed, 26 insertions(+), 70 deletions(-)
 create mode 100644 fittrackee_client/src/custom-components.ts

diff --git a/fittrackee_client/src/App.vue b/fittrackee_client/src/App.vue
index 379ec7aa..3740c68f 100644
--- a/fittrackee_client/src/App.vue
+++ b/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,
     },
diff --git a/fittrackee_client/src/components/Common/CustomTextArea.vue b/fittrackee_client/src/components/Common/CustomTextArea.vue
index ce7dd858..7ebbb018 100644
--- a/fittrackee_client/src/components/Common/CustomTextArea.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/Common/Modal.vue b/fittrackee_client/src/components/Common/Modal.vue
index e7befef4..bebc35ec 100644
--- a/fittrackee_client/src/components/Common/Modal.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
index 11de6275..4c1ed1f0 100644
--- a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
+++ b/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: {
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
index ae6d7674..ee6a3d88 100644
--- a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
+++ b/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: {
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 8e3f6ee9..10df70ee 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/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'],
diff --git a/fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue b/fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue
index 90165ebb..af1089a1 100644
--- a/fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue
+++ b/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: {
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue b/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
index 36e239f5..cb283522 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
+++ b/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>,
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue b/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
index 7dcb8278..93ebe953 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
+++ b/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: {
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
index 6d2988b8..f1e530df 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/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>,
diff --git a/fittrackee_client/src/components/User/ProfileEdition/index.vue b/fittrackee_client/src/components/User/ProfileEdition/index.vue
index 8b0b1307..a6ba80de 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/index.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/User/UserAuthForm.vue b/fittrackee_client/src/components/User/UserAuthForm.vue
index b9a97b96..d5d6e514 100644
--- a/fittrackee_client/src/components/User/UserAuthForm.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/Workout/WorkoutChart.vue b/fittrackee_client/src/components/Workout/WorkoutChart.vue
index 85c45731..31f25c48 100644
--- a/fittrackee_client/src/components/Workout/WorkoutChart.vue
+++ b/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: {
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
index 6791ede2..d570b517 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/Workout/WorkoutEdition.vue b/fittrackee_client/src/components/Workout/WorkoutEdition.vue
index 994156ea..fb094656 100644
--- a/fittrackee_client/src/components/Workout/WorkoutEdition.vue
+++ b/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>,
diff --git a/fittrackee_client/src/components/Workout/WorkoutNotes.vue b/fittrackee_client/src/components/Workout/WorkoutNotes.vue
index cadcd6cb..b8eb714a 100644
--- a/fittrackee_client/src/components/Workout/WorkoutNotes.vue
+++ b/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,
diff --git a/fittrackee_client/src/components/Workout/WorkoutSegments.vue b/fittrackee_client/src/components/Workout/WorkoutSegments.vue
index aac0e7db..34e95617 100644
--- a/fittrackee_client/src/components/Workout/WorkoutSegments.vue
+++ b/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[]>,
diff --git a/fittrackee_client/src/custom-components.ts b/fittrackee_client/src/custom-components.ts
new file mode 100644
index 00000000..87cf1a91
--- /dev/null
+++ b/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,
+]
diff --git a/fittrackee_client/src/main.ts b/fittrackee_client/src/main.ts
index cdfedeef..801c11d3 100644
--- a/fittrackee_client/src/main.ts
+++ b/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')
diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue
index b28f244f..4acb0f1b 100644
--- a/fittrackee_client/src/views/DashBoard.vue
+++ b/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,
diff --git a/fittrackee_client/src/views/StatisticsView.vue b/fittrackee_client/src/views/StatisticsView.vue
index 0f898bfa..540218c1 100644
--- a/fittrackee_client/src/views/StatisticsView.vue
+++ b/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,
     },