Client - display only active sports in application in user preferences

+ fixes

fittrackee_client/src/components/Administration/AdminSports.vue

@@ -24,7 +24,7 @@
             </thead>
             <tbody>
               <tr v-for="sport in translatedSports" :key="sport.id">
-                <td class="center-text">
+                <td class="text-center">
                   <span class="cell-heading">id</span>
                   {{ sport.id }}
                 </td>
@@ -44,12 +44,12 @@
                   </span>
                   {{ sport.translatedLabel }}
                 </td>
-                <td class="center-text">
+                <td class="text-center">
                   <span class="cell-heading">
                     {{ $t('admin.SPORTS.TABLE.ACTIVE') }}
                   </span>
                   <i
-                    :class="`fa fa${sport.is_active ? '-check' : ''}-square-o`"
+                    :class="`fa fa${sport.is_active ? '-check' : ''}`"
                     aria-hidden="true"
                   />
                 </td>

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -63,13 +63,13 @@
                     )
                   }}
                 </td>
-                <td class="center-text">
+                <td class="text-center">
                   <span class="cell-heading">
                     {{ capitalize($t('workouts.WORKOUT', 0)) }}
                   </span>
                   {{ user.nb_workouts }}
                 </td>
-                <td class="center-text">
+                <td class="text-center">
                   <span class="cell-heading">
                     {{ $t('user.ADMIN') }}
                   </span>
@@ -78,7 +78,7 @@
                     aria-hidden="true"
                   />
                 </td>
-                <td class="center-text">
+                <td class="text-center">
                   <span class="cell-heading">
                     {{ $t('admin.ACTION') }}
                   </span>

fittrackee_client/src/components/User/UserSportPreferences.vue

@@ -22,6 +22,7 @@
           <tr>
             <th>{{ $t('user.PROFILE.SPORT.COLOR') }}</th>
             <th class="text-left">{{ $t('workouts.SPORT', 0) }}</th>
+            <th>{{ $t('workouts.WORKOUT', 0) }}</th>
             <th>{{ $t('user.PROFILE.SPORT.IS_ACTIVE') }}</th>
             <th>{{ $t('user.PROFILE.SPORT.STOPPED_SPEED_THRESHOLD') }}</th>
             <th v-if="isEdition">{{ $t('user.PROFILE.SPORT.ACTION') }}</th>
@@ -47,11 +48,17 @@
                 :color="sport.color ? sport.color : sportColors[sport.label]"
               />
             </td>
-            <td class="sport-label">
+            <td
+              class="sport-label"
+              :class="{ 'disabled-sport': !sport.is_active }"
+            >
               <span class="cell-heading">
                 {{ $t('user.PROFILE.SPORT.LABEL') }}
               </span>
               {{ sport.translatedLabel }}
+              <span class="disabled-message" v-if="!sport.is_active">
+                ({{ $t('user.PROFILE.SPORT.DISABLED_BY_ADMIN') }})
+              </span>
               <i
                 v-if="loading && isSportInEdition(sport.id)"
                 class="fa fa-refresh fa-spin fa-fw"
@@ -61,31 +68,49 @@
                 v-if="errorMessages && sportPayload.sport_id === sport.id"
               />
             </td>
