chore(ltFilesSelector): suggest user names

app/api/ltData.ts

@@ -15,6 +15,7 @@ interface ApiResponse<P = never> {
     pages: {[key: string]: P};
     categorymembers?: P[];
     allpages?: P[];
+    allusers?: P[];
   };
 }
 
@@ -24,6 +25,11 @@ interface Page {
   title: string;
 }
 
+interface User {
+  userid: number;
+  name: string;
+}
+
 interface CoordinatePage {
   pageid: number;
   ns: number;
@@ -211,6 +217,17 @@ export async function getCategoriesForPrefix(prefix: string): Promise<CommonsTit
   return (data.query.allpages || []).map(i => i.title.replace(/^Category:/, '' as CommonsTitle));
 }
 
+export async function getUsersForPrefix(prefix: string): Promise<string[]> {
+  const params = {
+    list: 'allusers',
+    aulimit: 30,
+    aufrom: prefix,
+    apuprefix: prefix
+  };
+  const data = await $query<ApiResponse<User>>(params, {}, undefined, () => false);
+  return (data.query.allusers || []).map(i => i.name);
+}
+
 export async function getFiles({
   files,
   user,

app/components/ltFilesSelector.vue

@@ -36,7 +36,13 @@
   <form v-show="$tab === Tab.USER" @submit.stop.prevent="nextForCategory()">
     <div class="mb-4">
       <label for="inputUser">{{ t('User') }}</label>
-      <input id="inputUser" v-model="user" class="form-control" placeholder="User:…" />
+      <input
+        id="inputUser"
+        v-model="user"
+        class="form-control"
+        list="datalistUser"
+        placeholder="User:…"
+      />
     </div>
     <div class="row">
       <div class="mb-4 col-sm-4">
@@ -68,6 +74,10 @@
         <span>{{ t('Show User files as gallery') }}</span>
       </button>
       <input class="invisible" type="submit" :disabled="!user" />
+      <lt-spinner v-if="isLoading" />
+      <datalist id="datalistUser">
+        <option v-for="i in userSuggestions" :key="i" :value="i"></option>
+      </datalist>
     </div>
   </form>
   <form v-show="$tab === Tab.CATEGORY" @submit.stop.prevent="nextForCategory()">
@@ -185,6 +195,7 @@ const user = ref<string>($route.query.user as string);
 const userLimit = ref(tryParse(parseInt, $route.query.userLimit as string, undefined));
 const userStart = ref<string>($route.query.userStart as string);
 const userEnd = ref<string>($route.query.userEnd as string);
+const userSuggestions = ref<string[]>([]);
 const titles = ref<string>('');
 
 function tryParse<T>(parser: (string: string) => T, text: string, fallback: T): T {
@@ -213,6 +224,20 @@ watchDebounced(
   {debounce: 500}
 );
 
+watchDebounced(
+  user,
+  async user => {
+    isLoading.value = true;
+    try {
+      userSuggestions.value = await ltData.getUsersForPrefix(user);
+      console.log(userSuggestions.value);
+    } finally {
+      isLoading.value = false;
+    }
+  },
+  {debounce: 500}
+);
+
 function next(name = 'geolocate') {
   const files = titleList.value.join('|');
   $routes.push({name, query: {files}});