Add functionality to filter by system packages (Default is to not show them). Resolves #172 (#222)

Author: stylesuxx

src/features/packages/Packages.jsx

@@ -54,6 +54,7 @@ import {
   selectProcessing,
   selectRepos,
   selectUpgradable,
+  systemFilter,
 } from "./packagesSlice";
 
 import { selectNiceName } from "../device/deviceSlice";
@@ -120,6 +121,11 @@ export default function Packages({ adb }) {
     dispatch(repo(value));
   }, [dispatch]);
 
+  const handleCategoryStateChange = useCallback((event) => {
+    const value = event.target.value;
+    dispatch(systemFilter(value === "all"));
+  }, [dispatch]);
+
   useEffect(() => {
     if(!fetched && fetchedUpgradable) {
       dispatch(fetchPackages(adb));
@@ -366,6 +372,27 @@ export default function Packages({ adb }) {
               </Select>
             </FormControl>
 
+            <FormControl sx={{ width: 120 }}>
+              <InputLabel id="package-state-select-label">
+                {t("labelCategory")}
+              </InputLabel>
+
+              <Select
+                id="package-state-select"
+                label={t("labelCategory")}
+                onChange={handleCategoryStateChange}
+                value={filter.system ? "all" : "all-except-system"}
+              >
+                <MenuItem value="all-except-system">
+                  {t("labelCategoryAllExceptSystem")}
+                </MenuItem>
+
+                <MenuItem value="all">
+                  {t("labelCategoryAll")}
+                </MenuItem>
+              </Select>
+            </FormControl>
+
             <FormControl sx={{ width: 250 }}>
               <TextField
                 defaultValue={filter.search}

src/features/packages/packagesSlice.js

@@ -10,8 +10,9 @@ const initialState = {
   upgradable: [],
   filter: {
     installed: false,
-    search: null,
     repo: "fpv-wtf",
+    search: null,
+    system: false,
   },
   fetched: false,
   fetchedUpgradable: false,
@@ -135,6 +136,13 @@ function filterPackages(packages, filter) {
     (filter.repo === item.repo && !filter.search)
   ));
 
+  // Remove system packages
+  if(!filter.system) {
+    filtered = filtered.filter((item) => (
+      !(item.details.section && item.details.section.includes("system"))
+    ));
+  }
+
   filtered = filtered.filter((item) => {
     if(filter.installed) {
       return item.installed;
@@ -184,6 +192,14 @@ export const packagesSlice = createSlice({
 
       state.filtered = filterPackages(state.packages, state.filter);
     },
+    systemFilter: (state, event) => {
+      state.filter = {
+        ...state.filter,
+        system: event.payload,
+      };
+
+      state.filtered = filterPackages(state.packages, state.filter);
+    },
     processing: (state, event) => {
       state.processing = event.payload;
     },
@@ -265,6 +281,7 @@ export const {
   repo,
   reset,
   search,
+  systemFilter,
 } = packagesSlice.actions;
 
 export const selectRepos = (state) => state.packages.repos;

src/translations/en/packages.json

@@ -15,5 +15,8 @@
   "version": "Version",
   "description": "Description",
   "matchCount": "Found {{count}} packages",
-  "visitProjectPage": "Visit project page"
+  "visitProjectPage": "Visit project page",
+  "labelCategory": "Category",
+  "labelCategoryAllExceptSystem": "All (except system)",
+  "labelCategoryAll": "All"
 }

src/utils/OpkgHelpers.js

@@ -1,5 +1,6 @@
 const parsePackageIndex = (content) => {
   const lines = content.split("\n");
+  const arrays = ["section"];
 
   let currentPackage = null;
   const packages = {};
@@ -16,6 +17,9 @@ const parsePackageIndex = (content) => {
       key = key.toLowerCase();
 
       packages[currentPackage][key] = value;
+      if(arrays.includes(key)) {
+        packages[currentPackage][key] = value.split(",").map((item) => item.trim());
+      }
     }
   }