diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue')
-rw-r--r-- | apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue new file mode 100644 index 00000000000..5c982fd1f24 --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue @@ -0,0 +1,182 @@ +<!-- + - @copyright 2021 Christopher Ng <chrng8@gmail.com> + - + - @author Christopher Ng <chrng8@gmail.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> + <div + class="visibility-container" + :class="{ disabled }"> + <label :for="inputId"> + {{ t('settings', '{displayId}', { displayId }) }} + </label> + <Multiselect + :id="inputId" + class="visibility-container__multiselect" + :options="visibilityOptions" + track-by="name" + label="label" + :value="visibilityObject" + @change="onVisibilityChange" /> + </div> +</template> + +<script> +import { showError } from '@nextcloud/dialogs' +import { loadState } from '@nextcloud/initial-state' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' + +import Multiselect from '@nextcloud/vue/dist/Components/Multiselect' + +import { saveProfileParameterVisibility } from '../../../service/ProfileService' +import { validateStringInput } from '../../../utils/validate' +import { VISIBILITY_PROPERTY_ENUM } from '../../../constants/ProfileConstants' + +const { profileEnabled } = loadState('settings', 'personalInfoParameters', false) + +export default { + name: 'VisibilityDropdown', + + components: { + Multiselect, + }, + + props: { + paramId: { + type: String, + required: true, + }, + displayId: { + type: String, + required: true, + }, + visibility: { + type: String, + required: true, + }, + }, + + data() { + return { + initialVisibility: this.visibility, + profileEnabled, + } + }, + + computed: { + disabled() { + return !this.profileEnabled + }, + + inputId() { + return `profile-visibility-${this.paramId}` + }, + + visibilityObject() { + return VISIBILITY_PROPERTY_ENUM[this.visibility] + }, + + visibilityOptions() { + return Object.values(VISIBILITY_PROPERTY_ENUM) + }, + }, + + mounted() { + subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + beforeDestroy() { + unsubscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate) + }, + + methods: { + async onVisibilityChange(visibilityObject) { + // This check is needed as the argument is null when selecting the same option + if (visibilityObject !== null) { + const { name: visibility } = visibilityObject + this.$emit('update:visibility', visibility) + + if (validateStringInput(visibility)) { + await this.updateVisibility(visibility) + } + } + }, + + async updateVisibility(visibility) { + try { + const responseData = await saveProfileParameterVisibility(this.paramId, visibility) + this.handleResponse({ + visibility, + status: responseData.ocs?.meta?.status, + }) + } catch (e) { + this.handleResponse({ + errorMessage: t('settings', 'Unable to update visibility of {displayId}', { displayId: this.displayId }), + error: e, + }) + } + }, + + handleResponse({ visibility, status, errorMessage, error }) { + if (status === 'ok') { + // Ensure that local state reflects server state + this.initialVisibility = visibility + } else { + showError(errorMessage) + this.logger.error(errorMessage, error) + } + }, + + handleProfileEnabledUpdate(profileEnabled) { + this.profileEnabled = profileEnabled + }, + }, +} +</script> + +<style lang="scss" scoped> +.visibility-container { + display: flex; + width: max-content; + + &.disabled { + filter: grayscale(1); + opacity: 0.5; + cursor: default; + pointer-events: none; + + & *, + &::v-deep * { + cursor: default; + pointer-events: none; + } + } + + label { + color: var(--color-text-lighter); + width: 150px; + line-height: 50px; + } + + &__multiselect { + width: 260px; + } +} +</style> |