🚸 Show when user search results are incomplete (#50)

linagora · May 13, 2024 · b121f6c · b121f6c
1 parent 1a66a6f
commit b121f6c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/tdrive/frontend/public/locales/en.json b/tdrive/frontend/public/locales/en.json
@@ -52,6 +52,7 @@
     "scenes.app.workspaces.create_company.group_data.group_main_activity.other": "Other",
     "components.drive_dropzone.uploading": "Uploading...",
     "components.user_picker.modal_no_result": "No results found",
+    "components.user_picker.modal_results_trucated": "First {{$1}} results of {{$2}} shown...",
     "components.users_picker.add_me": "Add me",
     "scenes.app.workspaces.create_company.invitations.title": "Configure your workspace.",
     "scenes.app.header.disconnected": "You are disconnected",

diff --git a/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx b/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx
@@ -20,6 +20,7 @@ export default (props: {
   const { search, result, query } = useSearchUsers({ scope: 'company' });
   const [isFocus, setFocus] = useState(false);
   const inputElement = useRef<HTMLInputElement>(null);
+  const maxUserResultsShown = 5;
 
   useEffect(() => {
     if (users.length) props.onChange(users);
@@ -55,7 +56,7 @@ export default (props: {
                 <Info>{Languages.t('components.user_picker.modal_no_result')}</Info>
               </div>
             )}
-            {_.reverse(result.slice(0, 5)).map((user, i) => {
+            {_.reverse(result.slice(0, maxUserResultsShown)).map((user, i) => {
               return (
                 <div key={user.id} className={"rounded m-1 p-3 new-direct-channel-proposed-user flex flex-row items-center justify-center align-baseline" + (i > 0 ? ' border-t' : '')}>
                   <div className="grow">
@@ -78,6 +79,12 @@ export default (props: {
                   </div>
               );
             })}
+            {result.length > maxUserResultsShown &&
+              <div className='grow text-center italic'>
+                {Languages.t('components.user_picker.modal_results_trucated',
+                  [maxUserResultsShown, result.length],
+                  'First {{$1}} results of {{$2}} shown...')}
+              </div>}
             <div className='-mb-px' />
           </div>
         </div>