-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
41c62d4
commit 0acaf89
Showing
14 changed files
with
352 additions
and
464 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
240 changes: 240 additions & 0 deletions
240
packages/web-app-files/src/components/SideBar/Shares/PublicLinks/DetailsAndEdit.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,240 @@ | ||
| <template> | ||
| <div class="oc-flex oc-flex-between oc-flex-middle oc-pl-s"> | ||
| <div v-if="canEdit"> | ||
| <oc-button appearance="raw" gap-size="none"> | ||
| <span v-text="visibilityHint" /> | ||
| <oc-icon name="arrow-down-s" /> | ||
| </oc-button> | ||
| <!-- oc-drop goes here --> | ||
| </div> | ||
| <p v-else class="oc-my-rm" v-text="visibilityHint" /> | ||
|
|
||
| <div :class="{ 'oc-pr-s': !canEdit }"> | ||
| <oc-button | ||
| v-if="link.indirect" | ||
| v-oc-tooltip="viaTooltip" | ||
| type="router-link" | ||
| class="oc-files-file-link-via" | ||
| appearance="raw" | ||
| :to="viaRouterParams" | ||
| > | ||
| <oc-icon name="folder-shared" fill-type="line" /> | ||
| </oc-button> | ||
| <oc-icon | ||
| v-if="link.password" | ||
| name="lock-password" | ||
| fill-type="line" | ||
| :aria-label="passwortProtectionTooltip" | ||
| v-oc-tooltip="passwortProtectionTooltip" | ||
| /> | ||
| <oc-icon | ||
| v-if="link.expiration" | ||
| v-oc-tooltip="expirationDateTooltip" | ||
| class="oc-files-public-link-expires" | ||
| :data-testid="`files-link-id-${link.id}-expiration-date`" | ||
| :aria-label="expirationDateTooltip" | ||
| name="calendar" | ||
| fill-type="line" | ||
| /> | ||
| <div v-if="canEdit"> | ||
| <oc-button appearance="raw"> | ||
| <oc-icon name="more-2" /> | ||
| </oc-button> | ||
| <!-- | ||
| <oc-drop> | ||
| If has expiryDate | ||
| - edit expiryDate | ||
| - if expiryDate is not enforced: | ||
| remove expiryDate | ||
| Else | ||
| - add expiryDate | ||
| If passwordprotected | ||
| - edit password | ||
| - if passwordprotected is not enforced: | ||
| remove passwordprotected | ||
| Else | ||
| - add passwordprotected | ||
| Remove linkShare | ||
| </oc-drop> | ||
| --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { mapActions, mapGetters, mapMutations } from 'vuex' | ||
| import { basename } from 'path' | ||
| import Mixins from '../../../../mixins' | ||
| import { createLocationSpaces, isLocationSpacesActive } from '../../../../router' | ||
| import { DateTime } from 'luxon' | ||
| import { linkRoleDescriptions } from '../../../../helpers/share' | ||
| export default { | ||
| name: 'LinkActions', | ||
| mixins: [Mixins], | ||
| inject: ['currentSpace'], | ||
| props: { | ||
| link: { | ||
| type: Object, | ||
| required: true | ||
| } | ||
| }, | ||
| computed: { | ||
| ...mapGetters('Files', ['highlightedFile']), | ||
| canEdit() { | ||
| console.log('link', this.link) | ||
| // TODO: Check if user is allowed to edit links (e.g. spaces shares) | ||
| console.log(this.highlightedFile, this.currentSpace) | ||
| return false | ||
| }, | ||
| visibilityHint() { | ||
| return linkRoleDescriptions[parseInt(this.link.permissions)] | ||
| }, | ||
| editButtonLabel() { | ||
| return this.$gettext('Edit public link') | ||
| }, | ||
| viaRouterParams() { | ||
| const viaPath = this.link.path | ||
| const locationName = isLocationSpacesActive(this.$router, 'files-spaces-project') | ||
| ? 'files-spaces-project' | ||
| : 'files-spaces-personal-home' | ||
| return createLocationSpaces(locationName, { | ||
| params: { | ||
| item: viaPath || '/', | ||
| storageId: this.$route.params.storageId | ||
| }, | ||
| query: { | ||
| scrollTo: basename(viaPath) | ||
| } | ||
| }) | ||
| }, | ||
| expirationDate() { | ||
| return DateTime.fromISO(this.link.expiration) | ||
| .setLocale(this.$language.current) | ||
| .endOf('day') | ||
| .toLocaleString(DateTime.DATETIME_FULL) | ||
| }, | ||
| expirationDateRelative() { | ||
| return DateTime.fromISO(this.link.expiration) | ||
| .setLocale(this.$language.current) | ||
| .endOf('day') | ||
| .toRelative() | ||
| }, | ||
| expirationDateTooltip() { | ||
| return this.$gettextInterpolate( | ||
| this.$gettext('Expires in %{timeToExpiry} (%{expiryDate})'), | ||
| { timeToExpiry: this.expirationDateRelative, expiryDate: this.expirationDate }, | ||
| true | ||
| ) | ||
| }, | ||
| viaTooltip() { | ||
| if (!this.link.indirect) { | ||
| return null | ||
| } | ||
| return this.$gettextInterpolate( | ||
| this.$gettext('Navigate to the parent (%{folderName})'), | ||
| { folderName: basename(this.link.path) }, | ||
| true | ||
| ) | ||
| }, | ||
| passwortProtectionTooltip() { | ||
| return this.$gettext('This link is password-protected') | ||
| }, | ||
| deleteButtonLabel() { | ||
| return this.$gettext('Delete public link') | ||
| } | ||
| }, | ||
| methods: { | ||
| ...mapActions(['showMessage', 'createModal', 'hideModal']), | ||
| ...mapActions('Files', ['removeLink', 'updateLink']), | ||
| ...mapMutations('Files', ['TRIGGER_PUBLIC_LINK_EDIT']), | ||
| $_removeLink() { | ||
| const modal = { | ||
| variation: 'danger', | ||
| title: this.$gettext('Delete public link'), | ||
| message: this.$gettext( | ||
| 'Are you sure you want to delete this link? Recreating the same link again is not possible.' | ||
| ), | ||
| cancelText: this.$gettext('Cancel'), | ||
| confirmText: this.$gettext('Delete'), | ||
| onCancel: this.hideModal, | ||
| onConfirm: () => | ||
| this.deleteLink({ | ||
| client: this.$client, | ||
| share: this.link, | ||
| resource: this.highlightedFile | ||
| }) | ||
| } | ||
| this.createModal(modal) | ||
| }, | ||
| $_updateLink() { | ||
| this.saving = true | ||
| const expireDate = DateTime.fromJSDate(this.expireDate) | ||
| .setLocale(this.$language.current) | ||
| .endOf('day') | ||
| const params = { | ||
| expireDate: expireDate.isValid ? expireDate.toFormat("yyyy-MM-dd'T'HH:mm:ssZZZ") : '', | ||
| permissions: this.selectedRole.bitmask(false), | ||
| name: this.name | ||
| } | ||
| if (this.password !== null) { | ||
| params.password = this.password | ||
| } | ||
| this.updateLink({ | ||
| id: this.publicLinkInEdit.id, | ||
| client: this.$client, | ||
| $gettext: this.$gettext, | ||
| params | ||
| }) | ||
| .then(() => { | ||
| this.saving = false | ||
| this.errors = false | ||
| this.$_closeForm() | ||
| }) | ||
| .catch((e) => { | ||
| this.saving = false | ||
| this.errors = e | ||
| }) | ||
| }, | ||
| deleteLink({ client, share, resource }) { | ||
| let storageId | ||
| if (this.highlightedFile.type === 'space') { | ||
| storageId = this.highlightedFile.id | ||
| } else if (this.$route.params.storageId) { | ||
| storageId = this.$route.params.storageId | ||
| } | ||
| this.hideModal() | ||
| this.removeLink({ client, share, resource, storageId }) | ||
| this.showMessage({ | ||
| title: this.$gettext('Public link was deleted successfully') | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.