Support filtering to own/all servers if user is an admin

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -4,30 +4,63 @@ import getServers from '@/api/getServers';
 import ServerRow from '@/components/dashboard/ServerRow';
 import Spinner from '@/components/elements/Spinner';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import useFlash from '@/plugins/useFlash';
+import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { useStoreState } from 'easy-peasy';
+import { usePersistedState } from '@/plugins/usePersistedState';
+import Switch from '@/components/elements/Switch';
 
 export default () => {
-    const [ servers, setServers ] = useState<null | Server[]>(null);
+    const { addError, clearFlashes } = useFlash();
+    const [ servers, setServers ] = useState<Server[]>([]);
+    const [ loading, setLoading ] = useState(true);
+    const { rootAdmin } = useStoreState(state => state.user.data!);
+    const [ showAdmin, setShowAdmin ] = usePersistedState('show_all_servers', false);
 
-    const loadServers = () => getServers().then(data => setServers(data.items));
+    const loadServers = () => {
+        clearFlashes();
+        setLoading(true);
+
+        getServers(undefined, showAdmin)
+            .then(data => setServers(data.items))
+            .catch(error => {
+                console.error(error);
+                addError({ message: httpErrorToHuman(error) });
+            })
+            .then(() => setLoading(false));
+    };
 
     useEffect(() => {
         loadServers();
-    }, []);
-
-    if (servers === null) {
-        return <Spinner size={'large'} centered={true}/>;
-    }
+    }, [ showAdmin ]);
 
     return (
         <PageContentBlock>
-            {servers.length > 0 ?
-                servers.map(server => (
-                    <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
-                ))
-                :
-                <p className={'text-center text-sm text-neutral-400'}>
-                    It looks like you have no servers.
+            <FlashMessageRender className={'mb-4'}/>
+            {rootAdmin &&
+            <div className={'mb-2 flex justify-end items-center'}>
+                <p className={'uppercase text-xs text-neutral-400 mr-2'}>
+                    {showAdmin ? 'Showing all servers' : 'Showing your servers'}
                 </p>
+                <Switch
+                    name={'show_all_servers'}
+                    defaultChecked={showAdmin}
+                    onChange={() => setShowAdmin(s => !s)}
+                />
+            </div>
+            }
+            {loading ?
+                <Spinner centered={true} size={'large'}/>
+                :
+                servers.length > 0 ?
+                    servers.map(server => (
+                        <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
+                    ))
+                    :
+                    <p className={'text-center text-sm text-neutral-400'}>
+                        There are no servers associated with your account.
+                    </p>
             }
         </PageContentBlock>
     );

resources/scripts/components/elements/Switch.tsx

@@ -36,7 +36,7 @@ const ToggleContainer = styled.div`
 
 export interface SwitchProps {
     name: string;
-    label: string;
+    label?: string;
     description?: string;
     defaultChecked?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -48,7 +48,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
 
     return (
         <div className={'flex items-center'}>
-            <ToggleContainer className={'mr-4 flex-none'}>
+            <ToggleContainer className={'flex-none'}>
                 {children
                 || <input
                     id={uuid}
@@ -60,17 +60,21 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                 }
                 <label htmlFor={uuid}/>
             </ToggleContainer>
-            <div className={'w-full'}>
+            {(label || description) &&
+            <div className={'ml-4 w-full'}>
+                {label &&
                 <label
                     className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
                     htmlFor={uuid}
                 >{label}</label>
+                }
                 {description &&
                 <p className={'input-help'}>
                     {description}
                 </p>
                 }
             </div>
+            }
         </div>
     );
 };