diff options
Diffstat (limited to 'apps/files_sharing/src/components/SharingEntry.vue')
-rw-r--r-- | apps/files_sharing/src/components/SharingEntry.vue | 249 |
1 files changed, 249 insertions, 0 deletions
diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue new file mode 100644 index 00000000000..857b57adbd0 --- /dev/null +++ b/apps/files_sharing/src/components/SharingEntry.vue @@ -0,0 +1,249 @@ +<!-- + - @copyright Copyright (c) 2019 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/>. + - + --> + +<template> + <li class="sharing-entry"> + <Avatar class="sharing-entry__avatar" + :user="share.shareWith" + :display-name="share.shareWithDisplayName" + :url="share.shareWithAvatar" /> + <div v-tooltip.auto="tooltip" class="sharing-entry__desc"> + <h5>{{ title }}</h5> + </div> + <Actions menu-align="right" class="sharing-entry__actions"> + <!-- edit permission --> + <ActionCheckbox + ref="canEdit" + :checked.sync="canEdit" + :value="permissionsEdit" + :disabled="saving"> + {{ t('files_sharing', 'Allow editing') }} + </ActionCheckbox> + + <!-- reshare permission --> + <ActionCheckbox + ref="canReshare" + :checked.sync="canReshare" + :value="permissionsShare" + :disabled="saving"> + {{ t('files_sharing', 'Can reshare') }} + </ActionCheckbox> + + <!-- expiration date --> + <ActionCheckbox :checked.sync="hasExpirationDate" + :disabled="config.isDefaultExpireDateEnforced || saving" + @uncheck="onExpirationDisable"> + {{ config.isDefaultExpireDateEnforced + ? t('files_sharing', 'Expiration date enforced') + : t('files_sharing', 'Set expiration date') }} + </ActionCheckbox> + <ActionInput v-if="hasExpirationDate" + ref="expireDate" + v-tooltip.auto="{ + content: errors.expireDate, + show: errors.expireDate, + trigger: 'manual' + }" + :class="{ error: errors.expireDate}" + :disabled="saving" + :first-day-of-week="firstDay" + :lang="lang" + :value="share.expireDate" + icon="icon-calendar-dark" + type="date" + :not-before="dateTomorrow" + :not-after="dateMaxEnforced" + @update:value="onExpirationChange"> + {{ t('files_sharing', 'Enter a date') }} + </ActionInput> + + <!-- note --> + <template v-if="canHaveNote"> + <ActionCheckbox + :checked.sync="hasNote" + :disabled="saving" + @uncheck="queueUpdate('note')"> + {{ t('files_sharing', 'Note to recipient') }} + </ActionCheckbox> + <ActionTextEditable v-if="hasNote" + ref="note" + v-tooltip.auto="{ + content: errors.note, + show: errors.note, + trigger: 'manual' + }" + :class="{ error: errors.note}" + :disabled="saving" + :value.sync="share.note" + icon="icon-edit" + @update:value="debounceQueueUpdate('note')" /> + </template> + + <ActionButton icon="icon-delete" :disabled="saving" @click.prevent="onDelete"> + {{ t('files_sharing', 'Unshare') }} + </ActionButton> + </Actions> + </li> +</template> + +<script> +import Avatar from 'nextcloud-vue/dist/Components/Avatar' +import Actions from 'nextcloud-vue/dist/Components/Actions' +import ActionButton from 'nextcloud-vue/dist/Components/ActionButton' +import ActionCheckbox from 'nextcloud-vue/dist/Components/ActionCheckbox' +import ActionInput from 'nextcloud-vue/dist/Components/ActionInput' +import ActionTextEditable from 'nextcloud-vue/dist/Components/ActionTextEditable' +import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip' + +// eslint-disable-next-line no-unused-vars +import Share from '../models/Share' +import SharesMixin from '../mixins/SharesMixin' + +export default { + name: 'SharingEntry', + + components: { + Actions, + ActionButton, + ActionCheckbox, + ActionInput, + ActionTextEditable, + Avatar + }, + + directives: { + Tooltip + }, + + mixins: [SharesMixin], + + data() { + return { + permissionsEdit: OC.PERMISSION_UPDATE, + permissionsRead: OC.PERMISSION_READ, + permissionsShare: OC.PERMISSION_SHARE + } + }, + + computed: { + title() { + let title = this.share.shareWithDisplayName + if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) { + title += ` (${t('files_sharing', 'group')})` + } else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) { + title += ` (${t('files_sharing', 'conversation')})` + } else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE) { + title += ` (${t('files_sharing', 'remote')})` + } else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP) { + title += ` (${t('files_sharing', 'remote group')})` + } else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GUEST) { + title += ` (${t('files_sharing', 'guest')})` + } + return title + }, + + tooltip() { + if (this.share.owner !== this.share.uidFileOwner) { + const data = { + // todo: strong or italic? + // but the t function escape any html from the data :/ + user: this.share.shareWithDisplayName, + owner: this.share.owner + } + + if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) { + return t('files_sharing', 'Shared with the group {user} by {owner}', data) + } else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) { + return t('files_sharing', 'Shared with the conversation {user} by {owner}', data) + } + + return t('files_sharing', 'Shared with {user} by {owner}', data) + } + return null + }, + + canHaveNote() { + return this.share.type !== this.SHARE_TYPES.SHARE_TYPE_REMOTE + && this.share.type !== this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP + }, + + /** + * Can the sharee edit the shared file ? + */ + canEdit: { + get: function() { + return this.share.hasUpdatePermission + }, + set: function(checked) { + this.updatePermissions(checked, this.canReshare) + } + }, + + /** + * Can the sharee reshare the file ? + */ + canReshare: { + get: function() { + return this.share.hasSharePermission + }, + set: function(checked) { + this.updatePermissions(this.canEdit, checked) + } + } + + }, + + methods: { + updatePermissions(isEditChecked, isReshareChecked) { + // calc permissions if checked + const permissions = this.permissionsRead + | (isEditChecked ? this.permissionsEdit : 0) + | (isReshareChecked ? this.permissionsShare : 0) + + this.share.permissions = permissions + this.queueUpdate('permissions') + } + } + +} +</script> + +<style lang="scss" scoped> +.sharing-entry { + display: flex; + align-items: center; + height: 44px; + &__desc { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 8px; + line-height: 1.2em; + p { + color: var(--color-text-maxcontrast); + } + } + &__actions { + margin-left: auto; + } +} +</style> |