diff options
Diffstat (limited to 'apps/user_status/src/components/PredefinedStatusesList.vue')
| -rw-r--r-- | apps/user_status/src/components/PredefinedStatusesList.vue | 65 |
1 files changed, 31 insertions, 34 deletions
diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue index cff03289715..cdf359dce76 100644 --- a/apps/user_status/src/components/PredefinedStatusesList.vue +++ b/apps/user_status/src/components/PredefinedStatusesList.vue @@ -1,35 +1,21 @@ <!-- - - @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"> + <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> + </ul> <div v-else class="predefined-statuses-list"> <div class="icon icon-loading-small" /> @@ -37,32 +23,41 @@ </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 - * - * @return {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: { @@ -72,6 +67,7 @@ export default { * @param {object} status The selected status */ selectStatus(status) { + this.lastSelected = status.id this.$emit('select-status', status) }, }, @@ -82,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> |