-            <td class="text-center">
+            <td
+              class="text-center"
+              :class="{ 'disabled-sport': !sport.is_active }"
+            >
+              <span class="cell-heading">
+                {{ $t('workouts.WORKOUT', 0) }}
+              </span>
+              <i
+                :class="`fa fa${
+                  user.sports_list.includes(sport.id) ? '-check' : ''
+                }`"
+                aria-hidden="true"
+              />
+            </td>
+            <td
+              class="text-center"
+              :class="{ 'disabled-sport': !sport.is_active }"
+            >
               <span class="cell-heading">
                 {{ $t('user.PROFILE.SPORT.IS_ACTIVE') }}
               </span>
               <input
-                v-if="isSportInEdition(sport.id)"
+                v-if="isSportInEdition(sport.id) && sport.is_active"
                 type="checkbox"
                 :checked="sport.is_active_for_user"
                 @change="updateIsActive"
               />
               <i
                 v-else
-                :class="`fa fa${
-                  sport.is_active_for_user ? '-check' : ''
-                }-square-o`"
+                :class="`fa fa${sport.is_active_for_user ? '-check' : ''}`"
                 aria-hidden="true"
               />
             </td>
-            <td class="text-center">
+            <td
+              class="text-center"
+              :class="{ 'disabled-sport': !sport.is_active }"
+            >
               <span class="cell-heading">
                 {{ $t('user.PROFILE.SPORT.STOPPED_SPEED_THRESHOLD') }}
               </span>
               <input
                 class="threshold-input"
-                v-if="isSportInEdition(sport.id)"
+                v-if="isSportInEdition(sport.id) && sport.is_active"
                 type="number"
                 min="0"
                 step="0.1"
@@ -139,11 +164,12 @@
 
   import { AUTH_USER_STORE, ROOT_STORE, SPORTS_STORE } from '@/store/constants'
   import { ISport, ITranslatedSport } from '@/types/sports'
-  import { IUserSportPreferencesPayload } from '@/types/user'
+  import { IUserProfile, IUserSportPreferencesPayload } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { translateSports } from '@/utils/sports'
 
   interface Props {
+    user: IUserProfile
     isEdition: boolean
   }
   const props = defineProps<Props>()
@@ -151,13 +177,13 @@
   const store = useStore()
   const { t } = useI18n()
 
-  const { isEdition } = toRefs(props)
+  const { isEdition, user } = toRefs(props)
   const sportColors = inject('sportColors')
   const sports: ComputedRef<ISport[]> = computed(
     () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
   )
   const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
-    translateSports(sports.value, t)
+    translateSports(sports.value, t, true, user.value.sports_list)
   )
   const loading = computed(
     () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
@@ -236,6 +262,17 @@
     .sport-label {
       width: 170px;
     }
+    .disabled-sport {
+      font-style: italic;
+      color: var(--disabled-sport-color);
+
+      .disabled-message {
+        font-size: 0.9em;
+      }
+      .cell-heading {
+        font-style: normal;
+      }
+    }
     .action-buttons {
       width: 70px;
     }

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -259,7 +259,12 @@
 
   const { workout, isCreation, loading } = toRefs(props)
   const translatedSports: ComputedRef<ISport[]> = computed(() =>
-    translateSports(props.sports, t, true)
+    translateSports(
+      props.sports,
+      t,
+      true,
+      workout.value.id ? [workout.value.sport_id] : null
+    )
   )
   const appConfig: ComputedRef<TAppConfig> = computed(
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]

fittrackee_client/src/locales/en/user.json

@@ -48,6 +48,7 @@
     "SPORT": {
       "ACTION": "action",
       "COLOR": "color",
+      "DISABLED_BY_ADMIN": "disabled by admin",
       "IS_ACTIVE": "active",
       "LABEL": "label",
       "STOPPED_SPEED_THRESHOLD": "stopped speed threshold"

fittrackee_client/src/locales/fr/user.json

@@ -48,6 +48,7 @@
     "SPORT": {
       "ACTION": "action",
       "COLOR": "couleur",
+      "DISABLED_BY_ADMIN": "désactivé par l'administrateur",
       "IS_ACTIVE": "actif",
       "LABEL": "label",
       "STOPPED_SPEED_THRESHOLD": "seuil de vitesse arrêtée"

fittrackee_client/src/scss/colors.scss

@@ -53,6 +53,7 @@
 
   --disabled-background-color: #e0e0e0;
   --disabled-color: #a3a3a3;
+  --disabled-sport-color: #616161;
 
   --scroll-button-bg-color: rgba(255, 255, 255, .7);
 

fittrackee_client/src/utils/sports.ts

@@ -38,10 +38,17 @@ const sortSports = (a: ITranslatedSport, b: ITranslatedSport): number => {
 export const translateSports = (
   sports: ISport[],
   t: CallableFunction,
-  onlyActive = false
+  onlyActive = false,
+  userSports: number[] | null = null
 ): ITranslatedSport[] =>
   sports
-    .filter((sport) => (onlyActive ? sport.is_active_for_user : true))
+    .filter((sport) =>
+      onlyActive
+        ? userSports === null
+          ? sport.is_active_for_user
+          : userSports.includes(sport.id) || sport.is_active
+        : true
+    )
     .map((sport) => ({
       ...sport,
       translatedLabel: t(`sports.${sport.label}.LABEL`),