fix: change overview

Author: danielleroux

apps/react-starter/src/hooks/demoMessage.ts

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { showMessage } from "@siemens/ix";
+import { iconInfo } from "@siemens/ix-icons/icons";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+export default function useShowDemoMessage() {
+  const { t } = useTranslation();
+  const show = useCallback(() => {
+    showMessage({
+      message: t("demo-message"),
+      icon: iconInfo,
+      actions: [
+        {
+          id: "cancel",
+          text: t("cancel"),
+          type: "cancel",
+        },
+        {
+          id: "okay",
+          text: t("okay"),
+          type: "okay",
+        },
+      ],
+      messageTitle: "Demo app",
+    });
+  }, [t]);
+
+  return show;
+}

apps/react-starter/src/hooks/theme.ts

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { themeSwitcher } from "@siemens/ix";
+import { convertThemeName } from "@siemens/ix-echarts";
+import { useLayoutEffect, useState } from "react";
+
+export const useEChartsTheme = () => {
+  const [echartsTheme, setEchartsTheme] = useState(
+    convertThemeName(themeSwitcher.getCurrentTheme()),
+  );
+
+  useLayoutEffect(() => {
+    const { dispose } = themeSwitcher.themeChanged.on((theme) =>
+      setEchartsTheme(convertThemeName(theme)),
+    );
+    return dispose;
+  }, []);
+
+  return echartsTheme;
+};

apps/react-starter/src/locales/de/translation.json

@@ -93,5 +93,9 @@
     "title": "Einstellungen",
     "user-settings": "Benutzereinstellungen"
   },
-  "toggle-theme": "Theme wechseln"
+  "toggle-theme": "Theme wechseln",
+  "search": "Suchen",
+  "demo-message": "Diese Funktion ist in der Demo-Version derzeit nicht verfügbar.",
+  "cancel": "Abbrechen",
+  "okay": "Okay"
 }

apps/react-starter/src/locales/en/translation.json

@@ -94,5 +94,9 @@
     "title": "Settings",
     "user-settings": "User Settings"
   },
-  "toggle-theme": "Toggle theme"
+  "toggle-theme": "Toggle theme",
+  "search": "Search",
+  "demo-message": "This feature is currently unavailable in the demo version.",
+  "cancel": "Cancel",
+  "okay": "Okay"
 }

apps/react-starter/src/pages/devices/components/ag-grid-table/ag-grid-table.tsx

@@ -14,7 +14,7 @@ import { IxEmptyState } from "@siemens/ix-react";
 import QuickActionsCellRenderer from "./quick-actions-cell-renderet.tsx";
 import { CellClickedEvent, ColDef, ColGroupDef, IRowNode } from "ag-grid-community";
 import { useDataStore, useFilterStore, useOverviewPaneStore } from "../../../store/device-store.ts";
-import { MockData } from "../../../../types";
+import { Device } from "../../../../types";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { LogicalFilterOperator } from "@siemens/ix";
 import CustomDeviceCellRenderer from "./device-cell-renderer.tsx";
