Move buttons to separate component (#380)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
@ -1,33 +1,29 @@
|
||||
<template>
|
||||
<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">
|
||||
<p>
|
||||
Share with a link:
|
||||
</p>
|
||||
<card title="Share links" class="is-fullwidth" :padding="false">
|
||||
<div class="sharables-list">
|
||||
<div class="p-4">
|
||||
<p>Share with a link:</p>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select v-model="selectedRight">
|
||||
<option :value="rights.READ">Read only</option>
|
||||
<option :value="rights.READ_WRITE">Read & write</option>
|
||||
<option :value="rights.READ_WRITE">
|
||||
Read & write
|
||||
</option>
|
||||
<option :value="rights.ADMIN">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit">
|
||||
Share
|
||||
</button>
|
||||
<x-button @click="add"> Share</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<table class="table is-striped is-hoverable is-fullwidth link-share-list" v-if="linkShares.length > 0">
|
||||
</div>
|
||||
<table
|
||||
class="table is-striped is-hoverable is-fullwidth link-share-list"
|
||||
v-if="linkShares.length > 0"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Link</th>
|
||||
@ -41,14 +37,23 @@
|
||||
<td>
|
||||
<div class="field has-addons no-input-mobile">
|
||||
<div class="control">
|
||||
<input :value="getShareLink(s.hash)" class="input" readonly type="text"/>
|
||||
<input
|
||||
:value="getShareLink(s.hash)"
|
||||
class="input"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a @click="copy(getShareLink(s.hash))" class="button is-primary has-no-shadow" v-tooltip="'Copy to clipboard'">
|
||||
<span class="icon">
|
||||
<icon icon="paste"/>
|
||||
</span>
|
||||
</a>
|
||||
<x-button
|
||||
@click="copy(getShareLink(s.hash))"
|
||||
:shadow="false"
|
||||
v-tooltip="'Copy to clipboard'"
|
||||
>
|
||||
<span class="icon">
|
||||
<icon icon="paste"/>
|
||||
</span>
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -57,30 +62,35 @@
|
||||
</td>
|
||||
<td class="type">
|
||||
<template v-if="s.right === rights.ADMIN">
|
||||
<span class="icon is-small">
|
||||
<icon icon="lock"/>
|
||||
</span>
|
||||
<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>
|
||||
<span class="icon is-small">
|
||||
<icon icon="pen"/>
|
||||
</span>
|
||||
Write
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon is-small">
|
||||
<icon icon="users"/>
|
||||
</span>
|
||||
<span class="icon is-small">
|
||||
<icon icon="users"/>
|
||||
</span>
|
||||
Read-only
|
||||
</template>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}" class="button is-danger icon-only">
|
||||
<span class="icon">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</button>
|
||||
<x-button
|
||||
@click="
|
||||
() => {
|
||||
linkIdToDelete = s.id
|
||||
showDeleteModal = true
|
||||
}
|
||||
"
|
||||
class="is-danger"
|
||||
icon="trash-alt"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -90,13 +100,17 @@
|
||||
<modal
|
||||
@close="showDeleteModal = false"
|
||||
@submit="remove()"
|
||||
v-if="showDeleteModal">
|
||||
v-if="showDeleteModal"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -135,12 +149,13 @@ export default {
|
||||
this.load()
|
||||
},
|
||||
watch: {
|
||||
listId() { // watch it
|
||||
listId() {
|
||||
// watch it
|
||||
this.load()
|
||||
},
|
||||
},
|
||||
computed: mapState({
|
||||
frontendUrl: state => state.config.frontendUrl,
|
||||
frontendUrl: (state) => state.config.frontendUrl,
|
||||
}),
|
||||
methods: {
|
||||
load() {
|
||||
@ -149,34 +164,49 @@ export default {
|
||||
return
|
||||
}
|
||||
|
||||
this.linkShareService.getAll({listId: this.listId})
|
||||
.then(r => {
|
||||
this.linkShareService
|
||||
.getAll({listId: this.listId})
|
||||
.then((r) => {
|
||||
this.linkShares = r
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
add() {
|
||||
let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
|
||||
this.linkShareService.create(newLinkShare)
|
||||
let newLinkShare = new LinkShareModel({
|
||||
right: this.selectedRight,
|
||||
listId: this.listId,
|
||||
})
|
||||
this.linkShareService
|
||||
.create(newLinkShare)
|
||||
.then(() => {
|
||||
this.selectedRight = rights.READ
|
||||
this.success({message: 'The link share was successfully created'}, this)
|
||||
this.success(
|
||||
{message: 'The link share was successfully created'},
|
||||
this
|
||||
)
|
||||
this.load()
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
remove() {
|
||||
let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
|
||||
this.linkShareService.delete(linkshare)
|
||||
let linkshare = new LinkShareModel({
|
||||
id: this.linkIdToDelete,
|
||||
listId: this.listId,
|
||||
})
|
||||
this.linkShareService
|
||||
.delete(linkshare)
|
||||
.then(() => {
|
||||
this.success({message: 'The link share was successfully deleted'}, this)
|
||||
this.success(
|
||||
{message: 'The link share was successfully deleted'},
|
||||
this
|
||||
)
|
||||
this.load()
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<div class="card is-fullwidth has-overflow">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Shared with these {{ shareType }}s
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content" v-if="userIsAdmin">
|
||||
<card class="is-fullwidth has-overflow" :title="`Shared with these ${shareType}s`" :padding="false">
|
||||
<div class="p-4" v-if="userIsAdmin">
|
||||
<div class="field has-addons">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
|
||||
<p
|
||||
class="control is-expanded"
|
||||
v-bind:class="{ 'is-loading': searchService.loading }"
|
||||
>
|
||||
<multiselect
|
||||
:loading="searchService.loading"
|
||||
placeholder="Type to search..."
|
||||
@ -18,84 +16,114 @@
|
||||
/>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary" @click="add()">
|
||||
Share
|
||||
</button>
|
||||
<x-button @click="add()"> Share </x-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<tbody>
|
||||
<tr :key="s.id" v-for="s in sharables">
|
||||
<template v-if="shareType === 'user'">
|
||||
<td>{{ s.getDisplayName() }}</td>
|
||||
<td>
|
||||
<template v-if="s.id === userInfo.id">
|
||||
<b class="is-success">You</b>
|
||||
<tr :key="s.id" v-for="s in sharables">
|
||||
<template v-if="shareType === 'user'">
|
||||
<td>{{ s.getDisplayName() }}</td>
|
||||
<td>
|
||||
<template v-if="s.id === userInfo.id">
|
||||
<b class="is-success">You</b>
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
<template v-if="shareType === 'team'">
|
||||
<td>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'teams.edit',
|
||||
params: { id: s.id },
|
||||
}"
|
||||
>
|
||||
{{ s.name }}
|
||||
</router-link>
|
||||
</td>
|
||||
</template>
|
||||
<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>
|
||||
</template>
|
||||
<template v-if="shareType === 'team'">
|
||||
<td>
|
||||
<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
|
||||
{{ s.name }}
|
||||
</router-link>
|
||||
<td class="actions" v-if="userIsAdmin">
|
||||
<div class="select">
|
||||
<select
|
||||
@change="toggleType(s)"
|
||||
class="button mr-2"
|
||||
v-model="selectedRight[s.id]"
|
||||
>
|
||||
<option
|
||||
:selected="s.right === rights.READ"
|
||||
:value="rights.READ"
|
||||
>
|
||||
Read only
|
||||
</option>
|
||||
<option
|
||||
:selected="s.right === rights.READ_WRITE"
|
||||
:value="rights.READ_WRITE"
|
||||
>
|
||||
Read & write
|
||||
</option>
|
||||
<option
|
||||
:selected="s.right === rights.ADMIN"
|
||||
:value="rights.ADMIN"
|
||||
>
|
||||
Admin
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<x-button
|
||||
@click="
|
||||
() => {
|
||||
sharable = s
|
||||
showDeleteModal = true
|
||||
}
|
||||
"
|
||||
class="is-danger"
|
||||
icon="trash-alt"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<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" v-if="userIsAdmin">
|
||||
<div class="select">
|
||||
<select @change="toggleType(s)" class="button buttonright" v-model="selectedRight[s.id]">
|
||||
<option :selected="s.right === rights.READ" :value="rights.READ">Read only</option>
|
||||
<option :selected="s.right === rights.READ_WRITE" :value="rights.READ_WRITE">Read &
|
||||
write
|
||||
</option>
|
||||
<option :selected="s.right === rights.ADMIN" :value="rights.ADMIN">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<button @click="() => {sharable = s; showDeleteModal = true}"
|
||||
class="button is-danger icon-only">
|
||||
<span class="icon">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<modal
|
||||
@close="showDeleteModal = false"
|
||||
@submit="deleteSharable()"
|
||||
v-if="showDeleteModal">
|
||||
<span slot="header">Remove a {{ shareType }} from the {{ typeString }}</span>
|
||||
<p slot="text">Are you sure you want to remove this {{ shareType }} from the {{ typeString }}?<br/>
|
||||
<b>This CANNOT BE UNDONE!</b></p>
|
||||
v-if="showDeleteModal"
|
||||
>
|
||||
<span slot="header"
|
||||
>Remove a {{ shareType }} from the {{ typeString }}</span
|
||||
>
|
||||
<p slot="text">
|
||||
Are you sure you want to remove this {{ shareType }} from the
|
||||
{{ typeString }}?<br />
|
||||
<b>This CANNOT BE UNDONE!</b>
|
||||
</p>
|
||||
</modal>
|
||||
</div>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import UserNamespaceService from '../../services/userNamespace'
|
||||
import UserNamespaceModel from '../../models/userNamespace'
|
||||
@ -155,10 +183,9 @@ export default {
|
||||
Multiselect,
|
||||
},
|
||||
computed: mapState({
|
||||
userInfo: state => state.auth.info,
|
||||
userInfo: (state) => state.auth.info,
|
||||
}),
|
||||
created() {
|
||||
|
||||
if (this.shareType === 'user') {
|
||||
this.searchService = new UserService()
|
||||
this.sharable = new UserModel()
|
||||
@ -167,11 +194,13 @@ export default {
|
||||
if (this.type === 'list') {
|
||||
this.typeString = `list`
|
||||
this.stuffService = new UserListService()
|
||||
this.stuffModel = new UserListModel({listId: this.id})
|
||||
this.stuffModel = new UserListModel({ listId: this.id })
|
||||
} else if (this.type === 'namespace') {
|
||||
this.typeString = `namespace`
|
||||
this.stuffService = new UserNamespaceService()
|
||||
this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
|
||||
this.stuffModel = new UserNamespaceModel({
|
||||
namespaceId: this.id,
|
||||
})
|
||||
} else {
|
||||
throw new Error('Unknown type: ' + this.type)
|
||||
}
|
||||
@ -183,11 +212,13 @@ export default {
|
||||
if (this.type === 'list') {
|
||||
this.typeString = `list`
|
||||
this.stuffService = new TeamListService()
|
||||
this.stuffModel = new TeamListModel({listId: this.id})
|
||||
this.stuffModel = new TeamListModel({ listId: this.id })
|
||||
} else if (this.type === 'namespace') {
|
||||
this.typeString = `namespace`
|
||||
this.stuffService = new TeamNamespaceService()
|
||||
this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
|
||||
this.stuffModel = new TeamNamespaceModel({
|
||||
namespaceId: this.id,
|
||||
})
|
||||
} else {
|
||||
throw new Error('Unknown type: ' + this.type)
|
||||
}
|
||||
@ -199,36 +230,51 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.stuffService.getAll(this.stuffModel)
|
||||
.then(r => {
|
||||
this.stuffService
|
||||
.getAll(this.stuffModel)
|
||||
.then((r) => {
|
||||
this.$set(this, 'sharables', r)
|
||||
r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
|
||||
r.forEach((s) =>
|
||||
this.$set(this.selectedRight, s.id, s.right)
|
||||
)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteSharable() {
|
||||
|
||||
if (this.shareType === 'user') {
|
||||
this.stuffModel.userId = this.sharable.username
|
||||
} else if (this.shareType === 'team') {
|
||||
this.stuffModel.teamId = this.sharable.id
|
||||
}
|
||||
this.stuffService.delete(this.stuffModel)
|
||||
this.stuffService
|
||||
.delete(this.stuffModel)
|
||||
.then(() => {
|
||||
this.showDeleteModal = false
|
||||
for (const i in this.sharables) {
|
||||
if (
|
||||
(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
|
||||
(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
|
||||
(this.sharables[i].id === this.stuffModel.userId &&
|
||||
this.shareType === 'user') ||
|
||||
(this.sharables[i].id === this.stuffModel.teamId &&
|
||||
this.shareType === 'team')
|
||||
) {
|
||||
this.sharables.splice(i, 1)
|
||||
}
|
||||
}
|
||||
this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
|
||||
this.success(
|
||||
{
|
||||
message:
|
||||
'The ' +
|
||||
this.shareType +
|
||||
' was successfully deleted from the ' +
|
||||
this.typeString +
|
||||
'.',
|
||||
},
|
||||
this
|
||||
)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
@ -247,17 +293,27 @@ export default {
|
||||
this.stuffModel.teamId = this.sharable.id
|
||||
}
|
||||
|
||||
this.stuffService.create(this.stuffModel)
|
||||
this.stuffService
|
||||
.create(this.stuffModel)
|
||||
.then(() => {
|
||||
this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
|
||||
this.success(
|
||||
{
|
||||
message:
|
||||
'The ' +
|
||||
this.shareType +
|
||||
' was successfully added.',
|
||||
},
|
||||
this
|
||||
)
|
||||
this.load()
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
toggleType(sharable) {
|
||||
if (this.selectedRight[sharable.id] !== rights.ADMIN &&
|
||||
if (
|
||||
this.selectedRight[sharable.id] !== rights.ADMIN &&
|
||||
this.selectedRight[sharable.id] !== rights.READ &&
|
||||
this.selectedRight[sharable.id] !== rights.READ_WRITE
|
||||
) {
|
||||
@ -265,26 +321,37 @@ export default {
|
||||
}
|
||||
this.stuffModel.right = this.selectedRight[sharable.id]
|
||||
|
||||
|
||||
if (this.shareType === 'user') {
|
||||
this.stuffModel.userId = sharable.username
|
||||
} else if (this.shareType === 'team') {
|
||||
this.stuffModel.teamId = sharable.id
|
||||
}
|
||||
|
||||
this.stuffService.update(this.stuffModel)
|
||||
.then(r => {
|
||||
this.stuffService
|
||||
.update(this.stuffModel)
|
||||
.then((r) => {
|
||||
for (const i in this.sharables) {
|
||||
if (
|
||||
(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
|
||||
(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
|
||||
(this.sharables[i].username ===
|
||||
this.stuffModel.userId &&
|
||||
this.shareType === 'user') ||
|
||||
(this.sharables[i].id === this.stuffModel.teamId &&
|
||||
this.shareType === 'team')
|
||||
) {
|
||||
this.$set(this.sharables[i], 'right', r.right)
|
||||
}
|
||||
}
|
||||
this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
|
||||
this.success(
|
||||
{
|
||||
message:
|
||||
'The ' +
|
||||
this.shareType +
|
||||
' right was successfully updated.',
|
||||
},
|
||||
this
|
||||
)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
@ -294,11 +361,12 @@ export default {
|
||||
return
|
||||
}
|
||||
|
||||
this.searchService.getAll({}, {s: query})
|
||||
.then(response => {
|
||||
this.searchService
|
||||
.getAll({}, { s: query })
|
||||
.then((response) => {
|
||||
this.$set(this, 'found', response)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user