Fix/1970 cooking prep and total time are not filled during edits

CHANGELOG.md

@@ -19,6 +19,8 @@
   [#1965](https://github.com/nextcloud/cookbook/pull/1965) @seyfeb
 - Replace eye icon with close icon for cancelling recipe edit
   [#1971](https://github.com/nextcloud/cookbook/pull/1971) @seyfeb
+- Fill prep, cook, and total time in `RecipeEdit` after loading
+  [#1973](https://github.com/nextcloud/cookbook/pull/1973) @seyfeb
 
 ### Maintenance
 - Add PHP lint checker to ensure valid (legacy) PHP syntax

src/components/FormComponents/EditTimeField.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 const emit = defineEmits(['input']);
 
@@ -49,12 +49,7 @@ const hours = ref(null);
  */
 const minutes = ref(null);
 
-watch(
-    () => props.value,
-    () => {
-        [hours.value, minutes.value] = props.value.time;
-    },
-);
+// Methods
 
 const handleInput = () => {
     minutes.value = minutes.value ? minutes.value : 0;
@@ -69,6 +64,22 @@ const handleInput = () => {
         paddedTime: `PT${hoursPadded}H${minutesPadded}M`,
     });
 };
+
+const setLocalValueFromProps = () => {
+    if (props.value?.time) {
+        [hours.value, minutes.value] = props.value.time;
+    }
+};
+
+// Watchers
+
+watch(() => props.value, setLocalValueFromProps);
+
+// Vue lifecycle
+
+onMounted(() => {
+    setLocalValueFromProps();
+});
 </script>
 
 <script>