ui: Add all vendor entries to the menu.

Author: brocaar

interface/ui/src/components/Menu.tsx

@@ -4,14 +4,17 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import type { MenuProps } from "antd";
 import { Menu, Select, Button } from "antd";
 
-import { Vendor, ListVendorsResponse } from "@api/grpc-web/api_pb";
+import { Vendor, ListVendorsResponse, ListDevicesRequest, ListDevicesResponse, Device, ListProfilesRequest, ListProfilesResponse, Profile, ListCodecsRequest, ListCodecsResponse, Codec } from "@api/grpc-web/api_pb";
 import DeviceProfileStore from "../stores/DeviceProfileStore";
 
 
 function SideMenu() {
   const [vendor, setVendor] = useState<string | undefined>(undefined);
   const [vendors, setVendors] = useState<Vendor[]>([]);
   const [selectedKey, setSelectedKey] = useState<string>("");
+  const [devices, setDevices] = useState<Device[]>([]);
+  const [profiles, setProfiles] = useState<Profile[]>([]);
+  const [codecs, setCodecs] = useState<Codec[]>([]);
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -40,6 +43,47 @@ function SideMenu() {
     };
   }, []);
 
+  useEffect(() => {
+    if (vendor == undefined) {
+      return;
+    }
+
+    const loadDevices = () => {
+      const req = new ListDevicesRequest();
+      req.setVendorDir(vendor);
+      DeviceProfileStore.listDevices(req, (resp: ListDevicesResponse) => {
+        setDevices(resp.getResultList());
+      });
+    };
+
+    const loadProfiles = () => {
+      const req = new ListProfilesRequest();
+      req.setVendorDir(vendor);
+      DeviceProfileStore.listProfiles(req, (resp: ListProfilesResponse) => {
+        setProfiles(resp.getResultList());
+      });
+    };
+
+    const loadCodecs = () => {
+      const req = new ListCodecsRequest();
+      req.setVendorDir(vendor);
+      DeviceProfileStore.listCodecs(req, (resp: ListCodecsResponse) => {
+        setCodecs(resp.getResultList());
+      });
+    };
+
+    DeviceProfileStore.on("change", loadDevices)
+    DeviceProfileStore.on("change", loadProfiles);
+    DeviceProfileStore.on("change", loadCodecs);
+    loadDevices();
+    loadProfiles();
+    loadCodecs();
+
+    return () => {
+      DeviceProfileStore.removeAllListeners("change");
+    };
+  }, [vendor]);
+
   useEffect(() => {
     parseLocation();
   }, [location])
@@ -73,30 +117,99 @@ function SideMenu() {
 
     setSelectedKey("");
 
+    if (path.includes("vendors") && path.endsWith("edit")) {
+      setSelectedKey("vendor-edit");
+    }
     if (path.includes("profiles")) {
-      setSelectedKey("profiles");
+      setSelectedKey("devices");
+
+      if (path.endsWith("create")) {
+        setSelectedKey("profiles-create");
+      } else if (path.endsWith(".toml")) {
+        setSelectedKey("profiles-" + path.split("/").slice(-1));
+      }
     }
     if (path.includes("codecs")) {
       setSelectedKey("codecs");
+
+      if (path.endsWith("create")) {
+        setSelectedKey("codecs-create");
+      } else if (path.endsWith(".js")) {
+        setSelectedKey("codecs-" + path.split("/").slice(-1));
+      }
     }
     if (path.includes("devices")) {
       setSelectedKey("devices");
+
+      if (path.endsWith("create")) {
+        setSelectedKey("devices-create");
+      } else if (path.endsWith(".toml")) {
+        setSelectedKey("devices-" + path.split("/").slice(-1));
+      }
     }
   }, [location.pathname]);
 
   let items: MenuProps["items"] = [
     {
-      key: "devices", label: <Link to={`/vendors/${vendor}/devices`}>Devices</ Link>
+      key: "vendor",
+      label: "Vendor",
+      children: [
+        {
+          key: "vendor-edit",
+          label: <Link to={`/vendors/${vendor}/edit`}>Update vendor</Link>,
+        },
+      ],
+    },
+    {
+      key: "devices",
+      label: "Devices",
+      children: [
+        {
+          key: "devices-create", label: <Link to={`/vendors/${vendor}/devices/create`}>Add device</Link>,
+        },
+      ].concat(devices.map((v) => {
+        return {
+          key: "devices-" + v.getFile(),
+          label: <Link to={`/vendors/${vendor}/devices/${v.getFile()}`}>{v.getFile()}</Link>,
+        };
+      })),
+    },
+    {
+      key: "profiles",
+      label: "Profiles",
+      children: [
+        {
+          key: "profiles-create",
+          label: <Link to={`/vendors/${vendor}/profiles/create`}>Add profile</Link>,
+        },
+      ].concat(profiles.map((v) => {
+        return {
+          key: "profiles-" + v.getFile(),
+          label: <Link to={`/vendors/${vendor}/profiles/${v.getFile()}`}>{v.getFile()}</Link>,
+        };
+      })),
+    },
+    {
+      key: "codecs", label: "Codecs", children: [
+        {
+          key: "codecs-create",
+          label: <Link to={`/vendors/${vendor}/codecs/create`}>Add codec</Link>,
+        },
+      ].concat(codecs.map((v) => {
+        return {
+          key: "codecs-" + v.getFile(),
+          label: <Link to={`/vendors/${vendor}/codecs/${v.getFile()}`}>{v.getFile()}</Link>,
+        };
+      }))
     },
-    { key: "profiles", label: <Link to={`/vendors/${vendor}/profiles`}>Profiles</Link> },
-    { key: "codecs", label: <Link to={`/vendors/${vendor}/codecs`}>Codecs</Link> },
   ];
 
   return (<div>
     <Select showSearch allowClear placeholder="Select vendor" options={vendorOptions} value={vendor} className="vendor-select" onSelect={onVendorSelect} onClear={onVendorClear} />
     {vendor ? <Menu
       items={items}
       selectedKeys={[selectedKey]}
+      mode="inline"
     /> : <Link to="/vendors/add"><Button className="vendor-add" type="primary">Add vendor</Button></Link>}
   </div>);
 }

interface/ui/src/stores/DeviceProfileStore.ts

@@ -163,6 +163,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -190,6 +192,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -206,6 +210,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -233,6 +239,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -260,6 +268,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -287,6 +297,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -303,6 +315,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }
@@ -330,6 +344,7 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
 
       callbackFunc();
     });
@@ -358,6 +373,8 @@ class DeviceProfileStore extends EventEmitter {
         duration: 3,
       });
 
+      this.emit("change");
+
       callbackFunc();
     });
   }