feat: add 'Limit' filter option in Plex filter builder (chrisbenincas…

…a#690) Fixes chrisbenincasa#676
perkmi · Aug 19, 2024 · 9e28e69 · 9e28e69
1 parent c9784c8
commit 9e28e69
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 16 deletions.
diff --git a/types/src/api/plexSearch.ts b/types/src/api/plexSearch.ts
@@ -49,6 +49,7 @@ export type PlexSort = z.infer<typeof PlexSortSchema>;
 export const PlexSearchSchema = z.object({
   filter: PlexFilterSchema.optional(),
   sort: PlexSortSchema.optional(),
+  limit: z.number().nonnegative().optional().catch(undefined),
 });
 
 export type PlexSearch = z.infer<typeof PlexSearchSchema>;

diff --git a/web/src/components/channel_config/PlexFilterBuilder.tsx b/web/src/components/channel_config/PlexFilterBuilder.tsx
@@ -23,7 +23,7 @@ import {
 } from '@tunarr/types/api';
 import { PlexFilterResponseMeta, PlexFilterType } from '@tunarr/types/plex';
 import dayjs from 'dayjs';
-import { find, first, isUndefined, map, size } from 'lodash-es';
+import { find, first, isEmpty, isUndefined, map, size } from 'lodash-es';
 import {
   createContext,
   useCallback,
@@ -433,6 +433,7 @@ export function PlexFilterBuilder(
       type: 'op',
     },
   });
+  const [limitTo, setLimitTo] = useState('');
   const rootNodeType = formMethods.watch('type');
 
   const { data: plexFilterMetadata } = useSelectedLibraryPlexFilters();
@@ -446,7 +447,8 @@ export function PlexFilterBuilder(
   );
 
   const handleSearch: SubmitHandler<PlexFilter> = (data) => {
-    setPlexFilter(data);
+    const limitInt = parseInt(limitTo);
+    setPlexFilter(data, isNaN(limitInt) ? undefined : limitInt);
   };
 
   useEffect(() => {
@@ -477,21 +479,48 @@ export function PlexFilterBuilder(
           onSubmit={formMethods.handleSubmit(handleSearch, console.error)}
         >
           <Box sx={{ my: 2 }}>
-            {rootNodeType === 'op' ? (
-              <PlexGroupNode depth={0} formKey="" index={0} remove={() => {}} />
-            ) : (
-              <PlexValueNode
-                only
-                depth={0}
-                formKey=""
-                index={0}
-                remove={() => {}}
+            <Stack gap={2} useFlexGap>
+              {rootNodeType === 'op' ? (
+                <PlexGroupNode
+                  depth={0}
+                  formKey=""
+                  index={0}
+                  remove={() => {}}
+                />
+              ) : (
+                <PlexValueNode
+                  only
+                  depth={0}
+                  formKey=""
+                  index={0}
+                  remove={() => {}}
+                />
+              )}
+
+              <TextField
+                error={!isEmpty(limitTo) && isNaN(parseInt(limitTo))}
+                sx={{ width: 200 }}
+                value={limitTo}
+                onChange={(e) => setLimitTo(e.target.value)}
+                label="Limit"
+                size="small"
+                helperText={
+                  !isEmpty(limitTo) && isNaN(parseInt(limitTo))
+                    ? 'Limit must be numeric'
+                    : null
+                }
               />
-            )}
 
-            <Button type="submit" variant="contained" sx={{ my: 2 }}>
-              Search
-            </Button>
+              <Box>
+                <Button
+                  sx={{ maxWidth: 200 }}
+                  type="submit"
+                  variant="contained"
+                >
+                  Search
+                </Button>
+              </Box>
+            </Stack>
           </Box>
         </Box>
       </FormProvider>

diff --git a/web/src/store/programmingSelector/actions.ts b/web/src/store/programmingSelector/actions.ts
@@ -173,14 +173,18 @@ export const clearSelectedMedia = () =>
     state.selectedMedia = [];
   });
 
-export const setPlexFilter = (plexFilter: PlexFilter | undefined) =>
+export const setPlexFilter = (
+  plexFilter: PlexFilter | undefined,
+  plexFilterLimit?: number,
+) =>
   useStore.setState((state) => {
     state.plexSearch = {
       ...state.plexSearch,
       filter: plexFilter,
       urlFilter: [
         ...buildPlexFilterKey(plexFilter),
         ...buildPlexSortKey(state.plexSearch.sort),
+        ...(plexFilterLimit ? [`limit=${plexFilterLimit}`] : []),
       ].join('&'),
     };
   });
@@ -193,6 +197,7 @@ export const setPlexSort = (plexSort: PlexSort | undefined) =>
       urlFilter: [
         ...buildPlexFilterKey(state.plexSearch.filter),
         ...buildPlexSortKey(plexSort),
+        ...(state.plexSearch.limit ? [`limit=${state.plexSearch.limit}`] : []),
       ].join('&'),
     };
   });