mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-04 13:15:24 +00:00
made it possible to list, rename and delete applications of a group, also added notifications when an action goes wrong
This commit is contained in:
Bram Wiepjes
parent
6d97ef428a
commit
dfe84b47b0
32 changed files with 1118 additions and 162 deletions
old-web-frontend/public
web-frontend
assets/scss/components
components
config
core
filters
layouts
middleware
mixins
modules/database
pages/app
plugins
services
store
utils
|
|
@ -57,7 +57,7 @@
|
|||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<li class="select-item select-item-loading">
|
||||
<a href="#" class="select-item-link">Group name 3</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
</div>
|
||||
<div class="sidebar-group-title">Group name 1</div>
|
||||
<ul class="tree">
|
||||
<li class="tree-item">
|
||||
<li class="tree-item tree-item-loading">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
</div>
|
||||
</li>
|
||||
<li class="tree-item active">
|
||||
<div class="tree-action">
|
||||
<div class="tree-action tree-item-loading">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Webshop
|
||||
|
|
@ -169,7 +169,39 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<li class="tree-item tree-item-loading active">
|
||||
<div class="tree-action tree-item-loading">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
Webshop
|
||||
</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="tree-subs">
|
||||
<li class="tree-sub active">
|
||||
<a href="#" class="tree-sub-link">Customers</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tree-sub">
|
||||
<a href="#" class="tree-sub-link">Products very long name</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tree-sub">
|
||||
<a href="#" class="tree-sub-link">Categories</a>
|
||||
<a href="#" class="tree-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="tree-item tree-item-loading">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-angle-down"></i>
|
||||
|
|
@ -188,7 +220,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tree-item">
|
||||
<li class="tree-item tree-item-loading">
|
||||
<div class="tree-action">
|
||||
<a href="#" class="tree-link">
|
||||
<i class="tree-type fas fa-database"></i>
|
||||
|
|
|
|||
|
|
@ -63,10 +63,17 @@
|
|||
background-color: $color-neutral-100;
|
||||
}
|
||||
|
||||
&.select-item-loading::before {
|
||||
content: " ";
|
||||
|
||||
@include loading(14px);
|
||||
@include absolute(9px, 9px, auto, auto);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $color-primary-100;
|
||||
|
||||
&::after {
|
||||
&:not(.select-item-loading)::after {
|
||||
@extend .fas;
|
||||
@extend %select-item-size;
|
||||
|
||||
|
|
@ -82,17 +89,6 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.select-item-loading {
|
||||
background-color: $color-neutral-100;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
|
||||
@include loading(14px);
|
||||
@include absolute(9px, 9px, auto, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-item-link {
|
||||
|
|
|
|||
|
|
@ -50,3 +50,14 @@
|
|||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sidebar-new {
|
||||
font-size: 13px;
|
||||
color: $color-neutral-300;
|
||||
margin-left: 7px;
|
||||
|
||||
&:hover {
|
||||
color: $color-neutral-500;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.tree {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: 0 0 12px;
|
||||
|
||||
.tree-item & {
|
||||
padding-left: 8px;
|
||||
|
|
@ -18,6 +18,13 @@
|
|||
&.active {
|
||||
background-color: $color-primary-100;
|
||||
}
|
||||
|
||||
&.tree-item-loading::after {
|
||||
content: " ";
|
||||
|
||||
@include loading(14px);
|
||||
@include absolute(9px, 9px, auto, auto);
|
||||
}
|
||||
}
|
||||
|
||||
%tree-size {
|
||||
|
|
@ -141,4 +148,8 @@
|
|||
:hover > & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tree-item-loading > .tree-action > & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
open: false,
|
||||
opener: null,
|
||||
children: []
|
||||
opener: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -81,9 +80,9 @@ export default {
|
|||
!isElement(this.opener, event.target) &&
|
||||
// If the click was not inside one of the context children of this context
|
||||
// menu.
|
||||
!this.children.some(component =>
|
||||
isElement(component.$el, event.target)
|
||||
)
|
||||
!this.moveToBody.children.some(child => {
|
||||
return isElement(child.$el, event.target)
|
||||
})
|
||||
) {
|
||||
this.hide()
|
||||
}
|
||||
|
|
@ -96,6 +95,7 @@ export default {
|
|||
hide() {
|
||||
this.opener = null
|
||||
this.open = false
|
||||
this.$emit('hidden')
|
||||
|
||||
document.body.removeEventListener('click', this.$el.clickOutsideEvent)
|
||||
},
|
||||
|
|
@ -171,13 +171,6 @@ export default {
|
|||
}
|
||||
|
||||
return positions
|
||||
},
|
||||
/**
|
||||
* A child context can register itself with the parent to prevent closing of the
|
||||
* parent when clicked inside the child.
|
||||
*/
|
||||
registerContextChild(element) {
|
||||
this.children.push(element)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="open"
|
||||
ref="modalWrapper"
|
||||
class="modal-wrapper"
|
||||
@click="outside($event)"
|
||||
>
|
||||
<div class="modal-box">
|
||||
<a class="modal-close" @click="hide()">
|
||||
<i class="fas fa-times"></i>
|
||||
</a>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div
|
||||
v-if="open"
|
||||
ref="modalWrapper"
|
||||
class="modal-wrapper"
|
||||
@click="outside($event)"
|
||||
>
|
||||
<div class="modal-box">
|
||||
<a class="modal-close" @click="hide()">
|
||||
<i class="fas fa-times"></i>
|
||||
</a>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -56,7 +54,16 @@ export default {
|
|||
* Hide the modal.
|
||||
*/
|
||||
hide() {
|
||||
this.open = false
|
||||
// This is a temporary fix. What happens is the model is opened by a context menu
|
||||
// item and the user closes the modal, the element is first deleted and then the
|
||||
// click outside event of the context is fired. It then checks if the click was
|
||||
// inside one of his children, but because the modal element doesn't exists
|
||||
// anymore it thinks it was outside, so is closes the context menu which we don't
|
||||
// want automatically.
|
||||
setTimeout(() => {
|
||||
this.open = false
|
||||
})
|
||||
this.$emit('hidden')
|
||||
window.removeEventListener('keyup', this.keyup)
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Context class="select">
|
||||
<Context ref="groupsContext" class="select">
|
||||
<div class="select-search">
|
||||
<i class="select-search-icon fas fa-search"></i>
|
||||
<input
|
||||
|
|
@ -13,28 +13,12 @@
|
|||
<div class="loading"></div>
|
||||
</div>
|
||||
<ul v-if="!isLoading && isLoaded && groups.length > 0" class="select-items">
|
||||
<li
|
||||
<GroupsContextItem
|
||||
v-for="group in searchAndSort(groups)"
|
||||
:key="group.id"
|
||||
:ref="'groupSelect' + group.id"
|
||||
class="select-item"
|
||||
>
|
||||
<div class="loading-overlay"></div>
|
||||
<a class="select-item-link">
|
||||
<Editable
|
||||
:ref="'groupRename' + group.id"
|
||||
:value="group.name"
|
||||
@change="renameGroup(group, $event)"
|
||||
></Editable>
|
||||
</a>
|
||||
<a
|
||||
:ref="'groupOptions' + group.id"
|
||||
class="select-item-options"
|
||||
@click="toggleContext(group.id)"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
:group="group"
|
||||
@selected="hide"
|
||||
></GroupsContextItem>
|
||||
</ul>
|
||||
<div
|
||||
v-if="!isLoading && isLoaded && groups.length == 0"
|
||||
|
|
@ -42,22 +26,6 @@
|
|||
>
|
||||
No results found
|
||||
</div>
|
||||
<Context ref="groupsItemContext">
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a @click="toggleRename(contextId)">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Rename group
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="deleteGroup(contextId)">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Delete group
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Context>
|
||||
<div class="select-footer">
|
||||
<a class="select-footer-button" @click="$refs.createGroupModal.show()">
|
||||
<i class="fas fa-plus"></i>
|
||||
|
|
@ -72,18 +40,19 @@
|
|||
import { mapGetters, mapState } from 'vuex'
|
||||
|
||||
import CreateGroupModal from '@/components/group/CreateGroupModal'
|
||||
import GroupsContextItem from '@/components/group/GroupsContextItem'
|
||||
import context from '@/mixins/context'
|
||||
|
||||
export default {
|
||||
name: 'GroupsItemContext',
|
||||
name: 'GroupsContext',
|
||||
components: {
|
||||
CreateGroupModal
|
||||
CreateGroupModal,
|
||||
GroupsContextItem
|
||||
},
|
||||
mixins: [context],
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
contextId: -1
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -96,15 +65,14 @@ export default {
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* When the groups context select is opened for the for the first time we must make
|
||||
* sure that all the groups are already loaded or going to be loaded.
|
||||
*/
|
||||
toggle(...args) {
|
||||
this.$store.dispatch('group/loadAll')
|
||||
this.getRootContext().toggle(...args)
|
||||
},
|
||||
toggleContext(groupId) {
|
||||
const target = this.$refs['groupOptions' + groupId][0]
|
||||
this.contextId = groupId
|
||||
this.$refs.groupsItemContext.toggle(target, 'bottom', 'right', 0)
|
||||
},
|
||||
searchAndSort(groups) {
|
||||
const query = this.query
|
||||
|
||||
|
|
@ -115,39 +83,6 @@ export default {
|
|||
// .sort((a, b) => {
|
||||
// return a.order - b.order
|
||||
// })
|
||||
},
|
||||
toggleRename(id) {
|
||||
this.$refs.groupsItemContext.hide()
|
||||
this.$refs['groupRename' + id][0].edit()
|
||||
},
|
||||
renameGroup(group, event) {
|
||||
const select = this.$refs['groupSelect' + group.id][0]
|
||||
select.classList.add('select-item-loading')
|
||||
|
||||
this.$store
|
||||
.dispatch('group/update', {
|
||||
id: group.id,
|
||||
values: {
|
||||
name: event.value
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// If something is going wrong we will reset the original value
|
||||
const rename = this.$refs['groupRename' + group.id][0]
|
||||
rename.set(event.oldValue)
|
||||
})
|
||||
.then(() => {
|
||||
select.classList.remove('select-item-loading')
|
||||
})
|
||||
},
|
||||
deleteGroup(id) {
|
||||
this.$refs.groupsItemContext.hide()
|
||||
const select = this.$refs['groupSelect' + id][0]
|
||||
select.classList.add('select-item-loading')
|
||||
|
||||
this.$store.dispatch('group/delete', id).catch(() => {
|
||||
select.classList.remove('select-item-loading')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
104
web-frontend/components/group/GroupsContextItem.vue
Normal file
104
web-frontend/components/group/GroupsContextItem.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<li
|
||||
class="select-item"
|
||||
:class="{
|
||||
active: selectedGroup.id == group.id,
|
||||
'select-item-loading': group._.loading
|
||||
}"
|
||||
>
|
||||
<div class="loading-overlay"></div>
|
||||
<a class="select-item-link" @click="selectGroup(group)">
|
||||
<Editable
|
||||
ref="rename"
|
||||
:value="group.name"
|
||||
@change="renameGroup(group, $event)"
|
||||
></Editable>
|
||||
</a>
|
||||
<a
|
||||
ref="contextLink"
|
||||
class="select-item-options"
|
||||
@click="$refs.context.toggle($refs.contextLink, 'bottom', 'right', 0)"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<Context ref="context">
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a @click="enableRename()">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Rename group
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="deleteGroup(group)">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Delete group
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Context>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'GroupsContextItem',
|
||||
props: {
|
||||
group: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
selectedGroup: state => state.application.selectedGroup
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setLoading(group, value) {
|
||||
this.$store.dispatch('group/setItemLoading', { group, value: value })
|
||||
},
|
||||
enableRename() {
|
||||
this.$refs.context.hide()
|
||||
this.$refs.rename.edit()
|
||||
},
|
||||
renameGroup(group, event) {
|
||||
this.setLoading(group, true)
|
||||
|
||||
this.$store
|
||||
.dispatch('group/update', {
|
||||
id: group.id,
|
||||
values: {
|
||||
name: event.value
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// If something is going wrong we will reset the original value
|
||||
this.$refs.rename.set(event.oldValue)
|
||||
})
|
||||
.then(() => {
|
||||
this.setLoading(group, false)
|
||||
})
|
||||
},
|
||||
selectGroup(group) {
|
||||
this.setLoading(group, true)
|
||||
|
||||
this.$store.dispatch('application/selectGroup', group).then(() => {
|
||||
this.setLoading(group, false)
|
||||
this.$emit('selected')
|
||||
})
|
||||
},
|
||||
deleteGroup(group) {
|
||||
this.$refs.context.hide()
|
||||
this.$store.dispatch('application/unselectGroup')
|
||||
this.setLoading(group, true)
|
||||
|
||||
this.$store.dispatch('group/delete', group.id).then(() => {
|
||||
this.setLoading(group, false)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
47
web-frontend/components/sidebar/ApplicationForm.vue
Normal file
47
web-frontend/components/sidebar/ApplicationForm.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<form @submit.prevent="submit">
|
||||
<div class="control">
|
||||
<label class="control-label">
|
||||
<i class="fas fa-font"></i>
|
||||
Name
|
||||
</label>
|
||||
<div class="control-elements">
|
||||
<input
|
||||
ref="name"
|
||||
v-model="values.name"
|
||||
:class="{ 'input-error': $v.values.name.$error }"
|
||||
type="text"
|
||||
class="input input-large"
|
||||
@blur="$v.values.name.$touch()"
|
||||
/>
|
||||
<div v-if="$v.values.name.$error" class="error">
|
||||
This field is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required } from 'vuelidate/lib/validators'
|
||||
|
||||
import form from '@/mixins/form'
|
||||
|
||||
export default {
|
||||
name: 'CreateApplicationForm',
|
||||
mixins: [form],
|
||||
data() {
|
||||
return {
|
||||
values: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
values: {
|
||||
name: { required }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
web-frontend/components/sidebar/CreateApplicationContext.vue
Normal file
49
web-frontend/components/sidebar/CreateApplicationContext.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<Context>
|
||||
<ul class="context-menu">
|
||||
<li v-for="(application, type) in applications" :key="type">
|
||||
<a
|
||||
:ref="'createApplicationModalToggle' + type"
|
||||
@click="toggleCreateApplicationModal(type)"
|
||||
>
|
||||
<i
|
||||
class="context-menu-icon fas fa-fw"
|
||||
:class="'fa-' + application.iconClass"
|
||||
></i>
|
||||
{{ application.name }}
|
||||
</a>
|
||||
<CreateApplicationModal
|
||||
:ref="'createApplicationModal' + type"
|
||||
:application="application"
|
||||
@created="hide"
|
||||
></CreateApplicationModal>
|
||||
</li>
|
||||
</ul>
|
||||
</Context>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import CreateApplicationModal from '@/components/sidebar/CreateApplicationModal'
|
||||
import context from '@/mixins/context'
|
||||
|
||||
export default {
|
||||
name: 'CreateApplicationContext',
|
||||
components: {
|
||||
CreateApplicationModal
|
||||
},
|
||||
mixins: [context],
|
||||
computed: {
|
||||
...mapState({
|
||||
applications: state => state.application.applications
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleCreateApplicationModal(type) {
|
||||
const target = this.$refs['createApplicationModalToggle' + type][0]
|
||||
this.$refs['createApplicationModal' + type][0].toggle(target)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
web-frontend/components/sidebar/CreateApplicationModal.vue
Normal file
60
web-frontend/components/sidebar/CreateApplicationModal.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<Modal>
|
||||
<h2 class="box-title">Create new {{ application.name | lowercase }}</h2>
|
||||
<component
|
||||
:is="application.getApplicationFormComponent()"
|
||||
ref="applicationForm"
|
||||
@submitted="submitted"
|
||||
>
|
||||
<div class="actions">
|
||||
<div class="align-right">
|
||||
<button
|
||||
class="button button-large"
|
||||
:class="{ 'button-loading': loading }"
|
||||
:disabled="loading"
|
||||
>
|
||||
Add {{ application.name | lowercase }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</component>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from '@/mixins/modal'
|
||||
|
||||
export default {
|
||||
name: 'CreateApplicationModal',
|
||||
mixins: [modal],
|
||||
props: {
|
||||
application: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitted(values) {
|
||||
this.loading = true
|
||||
this.$store
|
||||
.dispatch('application/create', {
|
||||
type: this.application.type,
|
||||
values: values
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false
|
||||
this.$emit('created')
|
||||
this.hide()
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
web-frontend/components/sidebar/Sidebar.vue
Normal file
54
web-frontend/components/sidebar/Sidebar.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="hasSelectedGroup">
|
||||
<div class="sidebar-group-title">{{ selectedGroup.name }}</div>
|
||||
<ul class="tree">
|
||||
<SidebarApplication
|
||||
v-for="application in applications"
|
||||
:key="application.id"
|
||||
:application="application"
|
||||
></SidebarApplication>
|
||||
</ul>
|
||||
<a
|
||||
ref="createApplicationContextLink"
|
||||
class="sidebar-new"
|
||||
@click="
|
||||
$refs.createApplicationContext.toggle(
|
||||
$refs.createApplicationContextLink
|
||||
)
|
||||
"
|
||||
>
|
||||
<i class="fas fa-plus"></i>
|
||||
Create new
|
||||
</a>
|
||||
<CreateApplicationContext
|
||||
ref="createApplicationContext"
|
||||
></CreateApplicationContext>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
|
||||
import SidebarApplication from '@/components/sidebar/SidebarApplication'
|
||||
import CreateApplicationContext from '@/components/sidebar/CreateApplicationContext'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
components: {
|
||||
CreateApplicationContext,
|
||||
SidebarApplication
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
applications: state => state.application.items,
|
||||
selectedGroup: state => state.application.selectedGroup
|
||||
}),
|
||||
...mapGetters({
|
||||
isLoading: 'application/isLoading',
|
||||
hasSelectedGroup: 'application/hasSelectedGroup'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
96
web-frontend/components/sidebar/SidebarApplication.vue
Normal file
96
web-frontend/components/sidebar/SidebarApplication.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<li
|
||||
class="tree-item"
|
||||
:class="{
|
||||
'tree-item-loading': application._.loading
|
||||
}"
|
||||
>
|
||||
<div class="tree-action">
|
||||
<a class="tree-link">
|
||||
<i
|
||||
class="tree-type fas"
|
||||
:class="'fa-' + application._.type.iconClass"
|
||||
></i>
|
||||
<Editable
|
||||
ref="rename"
|
||||
:value="application.name"
|
||||
@change="renameApplication(application, $event)"
|
||||
></Editable>
|
||||
</a>
|
||||
<a
|
||||
ref="contextLink"
|
||||
class="tree-options"
|
||||
@click="$refs.context.toggle($refs.contextLink, 'bottom', 'right', 0)"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<Context ref="context">
|
||||
<div class="context-menu-title">{{ application.name }}</div>
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a @click="enableRename()">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Rename {{ application._.type.name | lowercase }}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="deleteApplication(application)">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Delete {{ application._.type.name | lowercase }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Context>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SidebarApplication',
|
||||
props: {
|
||||
application: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLoading(application, value) {
|
||||
this.$store.dispatch('application/setItemLoading', {
|
||||
application,
|
||||
value: value
|
||||
})
|
||||
},
|
||||
enableRename() {
|
||||
this.$refs.context.hide()
|
||||
this.$refs.rename.edit()
|
||||
},
|
||||
renameApplication(application, event) {
|
||||
this.setLoading(application, true)
|
||||
|
||||
this.$store
|
||||
.dispatch('application/update', {
|
||||
id: application.id,
|
||||
values: {
|
||||
name: event.value
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// If something is going wrong we will reset the original value
|
||||
this.$refs.rename.set(event.oldValue)
|
||||
})
|
||||
.then(() => {
|
||||
this.setLoading(application, false)
|
||||
})
|
||||
},
|
||||
deleteApplication(application) {
|
||||
this.$refs.context.hide()
|
||||
this.setLoading(application, true)
|
||||
|
||||
this.$store.dispatch('application/delete', application.id).then(() => {
|
||||
this.setLoading(application, false)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -35,10 +35,14 @@ export default {
|
|||
/*
|
||||
** Nuxt.js modules
|
||||
*/
|
||||
modules: ['@nuxtjs/axios', 'cookie-universal-nuxt'],
|
||||
modules: [
|
||||
'@nuxtjs/axios',
|
||||
'cookie-universal-nuxt',
|
||||
'@/modules/database/module.js'
|
||||
],
|
||||
|
||||
router: {
|
||||
middleware: 'authentication'
|
||||
middleware: ['authentication', 'group']
|
||||
},
|
||||
|
||||
env: {
|
||||
|
|
|
|||
69
web-frontend/core/applications.js
Normal file
69
web-frontend/core/applications.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import ApplicationForm from '@/components/sidebar/ApplicationForm'
|
||||
|
||||
/**
|
||||
* The application base class that can be extended when creating a plugin for
|
||||
* the frontend.
|
||||
*/
|
||||
export class Application {
|
||||
/**
|
||||
* Must return a string with the unique name, this must be the same as the
|
||||
* type used in the backend.
|
||||
*/
|
||||
getType() {
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* The font awesome 5 icon name that is used as convenience for the user to
|
||||
* recognize certain application types. If you for example want the database
|
||||
* icon, you must return 'database' here. This will result in the classname
|
||||
* 'fas fa-database'.
|
||||
*/
|
||||
getIconClass() {
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* A human readable name of the application.
|
||||
*/
|
||||
getName() {
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* The form component that will be rendered when creating a new instance of
|
||||
* this application. By default the ApplicationForm component is returned, but
|
||||
* this only contains a name field. If custom fields are required upon
|
||||
* creating they can be added with this component.
|
||||
*/
|
||||
getApplicationFormComponent() {
|
||||
return ApplicationForm
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.type = this.getType()
|
||||
this.iconClass = this.getIconClass()
|
||||
this.name = this.getName()
|
||||
|
||||
if (this.type === null) {
|
||||
throw Error('The type name of an application must be set.')
|
||||
}
|
||||
if (this.iconClass === null) {
|
||||
throw Error('The icon class of an application must be set.')
|
||||
}
|
||||
if (this.name === null) {
|
||||
throw Error('The name of an application must be set.')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return object
|
||||
*/
|
||||
serialize() {
|
||||
return {
|
||||
type: this.type,
|
||||
iconClass: this.iconClass,
|
||||
name: this.name
|
||||
}
|
||||
}
|
||||
}
|
||||
9
web-frontend/filters/lowercase.js
Normal file
9
web-frontend/filters/lowercase.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* Converts a string to the same string, but with lowercase characters.
|
||||
*/
|
||||
export default function(value) {
|
||||
if (!value) {
|
||||
return ''
|
||||
}
|
||||
return value.toString().toLowerCase()
|
||||
}
|
||||
|
|
@ -57,6 +57,7 @@
|
|||
<div class="sidebar-title">
|
||||
<img src="@/static/img/logo.svg" alt="" />
|
||||
</div>
|
||||
<Sidebar></Sidebar>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="sidebar-footer">
|
||||
|
|
@ -78,12 +79,14 @@ import { mapActions, mapGetters } from 'vuex'
|
|||
|
||||
import Notifications from '@/components/notifications/Notifications'
|
||||
import GroupsContext from '@/components/group/GroupsContext'
|
||||
import Sidebar from '@/components/sidebar/Sidebar'
|
||||
|
||||
export default {
|
||||
middleware: 'authenticated',
|
||||
components: {
|
||||
GroupsContext,
|
||||
Notifications
|
||||
Notifications,
|
||||
Sidebar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
|
|
|
|||
34
web-frontend/middleware/group.js
Normal file
34
web-frontend/middleware/group.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { getGroupCookie, unsetGroupCookie } from '@/utils/group'
|
||||
|
||||
/**
|
||||
* This middleware is used to automatically fetch the groups and set a
|
||||
* selected group, which will automatically fetch the applications, if a group
|
||||
* id is stored as a cookie. This cookie will be set when selecting a group.
|
||||
*/
|
||||
export default function({ store, req, app }) {
|
||||
// If nuxt generate, pass this middleware
|
||||
if (process.server && !req) return
|
||||
|
||||
// Get the selected group id
|
||||
const groupId = getGroupCookie(app.$cookies)
|
||||
|
||||
// If a group id cookie is set, the user is authenticated and a selectedGroup
|
||||
// is not already set then we will fetch the groups and select that group.
|
||||
if (
|
||||
groupId &&
|
||||
store.getters['auth/isAuthenticated'] &&
|
||||
!store.getters['application/hasSelectedGroup']
|
||||
) {
|
||||
return store
|
||||
.dispatch('group/fetchAll')
|
||||
.catch(() => {
|
||||
unsetGroupCookie(app.$cookies)
|
||||
})
|
||||
.then(() => {
|
||||
const group = store.getters['group/get'](groupId)
|
||||
if (group) {
|
||||
return store.dispatch('application/selectGroup', group)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -13,13 +13,13 @@ export default {
|
|||
}
|
||||
},
|
||||
toggle(...args) {
|
||||
this.getRootModal().toggle(...args)
|
||||
this.getRootContext().toggle(...args)
|
||||
},
|
||||
show(...args) {
|
||||
this.getRootModal().show(...args)
|
||||
this.getRootContext().show(...args)
|
||||
},
|
||||
hide(...args) {
|
||||
this.getRootModal().hide(...args)
|
||||
this.getRootContext().hide(...args)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,68 @@
|
|||
export default {
|
||||
/**
|
||||
* Because we don't want the parent context to close when a user clicks 'outside' that
|
||||
* element and in the child element we need to register the child with their parent to
|
||||
* prevent this.
|
||||
*/
|
||||
mounted() {
|
||||
let $parent = this.$parent
|
||||
while ($parent !== undefined) {
|
||||
if ($parent.registerContextChild) {
|
||||
$parent.registerContextChild(this)
|
||||
data() {
|
||||
return {
|
||||
moveToBody: {
|
||||
children: [],
|
||||
hasMoved: false,
|
||||
movedEventHandlers: []
|
||||
}
|
||||
$parent = $parent.$parent
|
||||
}
|
||||
|
||||
// Move the rendered element to the top of the body so it can be positioned over any
|
||||
// other element.
|
||||
const body = document.body
|
||||
body.insertBefore(this.$el, body.firstChild)
|
||||
},
|
||||
/**
|
||||
* Make sure the context menu is not open and all the events on the body are removed
|
||||
* and that the element is removed from the body.
|
||||
* Because we want the to be able to stack elements that are moved to the body
|
||||
* they have to be placed at the correct position. If it has no parent is must
|
||||
* be moved to the top of the body, but is there is a parent it must by
|
||||
* directly under that so it will always display on over of that component.
|
||||
*/
|
||||
mounted() {
|
||||
let parent = this.$parent
|
||||
let first = null
|
||||
|
||||
// Loop over the parent components to register himself als child in order
|
||||
// to prevent closing when clicking in a child. We also check which parent
|
||||
// is first so can correctly move the element.
|
||||
while (parent !== undefined) {
|
||||
if (parent.hasOwnProperty('moveToBody')) {
|
||||
parent.registerMoveToBodyChild(this)
|
||||
if (first === null) {
|
||||
first = parent
|
||||
}
|
||||
}
|
||||
parent = parent.$parent
|
||||
}
|
||||
|
||||
if (first) {
|
||||
// If there is a parent where we can register we want to position the
|
||||
// element directly after that one so it will always be positioned over
|
||||
// the parent.
|
||||
const handler = () => {
|
||||
// Some times we have to wait for elements to render like with v-if.
|
||||
this.$nextTick(() => {
|
||||
first.$el.parentNode.insertBefore(this.$el, first.$el.nextSibling)
|
||||
this.fireMovedToBodyHandlers()
|
||||
})
|
||||
}
|
||||
|
||||
// If the element has already moved to the body we can directly move it to
|
||||
// the correct position. If not we have to wait until it will move.
|
||||
if (first.moveToBody.hasMoved) {
|
||||
handler()
|
||||
} else {
|
||||
first.addMovedToBodyHandler(handler)
|
||||
}
|
||||
} else {
|
||||
// Because there is no parent we can directly move the component to the
|
||||
// top of the body so it will be positioned over any other element.
|
||||
const body = document.body
|
||||
body.insertBefore(this.$el, body.firstChild)
|
||||
this.fireMovedToBodyHandlers()
|
||||
}
|
||||
|
||||
this.moveToBody.hasMoved = true
|
||||
},
|
||||
/**
|
||||
* Make sure the context menu is not open and all the events on the body are
|
||||
* removed and that the element is removed from the body.
|
||||
*/
|
||||
destroyed() {
|
||||
this.hide()
|
||||
|
|
@ -28,5 +70,26 @@ export default {
|
|||
if (this.$el.parentNode) {
|
||||
this.$el.parentNode.removeChild(this.$el)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Event handlers when the element has moved to the body can be registered
|
||||
* here.
|
||||
*/
|
||||
addMovedToBodyHandler(handler) {
|
||||
this.moveToBody.movedEventHandlers.push(handler)
|
||||
},
|
||||
/**
|
||||
*
|
||||
*/
|
||||
fireMovedToBodyHandlers() {
|
||||
this.moveToBody.movedEventHandlers.forEach(handler => handler())
|
||||
},
|
||||
/**
|
||||
*
|
||||
*/
|
||||
registerMoveToBodyChild(child) {
|
||||
this.moveToBody.children.push(child)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
web-frontend/modules/database/application.js
Normal file
15
web-frontend/modules/database/application.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { Application } from '@/core/applications'
|
||||
|
||||
export class DatabaseApplication extends Application {
|
||||
getType() {
|
||||
return 'database'
|
||||
}
|
||||
|
||||
getIconClass() {
|
||||
return 'database'
|
||||
}
|
||||
|
||||
getName() {
|
||||
return 'Database'
|
||||
}
|
||||
}
|
||||
9
web-frontend/modules/database/module.js
Normal file
9
web-frontend/modules/database/module.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import path from 'path'
|
||||
|
||||
export default function DatabaseModule(options) {
|
||||
// Add the plugin to register the database application.
|
||||
this.addPlugin({
|
||||
src: path.resolve(__dirname, 'plugin.js'),
|
||||
filename: 'plugin.js'
|
||||
})
|
||||
}
|
||||
5
web-frontend/modules/database/plugin.js
Normal file
5
web-frontend/modules/database/plugin.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { DatabaseApplication } from '@/modules/database/application'
|
||||
|
||||
export default ({ store }) => {
|
||||
store.dispatch('application/register', new DatabaseApplication())
|
||||
}
|
||||
|
|
@ -3,6 +3,12 @@
|
|||
<h1>Welcome {{ user }}</h1>
|
||||
<p>
|
||||
{{ groups }}
|
||||
<br /><br />
|
||||
{{ selectedGroup }}
|
||||
<br /><br />
|
||||
{{ applications }}
|
||||
<br /><br />
|
||||
{{ groupApplications }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,7 +21,10 @@ export default {
|
|||
computed: {
|
||||
...mapState({
|
||||
user: state => state.auth.user,
|
||||
groups: state => state.group.items
|
||||
groups: state => state.group.items,
|
||||
selectedGroup: state => state.application.selectedGroup,
|
||||
applications: state => state.application.applications,
|
||||
groupApplications: state => state.application.items
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ import Context from '@/components/Context'
|
|||
import Modal from '@/components/Modal'
|
||||
import Editable from '@/components/Editable'
|
||||
|
||||
import lowercase from '@/filters/lowercase'
|
||||
|
||||
Vue.component('Context', Context)
|
||||
Vue.component('Modal', Modal)
|
||||
Vue.component('Editable', Editable)
|
||||
|
||||
Vue.filter('lowercase', lowercase)
|
||||
|
|
|
|||
16
web-frontend/services/application.js
Normal file
16
web-frontend/services/application.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { client } from './client'
|
||||
|
||||
export default {
|
||||
fetchAll(groupId) {
|
||||
return client.get(`/applications/group/${groupId}/`)
|
||||
},
|
||||
create(groupId, values) {
|
||||
return client.post(`/applications/group/${groupId}/`, values)
|
||||
},
|
||||
update(applicationId, values) {
|
||||
return client.patch(`/applications/${applicationId}/`, values)
|
||||
},
|
||||
delete(applicationId) {
|
||||
return client.delete(`/applications/${applicationId}/`)
|
||||
}
|
||||
}
|
||||
203
web-frontend/store/application.js
Normal file
203
web-frontend/store/application.js
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
import { Application } from '@/core/applications'
|
||||
import ApplicationService from '@/services/application'
|
||||
import { setGroupCookie } from '@/utils/group'
|
||||
import { notify404, notifyError } from '@/utils/error'
|
||||
|
||||
function populateApplication(application, getters) {
|
||||
application._ = {
|
||||
type: getters.getApplicationByType(application.type).serialize(),
|
||||
loading: false
|
||||
}
|
||||
return application
|
||||
}
|
||||
|
||||
export const state = () => ({
|
||||
applications: {},
|
||||
loading: false,
|
||||
items: [],
|
||||
selectedGroup: {}
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
REGISTER(state, application) {
|
||||
state.applications[application.type] = application
|
||||
},
|
||||
SET_SELECTED_GROUP(state, group) {
|
||||
state.selectedGroup = group
|
||||
},
|
||||
SET_ITEMS(state, applications) {
|
||||
state.items = applications
|
||||
},
|
||||
SET_LOADING(state, value) {
|
||||
state.loading = value
|
||||
},
|
||||
SET_ITEM_LOADING(state, { application, value }) {
|
||||
application._.loading = value
|
||||
},
|
||||
ADD_ITEM(state, item) {
|
||||
state.items.push(item)
|
||||
},
|
||||
UPDATE_ITEM(state, values) {
|
||||
const index = state.items.findIndex(item => item.id === values.id)
|
||||
Object.assign(state.items[index], state.items[index], values)
|
||||
},
|
||||
DELETE_ITEM(state, id) {
|
||||
const index = state.items.findIndex(item => item.id === id)
|
||||
state.items.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
/**
|
||||
* Register a new application within the registry. The is commonly used when
|
||||
* creating an extension.
|
||||
*/
|
||||
register({ commit }, application) {
|
||||
if (!(application instanceof Application)) {
|
||||
throw Error('The application must be an instance of Application.')
|
||||
}
|
||||
|
||||
commit('REGISTER', application)
|
||||
},
|
||||
/**
|
||||
* Changes the loading state of a specific item.
|
||||
*/
|
||||
setItemLoading({ commit }, { application, value }) {
|
||||
commit('SET_ITEM_LOADING', { application, value })
|
||||
},
|
||||
/**
|
||||
* Choose an existing group. It will fetch all the applications of that group,
|
||||
* sets a cookie so the next time the page loads the group is still selected
|
||||
* and populates each item.
|
||||
*/
|
||||
selectGroup({ commit, getters, dispatch }, group) {
|
||||
commit('SET_LOADING', true)
|
||||
|
||||
return ApplicationService.fetchAll(group.id)
|
||||
.then(({ data }) => {
|
||||
commit('SET_SELECTED_GROUP', group)
|
||||
setGroupCookie(group.id, this.app.$cookies)
|
||||
|
||||
data.forEach((part, index, d) => {
|
||||
populateApplication(data[index], getters)
|
||||
})
|
||||
commit('SET_ITEMS', data)
|
||||
})
|
||||
.catch(error => {
|
||||
commit('SET_ITEMS', [])
|
||||
|
||||
notify404(
|
||||
dispatch,
|
||||
error,
|
||||
'Unable to select group',
|
||||
"You're unable to select the group. This could be because you're not part of the group."
|
||||
)
|
||||
})
|
||||
.then(() => {
|
||||
commit('SET_LOADING', false)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* If a selected group is deleted or for example the user logs off the current
|
||||
* group must be unselected which means that all the fetched items will be
|
||||
* forgotten.
|
||||
*/
|
||||
unselectGroup({ commit }) {
|
||||
commit('SET_SELECTED_GROUP', {})
|
||||
commit('SET_ITEMS', [])
|
||||
},
|
||||
/**
|
||||
* Creates a new application with the given type and values for the currently
|
||||
* selected group.
|
||||
*/
|
||||
create({ commit, getters, dispatch }, { type, values }) {
|
||||
if (values.hasOwnProperty('type')) {
|
||||
throw new Error(
|
||||
'The key "type" is a reserved, but is already set on the ' +
|
||||
'values when creating a new application.'
|
||||
)
|
||||
}
|
||||
|
||||
if (!getters.applicationTypeExists(type)) {
|
||||
throw new Error(`An application with type "${type}" doesn't exist.`)
|
||||
}
|
||||
|
||||
values.type = type
|
||||
return ApplicationService.create(getters.selectedGroupId, values)
|
||||
.then(({ data }) => {
|
||||
populateApplication(data, getters)
|
||||
commit('ADD_ITEM', data)
|
||||
})
|
||||
.catch(error => {
|
||||
notify404(
|
||||
dispatch,
|
||||
error,
|
||||
'Could not create application',
|
||||
"You're unable to create a new application for the selected " +
|
||||
"group. This could be because you're not part of the group."
|
||||
)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Updates the values of an existing application.
|
||||
*/
|
||||
update({ commit, dispatch }, { id, values }) {
|
||||
return ApplicationService.update(id, values)
|
||||
.then(({ data }) => {
|
||||
commit('UPDATE_ITEM', data)
|
||||
})
|
||||
.catch(error => {
|
||||
notifyError(
|
||||
dispatch,
|
||||
error,
|
||||
'ERROR_USER_NOT_IN_GROUP',
|
||||
'Rename not allowed',
|
||||
"You're not allowed to rename the application because you're " +
|
||||
'not part of the group where the application is in.'
|
||||
)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Deletes an existing application.
|
||||
*/
|
||||
delete({ commit, dispatch }, id) {
|
||||
return ApplicationService.delete(id)
|
||||
.then(() => {
|
||||
commit('DELETE_ITEM', id)
|
||||
})
|
||||
.catch(error => {
|
||||
notifyError(
|
||||
dispatch,
|
||||
error,
|
||||
'ERROR_USER_NOT_IN_GROUP',
|
||||
'Delete not allowed',
|
||||
"You're not allowed to rename the application because you're" +
|
||||
' not part of the group where the application is in.'
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const getters = {
|
||||
selectedGroupId(state) {
|
||||
return state.selectedGroup.id
|
||||
},
|
||||
hasSelectedGroup(state) {
|
||||
return state.selectedGroup.hasOwnProperty('id')
|
||||
},
|
||||
applications(state) {
|
||||
return state.applications
|
||||
},
|
||||
isLoading(state) {
|
||||
return state.loading
|
||||
},
|
||||
applicationTypeExists: state => type => {
|
||||
return state.applications.hasOwnProperty(type)
|
||||
},
|
||||
getApplicationByType: state => type => {
|
||||
if (!state.applications.hasOwnProperty(type)) {
|
||||
throw new Error(`An application with type "${type}" doesn't exist.`)
|
||||
}
|
||||
return state.applications[type]
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import jwtDecode from 'jwt-decode'
|
|||
|
||||
import AuthService from '@/services/auth'
|
||||
import { setToken, unsetToken } from '@/utils/auth'
|
||||
import { unsetGroupCookie } from '@/utils/group'
|
||||
|
||||
export const state = () => ({
|
||||
refreshing: false,
|
||||
|
|
@ -53,9 +54,12 @@ export const actions = {
|
|||
* Logs off the user by removing the token as a cookie and clearing the user
|
||||
* data.
|
||||
*/
|
||||
logoff({ commit }) {
|
||||
logoff({ commit, dispatch }) {
|
||||
unsetToken(this.app.$cookies)
|
||||
unsetGroupCookie(this.app.$cookies)
|
||||
commit('CLEAR_USER_DATA')
|
||||
dispatch('group/clearAll', {}, { root: true })
|
||||
dispatch('application/unselectGroup', {}, { root: true })
|
||||
},
|
||||
/**
|
||||
* Refresh the existing token. If successful commit the new token and start a
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
// import { set } from 'vue'
|
||||
|
||||
import GroupService from '@/services/group'
|
||||
import { notify404 } from '@/utils/error'
|
||||
|
||||
function populateGroup(group) {
|
||||
group._ = { loading: false }
|
||||
return group
|
||||
}
|
||||
|
||||
export const state = () => ({
|
||||
loaded: false,
|
||||
|
|
@ -16,9 +20,17 @@ export const mutations = {
|
|||
state.loading = loading
|
||||
},
|
||||
SET_ITEMS(state, items) {
|
||||
state.items = items
|
||||
// Set some default values that we might need later.
|
||||
state.items = items.map(item => {
|
||||
item = populateGroup(item)
|
||||
return item
|
||||
})
|
||||
},
|
||||
SET_ITEM_LOADING(state, { group, value }) {
|
||||
group._.loading = value
|
||||
},
|
||||
ADD_ITEM(state, item) {
|
||||
item = populateGroup(item)
|
||||
state.items.push(item)
|
||||
},
|
||||
UPDATE_ITEM(state, values) {
|
||||
|
|
@ -32,11 +44,31 @@ export const mutations = {
|
|||
}
|
||||
|
||||
export const actions = {
|
||||
/**
|
||||
* If not already loading it will trigger the fetchAll action which will load
|
||||
* all the groups for the user.
|
||||
*/
|
||||
loadAll({ state, dispatch }) {
|
||||
if (!state.loaded && !state.loading) {
|
||||
dispatch('fetchAll')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Clears all the selected groups. Can be used when logging off.
|
||||
*/
|
||||
clearAll({ commit }) {
|
||||
commit('SET_ITEMS', [])
|
||||
commit('SET_LOADED', false)
|
||||
},
|
||||
/**
|
||||
* Changes the loading state of a specific group.
|
||||
*/
|
||||
setItemLoading({ commit }, { group, value }) {
|
||||
commit('SET_ITEM_LOADING', { group, value })
|
||||
},
|
||||
/**
|
||||
* Fetches all the groups of an authenticated user.
|
||||
*/
|
||||
fetchAll({ commit }) {
|
||||
commit('SET_LOADING', true)
|
||||
|
||||
|
|
@ -52,21 +84,49 @@ export const actions = {
|
|||
commit('SET_LOADING', false)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Creates a new group with the given values.
|
||||
*/
|
||||
create({ commit }, values) {
|
||||
return GroupService.create(values).then(({ data }) => {
|
||||
commit('ADD_ITEM', data)
|
||||
})
|
||||
},
|
||||
update({ commit }, { id, values }) {
|
||||
return GroupService.update(id, values).then(({ data }) => {
|
||||
commit('UPDATE_ITEM', data)
|
||||
})
|
||||
/**
|
||||
* Updates the values of the group with the provided id.
|
||||
*/
|
||||
update({ commit, dispatch }, { id, values }) {
|
||||
return GroupService.update(id, values)
|
||||
.then(({ data }) => {
|
||||
commit('UPDATE_ITEM', data)
|
||||
})
|
||||
.catch(error => {
|
||||
notify404(
|
||||
dispatch,
|
||||
error,
|
||||
'Unable to rename',
|
||||
"You're unable to rename the group. This could be because " +
|
||||
"you're not part of the group."
|
||||
)
|
||||
})
|
||||
},
|
||||
delete({ commit }, id) {
|
||||
return GroupService.delete(id).then(() => {
|
||||
console.log(id)
|
||||
commit('DELETE_ITEM', id)
|
||||
})
|
||||
/**
|
||||
* Deletes an existing group with the provided id.
|
||||
*/
|
||||
delete({ commit, dispatch }, id) {
|
||||
return GroupService.delete(id)
|
||||
.then(() => {
|
||||
commit('DELETE_ITEM', id)
|
||||
})
|
||||
.catch(error => {
|
||||
notify404(
|
||||
dispatch,
|
||||
error,
|
||||
'Unable to delete',
|
||||
"You're unable to delete the group. This could be because " +
|
||||
"you're not part of the group."
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,5 +136,8 @@ export const getters = {
|
|||
},
|
||||
isLoading(state) {
|
||||
return state.loading
|
||||
},
|
||||
get: state => id => {
|
||||
return state.items.find(item => item.id === id)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ export const mutations = {
|
|||
}
|
||||
|
||||
export const actions = {
|
||||
/**
|
||||
* Shows a notification message to the user.
|
||||
*/
|
||||
add({ commit }, { type, title, message }) {
|
||||
commit('ADD', {
|
||||
id: uuid(),
|
||||
|
|
|
|||
32
web-frontend/utils/error.js
Normal file
32
web-frontend/utils/error.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Adds a notification error if the error response has 404 status code.
|
||||
*/
|
||||
export function notify404(dispatch, error, title, message) {
|
||||
if (error.response && error.response.status === 404) {
|
||||
dispatch(
|
||||
'notification/error',
|
||||
{
|
||||
title: title,
|
||||
message: message
|
||||
},
|
||||
{ root: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a notification error if the response error is equal to the provided
|
||||
* error code.
|
||||
*/
|
||||
export function notifyError(dispatch, error, error_code, title, message) {
|
||||
if (error.responseError === error_code) {
|
||||
dispatch(
|
||||
'notification/error',
|
||||
{
|
||||
title: title,
|
||||
message: message
|
||||
},
|
||||
{ root: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
16
web-frontend/utils/group.js
Normal file
16
web-frontend/utils/group.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
const cookieGroupName = 'baserow_group_id'
|
||||
|
||||
export const setGroupCookie = (groupId, cookie) => {
|
||||
if (process.SERVER_BUILD) return
|
||||
cookie.set(cookieGroupName, groupId)
|
||||
}
|
||||
|
||||
export const unsetGroupCookie = cookie => {
|
||||
if (process.SERVER_BUILD) return
|
||||
cookie.remove(cookieGroupName)
|
||||
}
|
||||
|
||||
export const getGroupCookie = cookie => {
|
||||
if (process.SERVER_BUILD) return
|
||||
return cookie.get(cookieGroupName)
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue