Fix booking link toggle in schedule creation (#697)

* 🔨 Fix booking link toggle in schedule creation * 🔨 Revert type safe comparison * ➕ Add defaul values to SwitchToggle
thunderbird · Oct 1, 2024 · 6bb9594 · 6bb9594
1 parent 619cfcd
commit 6bb9594
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
@@ -721,7 +721,7 @@ watch(
             <switch-toggle
               class="my-1 text-sm font-medium text-gray-500 dark:text-gray-300"
               name="booking_confirmation"
-              :active="schedule.booking_confirmation"
+              :active="scheduleInput.booking_confirmation"
               :label="t('label.bookingConfirmation')"
               :disabled="!scheduleInput.active"
               @changed="toggleBookingConfirmation"

diff --git a/frontend/src/tbpro/elements/SwitchToggle.vue b/frontend/src/tbpro/elements/SwitchToggle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 // component constants
@@ -16,7 +16,11 @@ interface Props {
   label?: string; // input label
   noLegend?: boolean; // hide "on" and "off" labels
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  label: null,
+  noLegend: true,
+});
 
 // current state
 const state = ref(false);
@@ -29,6 +33,15 @@ const toggleState = () => {
     emit('changed', state.value);
   }
 };
+
+// Update state if parent changes active prop
+// e.g. after initializing async data
+watch(
+  () => props.active,
+  () => {
+    state.value = props.active;
+  }
+);
 </script>
 
 <template>