ui(admin): start work on LocationSelect.tsx

app/Http/Controllers/Api/Application/Locations/LocationController.php

@@ -2,7 +2,6 @@
 
 namespace Pterodactyl\Http\Controllers\Api\Application\Locations;
 
-use Illuminate\Http\Response;
 use Pterodactyl\Models\Location;
 use Illuminate\Http\JsonResponse;
 use Spatie\QueryBuilder\QueryBuilder;
@@ -21,25 +20,10 @@ use Pterodactyl\Http\Requests\Api\Application\Locations\UpdateLocationRequest;
 
 class LocationController extends ApplicationApiController
 {
-    /**
-     * @var \Pterodactyl\Services\Locations\LocationCreationService
-     */
-    private $creationService;
-
-    /**
-     * @var \Pterodactyl\Services\Locations\LocationDeletionService
-     */
-    private $deletionService;
-
-    /**
-     * @var \Pterodactyl\Contracts\Repository\LocationRepositoryInterface
-     */
-    private $repository;
-
-    /**
-     * @var \Pterodactyl\Services\Locations\LocationUpdateService
-     */
-    private $updateService;
+    private LocationCreationService $creationService;
+    private LocationDeletionService $deletionService;
+    private LocationUpdateService $updateService;
+    private LocationRepositoryInterface $repository;
 
     /**
      * LocationController constructor.
@@ -47,15 +31,15 @@ class LocationController extends ApplicationApiController
     public function __construct(
         LocationCreationService $creationService,
         LocationDeletionService $deletionService,
-        LocationRepositoryInterface $repository,
-        LocationUpdateService $updateService
+        LocationUpdateService $updateService,
+        LocationRepositoryInterface $repository
     ) {
         parent::__construct();
 
         $this->creationService = $creationService;
         $this->deletionService = $deletionService;
-        $this->repository = $repository;
         $this->updateService = $updateService;
+        $this->repository = $repository;
     }
 
     /**
@@ -66,7 +50,7 @@ class LocationController extends ApplicationApiController
         $perPage = $request->query('per_page', 10);
         if ($perPage < 1) {
             $perPage = 10;
-        } else if ($perPage > 100) {
+        } elseif ($perPage > 100) {
             throw new BadRequestHttpException('"per_page" query parameter must be below 100.');
         }
 
@@ -94,9 +78,6 @@ class LocationController extends ApplicationApiController
      * Store a new location on the Panel and return a HTTP/201 response code with the
      * new location attached.
      *
-     * @param \Pterodactyl\Http\Requests\Api\Application\Locations\StoreLocationRequest $request
-     * @return \Illuminate\Http\JsonResponse
-     *
      * @throws \Pterodactyl\Exceptions\Model\DataValidationException
      */
     public function store(StoreLocationRequest $request): JsonResponse

resources/scripts/api/admin/locations/searchLocations.ts

@@ -0,0 +1,20 @@
+import http from '@/api/http';
+import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
+
+export default (filters?: Record<string, string>): Promise<Location[]> => {
+    const params = {};
+    if (filters !== undefined) {
+        Object.keys(filters).forEach(key => {
+            // @ts-ignore
+            params['filter[' + key + ']'] = filters[key];
+        });
+    }
+
+    return new Promise((resolve, reject) => {
+        http.get('/api/application/locations', { params: { ...params } })
+            .then(response => resolve(
+                (response.data.data || []).map(rawDataToLocation)
+            ))
+            .catch(reject);
+    });
+};

resources/scripts/components/admin/nodes/LocationSelect.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
+import { Location } from '@/api/admin/locations/getLocations';
+import searchLocations from '@/api/admin/locations/searchLocations';
+import InputSpinner from '@/components/elements/InputSpinner';
+import { debounce } from 'debounce';
+
+const Dropdown = styled.div<{ expanded: boolean }>`
+    ${tw`absolute mt-1 w-full rounded-md bg-neutral-900 shadow-lg z-10`};
+    ${props => !props.expanded && tw`hidden`};
+`;
+
+export default ({ defaultLocation }: { defaultLocation: Location }) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ expanded, setExpanded ] = useState(false);
+    const [ location, setLocation ] = useState<Location>(defaultLocation);
+    const [ locations, setLocations ] = useState<Location[]>([]);
+
+    const [ inputText, setInputText ] = useState('');
+
+    const onFocus = () => {
+        setInputText('');
+        setLocations([]);
+        setExpanded(true);
+    };
+
+    const onBlur = () => {
+        // setInputText(location.short);
+        // setExpanded(false);
+    };
+
+    const search = debounce((query: string) => {
+        if (!expanded) {
+            return;
+        }
+
+        if (query === '') {
+            setLocations([]);
+            return;
+        }
+
+        setLoading(true);
+        searchLocations({ short: query }).then((locations) => {
+            console.log(locations);
+            setLocations(locations);
+        }).then(() => setLoading(false));
+    }, 200);
+
+    const selectLocation = (location: Location) => {
+        setLocation(location);
+    };
+
+    useEffect(() => {
+        setInputText(location.short);
+        setExpanded(false);
+    }, [ location ]);
+
+    return (
+        <div>
+            <Label htmlFor="listbox-label">Location</Label>
+
+            <div css={tw`mt-1 relative`}>
+                <InputSpinner visible={loading}>
+                    <Input type="text" value={inputText} onFocus={onFocus} onBlur={onBlur} onChange={e => {
+                        setInputText(e.currentTarget.value);
+                        search(e.currentTarget.value);
+                    }}
+                    />
+                </InputSpinner>
+
+                <div css={tw`ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none`}>
+                    <svg css={tw`h-5 w-5 text-neutral-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
+                    </svg>
+                </div>
+
+                <Dropdown expanded={expanded}>
+                    <ul tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
+                        {locations.map(l => (
+                            l.id === location.id ?
+                                <li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={() => selectLocation(l)}>
+                                    <div css={tw`flex items-center`}>
+                                        <span css={tw`block font-medium truncate`}>
+                                            {l.short}
+                                        </span>
+                                    </div>
+
+                                    <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
+                                        <svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+                                        </svg>
+                                    </span>
+                                </li>
+                                :
+                                <li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={() => selectLocation(l)}>
+                                    <div css={tw`flex items-center`}>
+                                        <span css={tw`block font-normal truncate`}>
+                                            {l.short}
+                                        </span>
+                                    </div>
+                                </li>
+                        ))}
+                    </ul>
+                </Dropdown>
+            </div>
+        </div>
+    );
+};

resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx

@@ -1,3 +1,4 @@
+import LocationSelect from '@/components/admin/nodes/LocationSelect';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
@@ -12,8 +13,11 @@ import { ApplicationStore } from '@/state';
 import { Actions, useStoreActions } from 'easy-peasy';
 
 interface Values {
+    public: boolean;
     name: string;
     description: string;
+    locationId: number;
+    fqdn: string;
 }
 
 export default () => {
@@ -44,8 +48,11 @@ export default () => {
         <Formik
             onSubmit={submit}
             initialValues={{
+                public: node.public,
                 name: node.name,
                 description: node.description || '',
+                locationId: node.locationId,
+                fqdn: node.fqdn,
             }}
             validationSchema={object().shape({
                 name: string().required().max(191),
@@ -77,6 +84,19 @@ export default () => {
                                     />
                                 </div>
 
+                                <div css={tw`mb-6`}>
+                                    <LocationSelect defaultLocation={{ id: 1, short: 'local', long: '', createdAt: new Date(), updatedAt: new Date() }}/>
+                                </div>
+
+                                <div css={tw`mb-6`}>
+                                    <Field
+                                        id={'fqdn'}
+                                        name={'fqdn'}
+                                        label={'FQDN'}
+                                        type={'text'}
+                                    />
+                                </div>
+
                                 <div css={tw`w-full flex flex-row items-center`}>
                                     <div css={tw`flex ml-auto`}>
                                         <Button type={'submit'} disabled={isSubmitting || !isValid}>

resources/scripts/routers/AdminRouter.tsx

@@ -188,7 +188,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
             </Sidebar>
 
             <div css={tw`h-16 w-screen flex md:hidden flex-row flex-shrink-0 items-center bg-neutral-900 px-6`}>
-                <h1 css={tw`text-2xl text-neutral-50 whitespace-nowrap`}>{applicationName}</h1>
+                <h1 css={tw`text-2xl text-neutral-50 whitespace-nowrap font-medium`}>{applicationName}</h1>
 
                 <div css={tw`flex md:hidden flex-shrink-0 ml-auto`}>
                     <button css={tw`inline-flex items-center justify-center p-2 rounded-md text-neutral-400 hover:text-neutral-50 hover:bg-neutral-700 focus:outline-none focus:bg-neutral-700 focus:text-neutral-50`}>