add RoleSelectFilter

Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1
 # Build commands:
-# - $VERSION=1.4
+# - $VERSION=1.5
 # - rm build -r -Force ; rm ./node_modules/.cache/babel-loader -r -Force ; yarn build
 # - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "."
 # - docker image push --all-tags oncharterliz/multi-frigate

package.json

@@ -1,6 +1,6 @@
 {
   "name": "multi-frigate",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.0.5",

src/pages/AccessSettingsPage.tsx

@@ -14,6 +14,7 @@ import { dimensions } from '../shared/dimensions/dimensions';
 import { isProduction } from '../shared/env.const';
 import Forbidden from './403';
 import RetryErrorPage from './RetryErrorPage';
+import RoleSelectFilter from '../shared/components/filters/RoleSelectFilter';
 
 const AccessSettings = () => {
     const { t } = useTranslation()
@@ -53,11 +54,9 @@ const AccessSettings = () => {
             <Text align='center' size='xl'>{t('pleaseSelectRole')}</Text>
             <Flex justify='space-between' align='center' w='100%'>
                 {!isMobile ? <Group w='40%' /> : <></>}
-                <Select
+                <RoleSelectFilter
                     w='100%'
                     mt='1rem'
-                    data={rolesSelect}
-                    value={roleId}
                     onChange={handleSelectRole}
                     searchable
                     clearable

src/shared/components/filters/RoleSelectFilter.tsx

@@ -0,0 +1,44 @@
+import { Select, SelectProps } from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { frigateApi, frigateQueryKeys } from '../../../services/frigate.proxy/frigate.api';
+import RetryError from '../RetryError';
+import CogwheelLoader from '../loaders/CogwheelLoader';
+import { OneSelectItem } from './OneSelectFilter';
+
+interface RoleSelectFilterProps extends Omit<SelectProps, 'data'> {
+    onChange?: (roleId: string) => void
+}
+
+const RoleSelectFilter: React.FC<RoleSelectFilterProps> = ({
+    onChange,
+    ...selectProps
+}) => {
+    const [roleId, setRoleId] = useState<string>()
+
+    const { data, isPending, isError, refetch } = useQuery({
+        queryKey: [frigateQueryKeys.getRoles],
+        queryFn: frigateApi.getRoles
+    })
+
+    if (isPending) return <CogwheelLoader />
+    if (isError || !data) return <RetryError onRetry={refetch} />
+
+    const rolesSelect: OneSelectItem[] = data.map(role => ({ value: role.id, label: role.name }))
+
+    const handleSelectRole = (value: string) => {
+        if (onChange) onChange(value)
+        setRoleId(value)
+    }
+
+    return (
+        <Select
+            {...selectProps}
+            data={rolesSelect}
+            value={roleId}
+            onChange={handleSelectRole}
+        />
+    );
+};
+
+export default RoleSelectFilter;