diff options
Diffstat (limited to 'apps/user_status/src/components/SetStatusModal.vue')
| -rw-r--r-- | apps/user_status/src/components/SetStatusModal.vue | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue new file mode 100644 index 00000000000..46c289d9e81 --- /dev/null +++ b/apps/user_status/src/components/SetStatusModal.vue @@ -0,0 +1,236 @@ +<!-- + - @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> + <Modal + size="normal" + :title="$t('user_status', 'Set a custom status')" + @close="closeModal"> + <div class="set-status-modal"> + <div class="set-status-modal__header"> + <h3>{{ $t('user_status', 'Set a custom status') }}</h3> + </div> + <div class="set-status-modal__custom-input"> + <EmojiPicker @select="setIcon"> + <button + class="custom-input__emoji-button"> + {{ visibleIcon }} + </button> + </EmojiPicker> + <CustomMessageInput + :message="message" + @change="setMessage" /> + </div> + <PredefinedStatusesList + @selectStatus="selectPredefinedMessage" /> + <ClearAtSelect + :clear-at="clearAt" + @selectClearAt="setClearAt" /> + <div class="status-buttons"> + <button class="status-buttons__select" @click="clearStatus"> + {{ $t('user_status', 'Clear custom status') }} + </button> + <button class="status-buttons__primary primary" @click="saveStatus"> + {{ $t('user_status', 'Set status') }} + </button> + </div> + </div> + </Modal> +</template> + +<script> +import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker' +import Modal from '@nextcloud/vue/dist/Components/Modal' +import PredefinedStatusesList from './PredefinedStatusesList' +import CustomMessageInput from './CustomMessageInput' +import ClearAtSelect from './ClearAtSelect' +import { showError } from '@nextcloud/dialogs' + +export default { + name: 'SetStatusModal', + components: { + EmojiPicker, + Modal, + CustomMessageInput, + PredefinedStatusesList, + ClearAtSelect, + }, + data() { + return { + icon: null, + message: null, + clearAt: null, + } + }, + computed: { + /** + * Returns the user-set icon or a smiley in case no icon is set + * + * @returns {String} + */ + visibleIcon() { + return this.icon || '😀' + }, + }, + /** + * 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 + + if (this.$store.state.userStatus.clearAt !== null) { + this.clearAt = { + type: '_time', + time: this.$store.state.userStatus.clearAt, + } + } + }, + methods: { + /** + * Closes the Set Status modal + */ + closeModal() { + this.$emit('close') + }, + /** + * Sets a new icon + * + * @param {String} icon The new icon + */ + setIcon(icon) { + this.messageId = null + this.icon = icon + }, + /** + * Sets a new message + * + * @param {String} message The new message + */ + setMessage(message) { + this.messageId = null + this.message = message + }, + /** + * Sets a new clearAt value + * + * @param {Object} clearAt The new clearAt object + */ + setClearAt(clearAt) { + this.clearAt = clearAt + }, + /** + * Sets new icon/message/clearAt based on a predefined message + * + * @param {Object} status The predefined status object + */ + selectPredefinedMessage(status) { + this.messageId = status.id + this.clearAt = status.clearAt + this.icon = status.icon + this.message = status.message + }, + /** + * Saves the status and closes the + * + * @returns {Promise<void>} + */ + async saveStatus() { + try { + this.isSavingStatus = true + + if (this.messageId !== null) { + await this.$store.dispatch('setPredefinedMessage', { + messageId: this.messageId, + clearAt: this.clearAt, + }) + } else { + await this.$store.dispatch('setCustomMessage', { + message: this.message, + icon: this.icon, + clearAt: this.clearAt, + }) + } + } catch (err) { + showError(this.$t('user_status', 'There was an error saving the status')) + console.debug(err) + this.isSavingStatus = false + return + } + + this.isSavingStatus = false + this.closeModal() + }, + /** + * + * @returns {Promise<void>} + */ + async clearStatus() { + try { + this.isSavingStatus = true + + await this.$store.dispatch('clearMessage') + } catch (err) { + showError(this.$t('user_status', 'There was an error clearing the status')) + console.debug(err) + this.isSavingStatus = false + return + } + + this.isSavingStatus = false + this.closeModal() + }, + }, +} +</script> + +<style lang="scss" scoped> +.set-status-modal { + min-width: 500px; + min-height: 200px; + padding: 8px 20px 20px 20px; + + &__custom-input { + display: flex; + width: 100%; + margin-bottom: 10px; + + .custom-input__emoji-button { + flex-basis: 40px; + width: 40px; + flex-grow: 0; + border-radius: var(--border-radius) 0 0 var(--border-radius); + height: 34px; + margin-right: 0; + border-right: none; + } + } + + .status-buttons { + display: flex; + + button { + flex-basis: 50%; + } + } +} +</style> |