ami/tl-vikunja
1
0
Fork 0
Code Activity

Hide UI elements if the user does not have the right to use them (#211)

Browse Source 
Hide Team UI elements if the user does not have the rights to use them

Fix replacing the right saved in the model when updating

Hide UI-Elements on task if the user does not have the rights to use them

Hide UI-Elements on gantt if the user does not have the rights to use them

Hide UI-Elements on kanban if the user does not have rights to use them

Fix canWrite condition

Hide list components if the user has no right to write to the list

Add max right to model

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/211
This commit is contained in:
konrad
2020-08-11 18:18:59 +00:00
parent e64b4e3329
commit 3c07c6e8c0
22 changed files with 282 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/list/views/Kanban.vue
View File

@ -9,7 +9,11 @@
@focusout="() => saveBucketTitle(bucket.id)"
:ref="`bucket${bucket.id}title`"
@keyup.ctrl.enter="() => saveBucketTitle(bucket.id)">{{ bucket.title }}</h2>
<div class="dropdown is-right options" :class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }">
<div
class="dropdown is-right options"
:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
v-if="canWrite"
>
<div class="dropdown-trigger" @click.stop="toggleBucketDropdown(bucket.id)">
<span class="icon">
<icon icon="ellipsis-v"/>
@ -31,7 +35,9 @@
</div>
</div>
<div class="tasks" :ref="`tasks-container${bucket.id}`">
<Container
<!-- Make the component either a div or a draggable component based on the user rights -->
<component
:is="canWrite ? 'Container' : 'div'"
@drop="e => onDrop(bucket.id, e)"
group-name="buckets"
:get-child-payload="getTaskPayload(bucket.id)"
@ -41,7 +47,12 @@
drag-class-drop="ghost-task-drop"
drag-handle-selector=".task.draggable"
>
<Draggable v-for="task in bucket.tasks" :key="`bucket${bucket.id}-task${task.id}`">
<!-- Make the component either a div or a draggable component based on the user rights -->
<component
v-for="task in bucket.tasks"
:key="`bucket${bucket.id}-task${task.id}`"
:is="canWrite ? 'Draggable' : 'div'"
>
<div
class="task loader-container draggable"
:class="{
@ -103,10 +114,10 @@
</div>
</div>
</div>
</Draggable>
</Container>
</component>
</component>
</div>
<div class="bucket-footer">
<div class="bucket-footer" v-if="canWrite">
<div class="field" v-if="showNewTaskInput[bucket.id]">
<div class="control">
<input
@ -144,7 +155,7 @@
</div>
</div>
<div class="bucket new-bucket" v-if="!loading">
<div class="bucket new-bucket" v-if="!loading && canWrite">
<input
v-if="showNewBucketInput"
class="input"
@ -204,6 +215,7 @@
import {mapState} from 'vuex'
import {LOADING} from '../../../store/mutation-types'
import {saveListView} from '../../../helpers/saveListView'
import Rights from '../../../models/rights.json'
export default {
name: 'Kanban',
@ -254,6 +266,7 @@
buckets: state => state.kanban.buckets,
loadedListId: state => state.kanban.listId,
loading: LOADING,
canWrite: state => state.currentList.maxRight > Rights.READ,
}),
methods: {
loadBuckets() {
@ -385,7 +398,7 @@
const task = new TaskModel({
title: this.newTaskText,
bucketId: this.buckets[bi].id,
listId: this.$route.params.listId
listId: this.$route.params.listId,
})
this.taskService.create(task)
@ -410,7 +423,7 @@
const newBucket = new BucketModel({
title: this.newBucketTitle,
listId: parseInt(this.$route.params.listId)
listId: parseInt(this.$route.params.listId),
})
this.$store.dispatch('kanban/createBucket', newBucket)

16
src/views/list/views/List.vue
View File

@ -48,7 +48,7 @@
</transition>
</div>
<div class="field task-add" v-if="!list.isArchived">
<div class="field task-add" v-if="!list.isArchived && canWrite">
<div class="field is-grouped">
<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
<input
@ -85,8 +85,13 @@
<div class="column">
<div class="tasks" v-if="tasks && tasks.length > 0" :class="{'short': isTaskEdit}">
<div class="task" v-for="t in tasks" :key="t.id">
<single-task-in-list :the-task="t" @taskUpdated="updateTasks" task-detail-route="task.detail"/>
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived">
<single-task-in-list
:the-task="t"
@taskUpdated="updateTasks"
task-detail-route="task.detail"
:disabled="!canWrite"
/>
<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
<icon icon="pencil-alt"/>
</div>
</div>
@ -169,6 +174,8 @@
import taskList from '../../../components/tasks/mixins/taskList'
import {saveListView} from '../../../helpers/saveListView'
import Filters from '../../../components/list/partials/filters'
import Rights from '../../../models/rights.json'
import {mapState} from 'vuex'
export default {
name: 'List',
@ -202,6 +209,9 @@
// We use local storage and not vuex here to make it persistent across reloads.
saveListView(this.$route.params.listId, this.$route.name)
},
computed: mapState({
canWrite: state => state.currentList.maxRight > Rights.READ,
}),
methods: {
// This function initializes the tasks page and loads the first page of tasks
initTasks(page, search = '') {

93
src/views/tasks/TaskDetailView.vue
View File

@ -22,7 +22,7 @@
<!-- Content and buttons -->
<div class="columns">
<!-- Content -->
<div class="column is-two-thirds">
<div class="column" :class="{'is-two-thirds': canWrite}">
<div class="columns details">
<div class="column assignees" v-if="activeFields.assignees">
<!-- Assignees -->
@ -35,6 +35,7 @@
:list-id="task.listId"
:initial-assignees="task.assignees"
ref="assignees"
:disabled="!canWrite"
/>
</div>
<div class="column" v-if="activeFields.priority">
@ -43,7 +44,11 @@
<icon :icon="['far', 'star']"/>
Priority
</div>
<priority-select v-model="task.priority" @change="saveTask" ref="priority"/>
<priority-select
v-model="task.priority"
@change="saveTask"
ref="priority"
:disabled="!canWrite"/>
</div>
<div class="column" v-if="activeFields.dueDate">
<!-- Due Date -->
@ -55,7 +60,7 @@
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
:disabled="taskService.loading || !canWrite"
v-model="dueDate"
:config="flatPickerConfig"
@on-close="saveTask"
@ -63,7 +68,7 @@
ref="dueDate"
>
</flat-pickr>
<a v-if="dueDate" @click="() => {dueDate = task.dueDate = null;saveTask()}">
<a v-if="dueDate && canWrite" @click="() => {dueDate = task.dueDate = null;saveTask()}">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -76,7 +81,11 @@
<icon icon="percent"/>
Percent Done
</div>
<percent-done-select v-model="task.percentDone" @change="saveTask" ref="percentDone"/>
<percent-done-select
v-model="task.percentDone"
@change="saveTask"
ref="percentDone"
:disabled="!canWrite"/>
</div>
<div class="column" v-if="activeFields.startDate">
<!-- Start Date -->
@ -88,7 +97,7 @@
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
:disabled="taskService.loading || !canWrite"
v-model="task.startDate"
:config="flatPickerConfig"
@on-close="saveTask"
@ -96,7 +105,7 @@
ref="startDate"
>
</flat-pickr>
<a v-if="task.startDate" @click="() => {task.startDate = null;saveTask()}">
<a v-if="task.startDate && canWrite" @click="() => {task.startDate = null;saveTask()}">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -113,7 +122,7 @@
<flat-pickr
:class="{ 'disabled': taskService.loading}"
class="input"
:disabled="taskService.loading"
:disabled="taskService.loading || !canWrite"
v-model="task.endDate"
:config="flatPickerConfig"
@on-close="saveTask"
@ -121,7 +130,7 @@
ref="endDate"
>
</flat-pickr>
<a v-if="task.endDate" @click="() => {task.endDate = null;saveTask()}">
<a v-if="task.endDate && canWrite" @click="() => {task.endDate = null;saveTask()}">
<span class="icon is-small">
<icon icon="times"></icon>
</span>
@ -134,7 +143,11 @@
<icon icon="history"/>
Reminders
</div>
<reminders v-model="task.reminderDates" @change="saveTask" ref="reminders"/>
<reminders
v-model="task.reminderDates"
@change="saveTask"
ref="reminders"
:disabled="!canWrite"/>
</div>
<div class="column" v-if="activeFields.repeatAfter">
<!-- Repeat after -->
@ -145,6 +158,7 @@
<repeat-after
v-model="task"
@change="saveTask"
:disabled="!canWrite"
ref="repeatAfter"/>
</div>
<div class="column" v-if="activeFields.color">
@ -169,7 +183,7 @@
</span>
Labels
</div>
<edit-labels :task-id="taskId" v-model="task.labels" ref="labels"/>
<edit-labels :task-id="taskId" v-model="task.labels" ref="labels" :disabled="!canWrite"/>
</div>
<!-- Description -->
@ -185,6 +199,7 @@
@change="saveTask"
:upload-enabled="true"
:upload-callback="attachmentUpload"
:is-edit-enabled="canWrite"
placeholder="Click here to enter a description..."/>
</div>
@ -193,6 +208,7 @@
<attachments
:task-id="taskId"
ref="attachments"
:edit-enabled="canWrite"
/>
</div>
@ -210,6 +226,7 @@
:initial-related-tasks="task.relatedTasks"
:show-no-relations-notice="true"
ref="relatedTasks"
:edit-enabled="canWrite"
/>
</div>
@ -229,9 +246,9 @@
</div>
<!-- Comments -->
<comments :task-id="taskId"/>
<comments :task-id="taskId" :can-write="canWrite"/>
</div>
<div class="column is-one-third action-buttons">
<div class="column is-one-third action-buttons" v-if="canWrite">
<a
class="button is-outlined noshadow has-no-border"
:class="{'is-success': !task.done}"
@ -244,11 +261,19 @@
Done!
</template>
</a>
<a class="button" @click="setFieldActive('assignees')" v-shortkey="['ctrl', 'shift', 'a']" @shortkey="setFieldActive('assignees')">
<a
class="button"
@click="setFieldActive('assignees')"
v-shortkey="['ctrl', 'shift', 'a']"
@shortkey="setFieldActive('assignees')">
<span class="icon is-small"><icon icon="users"/></span>
Assign this task to a user
</a>
<a class="button" @click="setFieldActive('labels')" v-shortkey="['ctrl', 'shift', 'l']" @shortkey="setFieldActive('labels')">
<a
class="button"
@click="setFieldActive('labels')"
v-shortkey="['ctrl', 'shift', 'l']"
@shortkey="setFieldActive('labels')">
<span class="icon is-small"><icon icon="tags"/></span>
Add labels
</a>
@ -256,7 +281,11 @@
<span class="icon is-small"><icon icon="history"/></span>
Set Reminders
</a>
<a class="button" @click="setFieldActive('dueDate')" v-shortkey="['ctrl', 'shift', 'd']" @shortkey="setFieldActive('dueDate')">
<a
class="button"
@click="setFieldActive('dueDate')"
v-shortkey="['ctrl', 'shift', 'd']"
@shortkey="setFieldActive('dueDate')">
<span class="icon is-small"><icon icon="calendar"/></span>
Set Due Date
</a>
@ -280,11 +309,19 @@
<span class="icon is-small"><icon icon="percent"/></span>
Set Percent Done
</a>
<a class="button" @click="setFieldActive('attachments')" v-shortkey="['ctrl', 'shift', 'f']" @shortkey="setFieldActive('attachments')">
<a
class="button"
@click="setFieldActive('attachments')"
v-shortkey="['ctrl', 'shift', 'f']"
@shortkey="setFieldActive('attachments')">
<span class="icon is-small"><icon icon="paperclip"/></span>
Add attachments
</a>
<a class="button" @click="setFieldActive('relatedTasks')" v-shortkey="['ctrl', 'shift', 'r']" @shortkey="setFieldActive('relatedTasks')">
<a
class="button"
@click="setFieldActive('relatedTasks')"
v-shortkey="['ctrl', 'shift', 'r']"
@shortkey="setFieldActive('relatedTasks')">
<span class="icon is-small"><icon icon="tasks"/></span>
Add task relations
</a>
@ -326,6 +363,7 @@
import relationKinds from '../../models/relationKinds.json'
import priorites from '../../models/priorities.json'
import rights from '../../models/rights.json'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
@ -419,7 +457,7 @@
}
},
watch: {
'$route': 'loadTask'
'$route': 'loadTask',
},
created() {
this.taskService = new TaskService()
@ -444,11 +482,14 @@
}
}
if (!this.$store.getters["namespaces/getListAndNamespaceById"]) {
if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
return null
}
return this.$store.getters["namespaces/getListAndNamespaceById"](this.task.listId)
return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
},
canWrite() {
return this.task && this.task.maxRight && this.task.maxRight > rights.READ
},
},
methods: {
@ -507,6 +548,10 @@
},
saveTask(undoCallback = null) {
if (!this.canWrite) {
return
}
this.task.dueDate = this.dueDate
this.task.hexColor = this.taskColor
@ -536,7 +581,11 @@
},
setFieldActive(fieldName) {
this.activeFields[fieldName] = true
this.$nextTick(() => this.$refs[fieldName].$el.focus())
this.$nextTick(() => {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus()
}
})
},
deleteTask() {
this.$store.dispatch('tasks/delete', this.task)

27
src/views/teams/EditTeam.vue
View File

@ -61,7 +61,6 @@
</div>
</div>
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Team Members
@ -188,6 +187,7 @@
import UserService from '../../services/user'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import Rights from '../../models/rights.json'
export default {
name: 'EditTeam',
@ -201,7 +201,6 @@
showDeleteModal: false,
showUserDeleteModal: false,
userIsAdmin: false,
newMember: UserModel,
foundUsers: [],
@ -234,9 +233,14 @@
// call again the method if the route changes
'$route': 'loadTeam',
},
computed: mapState({
userInfo: state => state.auth.info,
}),
computed: {
userIsAdmin() {
return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
},
...mapState({
userInfo: state => state.auth.info,
}),
},
methods: {
loadTeam() {
this.team = new TeamModel({id: this.teamId})
@ -244,13 +248,6 @@
.then(response => {
this.$set(this, 'team', response)
this.setTitle(`Edit Team ${this.team.name}`)
let members = response.members
for (const m in members) {
members[m].teamId = this.teamId
if (members[m].id === this.userInfo.id && members[m].admin) {
this.userIsAdmin = true
}
}
})
.catch(e => {
this.error(e, this)
@ -313,7 +310,7 @@
member.admin = !member.admin
this.teamMemberService.update(member)
.then(r => {
for(const tm in this.team.members) {
for (const tm in this.team.members) {
if (this.team.members[tm].id === member.id) {
this.$set(this.team.members[tm], 'admin', r.admin)
break
@ -357,5 +354,9 @@
.team-members {
padding: 0;
.table {
border-top: 0;
}
}
</style>