Client - update preferences edition style

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

@@ -23,50 +23,66 @@
             @updateTimezone="updateTZ"
           />
         </label>
-        <label class="form-items">
+        <div class="form-items form-checkboxes">
+          <span class="checkboxes-label">
             {{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
-          <select id="weekm" v-model="userForm.weekm" :disabled="loading">
+          </span>
-            <option
+          <div class="checkboxes">
-              v-for="start in weekStart"
+            <label v-for="start in weekStart" :key="start.label">
-              :value="start.value"
+              <input
-              :key="start.value"
+                type="radio"
-            >
+                :id="start.label"
+                :name="start.label"
+                :checked="start.value === userForm.weekm"
+                :disabled="loading"
+                @input="updateWeekM(start.value)"
+              />
+              <span class="checkbox-label">
                 {{ $t(`user.PROFILE.${start.label}`) }}
-            </option>
+              </span>
-          </select>
             </label>
-        <label class="form-items">
+          </div>
+        </div>
+        <div class="form-items form-checkboxes">
+          <span class="checkboxes-label">
             {{ $t('user.PROFILE.UNITS.LABEL') }}
-          <select
+          </span>
-            id="imperial_units"
+          <div class="checkboxes">
-            v-model="userForm.imperial_units"
+            <label v-for="unit in imperialUnits" :key="unit.label">
+              <input
+                type="radio"
+                :id="unit.label"
+                :name="unit.label"
+                :checked="unit.value === userForm.imperial_units"
                 :disabled="loading"
-          >
+                @input="updateImperialUnit(unit.value)"
-            <option
+              />
-              v-for="unit in imperialUnits"
+              <span class="checkbox-label">
-              :value="unit.value"
-              :key="unit.value"
-            >
                 {{ $t(`user.PROFILE.UNITS.${unit.label}`) }}
-            </option>
+              </span>
-          </select>
             </label>
-        <label class="form-items">
+          </div>
+        </div>
+        <div class="form-items form-checkboxes">
+          <span class="checkboxes-label">
             {{ $t('user.PROFILE.ASCENT_DATA') }}
-          <select
+          </span>
-            id="display_ascent"
+          <div class="checkboxes">
-            v-model="userForm.display_ascent"
+            <label v-for="status in ascentData" :key="status.label">
+              <input
+                type="radio"
+                :id="status.label"
+                :name="status.label"
+                :checked="status.value === userForm.display_ascent"
                 :disabled="loading"
-          >
+                @input="updateAscentDisplay(status.value)"
-            <option
+              />
-              v-for="status in ascentData"
+              <span class="checkbox-label">
-              :value="status.value"
-              :key="status.value"
-            >
                 {{ $t(`common.${status.label}`) }}
-            </option>
+              </span>
-          </select>
             </label>
+          </div>
+        </div>
         <div class="form-buttons">
           <button class="confirm" type="submit">
             {{ $t('buttons.SUBMIT') }}
@@ -107,24 +123,24 @@
     weekm: false,
   })
   const weekStart = [
-    {
-      label: 'MONDAY',
-      value: true,
-    },
     {
       label: 'SUNDAY',
       value: false,
     },
+    {
+      label: 'MONDAY',
+      value: true,
+    },
   ]
   const imperialUnits = [
-    {
-      label: 'IMPERIAL',
-      value: true,
-    },
     {
       label: 'METRIC',
       value: false,
     },
+    {
+      label: 'IMPERIAL',
+      value: true,
+    },
   ]
   const ascentData = [
     {
@@ -162,8 +178,43 @@
   function updateTZ(value: string) {
     userForm.timezone = value
   }
+  function updateAscentDisplay(value: boolean) {
+    userForm.display_ascent = value
+  }
+  function updateImperialUnit(value: boolean) {
+    userForm.imperial_units = value
+  }
+  function updateWeekM(value: boolean) {
+    userForm.weekm = value
+  }
 
   onUnmounted(() => {
     store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
   })
 </script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+  #user-preferences-edition {
+    .form-items {
+      padding-top: $default-padding * 0.5;
+    }
+
+    .form-checkboxes {
+      .checkboxes-label {
+        font-weight: bold;
+      }
+      .checkboxes {
+        display: flex;
+        gap: $default-padding;
+        flex-wrap: wrap;
+        .checkbox-label {
+          padding-left: $default-padding * 0.5;
+        }
+        label {
+          font-weight: normal;
+        }
+      }
+    }
+  }
+</style>