Update DAV availability vue component to standard

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 16 insertions, 11 deletions

diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
index 928db771458..f3b3ec34bd2 100644
--- a/apps/dav/src/views/Availability.vue
+++ b/apps/dav/src/views/Availability.vue
@@ -1,9 +1,6 @@
 <template>
-	<div class="section">
-		<h2>{{ $t('dav', 'Availability') }}</h2>
-		<p>
-			{{ $t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.') }}
-		</p>
+	<SettingsSection :title="$t('dav', 'Availability')"
+		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
 			<strong>
 				{{ $t('dav', 'Time zone:') }}
@@ -12,6 +9,7 @@
 				<TimezonePicker v-model="timezone" />
 			</span>
 		</div>
+
 		<CalendarAvailability :slots.sync="slots"
 			:loading="loading"
 			:l10n-to="$t('dav', 'to')"
@@ -25,31 +23,38 @@
 			:l10n-friday="$t('dav', 'Friday')"
 			:l10n-saturday="$t('dav', 'Saturday')"
 			:l10n-sunday="$t('dav', 'Sunday')" />
+
 		<Button :disabled="loading || saving"
 			type="primary"
 			@click="save">
 			{{ $t('dav', 'Save') }}
 		</Button>
-	</div>
+	</SettingsSection>
 </template>
 
 <script>
 import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
 import {
+	showError,
+	showSuccess,
+} from '@nextcloud/dialogs'
+import {
 	findScheduleInboxAvailability,
 	getEmptySlots,
 	saveScheduleInboxAvailability,
 } from '../service/CalendarService'
 import jstz from 'jstimezonedetect'
-import TimezonePicker from '@nextcloud/vue/dist/Components/TimezonePicker'
 import Button from '@nextcloud/vue/dist/Components/Button'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import TimezonePicker from '@nextcloud/vue/dist/Components/TimezonePicker'
 
 export default {
 	name: 'Availability',
 	components: {
+		Button,
 		CalendarAvailability,
+		SettingsSection,
 		TimezonePicker,
-		Button,
 	},
 	data() {
 		// Try to determine the current timezone, and fall back to UTC otherwise
@@ -80,7 +85,7 @@ export default {
 		} catch (e) {
 			console.error('could not load existing availability', e)
 
-			// TODO: show a nice toast
+			showError(t('dav', 'Failed to load availability'))
 		} finally {
 			this.loading = false
 		}
@@ -92,11 +97,11 @@ export default {
 
 				await saveScheduleInboxAvailability(this.slots, this.timezone)
 
-				// TODO: show a nice toast
+				showSuccess(t('dav', 'Saved availability'))
 			} catch (e) {
 				console.error('could not save availability', e)
 
-				// TODO: show a nice toast
+				showError(t('dav', 'Failed to save availability'))
 			} finally {
 				this.saving = false
 			}