123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <!--
- - @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>
|