Fix some user selects showing selected value as undefined if user was…

… not on the first page
cortezaproject · Jul 9, 2024 · 7c17708 · 7c17708
1 parent 301ae29
commit 7c17708
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 72 deletions.
diff --git a/client/web/admin/src/components/Authclient/CSelectUser.vue b/client/web/admin/src/components/Authclient/CSelectUser.vue
@@ -5,6 +5,7 @@
     :get-option-label="getOptionLabel"
     :get-option-key="getOptionKey"
     :value="user.value"
+    :filterable="false"
     @search="search"
     @input="updateRunAs"
   />

diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
@@ -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)"
     />

diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -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 = {}
     },
   },
 }

diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -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)"
       />

diff --git a/client/web/admin/src/mixins/permissionHelpers.js b/client/web/admin/src/mixins/permissionHelpers.js
@@ -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)

diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -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.fetchUsers(query)
+    }, 300),
+
+    fetchUsers (query) {
       this.processingUsers = true
 
-      this.$SystemAPI.userList({ query, limit: 15 }).then(({ set = [] }) => {
-        this.assignees = set
+      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(() => {
-        this.processingUsers = false
+        setTimeout(() => {
+          this.processingUsers = false
+        }, 300)
       })
-    }, 300),
-
-    getUserLabel ({ userID, email, name, username }) {
-      if (userID === this.$auth.user.userID) {
-        return this.$t('reminder.edit.assigneePlaceholder')
-      }
+    },
 
-      return name || username || email || `<@${userID}>`
+    getUserLabel (userID) {
+      return this.fetchedUsers[userID]
     },
 
     getOptionKey ({ userID }) {

diff --git a/client/web/compose/src/components/Namespaces/Reminders/List.vue b/client/web/compose/src/components/Namespaces/Reminders/List.vue
@@ -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"

diff --git a/client/web/compose/src/components/Namespaces/Reminders/index.vue b/client/web/compose/src/components/Namespaces/Reminders/index.vue
@@ -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

diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -20,7 +20,6 @@
         label-class="text-primary"
       >
         <c-input-select
-          key="pageID"
           v-model="options.item.pageID"
           :placeholder="$t('navigation.none')"
           :options="pageList"

diff --git a/client/web/reporter/src/components/Common/ColumnSelector.vue b/client/web/reporter/src/components/Common/ColumnSelector.vue
@@ -1,6 +1,5 @@
 <template>
   <c-input-select
-    key="name"
     :value="value"
     :options="columns"
     :get-option-label="getColumnLabel"

diff --git a/client/web/workflow/src/components/Configurator/Function.vue b/client/web/workflow/src/components/Configurator/Function.vue
@@ -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"
                   />

diff --git a/client/web/workflow/src/components/Configurator/Workflow.vue b/client/web/workflow/src/components/Configurator/Workflow.vue
@@ -56,6 +56,7 @@
         :get-option-key="getOptionKey"
         :value="user.value"
         :placeholder="$t('run-as.placeholder')"
+        :filterable="false"
         @search="search"
         @input="updateRunAs"
       />