@@ -23,13 +23,13 @@ import DeviceNameCellRenderer from "./device-name-cell-renderer.tsx";
 
 function AgGridTable() {
   const { t } = useTranslation();
-  const gridRef = useRef<AgGridReact<MockData>>(null);
+  const gridRef = useRef<AgGridReact<Device>>(null);
   const { setExpanded, setSelectedData } = useOverviewPaneStore();
   const { filter, resetFilter } = useFilterStore();
   const [showEmptyState, setShowEmptyState] = useState(false);
   const { devices, editDevice } = useDataStore();
 
-  function onCellClick(event: CellClickedEvent<MockData, string>) {
+  function onCellClick(event: CellClickedEvent<Device, string>) {
     if (event.column.getColId() === "quickActions") {
       return;
     }
@@ -95,14 +95,14 @@ function AgGridTable() {
     return true;
   }, []);
 
-  function doesExternalFilterPass(node: IRowNode<MockData>): boolean {
+  function doesExternalFilterPass(node: IRowNode<Device>): boolean {
     if (filter.length) {
       return filter.every(({ id, value, operator }) => {
         switch (operator) {
           case LogicalFilterOperator.EQUAL:
-            return node.data![id as keyof MockData] === value;
+            return node.data![id as keyof Device] === value;
           case LogicalFilterOperator.NOT_EQUAL:
-            return node.data![id as keyof MockData] !== value;
+            return node.data![id as keyof Device] !== value;
           default:
             return true;
         }
@@ -130,7 +130,7 @@ function AgGridTable() {
         onCellClicked={(e) => onCellClick(e)}
         onCellValueChanged={(e) => editDevice(e.data)}
         isExternalFilterPresent={isExternalFilterPresent}
-        doesExternalFilterPass={(e) => doesExternalFilterPass(e as IRowNode<MockData>)}
+        doesExternalFilterPass={(e) => doesExternalFilterPass(e as IRowNode<Device>)}
       />
     </div>
   ) : (

apps/react-starter/src/pages/devices/components/device-details/index.tsx

@@ -11,7 +11,7 @@ import styles from "./styles.module.css";
 import { IxPane, IxTypography, IxButton, IxDivider } from "@siemens/ix-react";
 import FirmwareCard from "./firmware-card.tsx";
 import { toKebabCase } from "../../../../util/util.ts";
-import { MockData } from "../../../../types";
+import { Device } from "../../../../types";
 import { useDataStore, useOverviewPaneStore } from "../../../store/device-store.ts";
 import { useTranslation } from "react-i18next";
 
@@ -48,7 +48,7 @@ const DeviceDetails = ({ ...props }) => {
                     {t(`device-details.${toKebabCase(key)}`)}
                   </IxTypography>
                   <IxTypography format="body" textColor="std">
-                    {selectedData[key as keyof MockData]}
+                    {selectedData[key as keyof Device]}
                   </IxTypography>
                   <IxDivider className={styles.Divider} />
                 </div>
@@ -68,7 +68,7 @@ const DeviceDetails = ({ ...props }) => {
                 ...selectedData!,
                 status: (selectedData!.status = "Maintenance"),
               };
-              editDevice(updatedDevice as MockData);
+              editDevice(updatedDevice as Device);
               props.api.onFilterChanged();
             }}
           >
@@ -81,7 +81,7 @@ const DeviceDetails = ({ ...props }) => {
                 status: (selectedData!.status =
                   selectedData!.status === "Offline" ? "Online" : "Offline"),
               };
-              editDevice(updatedDevice as MockData);
+              editDevice(updatedDevice as Device);
               props.api.onFilterChanged();
             }}
           >

apps/react-starter/src/pages/devices/components/modal/add-device-modal.tsx

@@ -22,7 +22,7 @@ import styles from "./styles.module.css";
 import FormField from "./form-field";
 import { useForm } from "react-hook-form";
 import { useDataStore } from "../../../store/device-store";
-import { MockData } from "../../../../types";
+import { Device } from "../../../../types";
 import { useTranslation } from "react-i18next";
 import { showSuccessToast } from "../../../../util/util.ts";
 
@@ -39,7 +39,7 @@ export default function AddDeviceModal() {
     modalRef.current?.dismiss("dismiss payload");
   };
 
-  const { register, setValue, handleSubmit } = useForm<MockData>({
+  const { register, setValue, handleSubmit } = useForm<Device>({
     defaultValues: {
       deviceName: "",
       vendor: "",
@@ -57,7 +57,7 @@ export default function AddDeviceModal() {
     register("status");
   }, [register]);
 
-  const onSubmit = (data: MockData) => {
+  const onSubmit = (data: Device) => {
     addDevice(data);
     showSuccessToast(t("device-add-modal.success"));
     close();
@@ -89,7 +89,7 @@ export default function AddDeviceModal() {
                 id="status"
                 value="Online"
                 i18nSelectListHeader={t("device-add-modal.list-header")}
-                onValueChange={(e) => setValue("status", e.detail as MockData["status"])}
+                onValueChange={(e) => setValue("status", e.detail as Device["status"])}
               >
                 <IxSelectItem label="Online" value="Online" />
                 <IxSelectItem label="Offline" value="Offline" />

apps/react-starter/src/pages/devices/components/modal/form-field.tsx

@@ -8,19 +8,19 @@
  */
 
 import { UseFormRegister } from "react-hook-form";
-import { MockData } from "../../../../types";
+import { Device } from "../../../../types";
 
 type FormFieldProps = {
   id: string;
   label: string;
-  register: UseFormRegister<MockData>;
+  register: UseFormRegister<Device>;
 };
 
 const FormField = ({ id, label, register }: FormFieldProps) => {
   return (
     <div>
       <label htmlFor={id}>{label}</label>
-      <input type="text" id={id} {...register(id as keyof MockData)} />
+      <input type="text" id={id} {...register(id as keyof Device)} />
     </div>
   );
 };

apps/react-starter/src/pages/devices/components/quick-actions/index.tsx

@@ -12,7 +12,7 @@ import styles from "./styles.module.css";
 import { IxActionCard, IxCard, IxCardContent, IxTypography } from "@siemens/ix-react";
 import AlertCard from "./alert-card/alert-card.tsx";
 import { iconAddCircle } from "@siemens/ix-icons/icons";
-import type { MockData } from "../../../../types";
+import type { Device } from "../../../../types";
 import { useDataStore } from "../../../store/device-store.ts";
 import { useTranslation } from "react-i18next";
 
@@ -25,9 +25,9 @@ function QuickActions({ show }: QuickActionsProps) {
 
   const { devices } = useDataStore();
 
-  function getDevicesCountByStatus(data: MockData[], status: MockData["status"]): number {
+  function getDevicesCountByStatus(data: Device[], status: Device["status"]): number {
     if (data) {
-      return data!.filter((device: MockData) => device.status === status).length;
+      return data!.filter((device: Device) => device.status === status).length;
     }
     return 0;
   }

apps/react-starter/src/pages/devices/index.tsx

@@ -16,7 +16,7 @@ import DeviceDetails from "./components/device-details";
 
 import show from "./components/modal/index.tsx";
 import { useDataStore, useFilterStore } from "../store/device-store.ts";
-import { MockData } from "../../types";
+import { Device } from "../../types";
 import { FilterState } from "@siemens/ix";
 import { useTranslation } from "react-i18next";
 import { toKebabCase } from "../../util/util.ts";
@@ -29,8 +29,8 @@ type Categories = Record<
   }
 >;
 
-function createUniqueValueArray(devices: MockData[], key: string) {
-  return Array.from(new Set(devices.map<string>((device) => device[key as keyof MockData] ?? "")));
+function createUniqueValueArray(devices: Device[], key: string) {
+  return Array.from(new Set(devices.map<string>((device) => device[key as keyof Device] ?? "")));
 }
 
 const useCategories = () => {