ui(model_manager): Remember Scan Path

This commit is contained in:
blessedcoolant 2024-03-08 19:54:30 +05:30 committed by Mary Hipp Rogers
parent 281222df3c
commit a42812d78d
2 changed files with 22 additions and 7 deletions

View File

@ -8,6 +8,7 @@ type ModelManagerState = {
selectedModelMode: 'edit' | 'view'; selectedModelMode: 'edit' | 'view';
searchTerm: string; searchTerm: string;
filteredModelType: string | null; filteredModelType: string | null;
scanPath: string | undefined;
}; };
const initialModelManagerState: ModelManagerState = { const initialModelManagerState: ModelManagerState = {
@ -16,6 +17,7 @@ const initialModelManagerState: ModelManagerState = {
selectedModelMode: 'view', selectedModelMode: 'view',
filteredModelType: null, filteredModelType: null,
searchTerm: '', searchTerm: '',
scanPath: undefined,
}; };
export const modelManagerV2Slice = createSlice({ export const modelManagerV2Slice = createSlice({
@ -36,10 +38,13 @@ export const modelManagerV2Slice = createSlice({
setFilteredModelType: (state, action: PayloadAction<string | null>) => { setFilteredModelType: (state, action: PayloadAction<string | null>) => {
state.filteredModelType = action.payload; state.filteredModelType = action.payload;
}, },
setScanPath: (state, action: PayloadAction<string | undefined>) => {
state.scanPath = action.payload;
},
}, },
}); });
export const { setSelectedModelKey, setSearchTerm, setFilteredModelType, setSelectedModelMode } = export const { setSelectedModelKey, setSearchTerm, setFilteredModelType, setSelectedModelMode, setScanPath } =
modelManagerV2Slice.actions; modelManagerV2Slice.actions;
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

View File

@ -1,4 +1,6 @@
import { Button, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library'; import { Button, Flex, FormControl, FormErrorMessage, FormLabel, Input } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setScanPath } from 'features/modelManagerV2/store/modelManagerV2Slice';
import type { ChangeEventHandler } from 'react'; import type { ChangeEventHandler } from 'react';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -7,7 +9,8 @@ import { useLazyScanFolderQuery } from 'services/api/endpoints/models';
import { ScanModelsResults } from './ScanFolderResults'; import { ScanModelsResults } from './ScanFolderResults';
export const ScanModelsForm = () => { export const ScanModelsForm = () => {
const [scanPath, setScanPath] = useState(''); const scanPath = useAppSelector((state) => state.modelmanagerV2.scanPath);
const dispatch = useAppDispatch();
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
const { t } = useTranslation(); const { t } = useTranslation();
@ -21,10 +24,13 @@ export const ScanModelsForm = () => {
}); });
}, [_scanFolder, scanPath]); }, [_scanFolder, scanPath]);
const handleSetScanPath: ChangeEventHandler<HTMLInputElement> = useCallback((e) => { const handleSetScanPath: ChangeEventHandler<HTMLInputElement> = useCallback(
setScanPath(e.target.value); (e) => {
dispatch(setScanPath(e.target.value));
setErrorMessage(''); setErrorMessage('');
}, []); },
[dispatch]
);
return ( return (
<Flex flexDir="column" height="100%"> <Flex flexDir="column" height="100%">
@ -36,7 +42,11 @@ export const ScanModelsForm = () => {
<Input value={scanPath} onChange={handleSetScanPath} /> <Input value={scanPath} onChange={handleSetScanPath} />
</Flex> </Flex>
<Button onClick={scanFolder} isLoading={isLoading} isDisabled={scanPath.length === 0}> <Button
onClick={scanFolder}
isLoading={isLoading}
isDisabled={scanPath === undefined || scanPath.length === 0}
>
{t('modelManager.scanFolder')} {t('modelManager.scanFolder')}
</Button> </Button>
</Flex> </Flex>