Add steps target modal and update steps target logic

Introduced a new modal for setting the steps target in HealthStepsZone.vue, including UI changes to add a 'Steps target' button. Updated HealthView.vue to handle the new setStepsTarget event and update logic. Added related i18n strings for steps target actions and modal labels. Also set a default value for weight target in HealthWeightZone.vue.

frontend/app/src/components/Health/HealthStepsZone.vue

@@ -3,14 +3,24 @@
     <LoadingComponent v-if="isLoading" />
     <div v-else>
       <!-- add weight button -->
-      <a
-        class="w-100 btn btn-primary shadow-sm"
-        href="#"
-        role="button"
-        data-bs-toggle="modal"
-        data-bs-target="#addStepsModal"
-        >{{ $t('healthStepsZoneComponent.buttonAddSteps') }}</a
-      >
+      <div class="d-flex">
+        <a
+          class="w-100 btn btn-primary shadow-sm me-1"
+          href="#"
+          role="button"
+          data-bs-toggle="modal"
+          data-bs-target="#addStepsModal"
+          >{{ $t('healthStepsZoneComponent.buttonAddSteps') }}</a
+        >
+        <a
+          class="w-100 btn btn-primary shadow-sm ms-1"
+          href="#"
+          role="button"
+          data-bs-toggle="modal"
+          data-bs-target="#addStepsTargetModal"
+          >{{ $t('healthStepsZoneComponent.buttonStepsTarget') }}</a
+        >
+      </div>
 
       <HealthStepsAddEditModalComponent
         :action="'add'"
@@ -18,6 +28,16 @@
         @createdSteps="updateStepsListAdded"
       />
 
+      <ModalComponentNumberInput 
+        modalId="addStepsTargetModal" 
+        :title="t('healthStepsZoneComponent.buttonStepsTarget')" 
+        :numberFieldLabel="t('healthStepsZoneComponent.modalStepsTargetLabel')"
+        actionButtonType="success"
+        :actionButtonText="t('generalItems.buttonSubmit')"
+        :numberDefaultValue="props.userHealthTargets?.steps || parseInt(10000)"
+        @numberToEmitAction="submitSetStepsTarget"
+      />
+
       <!-- Checking if dataWithSteps is loaded and has length -->
       <div
         v-if="dataWithSteps && dataWithSteps.length"
@@ -74,12 +94,14 @@
 
 <script setup>
 import { ref, watchEffect, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import HealthStepsAddEditModalComponent from './HealthStepsZone/HealthStepsAddEditModalComponent.vue'
 import HealthStepsBarChartComponent from './HealthStepsZone/HealthStepsBarChartComponent.vue'
 import HealthStepsListComponent from './HealthStepsZone/HealthStepsListComponent.vue'
 import LoadingComponent from '../GeneralComponents/LoadingComponent.vue'
 import NoItemsFoundComponent from '../GeneralComponents/NoItemsFoundComponents.vue'
 import PaginationComponent from '../GeneralComponents/PaginationComponent.vue'
+import ModalComponentNumberInput from '../Modals/ModalComponentNumberInput.vue'
 
 const props = defineProps({
   userHealthSteps: {
@@ -108,8 +130,9 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['createdSteps', 'deletedSteps', 'editedSteps', 'pageNumberChanged'])
+const emit = defineEmits(['createdSteps', 'deletedSteps', 'editedSteps', 'pageNumberChanged', 'setStepsTarget'])
 
+const { t } = useI18n()
 const dataWithSteps = ref([])
 const dataWithStepsPagination = ref([])
 const isLoadingNewSteps = ref(false)
@@ -153,6 +176,10 @@ function setPageNumber(page) {
   emit('pageNumberChanged', page)
 }
 
+function submitSetStepsTarget(stepsTarget) {
+  emit('setStepsTarget', stepsTarget)
+}
+
 watchEffect(() => {
   if (props.userHealthStepsPagination) {
     updatedDataWithStepsArray()

frontend/app/src/components/Health/HealthWeightZone.vue

@@ -34,7 +34,7 @@
         :numberFieldLabel="t('healthWeightZoneComponent.modalWeightTargetLabel')"
         actionButtonType="success"
         :actionButtonText="t('generalItems.buttonSubmit')"
-        :numberDefaultValue="props.userHealthTargets?.weight || null"
+        :numberDefaultValue="props.userHealthTargets?.weight || parseInt(70)"
         @numberToEmitAction="submitSetWeightTarget"
       />
 

frontend/app/src/i18n/us/components/health/healthStepsZoneComponent.json

@@ -1,5 +1,7 @@
 {
   "buttonAddSteps": "Add steps",
+  "buttonStepsTarget": "Steps target",
+  "modalStepsTargetLabel": "Enter your steps target",
   "labelNumberOfHealthSteps1": "There is a total of ",
   "labelNumberOfHealthSteps2": " steps entries inserted (",
   "labelNumberOfHealthSteps3": " loaded):"

frontend/app/src/i18n/us/healthView.json

@@ -4,5 +4,7 @@
   "errorFetchingHealthSteps": "Error fetching health steps",
   "errorFetchingHealthTargets": "Error fetching health targets",
   "successUpdatingWeightTarget": "Successfully updated weight target",
-  "errorUpdatingWeightTarget": "Error updating weight target"
+  "errorUpdatingWeightTarget": "Error updating weight target",
+  "successUpdatingStepsTarget": "Successfully updated steps target",
+  "errorUpdatingStepsTarget": "Error updating steps target"
 }

frontend/app/src/views/HealthView.vue

@@ -45,6 +45,7 @@
       @deletedSteps="updateStepsListDeleted"
       @editedSteps="updateStepsListEdited"
       @pageNumberChanged="setPageNumberSteps"
+      @setStepsTarget="setStepsTarget"
       v-if="activeSection === 'steps' && !isLoading"
     />
   </div>
@@ -279,6 +280,22 @@ function setWeightTarget(weightTarget) {
   }
 }
 
+function setStepsTarget(stepsTarget) {
+  const data = {
+    id: userHealthTargets.value.id,
+    user_id: userHealthTargets.value.user_id,
+    weight: userHealthTargets.value.weight,
+    steps: stepsTarget,
+  }
+  try {
+    health_targets.setUserHealthTargets(data)
+    userHealthTargets.value.steps = stepsTarget
+    push.success(t('healthView.successUpdatingStepsTarget'))
+  } catch (error) {
+    push.error(`${t('healthView.errorUpdatingStepsTarget')} - ${error}`)
+  }
+}
+
 // Watch functions
 
 watch(pageNumberWeight, updateHealthWeight, { immediate: false })