Support setting notes on allocations; closes #561

resources/scripts/api/getServers.ts

@@ -11,7 +11,7 @@ export default (query?: string, includeAdmin?: boolean): Promise<PaginatedResult
             },
         })
             .then(({ data }) => resolve({
-                items: (data.data || []).map((datum: any) => rawDataToServerObject(datum.attributes)),
+                items: (data.data || []).map((datum: any) => rawDataToServerObject(datum)),
                 pagination: getPaginationSet(data.meta.pagination),
             }))
             .catch(reject);

resources/scripts/components/elements/Input.tsx

@@ -36,7 +36,8 @@ const checkboxStyle = css<Props>`
 
 const inputStyle = css<Props>`
     // Reset to normal styling.
-    ${tw`appearance-none w-full min-w-0`};
+    resize: none;
+    ${tw`appearance-none outline-none w-full min-w-0`};
     ${tw`p-3 border rounded text-sm transition-all duration-150`};
     ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
     
@@ -49,8 +50,8 @@ const inputStyle = css<Props>`
         ${tw`shadow-none`};
     }
     
-    &:focus {
-        ${tw`shadow-md border-neutral-400`};
+    &:not(:disabled):not(:read-only):focus {
+        ${tw`shadow-md border-primary-400`};
     }
 
     &:disabled {

resources/scripts/components/server/network/NetworkContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import tw from 'twin.macro';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
@@ -14,14 +14,19 @@ import { Allocation } from '@/api/server/getServer';
 import Spinner from '@/components/elements/Spinner';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import useFlash from '@/plugins/useFlash';
+import { Textarea } from '@/components/elements/Input';
+import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
+import { debounce } from 'debounce';
+import InputSpinner from '@/components/elements/InputSpinner';
 
 const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 const NetworkContainer = () => {
-    const server = useServer();
+    const { uuid, allocations } = useServer();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { data, error, mutate } = useSWR<Allocation[]>(server.uuid, key => getServerAllocations(key), { initialData: server.allocations });
+    const [ loading, setLoading ] = useState<false | number>(false);
+    const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), { initialData: allocations });
 
     const setPrimaryAllocation = (id: number) => {
         clearFlashes('server:network');
@@ -29,13 +34,25 @@ const NetworkContainer = () => {
         const initial = data;
         mutate(data?.map(a => a.id === id ? { ...a, isDefault: true } : { ...a, isDefault: false }), false);
 
-        setPrimaryServerAllocation(server.uuid, id)
+        setPrimaryServerAllocation(uuid, id)
             .catch(error => {
                 clearAndAddHttpError({ key: 'server:network', error });
                 mutate(initial, false);
             });
     };
 
+    const setAllocationNotes = debounce((id: number, notes: string) => {
+        setLoading(id);
+        clearFlashes('server:network');
+
+        setServerAllocationNotes(uuid, id, notes)
+            .then(() => mutate(data?.map(a => a.id === id ? { ...a, notes } : a), false))
+            .catch(error => {
+                clearAndAddHttpError({ key: 'server:network', error });
+            })
+            .then(() => setLoading(false));
+    }, 750);
+
     useEffect(() => {
         if (error) {
             clearAndAddHttpError({ key: 'server:network', error });
@@ -47,8 +64,8 @@ const NetworkContainer = () => {
             {!data ?
                 <Spinner size={'large'} centered/>
                 :
-                data.map(({ id, ip, port, alias, isDefault }, index) => (
-                    <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
+                data.map(({ id, ip, port, alias, notes, isDefault }, index) => (
+                    <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined} $hoverable={false}>
                         <div css={tw`pl-4 pr-6 text-neutral-400`}>
                             <FontAwesomeIcon icon={faNetworkWired}/>
                         </div>
@@ -60,7 +77,17 @@ const NetworkContainer = () => {
                             <Code>:{port}</Code>
                             <Label>Port</Label>
                         </div>
-                        <div css={tw`flex-1 text-right`}>
+                        <div css={tw`px-8 flex-1 self-start`}>
+                            <InputSpinner visible={loading === id}>
+                                <Textarea
+                                    css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
+                                    placeholder={'Notes'}
+                                    defaultValue={notes || undefined}
+                                    onChange={e => setAllocationNotes(id, e.currentTarget.value)}
+                                />
+                            </InputSpinner>
+                        </div>
+                        <div css={tw`w-32 text-right`}>
                             {isDefault ?
                                 <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
                                     Primary