Merge pull request #6083 from nextcloud/fix/frontend-warnings

Fix misc console errors and warnings

src/components/AppNavigation/Settings.vue

@@ -45,36 +45,32 @@
 				{{ $t('calendar', 'Show week numbers') }}
 			</ActionCheckbox>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--slotDuration">
-				<label for="slotDuration">{{ $t('calendar', 'Time increments') }}</label>
 				<NcSelect :id="slotDuration"
 					:options="slotDurationOptions"
 					:value="selectedDurationOption"
 					:disabled="savingSlotDuration"
 					:clearable="false"
+					:input-label="$t('calendar', 'Time increments')"
 					input-id="value"
 					label="label"
 					@option:selected="changeSlotDuration" />
 			</li>
 			<!-- TODO: remove version check once Nextcloud 28 is not supported anymore -->
 			<li v-if="currentUserPrincipal && defaultCalendarOptions.length > 1 && nextcloudVersion >= 29"
 				class="settings-fieldset-interior-item settings-fieldset-interior-item--default-calendar">
-				<label :for="defaultCalendarPickerId">
-					{{ $t('calendar', 'Default calendar for incoming invitations') }}
-				</label>
 				<CalendarPicker :value="defaultCalendar"
 					:calendars="defaultCalendarOptions"
 					:disabled="savingDefaultCalendarId"
-					:input-id="defaultCalendarPickerId"
+					:input-label="$t('calendar', 'Default calendar for incoming invitations')"
 					:clearable="false"
 					@select-calendar="changeDefaultCalendar" />
 			</li>
 			<li class="settings-fieldset-interior-item settings-fieldset-interior-item--defaultReminder">
-				<label for="defaultReminder">{{ $t('calendar', 'Default reminder') }}</label>
-				<NcSelect :id="defaultReminder"
-					:options="defaultReminderOptions"
+				<NcSelect :options="defaultReminderOptions"
 					:value="selectedDefaultReminderOption"
 					:disabled="savingDefaultReminder"
 					:clearable="false"
+					:input-label="$t('calendar', 'Default reminder')"
 					input-id="value"
 					label="label"
 					@option:selected="changeDefaultReminder" />
@@ -157,7 +153,6 @@ import InformationVariant from 'vue-material-design-icons/InformationVariant.vue
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 
 import logger from '../../utils/logger.js'
