From 2dff7fa5f63b300c0748b12849f72e729561553d Mon Sep 17 00:00:00 2001
From: NlightN22 <oncharterliz@gmail.com>
Date: Mon, 24 Jun 2024 00:08:18 +0700
Subject: [PATCH] add RoleSelectFilter

---
 Dockerfile                                    |  2 +-
 package.json                                  |  2 +-
 src/pages/AccessSettingsPage.tsx              |  5 +--
 .../components/filters/RoleSelectFilter.tsx   | 44 +++++++++++++++++++
 4 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/components/filters/RoleSelectFilter.tsx

diff --git a/Dockerfile b/Dockerfile
index 4ab70f3..2b47ba2 100644
--- a/Dockerfile
+++ b/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
diff --git a/package.json b/package.json
index e708e7a..0200ece 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/AccessSettingsPage.tsx b/src/pages/AccessSettingsPage.tsx
index 18eb94c..1e6f8d4 100644
--- a/src/pages/AccessSettingsPage.tsx
+++ b/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
diff --git a/src/shared/components/filters/RoleSelectFilter.tsx b/src/shared/components/filters/RoleSelectFilter.tsx
new file mode 100644
index 0000000..7ccf4c1
--- /dev/null
+++ b/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;
\ No newline at end of file