2019-09-09 17:55:43 +00:00
|
|
|
<template>
|
2019-11-03 12:44:40 +00:00
|
|
|
<div class="card is-fullwidth">
|
|
|
|
<header class="card-header">
|
|
|
|
<p class="card-header-title">
|
|
|
|
Share links
|
|
|
|
</p>
|
|
|
|
</header>
|
|
|
|
<div class="card-content content sharables-list">
|
|
|
|
<form @submit.prevent="add()" class="add-form">
|
2020-02-09 16:54:02 +00:00
|
|
|
<p>
|
|
|
|
Share with a link:
|
|
|
|
</p>
|
|
|
|
<div class="field has-addons">
|
2019-11-03 12:44:40 +00:00
|
|
|
<div class="control">
|
|
|
|
<div class="select">
|
2020-02-09 16:54:02 +00:00
|
|
|
<select v-model="selectedRight">
|
2019-11-03 12:44:40 +00:00
|
|
|
<option :value="rights.READ">Read only</option>
|
|
|
|
<option :value="rights.READ_WRITE">Read & write</option>
|
|
|
|
<option :value="rights.ADMIN">Admin</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<button type="submit" class="button is-success">
|
2020-02-09 16:54:02 +00:00
|
|
|
Share
|
2019-11-03 12:44:40 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
2020-02-09 16:54:02 +00:00
|
|
|
<table class="table is-striped is-hoverable is-fullwidth link-share-list">
|
2019-11-03 12:44:40 +00:00
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<th>Link</th>
|
|
|
|
<th>Shared by</th>
|
|
|
|
<th>Right</th>
|
|
|
|
<th>Delete</th>
|
|
|
|
</tr>
|
|
|
|
<template v-if="linkShares.length > 0">
|
|
|
|
<tr v-for="s in linkShares" :key="s.id">
|
|
|
|
<td>
|
|
|
|
<div class="field has-addons">
|
|
|
|
<div class="control">
|
|
|
|
<input class="input" type="text" :value="getShareLink(s.hash)" readonly/>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<a class="button is-success noshadow" @click="copy(getShareLink(s.hash))">
|
2020-02-09 16:54:02 +00:00
|
|
|
<span class="icon">
|
2019-11-03 12:44:40 +00:00
|
|
|
<icon icon="paste"/>
|
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td>
|
2020-04-12 21:54:46 +00:00
|
|
|
{{ s.sharedBy.username }}
|
2019-11-03 12:44:40 +00:00
|
|
|
</td>
|
|
|
|
<td class="type">
|
|
|
|
<template v-if="s.right === rights.ADMIN">
|
|
|
|
<span class="icon is-small">
|
|
|
|
<icon icon="lock"/>
|
|
|
|
</span>
|
|
|
|
Admin
|
|
|
|
</template>
|
|
|
|
<template v-else-if="s.right === rights.READ_WRITE">
|
|
|
|
<span class="icon is-small">
|
|
|
|
<icon icon="pen"/>
|
|
|
|
</span>
|
|
|
|
Write
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<span class="icon is-small">
|
|
|
|
<icon icon="users"/>
|
|
|
|
</span>
|
|
|
|
Read-only
|
|
|
|
</template>
|
|
|
|
</td>
|
|
|
|
<td class="actions">
|
2020-04-17 10:19:53 +00:00
|
|
|
<button @click="linkIdToDelete = s.id; showDeleteModal = true" class="button is-danger icon-only">
|
2020-02-09 16:54:02 +00:00
|
|
|
<span class="icon">
|
2019-11-03 12:44:40 +00:00
|
|
|
<icon icon="trash-alt"/>
|
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</template>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
2019-09-09 17:55:43 +00:00
|
|
|
|
2019-11-03 12:44:40 +00:00
|
|
|
<modal
|
|
|
|
v-if="showDeleteModal"
|
|
|
|
@close="showDeleteModal = false"
|
|
|
|
@submit="remove()">
|
|
|
|
<span slot="header">Remove a link share</span>
|
|
|
|
<p slot="text">Are you sure you want to remove this link share?<br/>
|
|
|
|
It will no longer be possible to access this list with this link share.<br/>
|
|
|
|
<b>This CANNOT BE UNDONE!</b></p>
|
|
|
|
</modal>
|
|
|
|
</div>
|
2019-09-09 17:55:43 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-11-03 12:44:40 +00:00
|
|
|
import rights from '../../models/rights'
|
2019-09-09 17:55:43 +00:00
|
|
|
|
2019-11-03 12:44:40 +00:00
|
|
|
import LinkShareService from '../../services/linkShare'
|
|
|
|
import LinkShareModel from '../../models/linkShare'
|
2019-09-09 17:55:43 +00:00
|
|
|
|
2019-11-03 12:44:40 +00:00
|
|
|
import copy from 'copy-to-clipboard'
|
2019-09-09 17:55:43 +00:00
|
|
|
|
2019-11-03 12:44:40 +00:00
|
|
|
export default {
|
|
|
|
name: 'linkSharing',
|
|
|
|
props: {
|
2020-04-17 10:19:53 +00:00
|
|
|
listId: {
|
2019-11-03 12:44:40 +00:00
|
|
|
default: 0,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
linkShares: [],
|
|
|
|
linkShareService: LinkShareService,
|
|
|
|
newLinkShare: LinkShareModel,
|
|
|
|
rights: rights,
|
|
|
|
selectedRight: rights.READ,
|
|
|
|
showDeleteModal: false,
|
2020-04-17 10:19:53 +00:00
|
|
|
linkIdToDelete: 0,
|
2019-11-03 12:44:40 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
beforeMount() {
|
|
|
|
this.linkShareService = new LinkShareService()
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.linkShareService = new LinkShareService()
|
|
|
|
this.load()
|
|
|
|
},
|
|
|
|
watch: {
|
2020-04-17 10:19:53 +00:00
|
|
|
listId: () => { // watch it
|
2019-11-03 12:44:40 +00:00
|
|
|
this.load()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
load() {
|
2020-04-17 10:19:53 +00:00
|
|
|
// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
|
|
|
|
if (this.listId === 0) {
|
2019-11-03 12:44:40 +00:00
|
|
|
return
|
|
|
|
}
|
2019-09-09 17:55:43 +00:00
|
|
|
|
2020-04-17 10:19:53 +00:00
|
|
|
this.linkShareService.getAll({listId: this.listId})
|
2019-11-03 12:44:40 +00:00
|
|
|
.then(r => {
|
|
|
|
this.linkShares = r
|
|
|
|
})
|
|
|
|
.catch(e => {
|
2020-01-30 21:47:08 +00:00
|
|
|
this.error(e, this)
|
2019-11-03 12:44:40 +00:00
|
|
|
})
|
|
|
|
},
|
|
|
|
add() {
|
2020-04-17 10:19:53 +00:00
|
|
|
let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
|
2019-11-03 12:44:40 +00:00
|
|
|
this.linkShareService.create(newLinkShare)
|
|
|
|
.then(() => {
|
|
|
|
this.selectedRight = rights.READ
|
2020-01-30 21:47:08 +00:00
|
|
|
this.success({message: 'The link share was successfully created'}, this)
|
2019-11-03 12:44:40 +00:00
|
|
|
this.load()
|
|
|
|
})
|
|
|
|
.catch(e => {
|
2020-01-30 21:47:08 +00:00
|
|
|
this.error(e, this)
|
2019-11-03 12:44:40 +00:00
|
|
|
})
|
|
|
|
},
|
|
|
|
remove() {
|
2020-04-17 10:19:53 +00:00
|
|
|
let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
|
2019-11-03 12:44:40 +00:00
|
|
|
this.linkShareService.delete(linkshare)
|
|
|
|
.then(() => {
|
2020-01-30 21:47:08 +00:00
|
|
|
this.success({message: 'The link share was successfully deleted'}, this)
|
2019-11-03 12:44:40 +00:00
|
|
|
this.load()
|
|
|
|
})
|
|
|
|
.catch(e => {
|
2020-01-30 21:47:08 +00:00
|
|
|
this.error(e, this)
|
2019-11-03 12:44:40 +00:00
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
this.showDeleteModal = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
copy(text) {
|
|
|
|
copy(text)
|
|
|
|
},
|
|
|
|
getShareLink(hash) {
|
|
|
|
return this.$config.frontend_url + 'share/' + hash + '/auth'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
2019-09-09 17:55:43 +00:00
|
|
|
</script>
|