fix(user_status): add link to Availability page if user set predefined 'Vacationing'

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

1 files changed, 28 insertions, 8 deletions

diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index e91493414fa..ce4493541d6 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -6,13 +6,14 @@
 <template>
 	<NcModal size="normal"
 		:name="$t('user_status', 'Set status')"
+		aria-labelledby="user_status-set-dialog"
 		:set-return-focus="setReturnFocus"
 		@close="closeModal">
 		<div class="set-status-modal">
 			<!-- Status selector -->
-			<div class="set-status-modal__header">
-				<h2>{{ $t('user_status', 'Online status') }}</h2>
-			</div>
+			<h2 id="user_status-set-dialog" class="set-status-modal__header">
+				{{ $t('user_status', 'Online status') }}
+			</h2>
 			<div class="set-status-modal__online-status"
 				role="radiogroup"
 				:aria-label="$t('user_status', 'Online status')">
@@ -25,15 +26,22 @@
 
 			<!-- Status message form -->
 			<form @submit.prevent="saveStatus" @reset="clearStatus">
-				<div class="set-status-modal__header">
-					<h2>{{ $t('user_status', 'Status message') }}</h2>
-				</div>
+				<h3 class="set-status-modal__header">
+					{{ $t('user_status', 'Status message') }}
+				</h3>
 				<div class="set-status-modal__custom-input">
 					<CustomMessageInput ref="customMessageInput"
 						:icon="icon"
 						:message="editedMessage"
 						@change="setMessage"
 						@select-icon="setIcon" />
+					<NcButton v-if="messageId === 'vacationing'"
+						:href="absencePageUrl"
+						target="_blank"
+						type="secondary"
+						:aria-label="$t('user_status', 'Set absence period')">
+						{{ $t('user_status', 'Set absence period and replacement') + ' ↗' }}
+					</NcButton>
 				</div>
 				<div v-if="hasBackupStatus"
 					class="set-status-modal__automation-hint">
@@ -69,6 +77,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { getAllStatusOptions } from '../services/statusOptionsService.js'
@@ -135,6 +144,10 @@ export default {
 			return this.$store.state.userBackupStatus.message || ''
 		},
 
+		absencePageUrl() {
+			return generateUrl('settings/user/availability#absence')
+		},
+
 		resetButtonText() {
 			if (this.backupIcon && this.backupMessage) {
 				return this.$t('user_status', 'Reset status to "{icon} {message}"', {
@@ -324,9 +337,13 @@ export default {
 	padding: 8px 20px 20px 20px;
 
 	&__header {
+		font-size: 21px;
 		text-align: center;
-		font-weight: bold;
-		margin: 15px 0;
+		height: fit-content;
+		min-height: var(--default-clickable-area);
+		line-height: var(--default-clickable-area);
+		overflow-wrap: break-word;
+		margin-block: 0 12px;
 	}
 
 	&__online-status {
@@ -336,6 +353,9 @@ export default {
 
 	&__custom-input {
 		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--default-grid-baseline);
 		width: 100%;
 		margin-bottom: 10px;
 	}