Move sharing to popup
This commit is contained in:
parent
b26f8e48b7
commit
003298370e
|
@ -17,6 +17,11 @@
|
||||||
class="dropdown-item">
|
class="dropdown-item">
|
||||||
Set list background
|
Set list background
|
||||||
</router-link>
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
:to="{ name: 'list.list.settings.share', params: { id: currentList.id } }"
|
||||||
|
class="dropdown-item">
|
||||||
|
Share this list
|
||||||
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'list.list.settings.duplicate', params: { id: currentList.id } }"
|
:to="{ name: 'list.list.settings.duplicate', params: { id: currentList.id } }"
|
||||||
class="dropdown-item">
|
class="dropdown-item">
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
|
||||||
|
<slot></slot>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'nothing'
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<card title="Share links" class="is-fullwidth" :padding="false">
|
<div>
|
||||||
|
<p class="has-text-weight-bold">Share Links</p>
|
||||||
<div class="sharables-list">
|
<div class="sharables-list">
|
||||||
<div class="p-4">
|
<div class="p-4">
|
||||||
<p>Share with a link:</p>
|
<p>Share with a link:</p>
|
||||||
|
@ -112,7 +113,7 @@
|
||||||
</p>
|
</p>
|
||||||
</modal>
|
</modal>
|
||||||
</transition>
|
</transition>
|
||||||
</card>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<card class="is-fullwidth has-overflow" :title="`Shared with these ${shareType}s`" :padding="false">
|
<div>
|
||||||
<div class="p-4" v-if="userIsAdmin">
|
<p class="has-text-weight-bold">Shared with these {{ shareType }}s</p>
|
||||||
|
<div v-if="userIsAdmin">
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
<p
|
<p
|
||||||
class="control is-expanded"
|
class="control is-expanded"
|
||||||
v-bind:class="{ 'is-loading': searchService.loading }"
|
:class="{ 'is-loading': searchService.loading }"
|
||||||
>
|
>
|
||||||
<multiselect
|
<multiselect
|
||||||
:loading="searchService.loading"
|
:loading="searchService.loading"
|
||||||
|
@ -20,7 +21,8 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table class="table is-striped is-hoverable is-fullwidth">
|
|
||||||
|
<table class="table is-striped is-hoverable is-fullwidth" v-if="sharables.length > 0">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr :key="s.id" v-for="s in sharables">
|
<tr :key="s.id" v-for="s in sharables">
|
||||||
<template v-if="shareType === 'user'">
|
<template v-if="shareType === 'user'">
|
||||||
|
@ -105,6 +107,10 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<nothing v-else>
|
||||||
|
Not shared with any {{ shareType }} yet.
|
||||||
|
</nothing>
|
||||||
|
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<modal
|
<modal
|
||||||
@close="showDeleteModal = false"
|
@close="showDeleteModal = false"
|
||||||
|
@ -121,7 +127,7 @@
|
||||||
</p>
|
</p>
|
||||||
</modal>
|
</modal>
|
||||||
</transition>
|
</transition>
|
||||||
</card>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -143,6 +149,7 @@ import TeamModel from '../../models/team'
|
||||||
|
|
||||||
import rights from '../../models/rights'
|
import rights from '../../models/rights'
|
||||||
import Multiselect from '@/components/input/multiselect'
|
import Multiselect from '@/components/input/multiselect'
|
||||||
|
import Nothing from '@/components/misc/nothing'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'userTeamShare',
|
name: 'userTeamShare',
|
||||||
|
@ -182,6 +189,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
Nothing,
|
||||||
Multiselect,
|
Multiselect,
|
||||||
},
|
},
|
||||||
computed: mapState({
|
computed: mapState({
|
||||||
|
|
|
@ -228,7 +228,7 @@ export default new Router({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/lists/:listId/settings/share',
|
path: '/lists/:listId/settings/share',
|
||||||
name: 'list.list.settings.edit',
|
name: 'list.list.settings.share',
|
||||||
component: ListSettingShare,
|
component: ListSettingShare,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
|
|
||||||
.field.has-addons .button {
|
.field.has-addons .button {
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input,
|
.input,
|
||||||
|
|
|
@ -5,54 +5,16 @@
|
||||||
It is not possible to create new or edit tasks or it.
|
It is not possible to create new or edit tasks or it.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<component
|
|
||||||
:id="list.id"
|
|
||||||
:is="manageUsersComponent"
|
|
||||||
:userIsAdmin="userIsAdmin"
|
|
||||||
shareType="user"
|
|
||||||
type="list"/>
|
|
||||||
<component
|
|
||||||
:id="list.id"
|
|
||||||
:is="manageTeamsComponent"
|
|
||||||
:userIsAdmin="userIsAdmin"
|
|
||||||
shareType="team"
|
|
||||||
type="list"/>
|
|
||||||
|
|
||||||
<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import manageSharing from '../../components/sharing/userTeam'
|
|
||||||
import LinkSharing from '../../components/sharing/linkSharing'
|
|
||||||
|
|
||||||
import Fancycheckbox from '../../components/input/fancycheckbox'
|
|
||||||
import ColorPicker from '../../components/input/colorPicker'
|
|
||||||
import NamespaceSearch from '../../components/namespace/namespace-search'
|
|
||||||
import LoadingComponent from '../../components/misc/loading'
|
|
||||||
import ErrorComponent from '../../components/misc/error'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EditList',
|
name: 'EditList',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
manageUsersComponent: '',
|
|
||||||
manageTeamsComponent: '',
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
NamespaceSearch,
|
|
||||||
ColorPicker,
|
|
||||||
Fancycheckbox,
|
|
||||||
LinkSharing,
|
|
||||||
manageSharing,
|
|
||||||
editor: () => ({
|
|
||||||
component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
|
|
||||||
loading: LoadingComponent,
|
|
||||||
error: ErrorComponent,
|
|
||||||
timeout: 60000,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -110,14 +110,6 @@ export default {
|
||||||
this.listDuplicateService = new ListDuplicateService()
|
this.listDuplicateService = new ListDuplicateService()
|
||||||
this.loadList()
|
this.loadList()
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
linkSharingEnabled() {
|
|
||||||
return this.$store.state.config.linkSharingEnabled
|
|
||||||
},
|
|
||||||
userIsAdmin() {
|
|
||||||
return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
loadList() {
|
loadList() {
|
||||||
const list = new ListModel({id: this.$route.params.listId})
|
const list = new ListModel({id: this.$route.params.listId})
|
||||||
|
@ -126,9 +118,6 @@ export default {
|
||||||
.then(r => {
|
.then(r => {
|
||||||
this.$set(this, 'list', r)
|
this.$set(this, 'list', r)
|
||||||
this.$store.commit(CURRENT_LIST, r)
|
this.$store.commit(CURRENT_LIST, r)
|
||||||
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
|
|
||||||
this.manageTeamsComponent = 'manageSharing'
|
|
||||||
this.manageUsersComponent = 'manageSharing'
|
|
||||||
this.setTitle(`Edit ${this.list.title}`)
|
this.setTitle(`Edit ${this.list.title}`)
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
|
|
|
@ -1,16 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<create-edit>
|
<create-edit title="Share this list">
|
||||||
|
<component
|
||||||
|
:id="list.id"
|
||||||
|
:is="manageUsersComponent"
|
||||||
|
:userIsAdmin="userIsAdmin"
|
||||||
|
shareType="user"
|
||||||
|
type="list"/>
|
||||||
|
<component
|
||||||
|
:id="list.id"
|
||||||
|
:is="manageTeamsComponent"
|
||||||
|
:userIsAdmin="userIsAdmin"
|
||||||
|
shareType="team"
|
||||||
|
type="list"/>
|
||||||
|
|
||||||
|
<link-sharing :list-id="$route.params.listId" v-if="linkSharingEnabled" class="mt-4"/>
|
||||||
</create-edit>
|
</create-edit>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ListService from '@/services/list'
|
||||||
|
import ListModel from '@/models/list'
|
||||||
|
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||||
|
|
||||||
import CreateEdit from '@/components/misc/create-edit'
|
import CreateEdit from '@/components/misc/create-edit'
|
||||||
|
import LinkSharing from '@/components/sharing/linkSharing'
|
||||||
|
import userTeam from '@/components/sharing/userTeam'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'list-setting-share',
|
name: 'list-setting-share',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: ListModel,
|
||||||
|
listService: ListService,
|
||||||
|
manageUsersComponent: '',
|
||||||
|
manageTeamsComponent: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
CreateEdit,
|
CreateEdit,
|
||||||
|
LinkSharing,
|
||||||
|
userTeam,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
linkSharingEnabled() {
|
||||||
|
return this.$store.state.config.linkSharingEnabled
|
||||||
|
},
|
||||||
|
userIsAdmin() {
|
||||||
|
return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.listService = new ListService()
|
||||||
|
this.loadList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadList() {
|
||||||
|
const list = new ListModel({id: this.$route.params.listId})
|
||||||
|
|
||||||
|
this.listService.get(list)
|
||||||
|
.then(r => {
|
||||||
|
this.$set(this, 'list', r)
|
||||||
|
this.$store.commit(CURRENT_LIST, r)
|
||||||
|
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
|
||||||
|
this.manageTeamsComponent = 'userTeam'
|
||||||
|
this.manageUsersComponent = 'userTeam'
|
||||||
|
this.setTitle(`Edit ${this.list.title}`)
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
this.error(e, this)
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -84,12 +84,10 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p
|
<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
|
||||||
class="has-text-centered has-text-grey is-italic p-4 mb-4"
|
|
||||||
v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
|
|
||||||
This list is currently empty.
|
This list is currently empty.
|
||||||
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
|
<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
|
||||||
</p>
|
</nothing>
|
||||||
|
|
||||||
<div class="tasks-container">
|
<div class="tasks-container">
|
||||||
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
|
<div :class="{'short': isTaskEdit}" class="tasks mt-0" v-if="tasks && tasks.length > 0">
|
||||||
|
@ -174,6 +172,7 @@ import Rights from '../../../models/rights.json'
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import FilterPopup from '@/components/list/partials/filter-popup'
|
import FilterPopup from '@/components/list/partials/filter-popup'
|
||||||
import {HAS_TASKS} from '@/store/mutation-types'
|
import {HAS_TASKS} from '@/store/mutation-types'
|
||||||
|
import Nothing from '@/components/misc/nothing'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'List',
|
name: 'List',
|
||||||
|
@ -195,6 +194,7 @@ export default {
|
||||||
taskList,
|
taskList,
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
|
Nothing,
|
||||||
FilterPopup,
|
FilterPopup,
|
||||||
SingleTaskInList,
|
SingleTaskInList,
|
||||||
EditTask,
|
EditTask,
|
||||||
|
|
Reference in New Issue