diff options
Diffstat (limited to 'apps/user_status/src')
25 files changed, 1029 insertions, 1076 deletions
diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue index 00501274b62..07d81aad95c 100644 --- a/apps/user_status/src/UserStatus.vue +++ b/apps/user_status/src/UserStatus.vue @@ -1,69 +1,70 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <li> - <div class="user-status-menu-item"> - <!-- Username display --> - <span - v-if="!inline" - class="user-status-menu-item__header" - :title="displayName"> - {{ displayName }} - </span> - - <!-- Status modal toggle --> - <toggle :is="inline ? 'button' : 'a'" - :class="{'user-status-menu-item__toggle--inline': inline}" - class="user-status-menu-item__toggle" - href="#" - @click.prevent.stop="openModal"> - <span :class="statusIcon" class="user-status-menu-item__toggle-icon" /> + <Fragment> + <NcListItem v-if="!inline" + class="user-status-menu-item" + compact + :name="visibleMessage" + @click.stop="openModal"> + <template #icon> + <NcUserStatusIcon class="user-status-icon" + :status="statusType" + aria-hidden="true" /> + </template> + </NcListItem> + + <div v-else> + <!-- Dashboard Status --> + <NcButton @click.stop="openModal"> + <template #icon> + <NcUserStatusIcon class="user-status-icon" + :status="statusType" + aria-hidden="true" /> + </template> {{ visibleMessage }} - </toggle> + </NcButton> </div> - <!-- Status management modal --> - <SetStatusModal - v-if="isModalOpen" + <SetStatusModal v-if="isModalOpen" + :inline="inline" @close="closeModal" /> - </li> + </Fragment> </template> <script> import { getCurrentUser } from '@nextcloud/auth' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' +import { Fragment } from 'vue-frag' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcListItem from '@nextcloud/vue/components/NcListItem' +import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon' import debounce from 'debounce' -import { sendHeartbeat } from './services/heartbeatService' -import OnlineStatusMixin from './mixins/OnlineStatusMixin' +import { sendHeartbeat } from './services/heartbeatService.js' +import OnlineStatusMixin from './mixins/OnlineStatusMixin.js' export default { name: 'UserStatus', components: { - SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal'), + Fragment, + NcButton, + NcListItem, + NcUserStatusIcon, + SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'), }, mixins: [OnlineStatusMixin], props: { + /** + * Whether the component should be rendered as a Dashboard Status or a User Menu Entries + * true = Dashboard Status + * false = User Menu Entries + */ inline: { type: Boolean, default: false, @@ -72,23 +73,13 @@ export default { data() { return { - isModalOpen: false, heartbeatInterval: null, - setAwayTimeout: null, - mouseMoveListener: null, isAway: false, + isModalOpen: false, + mouseMoveListener: null, + setAwayTimeout: null, } }, - computed: { - /** - * The display-name of the current user - * - * @returns {String} - */ - displayName() { - return getCurrentUser().displayName - }, - }, /** * Loads the current user's status from initial state @@ -124,6 +115,7 @@ export default { this._backgroundHeartbeat() } + subscribe('user_status:status.updated', this.handleUserStatusUpdated) }, /** @@ -132,6 +124,7 @@ export default { beforeDestroy() { window.removeEventListener('mouseMove', this.mouseMoveListener) clearInterval(this.heartbeatInterval) + unsubscribe('user_status:status.updated', this.handleUserStatusUpdated) }, methods: { @@ -151,74 +144,41 @@ export default { /** * Sends the status heartbeat to the server * - * @returns {Promise<void>} + * @return {Promise<void>} * @private */ async _backgroundHeartbeat() { try { - await sendHeartbeat(this.isAway) + const status = await sendHeartbeat(this.isAway) + if (status?.userId) { + this.$store.dispatch('setStatusFromHeartbeat', status) + } else { + await this.$store.dispatch('reFetchStatusFromServer') + } } catch (error) { - console.debug('Failed sending heartbeat, got: ' + error.response.status) - return + console.debug('Failed sending heartbeat, got: ' + error.response?.status) + } + }, + handleUserStatusUpdated(state) { + if (getCurrentUser()?.uid === state.userId) { + this.$store.dispatch('setStatusFromObject', { + status: state.status, + icon: state.icon, + message: state.message, + }) } - await this.$store.dispatch('reFetchStatusFromServer') }, }, } </script> <style lang="scss" scoped> -$max-width-user-status: 200px; - -.user-status-menu-item { - &__header { - display: block; - overflow: hidden; - box-sizing: border-box; - max-width: $max-width-user-status; - padding: 10px 12px 5px 38px; - text-align: left; - white-space: nowrap; - text-overflow: ellipsis; - opacity: 1; - color: var(--color-text-maxcontrast); - } - - &__toggle { - &-icon { - width: 16px; - height: 16px; - margin-right: 10px; - opacity: 1 !important; - background-size: 16px; - } - - // In dashboard - &--inline { - width: auto; - min-width: 44px; - height: 44px; - margin: 0; - border: 0; - border-radius: var(--border-radius-pill); - background-color: var(--color-background-translucent); - font-size: inherit; - font-weight: normal; - - -webkit-backdrop-filter: var(--background-blur); - backdrop-filter: var(--background-blur); - - &:active, - &:hover, - &:focus { - background-color: var(--color-background-hover); - } - } - } +.user-status-icon { + width: 20px; + height: 20px; + margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size + opacity: 1 !important; + background-size: 20px; + vertical-align: middle !important; } - -li { - list-style-type: none; -} - </style> diff --git a/apps/user_status/src/components/ClearAtSelect.vue b/apps/user_status/src/components/ClearAtSelect.vue index c813831c101..91b816dc04a 100644 --- a/apps/user_status/src/components/ClearAtSelect.vue +++ b/apps/user_status/src/components/ClearAtSelect.vue @@ -1,48 +1,33 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="clear-at-select"> - <span - class="clear-at-select__label"> - {{ $t('user_status', 'Clear status message after') }} - </span> - <Multiselect - label="label" - :value="option" + <label class="clear-at-select__label" for="clearStatus"> + {{ $t('user_status', 'Clear status after') }} + </label> + <NcSelect input-id="clearStatus" + class="clear-at-select__select" :options="options" - open-direction="top" - @select="select" /> + :value="option" + :clearable="false" + placement="top" + label-outside + @option:selected="select" /> </div> </template> <script> -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect' -import { getAllClearAtOptions } from '../services/clearAtOptionsService' -import { clearAtFilter } from '../filters/clearAtFilter' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import { getAllClearAtOptions } from '../services/clearAtOptionsService.js' +import { clearAtFilter } from '../filters/clearAtFilter.js' export default { name: 'ClearAtSelect', components: { - Multiselect, + NcSelect, }, props: { clearAt: { @@ -59,7 +44,7 @@ export default { /** * Returns an object of the currently selected option * - * @returns {Object} + * @return {object} */ option() { return { @@ -72,14 +57,14 @@ export default { /** * Triggered when the user selects a new option. * - * @param {Object=} option The new selected option + * @param {object=} option The new selected option */ select(option) { if (!option) { return } - this.$emit('selectClearAt', option.clearAt) + this.$emit('select-clear-at', option.clearAt) }, }, } @@ -88,15 +73,13 @@ export default { <style lang="scss" scoped> .clear-at-select { display: flex; - margin-bottom: 10px; + gap: calc(2 * var(--default-grid-baseline)); align-items: center; + margin-block: 0 calc(2 * var(--default-grid-baseline)); - &__label { - margin-right: 10px; - } - - .multiselect { + &__select { flex-grow: 1; + min-width: 215px; } } </style> diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue index f84714adddc..fb129281430 100644 --- a/apps/user_status/src/components/CustomMessageInput.vue +++ b/apps/user_status/src/components/CustomMessageInput.vue @@ -1,45 +1,49 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <form - class="custom-input__form" - @submit.prevent> - <input - ref="input" - maxlength="80" - :disabled="disabled" - :placeholder="$t('user_status', 'What\'s your status?')" - type="text" - :value="message" - @change="change" - @keyup="change" - @paste="change" - @keyup.enter="submit"> - </form> + <div class="custom-input" role="group"> + <NcEmojiPicker container=".custom-input" @select="setIcon"> + <NcButton type="tertiary" + :aria-label="t('user_status', 'Emoji for your status message')"> + <template #icon> + {{ visibleIcon }} + </template> + </NcButton> + </NcEmojiPicker> + <div class="custom-input__container"> + <NcTextField ref="input" + maxlength="80" + :disabled="disabled" + :placeholder="t('user_status', 'What is your status?')" + :value="message" + type="text" + :label="t('user_status', 'What is your status?')" + @input="onChange" /> + </div> + </div> </template> <script> +import NcButton from '@nextcloud/vue/components/NcButton' +import NcEmojiPicker from '@nextcloud/vue/components/NcEmojiPicker' +import NcTextField from '@nextcloud/vue/components/NcTextField' + export default { name: 'CustomMessageInput', + + components: { + NcTextField, + NcButton, + NcEmojiPicker, + }, + props: { + icon: { + type: String, + default: '😀', + }, message: { type: String, required: true, @@ -50,6 +54,23 @@ export default { default: false, }, }, + + emits: [ + 'change', + 'select-icon', + ], + + computed: { + /** + * Returns the user-set icon or a smiley in case no icon is set + * + * @return {string} + */ + visibleIcon() { + return this.icon || '😀' + }, + }, + methods: { focus() { this.$refs.input.focus() @@ -60,24 +81,26 @@ export default { * * @param {Event} event The Change Event */ - change(event) { + onChange(event) { this.$emit('change', event.target.value) }, - submit(event) { - this.$emit('submit', event.target.value) + setIcon(icon) { + this.$emit('select-icon', icon) }, }, } </script> <style lang="scss" scoped> -.custom-input__form { - flex-grow: 1; +.custom-input { + display: flex; + align-items: flex-end; + gap: var(--default-grid-baseline); + width: 100%; - input { + &__container { width: 100%; - border-radius: 0 var(--border-radius) var(--border-radius) 0; } } </style> diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue index d9ce249ad13..0abcc8d68e6 100644 --- a/apps/user_status/src/components/OnlineStatusSelect.vue +++ b/apps/user_status/src/components/OnlineStatusSelect.vue @@ -1,33 +1,19 @@ <!-- - - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> - - - - @author John Molakvoæ <skjnldsv@protonmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="user-status-online-select"> <input :id="id" :checked="checked" - class="user-status-online-select__input" + class="hidden-visually user-status-online-select__input" type="radio" name="user-status-online" @change="onChange"> - <label :for="id" :class="icon" class="user-status-online-select__label"> + <label :for="id" class="user-status-online-select__label"> + <NcUserStatusIcon :status="type" + class="user-status-online-select__icon" + aria-hidden="true" /> {{ label }} <em class="user-status-online-select__subline">{{ subline }}</em> </label> @@ -35,18 +21,20 @@ </template> <script> +import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon' + export default { name: 'OnlineStatusSelect', + components: { + NcUserStatusIcon, + }, + props: { checked: { type: Boolean, default: false, }, - icon: { - type: String, - required: true, - }, type: { type: String, required: true, @@ -76,41 +64,42 @@ export default { </script> <style lang="scss" scoped> -$icon-size: 24px; -$label-padding: 8px; - .user-status-online-select { - // Inputs are here for keyboard navigation, they are not visually visible - &__input { - position: absolute; - top: auto; - left: -10000px; - overflow: hidden; - width: 1px; - height: 1px; - } - &__label { - display: block; - margin: $label-padding; - padding: $label-padding; - padding-left: $icon-size + $label-padding * 2; - border: 2px solid var(--color-main-background); + box-sizing: inherit; + display: grid; + grid-template-columns: var(--default-clickable-area) 1fr 2fr; + align-items: center; + gap: var(--default-grid-baseline); + min-height: var(--default-clickable-area); + padding: var(--default-grid-baseline); border-radius: var(--border-radius-large); background-color: var(--color-background-hover); - background-position: $label-padding center; - background-size: $icon-size; - span, - & { + &, & * { cursor: pointer; } + + &:hover { + background-color: var(--color-background-dark); + } + } + + &__icon { + flex-shrink: 0; + max-width: 34px; + max-height: 100%; + } + + &__input:checked + &__label { + outline: 2px solid var(--color-main-text); + background-color: var(--color-background-dark); + box-shadow: 0 0 0 4px var(--color-main-background); } - &__input:checked + &__label, - &__input:focus + &__label, - &__label:hover { - border-color: var(--color-primary); + &__input:focus-visible + &__label { + outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); } &__subline { @@ -118,5 +107,4 @@ $label-padding: 8px; color: var(--color-text-lighter); } } - </style> diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue index c7fd4d63fed..b12892d4add 100644 --- a/apps/user_status/src/components/PredefinedStatus.vue +++ b/apps/user_status/src/components/PredefinedStatus.vue @@ -1,44 +1,31 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <div - class="predefined-status" - tabindex="0" - @keyup.enter="select" - @keyup.space="select" - @click="select"> - <span class="predefined-status__icon"> - {{ icon }} - </span> - <span class="predefined-status__message"> - {{ message }} - </span> - <span class="predefined-status__clear-at"> - {{ clearAt | clearAtFilter }} - </span> - </div> + <li class="predefined-status"> + <input :id="id" + class="hidden-visually predefined-status__input" + type="radio" + name="predefined-status" + :checked="selected" + @change="select"> + <label class="predefined-status__label" :for="id"> + <span aria-hidden="true" class="predefined-status__label--icon"> + {{ icon }} + </span> + <span class="predefined-status__label--message"> + {{ message }} + </span> + <span class="predefined-status__label--clear-at"> + {{ clearAt | clearAtFilter }} + </span> + </label> + </li> </template> <script> -import { clearAtFilter } from '../filters/clearAtFilter' +import { clearAtFilter } from '../filters/clearAtFilter.js' export default { name: 'PredefinedStatus', @@ -63,6 +50,16 @@ export default { required: false, default: null, }, + selected: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + id() { + return `user-status-predefined-status-${this.messageId}` + }, }, methods: { /** @@ -77,35 +74,55 @@ export default { <style lang="scss" scoped> .predefined-status { - display: flex; - flex-wrap: nowrap; - justify-content: flex-start; - flex-basis: 100%; - border-radius: var(--border-radius); - align-items: center; - min-height: 44px; + &__label { + display: flex; + flex-wrap: nowrap; + justify-content: flex-start; + flex-basis: 100%; + border-radius: var(--border-radius); + align-items: center; + min-height: var(--default-clickable-area); + padding-inline: var(--default-grid-baseline); - &:hover, - &:focus { - background-color: var(--color-background-hover); - } + &, & * { + cursor: pointer; + } - &__icon { - flex-basis: 40px; - text-align: center; - } + &:hover { + background-color: var(--color-background-dark); + } - &__message { - font-weight: bold; - padding: 0 6px; - } + &--icon { + flex-basis: var(--default-clickable-area); + text-align: center; + } + + &--message { + font-weight: bold; + padding: 0 6px; + } - &__clear-at { - opacity: .7; + &--clear-at { + color: var(--color-text-maxcontrast); - &::before { - content: ' - '; + &::before { + content: ' – '; + } } } + + &__input:checked + &__label, + &__label:active { + outline: 2px solid var(--color-main-text); + box-shadow: 0 0 0 4px var(--color-main-background); + background-color: var(--color-background-dark); + border-radius: var(--border-radius-large); + } + + &__input:focus-visible + &__label { + outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); + border-radius: var(--border-radius-large); + } } </style> diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue index 844fdbbdfe3..cdf359dce76 100644 --- a/apps/user_status/src/components/PredefinedStatusesList.vue +++ b/apps/user_status/src/components/PredefinedStatusesList.vue @@ -1,81 +1,74 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <div - v-if="hasLoaded" - class="predefined-statuses-list"> - <PredefinedStatus - v-for="status in predefinedStatuses" + <ul v-if="statusesHaveLoaded" + class="predefined-statuses-list" + :aria-label="t('user_status', 'Predefined statuses')"> + <PredefinedStatus v-for="status in predefinedStatuses" :key="status.id" :message-id="status.id" :icon="status.icon" :message="status.message" :clear-at="status.clearAt" + :selected="lastSelected === status.id" @select="selectStatus(status)" /> - </div> - <div - v-else + </ul> + <div v-else class="predefined-statuses-list"> <div class="icon icon-loading-small" /> </div> </template> <script> -import PredefinedStatus from './PredefinedStatus' -import { mapState } from 'vuex' +import PredefinedStatus from './PredefinedStatus.vue' +import { mapGetters, mapState } from 'vuex' export default { name: 'PredefinedStatusesList', components: { PredefinedStatus, }, + data() { + return { + lastSelected: null, + } + }, computed: { ...mapState({ predefinedStatuses: state => state.predefinedStatuses.predefinedStatuses, + messageId: state => state.userStatus.messageId, }), - /** - * Indicator whether the predefined statuses have already been loaded - * - * @returns {boolean} - */ - hasLoaded() { - return this.predefinedStatuses.length > 0 - }, + ...mapGetters(['statusesHaveLoaded']), }, + + watch: { + messageId: { + immediate: true, + handler() { + this.lastSelected = this.messageId + }, + }, + }, + /** * Loads all predefined statuses from the server * when this component is mounted */ - mounted() { + created() { this.$store.dispatch('loadAllPredefinedStatuses') }, methods: { /** * Emits an event when the user selects a status * - * @param {Object} status The selected status + * @param {object} status The selected status */ selectStatus(status) { - this.$emit('selectStatus', status) + this.lastSelected = status.id + this.$emit('select-status', status) }, }, } @@ -85,6 +78,7 @@ export default { .predefined-statuses-list { display: flex; flex-direction: column; - margin-bottom: 10px; + gap: var(--default-grid-baseline); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } </style> diff --git a/apps/user_status/src/components/PreviousStatus.vue b/apps/user_status/src/components/PreviousStatus.vue new file mode 100644 index 00000000000..58d6ebd294b --- /dev/null +++ b/apps/user_status/src/components/PreviousStatus.vue @@ -0,0 +1,106 @@ +<!-- + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> +<template> + <div class="predefined-status backup-status" + tabindex="0" + @keyup.enter="select" + @keyup.space="select" + @click="select"> + <span class="predefined-status__icon"> + {{ icon }} + </span> + <span class="predefined-status__message"> + {{ message }} + </span> + <span class="predefined-status__clear-at"> + {{ $t('user_status', 'Previously set') }} + </span> + + <div class="backup-status__reset-button"> + <NcButton @click="select"> + {{ $t('user_status', 'Reset status') }} + </NcButton> + </div> + </div> +</template> + +<script> +import NcButton from '@nextcloud/vue/components/NcButton' + +export default { + name: 'PreviousStatus', + + components: { + NcButton, + }, + + props: { + icon: { + type: [String, null], + required: true, + }, + message: { + type: String, + required: true, + }, + }, + methods: { + /** + * Emits an event when the user clicks the row + */ + select() { + this.$emit('select') + }, + }, +} +</script> + +<style lang="scss" scoped> +.predefined-status { + display: flex; + flex-wrap: nowrap; + justify-content: flex-start; + flex-basis: 100%; + border-radius: var(--border-radius); + align-items: center; + min-height: var(--default-clickable-area); + padding-inline: var(--default-grid-baseline); + + &:hover, + &:focus { + background-color: var(--color-background-hover); + } + + &:active{ + background-color: var(--color-background-dark); + } + + &__icon { + flex-basis: var(--default-clickable-area); + text-align: center; + } + + &__message { + font-weight: bold; + padding: 0 6px; + } + + &__clear-at { + color: var(--color-text-maxcontrast); + + &::before { + content: ' – '; + } + } +} + +.backup-status { + &__reset-button { + justify-content: flex-end; + display: flex; + flex-grow: 1; + } +} +</style> diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue index 0613a2be38c..8624ed19e94 100644 --- a/apps/user_status/src/components/SetStatusModal.vue +++ b/apps/user_status/src/components/SetStatusModal.vue @@ -1,35 +1,22 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <Modal - size="normal" - :title="$t('user_status', 'Set status')" + <NcModal size="normal" + label-id="user_status-set-dialog" + dark + :set-return-focus="setReturnFocus" @close="closeModal"> <div class="set-status-modal"> <!-- Status selector --> - <div class="set-status-modal__header"> - <h3>{{ $t('user_status', 'Online status') }}</h3> - </div> - <div class="set-status-modal__online-status"> + <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')"> <OnlineStatusSelect v-for="status in statuses" :key="status.type" v-bind="status" @@ -37,51 +24,69 @@ @select="changeStatus" /> </div> - <!-- Status message --> - <div class="set-status-modal__header"> - <h3>{{ $t('user_status', 'Status message') }}</h3> - </div> - <div class="set-status-modal__custom-input"> - <EmojiPicker @select="setIcon"> - <button - class="custom-input__emoji-button"> - {{ visibleIcon }} - </button> - </EmojiPicker> - <CustomMessageInput - ref="customMessageInput" - :message="message" - @change="setMessage" - @submit="saveStatus" /> - </div> - <PredefinedStatusesList - @selectStatus="selectPredefinedMessage" /> - <ClearAtSelect - :clear-at="clearAt" - @selectClearAt="setClearAt" /> - <div class="status-buttons"> - <button class="status-buttons__select" :disabled="isSavingStatus" @click="clearStatus"> - {{ $t('user_status', 'Clear status message') }} - </button> - <button class="status-buttons__primary primary" :disabled="isSavingStatus" @click="saveStatus"> - {{ $t('user_status', 'Set status message') }} - </button> - </div> + <!-- Status message form --> + <form @submit.prevent="saveStatus" @reset="clearStatus"> + <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"> + {{ $t('user_status', 'Your status was set automatically') }} + </div> + <PreviousStatus v-if="hasBackupStatus" + :icon="backupIcon" + :message="backupMessage" + @select="revertBackupFromServer" /> + <PredefinedStatusesList @select-status="selectPredefinedMessage" /> + <ClearAtSelect :clear-at="clearAt" + @select-clear-at="setClearAt" /> + <div class="status-buttons"> + <NcButton :wide="true" + type="tertiary" + native-type="reset" + :aria-label="$t('user_status', 'Clear status message')" + :disabled="isSavingStatus"> + {{ $t('user_status', 'Clear status message') }} + </NcButton> + <NcButton :wide="true" + type="primary" + native-type="submit" + :aria-label="$t('user_status', 'Set status message')" + :disabled="isSavingStatus"> + {{ $t('user_status', 'Set status message') }} + </NcButton> + </div> + </form> </div> - </Modal> + </NcModal> </template> <script> import { showError } from '@nextcloud/dialogs' -import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' -import Modal from '@nextcloud/vue/dist/Components/Modal' - -import { getAllStatusOptions } from '../services/statusOptionsService' -import OnlineStatusMixin from '../mixins/OnlineStatusMixin' -import PredefinedStatusesList from './PredefinedStatusesList' -import CustomMessageInput from './CustomMessageInput' -import ClearAtSelect from './ClearAtSelect' -import OnlineStatusSelect from './OnlineStatusSelect' +import { generateUrl } from '@nextcloud/router' +import NcModal from '@nextcloud/vue/components/NcModal' +import NcButton from '@nextcloud/vue/components/NcButton' +import { getAllStatusOptions } from '../services/statusOptionsService.js' +import OnlineStatusMixin from '../mixins/OnlineStatusMixin.js' +import PredefinedStatusesList from './PredefinedStatusesList.vue' +import PreviousStatus from './PreviousStatus.vue' +import CustomMessageInput from './CustomMessageInput.vue' +import ClearAtSelect from './ClearAtSelect.vue' +import OnlineStatusSelect from './OnlineStatusSelect.vue' export default { name: 'SetStatusModal', @@ -89,30 +94,93 @@ export default { components: { ClearAtSelect, CustomMessageInput, - EmojiPicker, - Modal, + NcModal, OnlineStatusSelect, PredefinedStatusesList, + PreviousStatus, + NcButton, }, mixins: [OnlineStatusMixin], + props: { + /** + * Whether the component should be rendered as a Dashboard Status or a User Menu Entries + * true = Dashboard Status + * false = User Menu Entries + */ + inline: { + type: Boolean, + default: false, + }, + }, + data() { return { clearAt: null, - icon: null, - message: '', + editedMessage: '', + predefinedMessageId: null, isSavingStatus: false, statuses: getAllStatusOptions(), } }, + computed: { - /** - * Returns the user-set icon or a smiley in case no icon is set - * - * @returns {String} - */ - visibleIcon() { - return this.icon || '😀' + messageId() { + return this.$store.state.userStatus.messageId + }, + icon() { + return this.$store.state.userStatus.icon + }, + message() { + return this.$store.state.userStatus.message || '' + }, + hasBackupStatus() { + return this.messageId && (this.backupIcon || this.backupMessage) + }, + backupIcon() { + return this.$store.state.userBackupStatus.icon || '' + }, + backupMessage() { + 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}"', { + icon: this.backupIcon, + message: this.backupMessage, + }) + } else if (this.backupMessage) { + return this.$t('user_status', 'Reset status to "{message}"', { + message: this.backupMessage, + }) + } else if (this.backupIcon) { + return this.$t('user_status', 'Reset status to "{icon}"', { + icon: this.backupIcon, + }) + } + + return this.$t('user_status', 'Reset status') + }, + + setReturnFocus() { + if (this.inline) { + return undefined + } + return document.querySelector('[aria-controls="header-menu-user-menu"]') ?? undefined + }, + }, + + watch: { + message: { + immediate: true, + handler(newValue) { + this.editedMessage = newValue + }, }, }, @@ -120,10 +188,9 @@ export default { * Loads the current status when a user opens dialog */ mounted() { - this.messageId = this.$store.state.userStatus.messageId - this.icon = this.$store.state.userStatus.icon - this.message = this.$store.state.userStatus.message || '' + this.$store.dispatch('fetchBackupFromServer') + this.predefinedMessageId = this.$store.state.userStatus.messageId if (this.$store.state.userStatus.clearAt !== null) { this.clearAt = { type: '_time', @@ -141,11 +208,15 @@ export default { /** * Sets a new icon * - * @param {String} icon The new icon + * @param {string} icon The new icon */ setIcon(icon) { - this.messageId = null - this.icon = icon + this.predefinedMessageId = null + this.$store.dispatch('setCustomMessage', { + message: this.message, + icon, + clearAt: this.clearAt, + }) this.$nextTick(() => { this.$refs.customMessageInput.focus() }) @@ -153,16 +224,16 @@ export default { /** * Sets a new message * - * @param {String} message The new message + * @param {string} message The new message */ setMessage(message) { - this.messageId = null - this.message = message + this.predefinedMessageId = null + this.editedMessage = message }, /** * Sets a new clearAt value * - * @param {Object} clearAt The new clearAt object + * @param {object} clearAt The new clearAt object */ setClearAt(clearAt) { this.clearAt = clearAt @@ -170,18 +241,20 @@ export default { /** * Sets new icon/message/clearAt based on a predefined message * - * @param {Object} status The predefined status object + * @param {object} status The predefined status object */ selectPredefinedMessage(status) { - this.messageId = status.id + this.predefinedMessageId = status.id this.clearAt = status.clearAt - this.icon = status.icon - this.message = status.message + this.$store.dispatch('setPredefinedMessage', { + messageId: status.id, + clearAt: status.clearAt, + }) }, /** * Saves the status and closes the * - * @returns {Promise<void>} + * @return {Promise<void>} */ async saveStatus() { if (this.isSavingStatus) { @@ -191,15 +264,15 @@ export default { try { this.isSavingStatus = true - if (this.messageId !== null) { - await this.$store.dispatch('setPredefinedMessage', { - messageId: this.messageId, + if (this.predefinedMessageId === null) { + await this.$store.dispatch('setCustomMessage', { + message: this.editedMessage, + icon: this.icon, clearAt: this.clearAt, }) } else { - await this.$store.dispatch('setCustomMessage', { - message: this.message, - icon: this.icon, + this.$store.dispatch('setPredefinedMessage', { + messageId: this.predefinedMessageId, clearAt: this.clearAt, }) } @@ -215,7 +288,7 @@ export default { }, /** * - * @returns {Promise<void>} + * @return {Promise<void>} */ async clearStatus() { try { @@ -230,55 +303,88 @@ export default { } this.isSavingStatus = false + this.predefinedMessageId = null this.closeModal() }, + /** + * + * @return {Promise<void>} + */ + async revertBackupFromServer() { + try { + this.isSavingStatus = true + + await this.$store.dispatch('revertBackupFromServer', { + messageId: this.messageId, + }) + } catch (err) { + showError(this.$t('user_status', 'There was an error reverting the status')) + console.debug(err) + this.isSavingStatus = false + return + } + + this.isSavingStatus = false + this.predefinedMessageId = this.$store.state.userStatus?.messageId + }, }, } </script> <style lang="scss" scoped> + .set-status-modal { - min-width: 500px; - min-height: 200px; padding: 8px 20px 20px 20px; - // Enable scrollbar for too long content, same way as in Dashboard customize - max-height: 70vh; - overflow: auto; + + &, & * { + box-sizing: border-box; + } &__header { + font-size: 21px; text-align: center; - font-weight: bold; + height: fit-content; + min-height: var(--default-clickable-area); + line-height: var(--default-clickable-area); + overflow-wrap: break-word; + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__online-status { - display: grid; - // Space between the two sections - margin-bottom: 40px; - grid-template-columns: 1fr 1fr; + display: flex; + flex-direction: column; + gap: calc(2 * var(--default-grid-baseline)); + margin-block: 0 calc(2 * var(--default-grid-baseline)); } &__custom-input { display: flex; + flex-direction: column; + align-items: center; + gap: var(--default-grid-baseline); width: 100%; - margin-bottom: 10px; - - .custom-input__emoji-button { - flex-basis: 40px; - flex-grow: 0; - width: 40px; - height: 34px; - margin-right: 0; - border-right: none; - border-radius: var(--border-radius) 0 0 var(--border-radius); - } + padding-inline-start: var(--default-grid-baseline); + margin-block: 0 calc(2 * var(--default-grid-baseline)); + } + + &__automation-hint { + display: flex; + width: 100%; + margin-block: 0 calc(2 * var(--default-grid-baseline)); + color: var(--color-text-maxcontrast); } .status-buttons { display: flex; + padding: 3px; + padding-inline-start:0; + gap: 3px; + } +} - button { - flex-basis: 50%; - } +@media only screen and (max-width: 500px) { + .set-status-modal__online-status { + grid-template-columns: none !important; } } diff --git a/apps/user_status/src/dashboard.js b/apps/user_status/src/dashboard.js deleted file mode 100644 index 8b85b695f77..00000000000 --- a/apps/user_status/src/dashboard.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * - */ - -import Vue from 'vue' -import { generateFilePath } from '@nextcloud/router' -import { getRequestToken } from '@nextcloud/auth' -import { translate, translatePlural } from '@nextcloud/l10n' -import Dashboard from './views/Dashboard' - -// eslint-disable-next-line -__webpack_nonce__ = btoa(getRequestToken()) - -// eslint-disable-next-line -__webpack_public_path__ = generateFilePath('user_status', '', 'js/') - -Vue.prototype.t = translate -Vue.prototype.n = translatePlural -Vue.prototype.OC = OC -Vue.prototype.OCA = OCA - -document.addEventListener('DOMContentLoaded', function() { - OCA.Dashboard.register('user_status', (el) => { - const View = Vue.extend(Dashboard) - new View({ - propsData: {}, - }).$mount(el) - }) - -}) diff --git a/apps/user_status/src/filters/clearAtFilter.js b/apps/user_status/src/filters/clearAtFilter.js index 22579baa82a..5f62385a978 100644 --- a/apps/user_status/src/filters/clearAtFilter.js +++ b/apps/user_status/src/filters/clearAtFilter.js @@ -1,33 +1,17 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import { translate as t } from '@nextcloud/l10n' import moment from '@nextcloud/moment' -import { dateFactory } from '../services/dateService' +import { dateFactory } from '../services/dateService.js' /** * Formats a clearAt object to be human readable * - * @param {Object} clearAt The clearAt object - * @returns {string|null} + * @param {object} clearAt The clearAt object + * @return {string|null} */ const clearAtFilter = (clearAt) => { if (clearAt === null) { diff --git a/apps/user_status/src/main-user-status-menu.js b/apps/user_status/src/main-user-status-menu.js deleted file mode 100644 index 12fda36e85b..00000000000 --- a/apps/user_status/src/main-user-status-menu.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * - */ -import Vue from 'vue' -import { getRequestToken } from '@nextcloud/auth' -import UserStatus from './UserStatus' -import store from './store' - -// eslint-disable-next-line camelcase -__webpack_nonce__ = btoa(getRequestToken()) - -// Correct the root of the app for chunk loading -// OC.linkTo matches the apps folders -// OC.generateUrl ensure the index.php (or not) -// eslint-disable-next-line -__webpack_public_path__ = OC.linkTo('user_status', 'js/') - -Vue.prototype.t = t -Vue.prototype.$t = t - -// Register settings menu entry -export default new Vue({ - el: 'li[data-id="user_status-menuitem"]', - // eslint-disable-next-line vue/match-component-file-name - name: 'UserStatusRoot', - render: h => h(UserStatus), - store, -}) - -// Register dashboard status -document.addEventListener('DOMContentLoaded', function() { - if (!OCA.Dashboard) { - return - } - - OCA.Dashboard.registerStatus('status', (el) => { - const Dashboard = Vue.extend(UserStatus) - return new Dashboard({ - propsData: { - inline: true, - }, - store, - }).$mount(el) - }) -}) diff --git a/apps/user_status/src/menu.js b/apps/user_status/src/menu.js new file mode 100644 index 00000000000..34e5e6eabb1 --- /dev/null +++ b/apps/user_status/src/menu.js @@ -0,0 +1,52 @@ +/** + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { getCSPNonce } from '@nextcloud/auth' +import { subscribe } from '@nextcloud/event-bus' +import Vue from 'vue' + +import UserStatus from './UserStatus.vue' +import store from './store/index.js' + +// eslint-disable-next-line camelcase +__webpack_nonce__ = getCSPNonce() + +Vue.prototype.t = t +Vue.prototype.$t = t + +const mountPoint = document.getElementById('user_status-menu-entry') + +const mountMenuEntry = () => { + const mountPoint = document.getElementById('user_status-menu-entry') + // eslint-disable-next-line no-new + new Vue({ + el: mountPoint, + render: h => h(UserStatus), + store, + }) +} + +if (mountPoint) { + mountMenuEntry() +} else { + subscribe('core:user-menu:mounted', mountMenuEntry) +} + +// Register dashboard status +document.addEventListener('DOMContentLoaded', function() { + if (!OCA.Dashboard) { + return + } + + OCA.Dashboard.registerStatus('status', (el) => { + const Dashboard = Vue.extend(UserStatus) + return new Dashboard({ + propsData: { + inline: true, + }, + store, + }).$mount(el) + }) +}) diff --git a/apps/user_status/src/mixins/OnlineStatusMixin.js b/apps/user_status/src/mixins/OnlineStatusMixin.js index ceba40f05e7..5670eb4dc06 100644 --- a/apps/user_status/src/mixins/OnlineStatusMixin.js +++ b/apps/user_status/src/mixins/OnlineStatusMixin.js @@ -1,24 +1,8 @@ /** - * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> - * - * @author John Molakvoæ <skjnldsv@protonmail.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import { mapState } from 'vuex' import { showError } from '@nextcloud/dialogs' @@ -34,7 +18,7 @@ export default { /** * The message displayed in the top right corner * - * @returns {String} + * @return {string} */ visibleMessage() { if (this.customIcon && this.customMessage) { @@ -51,6 +35,7 @@ export default { return this.$t('user_status', 'Online') case 'away': + case 'busy': return this.$t('user_status', 'Away') case 'dnd': @@ -66,37 +51,13 @@ export default { return this.$t('user_status', 'Set status') }, - - /** - * The status indicator icon - * - * @returns {String|null} - */ - statusIcon() { - switch (this.statusType) { - case 'online': - return 'icon-user-status-online' - - case 'away': - return 'icon-user-status-away' - - case 'dnd': - return 'icon-user-status-dnd' - - case 'invisible': - case 'offline': - return 'icon-user-status-invisible' - } - - return '' - }, }, methods: { /** * Changes the user-status * - * @param {String} statusType (online / away / dnd / invisible) + * @param {string} statusType (online / away / dnd / invisible) */ async changeStatus(statusType) { try { diff --git a/apps/user_status/src/services/clearAtOptionsService.js b/apps/user_status/src/services/clearAtOptionsService.js index 83289f9059f..af0059bfb7f 100644 --- a/apps/user_status/src/services/clearAtOptionsService.js +++ b/apps/user_status/src/services/clearAtOptionsService.js @@ -1,30 +1,14 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import { translate as t } from '@nextcloud/l10n' /** * Returns an array * - * @returns {Object[]} + * @return {object[]} */ const getAllClearAtOptions = () => { return [{ diff --git a/apps/user_status/src/services/clearAtService.js b/apps/user_status/src/services/clearAtService.js index 12328d3b399..f23d267ad02 100644 --- a/apps/user_status/src/services/clearAtService.js +++ b/apps/user_status/src/services/clearAtService.js @@ -1,34 +1,18 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import { dateFactory, -} from './dateService' +} from './dateService.js' import moment from '@nextcloud/moment' /** * Calculates the actual clearAt timestamp * - * @param {Object|null} clearAt The clear-at config - * @returns {Number|null} + * @param {object | null} clearAt The clear-at config + * @return {number | null} */ const getTimestampForClearAt = (clearAt) => { if (clearAt === null) { diff --git a/apps/user_status/src/services/dateService.js b/apps/user_status/src/services/dateService.js index 641244dada3..26a61d4a3e2 100644 --- a/apps/user_status/src/services/dateService.js +++ b/apps/user_status/src/services/dateService.js @@ -1,30 +1,8 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ -/** - * Returns a new Date object - * - * @returns {Date} - */ const dateFactory = () => { return new Date() } diff --git a/apps/user_status/src/services/heartbeatService.js b/apps/user_status/src/services/heartbeatService.js index ca3a7de6d03..fda1a1ffc9f 100644 --- a/apps/user_status/src/services/heartbeatService.js +++ b/apps/user_status/src/services/heartbeatService.js @@ -1,38 +1,23 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import HttpClient from '@nextcloud/axios' -import { generateUrl } from '@nextcloud/router' +import { generateOcsUrl } from '@nextcloud/router' /** * Sends a heartbeat * - * @param {Boolean} isAway Whether or not the user is active - * @returns {Promise<void>} + * @param {boolean} isAway Whether or not the user is active + * @return {Promise<void>} */ -const sendHeartbeat = async(isAway) => { - const url = generateUrl('/apps/user_status/heartbeat') - await HttpClient.put(url, { +const sendHeartbeat = async (isAway) => { + const url = generateOcsUrl('apps/user_status/api/v1/heartbeat?format=json') + const response = await HttpClient.put(url, { status: isAway ? 'away' : 'online', }) + return response.data.ocs.data } export { diff --git a/apps/user_status/src/services/predefinedStatusService.js b/apps/user_status/src/services/predefinedStatusService.js index 116fccb0c56..b423c6e0cc4 100644 --- a/apps/user_status/src/services/predefinedStatusService.js +++ b/apps/user_status/src/services/predefinedStatusService.js @@ -1,34 +1,18 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import HttpClient from '@nextcloud/axios' import { generateOcsUrl } from '@nextcloud/router' /** * Fetches all predefined statuses from the server * - * @returns {Promise<void>} + * @return {Promise<void>} */ -const fetchAllPredefinedStatuses = async() => { - const url = generateOcsUrl('apps/user_status/api/v1', 2) + '/predefined_statuses?format=json' +const fetchAllPredefinedStatuses = async () => { + const url = generateOcsUrl('apps/user_status/api/v1/predefined_statuses?format=json') const response = await HttpClient.get(url) return response.data.ocs.data diff --git a/apps/user_status/src/services/statusOptionsService.js b/apps/user_status/src/services/statusOptionsService.js index 266f33230cd..6c23645e5be 100644 --- a/apps/user_status/src/services/statusOptionsService.js +++ b/apps/user_status/src/services/statusOptionsService.js @@ -1,51 +1,33 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import { translate as t } from '@nextcloud/l10n' /** * Returns a list of all user-definable statuses * - * @returns {Object[]} + * @return {object[]} */ const getAllStatusOptions = () => { return [{ type: 'online', label: t('user_status', 'Online'), - icon: 'icon-user-status-online', }, { type: 'away', label: t('user_status', 'Away'), - icon: 'icon-user-status-away', + }, { + type: 'busy', + label: t('user_status', 'Busy'), }, { type: 'dnd', label: t('user_status', 'Do not disturb'), subline: t('user_status', 'Mute all notifications'), - icon: 'icon-user-status-dnd', - }, { type: 'invisible', label: t('user_status', 'Invisible'), subline: t('user_status', 'Appear offline'), - icon: 'icon-user-status-invisible', }] } diff --git a/apps/user_status/src/services/statusService.js b/apps/user_status/src/services/statusService.js index 206ff4ee647..6504411c996 100644 --- a/apps/user_status/src/services/statusService.js +++ b/apps/user_status/src/services/statusService.js @@ -1,34 +1,31 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import HttpClient from '@nextcloud/axios' import { generateOcsUrl } from '@nextcloud/router' /** * Fetches the current user-status * - * @returns {Promise<Object>} + * @return {Promise<object>} */ -const fetchCurrentStatus = async() => { - const url = generateOcsUrl('apps/user_status/api/v1', 2) + 'user_status' +const fetchCurrentStatus = async () => { + const url = generateOcsUrl('apps/user_status/api/v1/user_status') + const response = await HttpClient.get(url) + + return response.data.ocs.data +} + +/** + * Fetches the current user-status + * + * @param {string} userId Id of the user to fetch the status + * @return {Promise<object>} + */ +const fetchBackupStatus = async (userId) => { + const url = generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId: '_' + userId }) const response = await HttpClient.get(url) return response.data.ocs.data @@ -37,11 +34,11 @@ const fetchCurrentStatus = async() => { /** * Sets the status * - * @param {String} statusType The status (online / away / dnd / invisible) - * @returns {Promise<void>} + * @param {string} statusType The status (online / away / dnd / invisible) + * @return {Promise<void>} */ -const setStatus = async(statusType) => { - const url = generateOcsUrl('apps/user_status/api/v1', 2) + 'user_status/status' +const setStatus = async (statusType) => { + const url = generateOcsUrl('apps/user_status/api/v1/user_status/status') await HttpClient.put(url, { statusType, }) @@ -50,12 +47,12 @@ const setStatus = async(statusType) => { /** * Sets a message based on our predefined statuses * - * @param {String} messageId The id of the message, taken from predefined status service - * @param {Number|null} clearAt When to automatically clean the status - * @returns {Promise<void>} + * @param {string} messageId The id of the message, taken from predefined status service + * @param {number | null} clearAt When to automatically clean the status + * @return {Promise<void>} */ -const setPredefinedMessage = async(messageId, clearAt = null) => { - const url = generateOcsUrl('apps/user_status/api/v1', 2) + 'user_status/message/predefined?format=json' +const setPredefinedMessage = async (messageId, clearAt = null) => { + const url = generateOcsUrl('apps/user_status/api/v1/user_status/message/predefined?format=json') await HttpClient.put(url, { messageId, clearAt, @@ -65,13 +62,13 @@ const setPredefinedMessage = async(messageId, clearAt = null) => { /** * Sets a custom message * - * @param {String} message The user-defined message - * @param {String|null} statusIcon The user-defined icon - * @param {Number|null} clearAt When to automatically clean the status - * @returns {Promise<void>} + * @param {string} message The user-defined message + * @param {string | null} statusIcon The user-defined icon + * @param {number | null} clearAt When to automatically clean the status + * @return {Promise<void>} */ -const setCustomMessage = async(message, statusIcon = null, clearAt = null) => { - const url = generateOcsUrl('apps/user_status/api/v1', 2) + 'user_status/message/custom?format=json' +const setCustomMessage = async (message, statusIcon = null, clearAt = null) => { + const url = generateOcsUrl('apps/user_status/api/v1/user_status/message/custom?format=json') await HttpClient.put(url, { message, statusIcon, @@ -82,17 +79,32 @@ const setCustomMessage = async(message, statusIcon = null, clearAt = null) => { /** * Clears the current status of the user * - * @returns {Promise<void>} + * @return {Promise<void>} */ -const clearMessage = async() => { - const url = generateOcsUrl('apps/user_status/api/v1', 2) + 'user_status/message?format=json' +const clearMessage = async () => { + const url = generateOcsUrl('apps/user_status/api/v1/user_status/message?format=json') await HttpClient.delete(url) } +/** + * Revert the automated status + * + * @param {string} messageId ID of the message to revert + * @return {Promise<object>} + */ +const revertToBackupStatus = async (messageId) => { + const url = generateOcsUrl('apps/user_status/api/v1/user_status/revert/{messageId}', { messageId }) + const response = await HttpClient.delete(url) + + return response.data.ocs.data +} + export { fetchCurrentStatus, + fetchBackupStatus, setStatus, setCustomMessage, setPredefinedMessage, clearMessage, + revertToBackupStatus, } diff --git a/apps/user_status/src/store/index.js b/apps/user_status/src/store/index.js index d810cae5444..d9cfe674165 100644 --- a/apps/user_status/src/store/index.js +++ b/apps/user_status/src/store/index.js @@ -1,35 +1,21 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import Vue from 'vue' -import Vuex from 'vuex' -import predefinedStatuses from './predefinedStatuses' -import userStatus from './userStatus' +import Vuex, { Store } from 'vuex' +import predefinedStatuses from './predefinedStatuses.js' +import userStatus from './userStatus.js' +import userBackupStatus from './userBackupStatus.js' Vue.use(Vuex) -export default new Vuex.Store({ +export default new Store({ modules: { predefinedStatuses, userStatus, + userBackupStatus, }, strict: true, }) diff --git a/apps/user_status/src/store/predefinedStatuses.js b/apps/user_status/src/store/predefinedStatuses.js index f7174bf8bfc..6d592ca627e 100644 --- a/apps/user_status/src/store/predefinedStatuses.js +++ b/apps/user_status/src/store/predefinedStatuses.js @@ -1,25 +1,9 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ -import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService' + +import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js' const state = { predefinedStatuses: [], @@ -30,23 +14,28 @@ const mutations = { /** * Adds a predefined status to the state * - * @param {Object} state The Vuex state - * @param {Object} status The status to add + * @param {object} state The Vuex state + * @param {object} status The status to add */ addPredefinedStatus(state, status) { - state.predefinedStatuses.push(status) + state.predefinedStatuses = [...state.predefinedStatuses, status] }, } -const getters = {} +const getters = { + statusesHaveLoaded(state) { + return state.predefinedStatuses.length > 0 + }, +} const actions = { /** * Loads all predefined statuses from the server * - * @param {Object} vuex The Vuex components + * @param {object} vuex The Vuex components * @param {Function} vuex.commit The Vuex commit function + * @param {object} vuex.state - */ async loadAllPredefinedStatuses({ state, commit }) { if (state.predefinedStatuses.length > 0) { diff --git a/apps/user_status/src/store/userBackupStatus.js b/apps/user_status/src/store/userBackupStatus.js new file mode 100644 index 00000000000..78e5318de9d --- /dev/null +++ b/apps/user_status/src/store/userBackupStatus.js @@ -0,0 +1,102 @@ +/** + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import { + fetchBackupStatus, + revertToBackupStatus, +} from '../services/statusService.js' +import { getCurrentUser } from '@nextcloud/auth' +import { emit } from '@nextcloud/event-bus' + +const state = { + // Status (online / away / dnd / invisible / offline) + status: null, + // Whether the status is user-defined + statusIsUserDefined: null, + // A custom message set by the user + message: null, + // The icon selected by the user + icon: null, + // When to automatically clean the status + clearAt: null, + // Whether the message is predefined + // (and can automatically be translated by Nextcloud) + messageIsPredefined: null, + // The id of the message in case it's predefined + messageId: null, +} + +const mutations = { + /** + * Loads the status from initial state + * + * @param {object} state The Vuex state + * @param {object} data The destructuring object + * @param {string} data.status The status type + * @param {boolean} data.statusIsUserDefined Whether or not this status is user-defined + * @param {string} data.message The message + * @param {string} data.icon The icon + * @param {number} data.clearAt When to automatically clear the status + * @param {boolean} data.messageIsPredefined Whether or not the message is predefined + * @param {string} data.messageId The id of the predefined message + */ + loadBackupStatusFromServer(state, { status, statusIsUserDefined, message, icon, clearAt, messageIsPredefined, messageId }) { + state.status = status + state.message = message + state.icon = icon + + // Don't overwrite certain values if the refreshing comes in via short updates + // E.g. from talk participant list which only has the status, message and icon + if (typeof statusIsUserDefined !== 'undefined') { + state.statusIsUserDefined = statusIsUserDefined + } + if (typeof clearAt !== 'undefined') { + state.clearAt = clearAt + } + if (typeof messageIsPredefined !== 'undefined') { + state.messageIsPredefined = messageIsPredefined + } + if (typeof messageId !== 'undefined') { + state.messageId = messageId + } + }, +} + +const getters = {} + +const actions = { + /** + * Re-fetches the status from the server + * + * @param {object} vuex The Vuex destructuring object + * @param {Function} vuex.commit The Vuex commit function + * @return {Promise<void>} + */ + async fetchBackupFromServer({ commit }) { + try { + const status = await fetchBackupStatus(getCurrentUser()?.uid) + commit('loadBackupStatusFromServer', status) + } catch (e) { + // Ignore missing user backup status + } + }, + + async revertBackupFromServer({ commit }, { messageId }) { + const status = await revertToBackupStatus(messageId) + if (status) { + commit('loadBackupStatusFromServer', {}) + commit('loadStatusFromServer', status) + emit('user_status:status.updated', { + status: status.status, + message: status.message, + icon: status.icon, + clearAt: status.clearAt, + userId: getCurrentUser()?.uid, + }) + } + }, +} + +export default { state, mutations, getters, actions } diff --git a/apps/user_status/src/store/userStatus.js b/apps/user_status/src/store/userStatus.js index 69ec6d8fed1..9bc86ab5062 100644 --- a/apps/user_status/src/store/userStatus.js +++ b/apps/user_status/src/store/userStatus.js @@ -1,40 +1,24 @@ /** - * @copyright Copyright (c) 2020 Georg Ehrke - * - * @author Georg Ehrke <oc.list@georgehrke.com> - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ + import { fetchCurrentStatus, setStatus, setPredefinedMessage, setCustomMessage, clearMessage, -} from '../services/statusService' +} from '../services/statusService.js' import { loadState } from '@nextcloud/initial-state' import { getCurrentUser } from '@nextcloud/auth' -import { getTimestampForClearAt } from '../services/clearAtService' +import { getTimestampForClearAt } from '../services/clearAtService.js' import { emit } from '@nextcloud/event-bus' const state = { // Status (online / away / dnd / invisible / offline) status: null, - // Whether or not the status is user-defined + // Whether the status is user-defined statusIsUserDefined: null, // A custom message set by the user message: null, @@ -42,7 +26,7 @@ const state = { icon: null, // When to automatically clean the status clearAt: null, - // Whether or not the message is predefined + // Whether the message is predefined // (and can automatically be translated by Nextcloud) messageIsPredefined: null, // The id of the message in case it's predefined @@ -54,9 +38,9 @@ const mutations = { /** * Sets a new status * - * @param {Object} state The Vuex state - * @param {Object} data The destructuring object - * @param {String} data.statusType The new status type + * @param {object} state The Vuex state + * @param {object} data The destructuring object + * @param {string} data.statusType The new status type */ setStatus(state, { statusType }) { state.status = statusType @@ -66,12 +50,12 @@ const mutations = { /** * Sets a message using a predefined message * - * @param {Object} state The Vuex state - * @param {Object} data The destructuring object - * @param {String} data.messageId The messageId - * @param {Number|null} data.clearAt When to automatically clear the status - * @param {String} data.message The message - * @param {String} data.icon The icon + * @param {object} state The Vuex state + * @param {object} data The destructuring object + * @param {string} data.messageId The messageId + * @param {number | null} data.clearAt When to automatically clear the status + * @param {string} data.message The message + * @param {string} data.icon The icon */ setPredefinedMessage(state, { messageId, clearAt, message, icon }) { state.messageId = messageId @@ -85,11 +69,11 @@ const mutations = { /** * Sets a custom message * - * @param {Object} state The Vuex state - * @param {Object} data The destructuring object - * @param {String} data.message The message - * @param {String} data.icon The icon - * @param {Number} data.clearAt When to automatically clear the status + * @param {object} state The Vuex state + * @param {object} data The destructuring object + * @param {string} data.message The message + * @param {string} data.icon The icon + * @param {number} data.clearAt When to automatically clear the status */ setCustomMessage(state, { message, icon, clearAt }) { state.messageId = null @@ -103,7 +87,7 @@ const mutations = { /** * Clears the status * - * @param {Object} state The Vuex state + * @param {object} state The Vuex state */ clearMessage(state) { state.messageId = null @@ -117,24 +101,35 @@ const mutations = { /** * Loads the status from initial state * - * @param {Object} state The Vuex state - * @param {Object} data The destructuring object - * @param {String} data.status The status type - * @param {Boolean} data.statusIsUserDefined Whether or not this status is user-defined - * @param {String} data.message The message - * @param {String} data.icon The icon - * @param {Number} data.clearAt When to automatically clear the status - * @param {Boolean} data.messageIsPredefined Whether or not the message is predefined + * @param {object} state The Vuex state + * @param {object} data The destructuring object + * @param {string} data.status The status type + * @param {boolean} data.statusIsUserDefined Whether or not this status is user-defined + * @param {string} data.message The message + * @param {string} data.icon The icon + * @param {number} data.clearAt When to automatically clear the status + * @param {boolean} data.messageIsPredefined Whether or not the message is predefined * @param {string} data.messageId The id of the predefined message */ loadStatusFromServer(state, { status, statusIsUserDefined, message, icon, clearAt, messageIsPredefined, messageId }) { state.status = status - state.statusIsUserDefined = statusIsUserDefined state.message = message state.icon = icon - state.clearAt = clearAt - state.messageIsPredefined = messageIsPredefined - state.messageId = messageId + + // Don't overwrite certain values if the refreshing comes in via short updates + // E.g. from talk participant list which only has the status, message and icon + if (typeof statusIsUserDefined !== 'undefined') { + state.statusIsUserDefined = statusIsUserDefined + } + if (typeof clearAt !== 'undefined') { + state.clearAt = clearAt + } + if (typeof messageIsPredefined !== 'undefined') { + state.messageIsPredefined = messageIsPredefined + } + if (typeof messageId !== 'undefined') { + state.messageId = messageId + } }, } @@ -145,12 +140,12 @@ const actions = { /** * Sets a new status * - * @param {Object} vuex The Vuex destructuring object + * @param {object} vuex The Vuex destructuring object * @param {Function} vuex.commit The Vuex commit function - * @param {Object} vuex.state The Vuex state object - * @param {Object} data The data destructuring object - * @param {String} data.statusType The new status type - * @returns {Promise<void>} + * @param {object} vuex.state The Vuex state object + * @param {object} data The data destructuring object + * @param {string} data.statusType The new status type + * @return {Promise<void>} */ async setStatus({ commit, state }, { statusType }) { await setStatus(statusType) @@ -165,16 +160,31 @@ const actions = { }, /** + * Update status from 'user_status:status.updated' update. + * This doesn't trigger another 'user_status:status.updated' + * event. + * + * @param {object} vuex The Vuex destructuring object + * @param {Function} vuex.commit The Vuex commit function + * @param {object} vuex.state The Vuex state object + * @param {string} status The new status + * @return {Promise<void>} + */ + async setStatusFromObject({ commit, state }, status) { + commit('loadStatusFromServer', status) + }, + + /** * Sets a message using a predefined message * - * @param {Object} vuex The Vuex destructuring object + * @param {object} vuex The Vuex destructuring object * @param {Function} vuex.commit The Vuex commit function - * @param {Object} vuex.state The Vuex state object - * @param {Object} vuex.rootState The Vuex root state - * @param {Object} data The data destructuring object - * @param {String} data.messageId The messageId - * @param {Object|null} data.clearAt When to automatically clear the status - * @returns {Promise<void>} + * @param {object} vuex.state The Vuex state object + * @param {object} vuex.rootState The Vuex root state + * @param {object} data The data destructuring object + * @param {string} data.messageId The messageId + * @param {object | null} data.clearAt When to automatically clear the status + * @return {Promise<void>} */ async setPredefinedMessage({ commit, rootState, state }, { messageId, clearAt }) { const resolvedClearAt = getTimestampForClearAt(clearAt) @@ -196,14 +206,14 @@ const actions = { /** * Sets a custom message * - * @param {Object} vuex The Vuex destructuring object + * @param {object} vuex The Vuex destructuring object * @param {Function} vuex.commit The Vuex commit function - * @param {Object} vuex.state The Vuex state object - * @param {Object} data The data destructuring object - * @param {String} data.message The message - * @param {String} data.icon The icon - * @param {Object|null} data.clearAt When to automatically clear the status - * @returns {Promise<void>} + * @param {object} vuex.state The Vuex state object + * @param {object} data The data destructuring object + * @param {string} data.message The message + * @param {string} data.icon The icon + * @param {object | null} data.clearAt When to automatically clear the status + * @return {Promise<void>} */ async setCustomMessage({ commit, state }, { message, icon, clearAt }) { const resolvedClearAt = getTimestampForClearAt(clearAt) @@ -222,10 +232,10 @@ const actions = { /** * Clears the status * - * @param {Object} vuex The Vuex destructuring object + * @param {object} vuex The Vuex destructuring object * @param {Function} vuex.commit The Vuex commit function - * @param {Object} vuex.state The Vuex state object - * @returns {Promise<void>} + * @param {object} vuex.state The Vuex state object + * @return {Promise<void>} */ async clearMessage({ commit, state }) { await clearMessage() @@ -242,9 +252,9 @@ const actions = { /** * Re-fetches the status from the server * - * @param {Object} vuex The Vuex destructuring object + * @param {object} vuex The Vuex destructuring object * @param {Function} vuex.commit The Vuex commit function - * @returns {Promise<void>} + * @return {Promise<void>} */ async reFetchStatusFromServer({ commit }) { const status = await fetchCurrentStatus() @@ -252,9 +262,28 @@ const actions = { }, /** + * Stores the status we got in the reply of the heartbeat + * + * @param {object} vuex The Vuex destructuring object + * @param {Function} vuex.commit The Vuex commit function + * @param {object} status The data destructuring object + * @param {string} status.status The status type + * @param {boolean} status.statusIsUserDefined Whether or not this status is user-defined + * @param {string} status.message The message + * @param {string} status.icon The icon + * @param {number} status.clearAt When to automatically clear the status + * @param {boolean} status.messageIsPredefined Whether or not the message is predefined + * @param {string} status.messageId The id of the predefined message + * @return {Promise<void>} + */ + async setStatusFromHeartbeat({ commit }, status) { + commit('loadStatusFromServer', status) + }, + + /** * Loads the server from the initial state * - * @param {Object} vuex The Vuex destructuring object + * @param {object} vuex The Vuex destructuring object * @param {Function} vuex.commit The Vuex commit function */ loadStatusFromInitialState({ commit }) { diff --git a/apps/user_status/src/views/Dashboard.vue b/apps/user_status/src/views/Dashboard.vue deleted file mode 100644 index f92c6716a39..00000000000 --- a/apps/user_status/src/views/Dashboard.vue +++ /dev/null @@ -1,125 +0,0 @@ -<!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - -<template> - <DashboardWidget - id="user-status_panel" - :items="items" - :loading="loading"> - <template v-slot:default="{ item }"> - <DashboardWidgetItem - :main-text="item.mainText" - :sub-text="item.subText"> - <template v-slot:avatar> - <Avatar - class="item-avatar" - :size="44" - :user="item.avatarUsername" - :display-name="item.mainText" - :show-user-status-compact="false" /> - </template> - </DashboardWidgetItem> - </template> - <template v-slot:empty-content> - <EmptyContent - id="user_status-widget-empty-content" - icon="icon-user-status"> - {{ t('user_status', 'No recent status changes') }} - </EmptyContent> - </template> - </DashboardWidget> -</template> - -<script> -import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard' -import Avatar from '@nextcloud/vue/dist/Components/Avatar' -import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent' -import { loadState } from '@nextcloud/initial-state' -import moment from '@nextcloud/moment' - -export default { - name: 'Dashboard', - components: { - Avatar, - DashboardWidget, - DashboardWidgetItem, - EmptyContent, - }, - data() { - return { - statuses: [], - loading: true, - } - }, - computed: { - items() { - return this.statuses.map((item) => { - const icon = item.icon || '' - let message = item.message || '' - if (message === '') { - if (item.status === 'away') { - message = t('user_status', 'Away') - } - if (item.status === 'dnd') { - message = t('user_status', 'Do not disturb') - } - } - const status = item.icon !== '' ? `${icon} ${message}` : message - - let subText - if (item.icon === null && message === '' && item.timestamp === null) { - subText = '' - } else if (item.icon === null && message === '' && item.timestamp !== null) { - subText = moment(item.timestamp, 'X').fromNow() - } else if (item.timestamp !== null) { - subText = this.t('user_status', '{status}, {timestamp}', { - status, - timestamp: moment(item.timestamp, 'X').fromNow(), - }, null, { escape: false, sanitize: false }) - } else { - subText = status - } - - return { - mainText: item.displayName, - subText, - avatarUsername: item.userId, - } - }) - }, - }, - mounted() { - try { - this.statuses = loadState('user_status', 'dashboard_data') - this.loading = false - } catch (e) { - console.error(e) - } - }, -} -</script> - -<style lang="scss"> -#user_status-widget-empty-content { - text-align: center; - margin-top: 5vh; -} -</style> |