Skip to content

Commit

Permalink
Improve sharing flow
Browse files Browse the repository at this point in the history 
Resolves: #26691

Signed-off-by: fenn-cs <[email protected]>
  • Loading branch information
@nfebe
nfebe committed Aug 24, 2023
1 parent 590b1d9 commit eff2afe
Show file tree
Hide file tree
Showing 14 changed files with 1,325 additions and 406 deletions.
240 changes: 54 additions & 186 deletions apps/files_sharing/src/components/SharingEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,139 +29,62 @@
:menu-position="'left'"
:url="share.shareWithAvatar" />

<component :is="share.shareWithLink ? 'a' : 'div'"
:title="tooltip"
:aria-label="tooltip"
:href="share.shareWithLink"
class="sharing-entry__desc">
<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
<p v-if="hasStatus">
<span>{{ share.status.icon || '' }}</span>
<span>{{ share.status.message || '' }}</span>
</p>
</component>
<NcActions menu-align="right"
class="sharing-entry__actions"
@close="onMenuClose">
<template v-if="share.canEdit">
<!-- edit permission -->
<NcActionCheckbox ref="canEdit"
:checked.sync="canEdit"
:value="permissionsEdit"
:disabled="saving || !canSetEdit">
{{ t('files_sharing', 'Allow editing') }}
</NcActionCheckbox>

<!-- create permission -->
<NcActionCheckbox v-if="isFolder"
ref="canCreate"
:checked.sync="canCreate"
:value="permissionsCreate"
:disabled="saving || !canSetCreate">
{{ t('files_sharing', 'Allow creating') }}
</NcActionCheckbox>

<!-- delete permission -->
<NcActionCheckbox v-if="isFolder"
ref="canDelete"
:checked.sync="canDelete"
:value="permissionsDelete"
:disabled="saving || !canSetDelete">
{{ t('files_sharing', 'Allow deleting') }}
</NcActionCheckbox>

<!-- reshare permission -->
<NcActionCheckbox v-if="config.isResharingAllowed"
ref="canReshare"
:checked.sync="canReshare"
:value="permissionsShare"
:disabled="saving || !canSetReshare">
{{ t('files_sharing', 'Allow resharing') }}
</NcActionCheckbox>

<NcActionCheckbox v-if="isSetDownloadButtonVisible"
ref="canDownload"
:checked.sync="canDownload"
:disabled="saving || !canSetDownload">
{{ allowDownloadText }}
</NcActionCheckbox>

<!-- expiration date -->
<NcActionCheckbox :checked.sync="hasExpirationDate"
:disabled="config.isDefaultInternalExpireDateEnforced || saving"
@uncheck="onExpirationDisable">
{{ config.isDefaultInternalExpireDateEnforced
? t('files_sharing', 'Expiration date enforced')
: t('files_sharing', 'Set expiration date') }}
</NcActionCheckbox>
<NcActionInput v-if="hasExpirationDate"
ref="expireDate"
:is-native-picker="true"
:hide-label="true"
:class="{ error: errors.expireDate}"
:disabled="saving"
:value="new Date(share.expireDate)"
type="date"
:min="dateTomorrow"
:max="dateMaxEnforced"
@input="onExpirationChange">
{{ t('files_sharing', 'Enter a date') }}
</NcActionInput>

<!-- note -->
<template v-if="canHaveNote">
<NcActionCheckbox :checked.sync="hasNote"
:disabled="saving"
@uncheck="queueUpdate('note')">
{{ t('files_sharing', 'Note to recipient') }}
</NcActionCheckbox>
<NcActionTextEditable v-if="hasNote"
ref="note"
:class="{ error: errors.note}"
:disabled="saving"
:value="share.newNote || share.note"
icon="icon-edit"
@update:value="onNoteChange"
@submit="onNoteSubmit" />
</template>
<div class="sharing-entry__summary" @click.prevent="toggleQuickShareSelect">
<component :is="share.shareWithLink ? 'a' : 'div'"
:title="tooltip"
:aria-label="tooltip"
:href="share.shareWithLink"
class="sharing-entry__desc">
<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{
share.shareWithDisplayNameUnique }})</span></span>
<p v-if="hasStatus">
<span>{{ share.status.icon || '' }}</span>
<span>{{ share.status.message || '' }}</span>
</p>
</component>
<QuickShareSelect :share="share"
:file-info="fileInfo"
:toggle="showDropdown"
@open-sharing-details="openShareDetailsForCustomSettings(share)" />
</div>
<NcButton class="sharing-entry__action"
:aria-label="t('files_sharing', 'Open Sharing Details')"
type="tertiary-no-background"
@click="openSharingDetails(share)">
<template #icon>
<DotsHorizontalIcon :size="20" />
</template>

