ami/tl-vikunja
1
0
Fork 0
Code Activity

Move buttons to separate component (#380)

Browse Source 
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
2021-01-17 17:57:57 +00:00
parent f3e0b79b26
commit 2aceca54ca
61 changed files with 2315 additions and 1825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/sharing/linkSharing.vue
View File

@ -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(() => {