Update task table designated users [SCI-10092]

app/controllers/user_my_modules_controller.rb

@@ -92,11 +92,9 @@ class UserMyModulesController < ApplicationController
                       .joins("LEFT OUTER JOIN user_my_modules ON user_my_modules.user_id = users.id "\
                              "AND user_my_modules.my_module_id = #{@my_module.id}")
                       .search(false, params[:query])
-                      .order(:full_name)
-                      .limit(Constants::SEARCH_LIMIT)
                       .select('users.*', 'user_my_modules.id as user_my_module_id')
-                      .select('CASE WHEN user_my_modules.id IS NOT NULL '\
+                      .select('CASE WHEN user_my_modules.id IS NOT NULL THEN true ELSE false END as designated')
-                              'THEN true ELSE false END as designated')
+                      .order('designated DESC', :full_name)
 
     users = users.map do |user|
       next if params[:skip_assigned] && user.designated

app/javascript/vue/my_modules/list.vue

@@ -153,7 +153,8 @@ export default {
       field: 'designated',
       headerName: this.i18n.t('experiments.table.column.assigned_html'),
       sortable: false,
-      cellRenderer: DesignatedUsers
+      cellRenderer: DesignatedUsers,
+      minWidth: 220
     });
     columns.push({
       field: 'tags',

app/javascript/vue/my_modules/renderers/designated_users.vue

@@ -24,14 +24,18 @@
                 :placeholder="i18n.t('experiments.table.search')" />
         <i class="sn-icon sn-icon-search"></i>
       </div>
-      <div class="max-h-80 overflow-y-auto">
+      <div class="h-64 overflow-y-auto">
         <div v-for="user in allUsers"
-             :key="user.value"
+            :key="user.value"
-             @click="selectUser(user)"
+            @click="selectUser(user)"
-             :class="{ '!bg-sn-super-light-blue': selectedUsers.includes(user.value) }"
+            :class="{ '!bg-sn-super-light-blue': selectedUsers.includes(user.value) }"
-             class="whitespace-nowrap rounded px-3 py-2.5 flex items-center gap-2
+            class="whitespace-nowrap rounded px-3 py-2.5 flex items-center gap-2
                     hover:no-underline cursor-pointer hover:bg-sn-super-light-grey leading-5"
           >
+            <div class="sci-checkbox-container">
+              <input type="checkbox" class="sci-checkbox" :checked="selectedUsers.includes(user.value)" />
+              <label class="sci-checkbox-label"></label>
+            </div>
             <img :src="user.params.avatar_url" class="w-7 h-7" />
             {{ user.label }}
         </div>
@@ -95,7 +99,7 @@ export default {
     closeFlyout() {
       this.query = '';
       if (this.changed) {
-        this.params.dtComponent.loadData();
+        this.params.dtComponent.updateTable();
         this.changed = false;
       }
     },
@@ -115,7 +119,8 @@ export default {
             my_module_id: this.params.data.id,
             user_id: user.value
           }
-        }).then(() => {
+        }).then((response) => {
+          this.allUsers.find((u) => u.value === user.value).params.unassign_url = response.data.unassign_url;
           this.selectedUsers.push(user.value);
         });
       }

app/javascript/vue/shared/datatable/table.vue

@@ -253,11 +253,7 @@ export default {
   watch: {
     reloadingTable() {
       if (this.reloadingTable) {
-        if (this.scrollMode === 'pages') {
+        this.updateTable();
-          this.loadData();
-        } else {
-          this.reloadTable();
-        }
       }
     },
     currentViewRender() {
@@ -317,6 +313,13 @@ export default {
 
       this.gridApi.sizeColumnsToFit();
     },
+    updateTable() {
+      if (this.scrollMode === 'pages') {
+        this.loadData();
+      } else {
+        this.reloadTable();
+      }
+    },
     reloadTable() {
       if (this.dataLoading) return;
 

app/javascript/vue/shared/mixins/fixed_flyout.js

@@ -71,10 +71,12 @@ export default {
         flyout.style.bottom = `${bottom}px`;
         flyout.style.top = 'unset';
         flyout.style.boxShadow = '0px -16px 32px 0px rgba(16, 24, 40, 0.07)';
+        flyout.style.maxHeight = `${screenHeight - bottom - 25}px`;
       } else {
         flyout.style.top = `${top}px`;
         flyout.style.bottom = 'unset';
         flyout.style.boxShadow = '';
+        flyout.style.maxHeight = `${screenHeight - top - 25}px`;
       }
     }
   }

config/locales/en.yml

@@ -1592,7 +1592,7 @@ en:
         archived_tasks: 'Go to Archived tasks'
         active_tasks: 'Go to Active tasks'
       add_tag: '+ Add tag'
-      search: 'Search...'
+      search: 'Manage assignees'
       not_set: 'not set'
       archive_group:
         success_flash: "<strong>%{number}</strong> task(s) successfully archived."