<NcActionButton v-if="share.canDelete"
icon="icon-close"
:disabled="saving"
@click.prevent="onDelete">
{{ t('files_sharing', 'Unshare') }}
</NcActionButton>
</NcActions>
</NcButton>
</li>
</template>

<script>
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
import SharesMixin from '../mixins/SharesMixin.js'
import ShareDetails from '../mixins/ShareDetails.js'
export default {
name: 'SharingEntry',
components: {
NcActions,
NcActionButton,
NcActionCheckbox,
NcActionInput,
NcActionTextEditable,
NcButton,
NcAvatar,
DotsHorizontalIcon,
NcSelect,
QuickShareSelect,
},
mixins: [SharesMixin],
mixins: [SharesMixin, ShareDetails],
data() {
return {
showDropdown: false,
permissionsEdit: OC.PERMISSION_UPDATE,
permissionsCreate: OC.PERMISSION_CREATE,
permissionsDelete: OC.PERMISSION_DELETE,
Expand Down Expand Up @@ -205,76 +128,6 @@ export default {
}
return null
},
canHaveNote() {
return !this.isRemote
},
isRemote() {
return this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE
|| this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP
},
/**
* Can the sharer set whether the sharee can edit the file ?
*
* @return {boolean}
*/
canSetEdit() {
// If the owner revoked the permission after the resharer granted it
// the share still has the permission, and the resharer is still
// allowed to revoke it too (but not to grant it again).
return (this.fileInfo.sharePermissions & OC.PERMISSION_UPDATE) || this.canEdit
},
/**
* Can the sharer set whether the sharee can create the file ?
*
* @return {boolean}
*/
canSetCreate() {
// If the owner revoked the permission after the resharer granted it
// the share still has the permission, and the resharer is still
// allowed to revoke it too (but not to grant it again).
return (this.fileInfo.sharePermissions & OC.PERMISSION_CREATE) || this.canCreate
},
/**
* Can the sharer set whether the sharee can delete the file ?
*
* @return {boolean}
*/
canSetDelete() {
// If the owner revoked the permission after the resharer granted it
// the share still has the permission, and the resharer is still
// allowed to revoke it too (but not to grant it again).
return (this.fileInfo.sharePermissions & OC.PERMISSION_DELETE) || this.canDelete
},
/**
* Can the sharer set whether the sharee can reshare the file ?
*
* @return {boolean}
*/
canSetReshare() {
// If the owner revoked the permission after the resharer granted it
// the share still has the permission, and the resharer is still
// allowed to revoke it too (but not to grant it again).
return (this.fileInfo.sharePermissions & OC.PERMISSION_SHARE) || this.canReshare
},
/**
* Can the sharer set whether the sharee can download the file ?
*
* @return {boolean}
*/
canSetDownload() {
// If the owner revoked the permission after the resharer granted it
// the share still has the permission, and the resharer is still
// allowed to revoke it too (but not to grant it again).
return (this.fileInfo.canDownload() || this.canDownload)
},
/**
* Can the sharee edit the shared file ?
*/
Expand Down Expand Up @@ -449,13 +302,15 @@ export default {
}
this.queueUpdate('permissions', 'attributes')
},
/**
* Save potential changed data on menu close
*/
onMenuClose() {
this.onNoteSubmit()
},
toggleQuickShareSelect() {
this.showDropdown = !this.showDropdown
},
},
}
</script>
Expand All @@ -465,21 +320,34 @@ export default {
display: flex;
align-items: center;
height: 44px;
&__desc {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px;
padding-bottom: 0;
line-height: 1.2em;
p {
color: var(--color-text-maxcontrast);
}
&-unique {
color: var(--color-text-maxcontrast);
}
}
&__actions {
margin-left: auto;
}
&__summary {
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
}
</style>
Loading

0 comments on commit eff2afe

Please sign in to comment.