3
0

Fix some user selects showing selected value as undefined if user was not on the first page

This commit is contained in:
Jože Fortun
2024-07-09 15:16:54 +02:00
parent 301ae29030
commit 7c177080ab
16 changed files with 114 additions and 74 deletions
@@ -5,6 +5,7 @@
:get-option-label="getOptionLabel"
:get-option-key="getOptionKey"
:value="user.value"
:filterable="false"
@search="search"
@input="updateRunAs"
/>
@@ -9,6 +9,7 @@
:get-option-key="r => r.value"
:get-option-label="r => getRoleLabel(r)"
:placeholder="$t('admin:picker.role.placeholder')"
:filterable="false"
@search="search"
@input="updateValue($event)"
/>
@@ -218,13 +218,12 @@
class="mb-0"
>
<c-input-select
key="roleID"
v-model="add.roleID"
:data-test-id="`select-${add.mode}-roles`"
:options="availableRoles"
:get-option-key="getOptionRoleKey"
:multiple="add.mode === 'eval'"
label="name"
:multiple="add.mode === 'eval'"
:disabled="add.mode === 'eval' && !!add.userID"
:placeholder="$t('ui.add.role.placeholder')"
/>
@@ -237,15 +236,13 @@
class="mt-3 mb-0"
>
<c-input-select
key="userID"
v-model="add.userID"
:data-test-id="`select-${add.mode}-users`"
:disabled="!!add.roleID.length"
:get-option-key="getOptionUserKey"
:options="userOptions"
:get-option-label="getUserLabel"
label="name"
:placeholder="$t('ui.add.user.placeholder')"
:filterable="false"
@search="searchUsers"
/>
</b-form-group>
@@ -328,6 +325,8 @@ export default {
newRole: null,
permissionChanges: [],
fetchedUsers: {},
}
},
@@ -380,6 +379,10 @@ export default {
this.searchUsers('', () => {})
},
beforeDestroy () {
this.setDefaultValues()
},
methods: {
checkRule (ID, res, op, access) {
const key = `${op}@${res}`
@@ -426,15 +429,23 @@ export default {
this.$SystemAPI.userList({ query, limit: 15 })
.then(({ set }) => {
this.userOptions = set.map(m => Object.freeze(m))
this.userOptions = set.reduce((acc, { userID, name, username, email }) => {
if (!this.fetchedUsers[userID]) {
this.fetchedUsers[userID] = name || username || email || `<@${userID}>`
}
acc.push(userID)
return acc
}, [])
})
.finally(() => {
loading(false)
})
},
getUserLabel ({ userID, email, name, username }) {
return name || username || email || `<@${userID}>`
getUserLabel (userID) {
return this.fetchedUsers[userID]
},
getTranslation (resource, operation = '') {
@@ -461,7 +472,7 @@ export default {
},
onAdd () {
this.$emit('add', this.add)
this.$emit('add', { ...this.add, userID: { userID: this.add.userID, name: this.fetchedUsers[this.add.userID] } })
this.add = {
mode: 'edit',
roleID: [],
@@ -477,8 +488,14 @@ export default {
return roleID
},
getOptionUserKey ({ userID }) {
return userID
setDefaultValues () {
this.add = {}
this.modeOptions = []
this.userOptions = []
this.evaluatedPermissions = undefined
this.newRole = null
this.permissionChanges = []
this.fetchedUsers = {}
},
},
}
@@ -21,6 +21,7 @@
:get-option-key="u => u.value"
:get-option-label="u => getUserLabel(u)"
:placeholder="$t('admin:picker.member.placeholder')"
:filterable="false"
@search="search"
@input="updateValue($event)"
/>
@@ -146,6 +146,12 @@ export default {
if (mode === 'edit') {
const { roleID, name } = add.roleID || {}
const ID = `edit-${roleID}`
if (this.roles.some(r => r.ID === ID)) {
this.loaded.roles = true
return
}
this.readPermissions({ roleID, name: [name] })
.finally(() => {
@@ -157,14 +163,20 @@ export default {
let name = ''
if (userID) {
const { name: uname, username, email, handle } = userID
name = [uname || username || email || handle || userID || '']
name = [userID.name]
userID = userID.userID
} else {
name = roleID.map(({ name }) => name)
roleID = roleID.map(({ roleID }) => roleID)
}
const ID = userID ? `eval-${userID}` : `eval-${roleID.join('-')}`
if (this.roles.some(r => r.ID === ID)) {
this.loaded.roles = true
return
}
this.evaluatePermissions({ name, roleID, userID })
.finally(() => {
setIncludedRoles(this.roles)
@@ -1,6 +1,6 @@
<template>
<div
class="d-flex flex-column h-100"
class="d-flex flex-column h-100 p-3"
>
<b-form
v-if="reminder"
@@ -69,11 +69,9 @@
data-test-id="select-assignee"
:options="assignees"
:get-option-label="getUserLabel"
:get-option-key="getOptionKey"
:loading="processingUsers"
:placeholder="$t('field.kind.user.suggestionPlaceholder')"
:reduce="user => user.userID"
option-value="userID"
:filterable="false"
@search="searchUsers"
/>
</b-form-group>
@@ -167,12 +165,6 @@ export default {
default: () => ({}),
},
users: {
type: Array,
required: true,
default: () => [],
},
disableSave: {
type: Boolean,
default: false,
@@ -190,7 +182,11 @@ export default {
// Do this, so we don't edit the original object
reminder: undefined,
assignees: [{ userID: this.$auth.user.userID }],
assignees: [this.$auth.user.userID],
fetchedUsers: {
[this.$auth.user.userID]: this.$t('reminder.edit.assigneePlaceholder'),
},
}
},
@@ -207,28 +203,41 @@ export default {
deep: true,
handler (edit) {
this.reminder = new system.Reminder(edit)
this.searchUsers()
this.fetchUsers()
},
},
},
methods: {
searchUsers: _.debounce(function (query) {
this.processingUsers = true
this.$SystemAPI.userList({ query, limit: 15 }).then(({ set = [] }) => {
this.assignees = set
}).finally(() => {
this.processingUsers = false
})
this.fetchUsers(query)
}, 300),
getUserLabel ({ userID, email, name, username }) {
if (userID === this.$auth.user.userID) {
return this.$t('reminder.edit.assigneePlaceholder')
}
fetchUsers (query) {
this.processingUsers = true
return name || username || email || `<@${userID}>`
return this.$SystemAPI.userList({ query, limit: 15 }).then(({ set = [] }) => {
this.assignees = [this.$auth.user.userID]
set.forEach(({ userID, name, username, email }) => {
if (!this.fetchedUsers[userID]) {
this.fetchedUsers[userID] = name || username || email || `<@${userID}>`
}
if (userID === this.$auth.user.userID) {
return
}
this.assignees.push(userID)
}, [])
}).finally(() => {
setTimeout(() => {
this.processingUsers = false
}, 300)
})
},
getUserLabel (userID) {
return this.fetchedUsers[userID]
},
getOptionKey ({ userID }) {
@@ -2,7 +2,7 @@
<div
class="d-flex flex-column h-100"
>
<div class="flex-fill overflow-auto px-2">
<div class="d-flex flex-column flex-fill gap-2 overflow-auto p-3">
<div
v-for="(r, i) in sortedReminders"
:key="r.reminderID"
@@ -11,7 +11,7 @@
<hr v-if="r.dismissedAt && sortedReminders[i - 1] ? !sortedReminders[i - 1].dismissedAt : false ">
<div
class="border card shadow-sm my-2 p-1"
class="border card shadow-sm p-1"
>
<div
class="d-flex flex-row flex-nowrap align-items-center"
@@ -12,7 +12,6 @@
<edit
v-else
:edit="edit"
:users="users"
:disable-save="disableSave"
:processing-save="processingSave"
class="flex-fill"
@@ -26,7 +25,6 @@
<script>
import List from './List'
import Edit from './Edit'
import { mapGetters } from 'vuex'
import { system, NoID } from '@cortezaproject/corteza-js'
export default {
@@ -44,12 +42,6 @@ export default {
}
},
computed: {
...mapGetters({
users: 'user/set',
}),
},
mounted () {
this.fetchReminders()
// @todo remove this, when sockets get implemented
@@ -20,7 +20,6 @@
label-class="text-primary"
>
<c-input-select
key="pageID"
v-model="options.item.pageID"
:placeholder="$t('navigation.none')"
:options="pageList"
@@ -1,6 +1,5 @@
<template>
<c-input-select
key="name"
:value="value"
:options="columns"
:get-option-label="getColumnLabel"
@@ -122,13 +122,13 @@
>
<c-input-select
v-if="a.target === 'workflow'"
key="workflowID"
v-model="a.value"
:options="workflowOptions"
:get-option-label="getWorkflowLabel"
:get-option-key="getWorkflowKey"
:reduce="wf => a.type === 'ID' ? wf.workflowID : wf.handle"
:placeholder="$t('steps:function.configurator.search-workflow')"
:filterable="false"
@input="$root.$emit('change-detected')"
@search="searchWorkflows"
/>
@@ -56,6 +56,7 @@
:get-option-key="getOptionKey"
:value="user.value"
:placeholder="$t('run-as.placeholder')"
:filterable="false"
@search="search"
@input="updateRunAs"
/>
@@ -46,7 +46,6 @@
<c-input-select
v-model="currentRoleID"
data-test-id="select-user-list-roles"
key="roleID"
label="name"
:disabled="!currentRoleID"
:clearable="false"
@@ -198,13 +197,11 @@
>
<c-input-select
data-test-id="select-role"
key="roleID"
v-model="add.roleID"
:options="roles"
:get-option-key="getOptionRoleKey"
label="name"
multiple
clearable
:disabled="!!add.userID"
:placeholder="labels.add.role.placeholder"
/>
@@ -217,16 +214,13 @@
>
<c-input-select
data-test-id="select-user"
key="userID"
v-model="add.userID"
:disabled="!!add.roleID.length"
:options="userOptions"
:get-option-label="getUserLabel"
:get-option-key="getOptionUserKey"
:reduce="o => o.userID"
label="name"
clearable
:placeholder="labels.add.user.placeholder"
:filterable="false"
@search="searchUsers"
/>
</b-form-group>
@@ -293,6 +287,8 @@ export default {
evaluate: [],
fetchedUsers: {},
add: {
roleID: [],
userID: undefined,
@@ -370,7 +366,7 @@ export default {
if (!this.roles.length) {
return this.fetchRoles()
} else if (this.currentRoleID) {
return this.reevaluatePermissions(this.currentRoleID)
return this.reEvaluatePermissions(this.currentRoleID)
}
}).finally(() => {
this.processing = false
@@ -398,10 +394,14 @@ export default {
const roleID = this.currentRoleID
this.api.permissionsUpdate({ roleID, rules }).then(() => {
this.reevaluatePermissions(roleID)
}).finally(() => {
this.submitting = false
})
this.reEvaluatePermissions(roleID)
this.toastSuccess(this.$t('permissions:ui.notification.save.success'))
}).catch(this.toastErrorHandler(this.$t('permissions:ui.notification.save.failed')))
.finally(() => {
setTimeout(() => {
this.submitting = false
}, 300)
})
},
async fetchPermissions () {
@@ -444,7 +444,7 @@ export default {
})
},
async reevaluatePermissions (roleID) {
async reEvaluatePermissions (roleID) {
return this.fetchRules(roleID).then(() => {
return Promise.all(this.evaluate.map(e => {
let { roleID = [], userID } = e
@@ -467,15 +467,23 @@ export default {
this.$SystemAPI.userList({ query, limit: 15 })
.then(({ set }) => {
this.userOptions = set.map(m => Object.freeze(m))
this.userOptions = set.reduce((acc, { userID, name, username, email, handle }) => {
if (!this.fetchedUsers[userID]) {
this.fetchedUsers[userID] = name || username || email || `<@${userID}>`
}
acc.push(userID)
return acc
}, [])
})
.finally(() => {
loading(false)
})
},
getUserLabel ({ userID, email, name, username }) {
return name || username || email || `<@${userID}>`
getUserLabel (userID) {
return this.fetchedUsers[userID]
},
onAddEval () {
@@ -504,8 +512,7 @@ export default {
getEvalName ({ userID, roleID }) {
if (userID) {
const { name, username, email, handle } = this.userOptions.find(({ userID: id }) => id === userID) || {}
return [name || username || email || handle || userID || '']
return [this.fetchedUsers[userID]]
} else {
return roleID.map(({ name }) => name)
}
@@ -589,10 +596,6 @@ export default {
return roleID
},
getOptionUserKey ({ userID }) {
return userID
},
setDefaultValues () {
this.processing = false
this.submitting = false
@@ -608,6 +611,7 @@ export default {
this.currentRoleID = undefined
this.evaluate = []
this.add = {}
this.fetchedUsers = {}
},
destroyEvents() {
@@ -1,7 +1,6 @@
<template>
<c-input-select
data-test-id="select-sens-lvl"
key="type"
:value="_value"
:disabled="_disabled"
:options="sensitivityLevels"
@@ -3,7 +3,7 @@
v-model="isVisible"
:title="title"
header-class="d-flex align-items-center justify-content-between reminder-sidebar-header p-3 border-bottom"
body-class="d-flex flex-column overflow-hidden bg-white p-3"
body-class="d-flex flex-column overflow-hidden bg-white"
:backdrop="isMobile"
no-footer
right
@@ -5,6 +5,11 @@ ui:
loading: Loading permissions
label: Permissions
notification:
save:
success: Permissions saved
failed: Failed to save permissions
edit:
label: User roles
description: Select role to set permissions