-import { randomId } from '../../utils/randomId.js'
 
 export default {
 	name: 'Settings',
@@ -195,7 +190,6 @@ export default {
 			savingWeekNumber: false,
 			savingDefaultCalendar: false,
 			displayKeyboardShortcuts: false,
-			defaultCalendarPickerId: randomId(),
 		}
 	},
 	computed: {

src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue

@@ -5,12 +5,14 @@
 
 <template>
 	<li class="settings-fieldset-interior-item settings-fieldset-interior-item--folder">
-		<label for="attachmentsFolder">
+		<label :for="inputId">
 			{{ $t('calendar', 'Default attachments location') }}
 		</label>
 		<div class="form-group">
 			<NcInputField v-model="attachmentsFolder"
 				type="text"
+				:id="inputId"
+				:label-outside="true"
 				@input="debounceSaveAttachmentsFolder(attachmentsFolder)"
 				@change="debounceSaveAttachmentsFolder(attachmentsFolder)"
 				@click="selectCalendarFolder"
@@ -24,6 +26,7 @@
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 import debounce from 'debounce'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
+import { randomId } from '../../../utils/randomId.js'
 
 import useSettingsStore from '../../../store/settings.js'
 import { mapStores, mapState } from 'pinia'
@@ -38,6 +41,9 @@ export default {
 		...mapState(useSettingsStore, {
 			attachmentsFolder: store => store.attachmentsFolder || '/',
 		}),
+		inputId() {
+			return `input-${randomId()}`
+		},
 	},
 	methods: {
 		async selectCalendarFolder() {

src/components/Editor/Attachments/AttachmentsList.vue

@@ -62,7 +62,8 @@
 			</ul>
 		</div>
 
-		<NcDialog :open.sync="showOpenConfirmation"
+		<NcDialog v-if="showOpenConfirmation"
+			:open.sync="showOpenConfirmation"
 			:name="t('calendar', 'Confirmation')"
 			:message="openConfirmationMessage"
 			:buttons="openConfirmationButtons" />

src/components/Editor/Properties/PropertySelect.vue

@@ -21,6 +21,7 @@
 				:name="readableName"
 				:value="selectedValue"
 				:placeholder="placeholder"
+				:label-outside="true"
 				:clearable="false"
 				input-id="value"
 				label="label"

src/components/Editor/Properties/PropertySelectMultiple.vue

@@ -18,6 +18,7 @@
 				:options="options"
 				:searchable="true"
 				:placeholder="placeholder"
+				:label-outside="true"
 				:name="readableName"
 				:multiple="true"
 				:taggable="true"

src/components/Editor/Resources/ResourceListSearch.vue

@@ -10,6 +10,7 @@
 			:searchable="true"
 			:max-height="600"
 			:placeholder="placeholder"
+			:label-outside="true"
 			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
 			input-id="email"
 			label="displayName"

src/components/Editor/Resources/ResourceRoomType.vue

@@ -10,6 +10,7 @@
 				:options="options"
 				:placeholder="placeholder"
 				:clearable="false"
+				:label-outside="true"
 				input-id="value"
 				label="label"
 				@option:selected="changeValue">

src/components/Shared/CalendarPicker.vue

@@ -11,6 +11,8 @@
 		:multiple="multiple"
 		:clearable="clearable"
 		:filter-by="selectFilterBy"
+		:input-label="this.inputLabel"
+		:label-outside="this.inputLabel === ''"
 		@option:selected="change"
 		@option:deselected="remove">
 		<template #option="{ id }">
@@ -70,6 +72,10 @@ export default {
 			type: String,
 			default: () => randomId(),
 		},
+		inputLabel: {
+			type: String,
+			default: '',
+		},
 	},
 	computed: {
 		...mapStores(useCalendarsStore),

src/components/Shared/DatePicker.vue

@@ -10,7 +10,7 @@
 		:formatter="formatter"
 		:value="date"
 		:type="actualType"
-		::clearable="false"
+		:clearable="false"
 		:minute-step="5"
 		:disabled-date="disabledDate"
 		:show-second="false"
@@ -21,23 +21,24 @@
 		v-bind="$attrs"
 		confirm
 		v-on="$listeners"
+		class="date-time-picker"
 		@close="close"
 		@change="change"
 		@pick="pickDate">
 		<template #icon-calendar>
-			<NcButton type="tertiary-no-background"
-				@click.stop.prevent="toggleTimezonePopover"
-				@mousedown.stop.prevent="() => {}">
-				<template #icon>
-					<IconNewCalendar v-if="isAllDay"
-						:size="20" />
-					<IconTimezone v-else
-						:class="{ 'highlighted-timezone-icon': highlightTimezone }"
-						:size="20" />
+			<IconNewCalendar v-if="isAllDay" :size="20" class="date-time-picker__icon" />
+			<NcPopover v-else open-class="timezone-popover-wrapper">
+				<template #trigger>
+					<NcButton type="tertiary-no-background"
+						:aria-label="t('calendar', 'Select a time zone')"
+						@mousedown="(e) => e.stopPropagation()">
+						<template #icon>
+							<IconTimezone :size="20"
+								class="date-time-picker__icon"
+								:class="{ 'date-time-picker__icon--highlight': highlightTimezone }" />
+						</template>
+					</NcButton>
 				</template>
-			</NcButton>
-			<Popover :shown.sync="showTimezonePopover"
-				open-class="timezone-popover-wrapper">
 				<template>
 					<div class="timezone-popover-wrapper__title">
 						<strong>
@@ -48,7 +49,7 @@
 						:value="timezoneId"
 						@input="changeTimezone" />
 				</template>
-			</Popover>
+			</NcPopover>
 		</template>
 		<template v-if="!isAllDay"
 			#footer>
@@ -70,7 +71,7 @@
 import {
 	NcButton,
 	NcDateTimePicker as DateTimePicker,
-	NcPopover as Popover,
+	NcPopover,
 	NcTimezonePicker as TimezonePicker,
 } from '@nextcloud/vue'
 import IconTimezone from 'vue-material-design-icons/Web.vue'
@@ -93,7 +94,7 @@ export default {
 	components: {
 		NcButton,
 		DateTimePicker,
-		Popover,
+		NcPopover,
 		TimezonePicker,
 	  IconTimezone,
 	  IconNewCalendar,
@@ -139,7 +140,6 @@ export default {
 	data() {
 		return {
 			firstDay: getFirstDay() === 0 ? 7 : getFirstDay(),
-			showTimezonePopover: false,
 			formatter: {
 				stringify: this.stringify,
 				parse: this.parse,
@@ -245,16 +245,6 @@ export default {
 		changeTimezone(timezoneId) {
 			this.$emit('change-timezone', timezoneId)
 		},
-		/**
-		 * Toggles the visibility of the timezone popover
-		 */
-		toggleTimezonePopover() {
-			if (this.isAllDay) {
-				return
-			}
-
-			this.showTimezonePopover = !this.showTimezonePopover
-		},
 		/**
 		 * Reset to time-panel on close of datepicker
 		 */
@@ -410,15 +400,20 @@ export default {
 	},
 }
 </script>
+
 <style lang="scss" scoped>
-.highlighted-timezone-icon {
-	opacity: .7;
-}
-:deep(.mx-icon-calendar) {
-	right: 0;
-}
-:deep(.multiselect__content-wrapper) {
-	border: none !important;
-	position: relative !important;
+.date-time-picker {
+	&__icon {
+		opacity: 0.7;
+
+		&--highlight {
+			opacity: 1;
+		}
+	}
+
+	:deep(.multiselect__content-wrapper) {
+		border: none !important;
+		position: relative !important;
+	}
 }
 </style>

src/views/EditSidebar.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcAppSidebar :empty="isLoading || isError"
+	<NcAppSidebar name=""
 		:force-menu="true"
 		@close="cancel">
 		<template v-if="isLoading">
@@ -206,6 +206,7 @@
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
+				:is-read-only="isReadOnly"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@save-this-only="prepareAccessForAttachments(false)"
 				@save-this-and-all-future="prepareAccessForAttachments(true)" />
@@ -223,12 +224,14 @@
 					:calendar-object-instance="calendarObjectInstance"
 					:is-read-only="isReadOnly"
 					:is-shared-with-me="isSharedWithMe"
+					:show-header="false"
 					@update-dates="updateDates" />
 			</div>
 			<SaveButtons v-if="showSaveButtons"
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
+				:is-read-only="isReadOnly"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@save-this-only="prepareAccessForAttachments(false)"
 				@save-this-and-all-future="prepareAccessForAttachments(true)" />
@@ -250,6 +253,7 @@
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
+				:is-read-only="isReadOnly"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@save-this-only="prepareAccessForAttachments(false)"
 				@save-this-and-all-future="prepareAccessForAttachments(true)" />

src/views/EditSimple.vue

@@ -4,13 +4,17 @@
 -->
 
 <template>
-	<Popover ref="popover"
+	<NcPopover ref="popover"
 		:shown="showPopover"
 		:auto-hide="false"
 		:placement="placement"
 		:boundary="boundaryElement"
 		popover-base-class="event-popover"
 		:triggers="[]">
+		<template #trigger="{ attrs }">
+			<!-- Dummy slot to silence vue warning regarding a custom trigger -->
+			<button v-bind="attrs" style="display: none" />
+		</template>
 		<div class="event-popover__inner">
 			<template v-if="isLoading && !isSaving">
 				<PopoverLoadingIndicator />
@@ -154,15 +158,15 @@
 				</SaveButtons>
 			</template>
 		</div>
-	</Popover>
+	</NcPopover>
 </template>
 <script>
 import {
 	NcActions as Actions,
 	NcActionButton as ActionButton,
 	NcActionLink as ActionLink,
 	NcEmptyContent as EmptyContent,
-	NcPopover as Popover,
+	NcPopover,
 	NcButton,
 } from '@nextcloud/vue'
 import EditorMixin from '../mixins/EditorMixin.js'
@@ -198,7 +202,7 @@ export default {
 		PropertyText,
 		PropertyTitleTimePicker,
 		PropertyTitle,
-		Popover,
+		NcPopover,
 		Actions,
 		ActionButton,
 		ActionLink,