Fixed various frontend issues

frontend/src/components/calendars/CalendarForm.vue

@@ -34,8 +34,8 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn @click="close">{{ $gettext('Close') }}</v-btn>
-        <v-btn color="primary" type="submit">
+        <v-btn :loading="working" @click="close">{{ $gettext('Close') }}</v-btn>
+        <v-btn color="primary" type="submit" :loading="working">
           {{ submitLabel }}
         </v-btn>
       </v-card-actions>
@@ -64,14 +64,17 @@ const { $gettext } = useGettext()
 const busStore = useBusStore()
 
 onMounted(() => {
-  calendar.value = { ...props.initialCalendar }
-  shared.value = props.initialCalendar.domain !== undefined
+  if (props.initialCalendar) {
+    calendar.value = { ...props.initialCalendar }
+    shared.value = props.initialCalendar.domain !== undefined
+  }
 })
 
 const calendar = ref({})
 const shared = ref(false)
 const formErrors = ref({})
 const formRef = ref()
+const working = ref(false)
 
 const submitLabel = computed(() => {
   if (calendar.value.pk) {
@@ -93,19 +96,27 @@ async function submit() {
     return
   }
   let msg
-  if (calendar.value.pk) {
-    await calendarsApi.updateUserCalendar(calendar.value.pk, calendar.value)
-    msg = $gettext('Calendar updated')
-  } else {
-    await calendarsApi.createUserCalendar(calendar.value)
-    msg = $gettext('Calendar created')
+  working.value = true
+  try {
+    if (calendar.value.pk) {
+      await calendarsApi.updateUserCalendar(calendar.value.pk, calendar.value)
+      msg = $gettext('Calendar updated')
+    } else {
+      await calendarsApi.createUserCalendar(calendar.value)
+      msg = $gettext('Calendar created')
+    }
+    if (
+      props.initialCalendar &&
+      props.initialCalendar.color !== calendar.value.color
+    ) {
+      emit('colorChanged', calendar.value)
+    }
+    close()
+    busStore.displayNotification({
+      msg,
+    })
+  } finally {
+    working.value = false
   }
-  if (props.initialCalendar.color !== calendar.value.color) {
-    emit('colorChanged', calendar.value)
-  }
-  close()
-  busStore.displayNotification({
-    msg,
-  })
 }
 </script>

frontend/src/components/calendars/EventForm.vue

@@ -82,8 +82,8 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn @click="close">{{ $gettext('Close') }}</v-btn>
-        <v-btn color="primary" type="submit">
+        <v-btn :loading="working" @click="close">{{ $gettext('Close') }}</v-btn>
+        <v-btn color="primary" type="submit" :loading="working">
           {{ $gettext('Save') }}
         </v-btn>
       </v-card-actions>
@@ -119,6 +119,7 @@ const userCalendars = ref([])
 const form = ref({})
 const formErrors = ref({})
 const formRef = ref()
+const working = ref(false)
 
 const title = computed(() => {
   return props.event ? $gettext('Edit event') : $gettext('New event')
@@ -148,7 +149,6 @@ watch(
         'yyyy-MM-dd HH:mm'
       )
       form.value.end = DateTime.fromISO(value.end).toFormat('yyyy-MM-dd HH:mm')
-      console.log(form.value)
       api.getAttendees().then((resp) => {
         attendees.value = resp.data
       })
@@ -166,17 +166,22 @@ async function saveEvent() {
   if (!valid) {
     return
   }
-  var data = JSON.parse(JSON.stringify(form.value))
-  if (!props.event) {
-    api.createUserEvent(form.value.calendar, data).then(() => {
-      busStore.displayNotification({ msg: $gettext('Event added') })
-      close()
-    })
-  } else {
-    api.patchUserEvent(form.value.calendar, props.event.id, data).then(() => {
-      busStore.displayNotification({ msg: $gettext('Event updated') })
-      close()
-    })
+  working.value = true
+  try {
+    var data = JSON.parse(JSON.stringify(form.value))
+    if (!props.event) {
+      api.createUserEvent(form.value.calendar, data).then(() => {
+        busStore.displayNotification({ msg: $gettext('Event added') })
+        close()
+      })
+    } else {
+      api.patchUserEvent(form.value.calendar, props.event.id, data).then(() => {
+        busStore.displayNotification({ msg: $gettext('Event updated') })
+        close()
+      })
+    }
+  } finally {
+    working.value = false
   }
 }
 

frontend/src/components/shared/TopMenu.vue

@@ -78,9 +78,13 @@ const { $gettext } = useGettext()
 const applications = ref([])
 
 const userInitials = computed(() => {
-  return props.user.first_name && props.user.last_name
-    ? `${props.user.first_name[0].toUpperCase()}${props.user.last_name[0].toUpperCase()}`
-    : props.user.username.slice(0, 2).toUpperCase()
+  if (props.user.first_name && props.user.last_name) {
+    return `${props.user.first_name[0].toUpperCase()}${props.user.last_name[0].toUpperCase()}`
+  }
+  if (props.user.username) {
+    props.user.username.slice(0, 2).toUpperCase()
+  }
+  return ''
 })
 
 const userMenuItems = computed(() => {