🐛 Fix Typeahead in settings (#3595)

Author: HerrLevin

app/Http/Controllers/API/v1/UserController.php

@@ -434,11 +434,11 @@ public function destroyMute(int $userId): JsonResponse {
 
     /**
      * @OA\Get(
-     *      path="/user/search/{?query}",
+     *      path="/user/search/{query}",
      *      operationId="searchUsers",
      *      tags={"User"},
-     *      summary="Get paginated statuses for single user",
-     *      description="Returns paginated statuses of a single user specified by the username",
+     *      summary="Get paginated search results for combined search on username and (display)name",
+     *      description="Returns paginated search results for a user based on the given query.",
      *      @OA\Parameter (
      *           name="query",
      *           in="path",
@@ -452,14 +452,58 @@ public function destroyMute(int $userId): JsonResponse {
      *          in="query",
      *          @OA\Schema(type="integer")
      *      ),
+     *      @OA\Response(
+     *          response=200,
+     *          description="successful operation",
+     *          @OA\JsonContent(
+     *              @OA\Property(property="data", type="array",
+     *                  @OA\Items(
+     *                      ref="#/components/schemas/UserResource"
+     *                  )
+     *              ),
+     *              @OA\Property(property="links", ref="#/components/schemas/Links"),
+     *              @OA\Property(property="meta", ref="#/components/schemas/PaginationMeta"),
+     *          )
+     *       ),
+     *       @OA\Response(response=400, description="Bad request"),
+     *       security={
+     *           {"passport": {"read-search"}}, {"token": {}}
+     *       }
+     *     )
+     *
+     */
+    public function search(string $query): AnonymousResourceCollection|JsonResponse {
+        try {
+            return UserResource::collection(BackendUserBackend::searchUser($query));
+        } catch (InvalidArgumentException) {
+            return $this->sendError(['message' => __('messages.exception.general')], 400);
+        }
+    }
+
+    /**
+     * @OA\Get(
+     *      path="/user/search",
+     *      operationId="searchUsersByParameters",
+     *      tags={"User"},
+     *      summary="Get paginated search results for users by either username or (display)name",
+     *      description="Returns paginated search results for users based on the given parameters.",
+     *      @OA\Parameter (
+     *          name="page",
+     *          description="Page of pagination",
+     *          required=false,
+     *          in="query",
+     *          @OA\Schema(type="integer")
+     *      ),
      *      @OA\Parameter (
      *          name="username",
      *          in="query",
+     *          required=false,
      *          description="Search for parts username",
      *      ),
      *      @OA\Parameter (
      *          name="name",
      *          in="query",
+     *          required=false,
      *          description="Search for parts of users (display)name",
      *      ),
      *      @OA\Response(
@@ -482,17 +526,12 @@ public function destroyMute(int $userId): JsonResponse {
      *     )
      *
      */
-    public function search(Request $request, ?string $query = null): AnonymousResourceCollection|JsonResponse {
+    public function searchByParameters(Request $request): AnonymousResourceCollection|JsonResponse {
         try {
             $validated = $request->validate([
                                                 'username' => ['nullable', 'string', 'max:255'],
                                                 'name'     => ['nullable', 'string', 'max:255'],
                                             ]);
-            if (empty($validated) && isset($query)) {
-                // if no specific search criteria is given, search for the query in username and display_name
-                return UserResource::collection(BackendUserBackend::searchUser($query));
-            }
-
             if (empty($validated)) {
                 return response()->json(null, 400);
             }

resources/types/Api.gen.ts

@@ -2429,25 +2429,58 @@ export class Api<
       }),
 
     /**
-     * @description Returns paginated statuses of a single user specified by the username
+     * @description Returns paginated search results for a user based on the given query.
      *
      * @tags User
      * @name SearchUsers
-     * @summary Get paginated statuses for single user
-     * @request GET:/user/search/{?query}
+     * @summary Get paginated search results for combined search on username and (display)name
+     * @request GET:/user/search/{query}
      * @secure
      */
     searchUsers: (
-      queryParams: {
+      query?: any,
+      queryParams?: {
+        /** Page of pagination */
+        page?: number;
+      },
+      params: RequestParams = {},
+    ) =>
+      this.request<
+        {
+          data?: UserResource[];
+          /** pagination links */
+          links?: Links;
+          /** Pagination meta data */
+          meta?: PaginationMeta;
+        },
+        void
+      >({
+        path: `/user/search/${query}`,
+        method: "GET",
+        query: queryParams,
+        secure: true,
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * @description Returns paginated search results for users based on the given parameters.
+     *
+     * @tags User
+     * @name SearchUsersByParameters
+     * @summary Get paginated search results for users by either username or (display)name
+     * @request GET:/user/search
+     * @secure
+     */
+    searchUsersByParameters: (
+      query?: {
         /** Page of pagination */
         page?: number;
         /** Search for parts username */
         username?: any;
         /** Search for parts of users (display)name */
         name?: any;
-        query: string;
       },
-      query?: any,
       params: RequestParams = {},
     ) =>
       this.request<
@@ -2460,9 +2493,9 @@ export class Api<
         },
         void
       >({
-        path: `/user/search/`,
+        path: `/user/search`,
         method: "GET",
-        query: queryParams,
+        query: query,
         secure: true,
         format: "json",
         ...params,

resources/vue/components/Settings/Partials/TimezoneDropdown.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import {trans} from "laravel-vue-i18n";
+import {ref, watch} from 'vue'
+
+defineProps({
+  name: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  errors: {
+    type: Array,
+    default: []
+  },
+});
+
+const model = defineModel<string>();
+const timezones = ref<{ value: string, label: string }[]>([]);
+const filteredTimezones = ref<{ value: string, label: string }[]>([]);
+const search = ref('');
+
+timezones.value = Intl.supportedValuesOf('timeZone').map((timezone) => {
+  return {value: timezone, label: timezone};
+});
+
+function filterTimezones() {
+  if (search.value.length === 0) {
+    filteredTimezones.value = [];
+    return;
+  }
+  const searchLower = search.value.toLowerCase();
+  filteredTimezones.value = timezones.value.filter((timezone) => {
+    return timezone.label.toLowerCase().includes(searchLower);
+  });
+  // maximum 10 results
+  filteredTimezones.value = filteredTimezones.value.slice(0, 10);
+}
+
+function selectTimezone(timezone: string) {
+  if (!timezone) {
+    return;
+  }
+  model.value = timezone;
+  filterTimezones();
+}
+
+watch(model, (newValue) => {
+  search.value = newValue || '';
+  filterTimezones();
+});
+</script>
+
+<template>
+  <div class="form-group row">
+    <label :for="name" class="col-md-4 col-form-label text-md-right">
+      {{ trans('user.timezone') }}
+    </label>
+
+    <div class="col-md-6">
+      <div class="col btn-group me-1">
+        <button class="btn btn-sm btn-outline-primary dropdown-toggle"
+                type="button"
+                id="timezoneDropdown"
+                data-bs-dropdown-animation="off"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+        >
+          {{ $props.modelValue }}
+        </button>
+        <div
+            aria-labelledby="timezoneDropdown"
+            class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden"
+        >
+          <form class="p-2 mb-2 border-bottom">
+            <input
+                v-model="search"
+                @input="filterTimezones"
+                type="search"
+                class="form-control mobile-input-fs-16"
+                autocomplete="off"
+                :placeholder="trans('user.timezone')"
+                @keydown.enter="selectTimezone(filteredTimezones[0]?.value ?? '')"
+            >
+          </form>
+          <ul class="list-unstyled mb-0" v-if="filteredTimezones.length > 0">
+            <li v-for="timezone in filteredTimezones" :key="timezone?.value">
+              <a href="#"
+                 class="dropdown-item d-flex align-items-center gap-2 py-2"
+                 @click="selectTimezone(timezone?.value)"
+              >
+                <div class="flex-grow-1">
+                  <div class="fw-bold">{{ timezone?.label }}</div>
+                </div>
+              </a>
+            </li>
+          </ul>
+          <div v-else class="p-2 mb-0 text-center text-muted">
+          </div>
+        </div>
+      </div>
+      <span v-for="error in errors" class="invalid-feedback" role="alert">
+          <strong>{{ error }}</strong>
+      </span>
+    </div>
+  </div>
+</template>

resources/vue/components/Settings/ProfileSettings.vue

@@ -13,10 +13,10 @@ import {
 import Input from "./Partials/Input.vue";
 import Select from "./Partials/Select.vue";
 import {SelectOption} from "./Partials/SelectOption";
-import DataLilst from "./Partials/DataLilst.vue";
 import {Notyf} from "notyf";
 import Textfield from "./Partials/Textfield.vue";
 import {showApiValidationErrors} from "../../helpers/NotyfHelper";
+import TimezoneDropdown from "./Partials/TimezoneDropdown.vue";
 
 const notyf = new Notyf({position: {x: "right", y: "bottom"}});
 const api = new Api({baseUrl: window.location.origin + '/api/v1'});
@@ -136,18 +136,8 @@ getDefaultUserData();
               autocomplete="email"
               required="true"
           />
-          <Select
-              :title="trans('user.mapprovider')"
-              :name="'mapprovider'"
-              v-model="userData.mapProvider"
-              :options="providers"
-              :errors="errors.mapProvider"
-          />
-          <DataLilst
+          <TimezoneDropdown
               v-model="userData.timezone"
-              :errors="errors.timezone"
-              :options="timezones"
-              :title="trans('user.timezone')"
           />
 
           <Select

routes/api.php

@@ -120,7 +120,8 @@
                 Route::post('/{userId}/mute', [UserController::class, 'createMute']);
                 Route::delete('/{userId}/mute', [UserController::class, 'destroyMute']);
             });
-            Route::get('search/{query?}', [UserController::class, 'search'])->middleware(['scope:read-search']);
+            Route::get('search/{query}', [UserController::class, 'search'])->middleware(['scope:read-search']);
+            Route::get('search', [UserController::class, 'searchByParameters'])->middleware(['scope:read-search']);
             Route::get('statuses/active', [StatusController::class, 'getActiveStatus'])
                  ->middleware(['scope:read-statuses']);
         });