Add namespace settings as dropdown
This commit is contained in:
parent
f3c28451f6
commit
d6d4432c80
GPG Key ID:
F40E70337AB24C9B
|
|
@ -65,23 +65,7 @@
|
|||
</span>
|
||||
</label>
|
||||
<div class="actions">
|
||||
<router-link
|
||||
:key="n.id + 'list.create'"
|
||||
:to="{ name: 'list.create', params: { id: n.id} }"
|
||||
v-if="n.id > 0"
|
||||
v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
|
||||
<span class="icon">
|
||||
<icon icon="plus"/>
|
||||
</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{name: 'namespace.edit', params: {id: n.id} }"
|
||||
v-if="n.id > 0"
|
||||
v-tooltip="'Settings'">
|
||||
<span class="icon">
|
||||
<icon icon="cog"/>
|
||||
</span>
|
||||
</router-link>
|
||||
<namespace-settings-dropdown :namespace="n"/>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -136,10 +120,14 @@
|
|||
import {mapState} from 'vuex'
|
||||
import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
|
||||
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
|
||||
|
||||
export default {
|
||||
name: 'navigation',
|
||||
components: {ListSettingsDropdown},
|
||||
components: {
|
||||
ListSettingsDropdown,
|
||||
NamespaceSettingsDropdown,
|
||||
},
|
||||
computed: mapState({
|
||||
namespaces(state) {
|
||||
return state.namespaces.namespaces.filter(n => !n.isArchived)
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
<div class="dropdown-menu" v-if="open">
|
||||
<div class="dropdown-content">
|
||||
<router-link
|
||||
:to="{ name: 'namespace.settings.edit', params: { namespaceId: namespace.id } }"
|
||||
:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
|
||||
class="dropdown-item">
|
||||
Edit this namespace
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
|
||||
:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
|
||||
class="dropdown-item">
|
||||
Share this namespace
|
||||
</router-link>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
Create a new list
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'namespace.settings.delete', params: { namespaceId: namespace.id } }"
|
||||
:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
|
||||
class="dropdown-item">
|
||||
Delete this namespace
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import Kanban from '../views/list/views/Kanban'
|
|||
import List from '../views/list/views/List'
|
||||
import Gantt from '../views/list/views/Gantt'
|
||||
import Table from '../views/list/views/Table'
|
||||
// List Edit
|
||||
// List Settings
|
||||
import ListSettingEdit from '@/views/list/settings/edit'
|
||||
import ListSettingBackground from '@/views/list/settings/background'
|
||||
import ListSettingDuplicate from '@/views/list/settings/duplicate'
|
||||
|
|
@ -38,6 +38,10 @@ import ListSettingDelete from '@/views/list/settings/delete'
|
|||
import ListSettingArchive from '@/views/list/settings/archive'
|
||||
import FilterSettingEdit from '@/views/filters/settings/edit'
|
||||
import FilterSettingDelete from '@/views/filters/settings/delete'
|
||||
// Namespace Settings
|
||||
import NamespaceSettingEdit from '@/views/namespaces/settings/edit'
|
||||
import NamespaceSettingShare from '@/views/namespaces/settings/share'
|
||||
import NamespaceSettingDelete from '@/views/namespaces/settings/delete'
|
||||
// Saved Filters
|
||||
import CreateSavedFilter from '@/views/filters/CreateSavedFilter'
|
||||
|
||||
|
|
@ -178,6 +182,21 @@ export default new Router({
|
|||
popup: NewListComponent,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/settings/edit',
|
||||
name: 'namespace.settings.edit',
|
||||
component: NamespaceSettingEdit,
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/settings/share',
|
||||
name: 'namespace.settings.share',
|
||||
component: NamespaceSettingShare,
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/settings/delete',
|
||||
name: 'namespace.settings.delete',
|
||||
component: NamespaceSettingDelete,
|
||||
},
|
||||
{
|
||||
path: '/tasks/:id',
|
||||
name: 'task.detail',
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<scripti>
|
||||
import router from '../../router'
|
||||
import manageSharing from '../../components/sharing/userTeam'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<modal
|
||||
@close="$router.back()"
|
||||
@submit="deleteNamespace()"
|
||||
>
|
||||
<span slot="header">Delete this namespace</span>
|
||||
<p slot="text">Are you sure you want to delete this namespace and all of its contents?
|
||||
<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NamespaceService from '@/services/namespace'
|
||||
|
||||
export default {
|
||||
name: 'namespace-settings-delete',
|
||||
data() {
|
||||
return {
|
||||
namespaceService: NamespaceService,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.namespaceService = new NamespaceService()
|
||||
},
|
||||
methods: {
|
||||
deleteNamespace() {
|
||||
const namespace = this.$store.getters['namespaces/getNamespaceById'](this.$route.params.id)
|
||||
|
||||
this.namespaceService.delete(namespace)
|
||||
.then(() => {
|
||||
this.$store.commit('namespaces/removeNamespaceFromNamespaceById', namespace)
|
||||
this.success({message: 'The namespace was successfully deleted.'}, this)
|
||||
this.$router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<create-edit
|
||||
title="Edit This Namespace"
|
||||
primary-icon=""
|
||||
primary-label="Save"
|
||||
@primary="save"
|
||||
tertary="Delete"
|
||||
@tertary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
|
||||
>
|
||||
<form @submit.prevent="save()">
|
||||
<div class="field">
|
||||
<label class="label" for="namespacetext">Namespace Name</label>
|
||||
<div class="control">
|
||||
<input
|
||||
:class="{ 'disabled': namespaceService.loading}"
|
||||
:disabled="namespaceService.loading"
|
||||
class="input"
|
||||
id="namespacetext"
|
||||
placeholder="The namespace text is here..."
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="namespace.title"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="namespacedescription">Description</label>
|
||||
<div class="control">
|
||||
<editor
|
||||
:class="{ 'disabled': namespaceService.loading}"
|
||||
:disabled="namespaceService.loading"
|
||||
:preview-is-default="false"
|
||||
id="namespacedescription"
|
||||
placeholder="The namespaces description goes here..."
|
||||
v-if="editorActive"
|
||||
v-model="namespace.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="isArchivedCheck">Is Archived</label>
|
||||
<div class="control">
|
||||
<fancycheckbox
|
||||
v-model="namespace.isArchived"
|
||||
v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
|
||||
This namespace is archived
|
||||
</fancycheckbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Color</label>
|
||||
<div class="control">
|
||||
<color-picker v-model="namespace.hexColor"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</create-edit>
|
||||
</template>
|
||||
|
||||
<scripti>
|
||||
import manageSharing from '@/components/sharing/userTeam'
|
||||
|
||||
import NamespaceService from '@/services/namespace'
|
||||
import NamespaceModel from '@/models/namespace'
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox'
|
||||
import ColorPicker from '@/components/input/colorPicker'
|
||||
import LoadingComponent from '@/components/misc/loading'
|
||||
import ErrorComponent from '@/components/misc/error'
|
||||
import CreateEdit from '@/components/misc/create-edit'
|
||||
|
||||
export default {
|
||||
name: 'namespace-settings-edit',
|
||||
data() {
|
||||
return {
|
||||
namespaceService: NamespaceService,
|
||||
|
||||
namespace: NamespaceModel,
|
||||
editorActive: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CreateEdit,
|
||||
ColorPicker,
|
||||
Fancycheckbox,
|
||||
manageSharing,
|
||||
editor: () => ({
|
||||
component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
|
||||
loading: LoadingComponent,
|
||||
error: ErrorComponent,
|
||||
timeout: 60000,
|
||||
}),
|
||||
},
|
||||
beforeMount() {
|
||||
this.namespace.id = this.$route.params.id
|
||||
},
|
||||
created() {
|
||||
console.log('test')
|
||||
this.namespaceService = new NamespaceService()
|
||||
this.namespace = new NamespaceModel()
|
||||
this.loadNamespace()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadNamespace',
|
||||
},
|
||||
methods: {
|
||||
loadNamespace() {
|
||||
// This makes the editor trigger its mounted function again which makes it forget every input
|
||||
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
|
||||
// which made it impossible to detect change from the outside. Therefore the component would
|
||||
// not update if new content from the outside was made available.
|
||||
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
||||
this.editorActive = false
|
||||
this.$nextTick(() => this.editorActive = true)
|
||||
|
||||
const namespace = new NamespaceModel({id: this.$route.params.id})
|
||||
this.namespaceService.get(namespace)
|
||||
.then(r => {
|
||||
this.$set(this, 'namespace', 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'
|
||||
console.log(r)
|
||||
this.setTitle(`Edit ${r.title}`)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.namespaceService.update(this.namespace)
|
||||
.then(r => {
|
||||
// Update the namespace in the parent
|
||||
this.$store.commit('namespaces/setNamespaceById', r)
|
||||
this.success({message: 'The namespace was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<create-edit title="Share this Namespace">
|
||||
<component
|
||||
:id="namespace.id"
|
||||
:is="manageUsersComponent"
|
||||
:userIsAdmin="userIsAdmin"
|
||||
shareType="user"
|
||||
type="namespace"/>
|
||||
<component
|
||||
:id="namespace.id"
|
||||
:is="manageTeamsComponent"
|
||||
:userIsAdmin="userIsAdmin"
|
||||
shareType="team"
|
||||
type="namespace"/>
|
||||
</create-edit>
|
||||
</template>
|
||||
|
||||
<scripti>
|
||||
import router from '../../router'
|
||||
import manageSharing from '../../components/sharing/userTeam'
|
||||
|
||||
import NamespaceService from '../../services/namespace'
|
||||
import NamespaceModel from '../../models/namespace'
|
||||
import Fancycheckbox from '../../components/input/fancycheckbox'
|
||||
import ColorPicker from '../../components/input/colorPicker'
|
||||
import LoadingComponent from '../../components/misc/loading'
|
||||
import ErrorComponent from '../../components/misc/error'
|
||||
|
||||
export default {
|
||||
name: 'namespace-settings-share',
|
||||
data() {
|
||||
return {
|
||||
namespaceService: NamespaceService,
|
||||
manageUsersComponent: '',
|
||||
manageTeamsComponent: '',
|
||||
|
||||
namespace: NamespaceModel,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
manageSharing,
|
||||
},
|
||||
beforeMount() {
|
||||
this.namespace.id = this.$route.params.id
|
||||
},
|
||||
created() {
|
||||
this.namespaceService = new NamespaceService()
|
||||
this.namespace = new NamespaceModel()
|
||||
this.loadNamespace()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadNamespace',
|
||||
},
|
||||
computed: {
|
||||
userIsAdmin() {
|
||||
return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadNamespace() {
|
||||
const namespace = new NamespaceModel({id: this.$route.params.id})
|
||||
this.namespaceService.get(namespace)
|
||||
.then(r => {
|
||||
this.$set(this, 'namespace', 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(`Share ${this.namespace.title}`)
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue