Swap the :checked state to a v-model that applies on change event.

thunderbird · Oct 2, 2024 · 6d53e03 · 6d53e03
1 parent 45d9245
commit 6d53e03
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
@@ -113,6 +113,7 @@ const defaultSchedule: Schedule = {
 const scheduleInput = ref({ ...defaultSchedule });
 // For comparing changes, and resetting to default.
 const referenceSchedule = ref({ ...defaultSchedule });
+const generateZoomLink = ref(scheduleInput.value.meeting_link_provider === MeetingLinkProviderType.Zoom);
 
 onMounted(() => {
  // Retrieve the current external connections
@@ -139,6 +140,8 @@ onMounted(() => {
  scheduleInput.value = { ...defaultSchedule };
  }
 
+ generateZoomLink.value = scheduleInput.value.meeting_link_provider === MeetingLinkProviderType.Zoom;
+
  // Set a new reference
  referenceSchedule.value = { ...scheduleInput.value };
 });
@@ -348,7 +351,7 @@ const toggleActive = async (newValue: boolean) => {
 
 // Work-around for v-model and value not working for some reason...
 const toggleZoomLinkCreation = () => {
- if (scheduleInput.value.meeting_link_provider === MeetingLinkProviderType.None) {
+ if (generateZoomLink.value) {
  scheduleInput.value.meeting_link_provider = MeetingLinkProviderType.Zoom;
  return;
  }
@@ -443,7 +446,7 @@ watch(
  {{ scheduleCreationError }}
  </alert-box>
 
- <div class="px-4 mb-1">
+ <div class="mb-1 px-4">
  <label for="scheduleName" class="flex-column flex">
  <input
  id="scheduleName"
@@ -647,7 +650,7 @@ watch(
  <checkbox-input
  name="generateZoomLink"
  :label="t('label.generateZoomLink')"
- :checked="scheduleInput.meeting_link_provider === MeetingLinkProviderType.Zoom"
+ v-model="generateZoomLink"
  :disabled="!scheduleInput.active || !hasZoomAccount"
  @change="toggleZoomLinkCreation"
  />