@pisell/private-materials 3.4.104 → 3.4.106

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useDeviceConnections.js

@@ -0,0 +1,90 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useDeviceConnections.ts
+var useDeviceConnections_exports = {};
+__export(useDeviceConnections_exports, {
+  useDeviceConnections: () => useDeviceConnections
+});
+module.exports = __toCommonJS(useDeviceConnections_exports);
+var import_react = require("react");
+var import_ahooks = require("ahooks");
+var import_serve = require("../../../serve");
+var useDeviceConnections = ({
+  open,
+  activeTab,
+  activeKind,
+  displayRecord,
+  onConnectionsChanged
+}) => {
+  const connectionRequest = (0, import_ahooks.useRequest)(import_serve.getDeviceConnections, { manual: true });
+  const createConnectionRequest = (0, import_ahooks.useRequest)(import_serve.createDeviceConnection, {
+    manual: true
+  });
+  const updateConnectionRequest = (0, import_ahooks.useRequest)(
+    (params) => (0, import_serve.updateDeviceConnection)(params.id, params.payload),
+    { manual: true }
+  );
+  const deleteConnectionRequest = (0, import_ahooks.useRequest)(import_serve.deleteDeviceConnection, {
+    manual: true
+  });
+  const reloadConnections = () => {
+    if (!displayRecord || activeKind === "integrated") return;
+    const relationWith = activeKind === "smart" ? ["targetDevice.type", "targetDevice.model.brand", "targetDevice.workarea", "profiles"] : ["sourceDevice.type", "profiles"];
+    connectionRequest.run({
+      type: "dumb",
+      source_device_id: activeKind === "smart" ? displayRecord.id : void 0,
+      target_device_id: activeKind === "dumb" ? displayRecord.id : void 0,
+      with: relationWith
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    if (!open || !displayRecord) return;
+    if (activeTab !== "connections") return;
+    if (activeKind === "integrated") return;
+    reloadConnections();
+  }, [activeKind, activeTab, displayRecord == null ? void 0 : displayRecord.id, open]);
+  const handleCreateConnection = async (payload) => {
+    await createConnectionRequest.runAsync(payload);
+    reloadConnections();
+    onConnectionsChanged == null ? void 0 : onConnectionsChanged();
+  };
+  const handleUpdateConnection = async (id, payload) => {
+    await updateConnectionRequest.runAsync({ id, payload });
+    reloadConnections();
+    onConnectionsChanged == null ? void 0 : onConnectionsChanged();
+  };
+  const handleDeleteConnection = async (id) => {
+    await deleteConnectionRequest.runAsync(id);
+    reloadConnections();
+    onConnectionsChanged == null ? void 0 : onConnectionsChanged();
+  };
+  return {
+    connections: connectionRequest.data || [],
+    loading: connectionRequest.loading,
+    submitting: createConnectionRequest.loading || updateConnectionRequest.loading,
+    deleting: deleteConnectionRequest.loading,
+    handleCreateConnection,
+    handleUpdateConnection,
+    handleDeleteConnection
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDeviceConnections
+});

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useDeviceDetail.d.ts

@@ -0,0 +1,16 @@
+import type { DeviceRow, I18nText } from '../../../types';
+import type { DrawerTabKey } from '../components/DrawerSidebar';
+interface UseDeviceDetailParams {
+    open: boolean;
+    record?: DeviceRow;
+    initialTab: DrawerTabKey;
+    translation: (val?: I18nText) => string;
+}
+/** 管理详情抽屉的当前 tab、设备详情补拉取和 integrated 设备 tab 保护。 */
+export declare const useDeviceDetail: ({ open, record, initialTab, translation, }: UseDeviceDetailParams) => {
+    activeTab: DrawerTabKey;
+    activeKind: import("../../../types").DeviceKind;
+    displayRecord: DeviceRow | undefined;
+    setActiveTab: import("react").Dispatch<import("react").SetStateAction<DrawerTabKey>>;
+};
+export {};

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useDeviceDetail.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/hooks/useDeviceDetail.ts
+var useDeviceDetail_exports = {};
+__export(useDeviceDetail_exports, {
+  useDeviceDetail: () => useDeviceDetail
+});
+module.exports = __toCommonJS(useDeviceDetail_exports);
+var import_react = require("react");
+var import_serve = require("../../../serve");
+var import_utils = require("../../../utils");
+var useDeviceDetail = ({
+  open,
+  record,
+  initialTab,
+  translation
+}) => {
+  const [activeTab, setActiveTab] = (0, import_react.useState)("info");
+  const [detailRecord, setDetailRecord] = (0, import_react.useState)();
+  const detailFetchedIdRef = (0, import_react.useRef)();
+  const displayRecord = detailRecord || record;
+  const activeKind = (displayRecord == null ? void 0 : displayRecord._raw.type_kind) || "smart";
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      setActiveTab(initialTab);
+      setDetailRecord(record);
+      detailFetchedIdRef.current = void 0;
+    }
+  }, [initialTab, open, record == null ? void 0 : record.id]);
+  (0, import_react.useEffect)(() => {
+    if (!open || !(record == null ? void 0 : record.id)) return;
+    const shouldFetchDetail = activeTab === "info" || detailFetchedIdRef.current !== record.id;
+    if (!shouldFetchDetail) return;
+    detailFetchedIdRef.current = record.id;
+    (0, import_serve.getDeviceDetail)(record.id).then((detail) => {
+      if (detail) {
+        setDetailRecord((0, import_utils.createDeviceRow)(detail, translation));
+      }
+    }).catch(() => {
+      setDetailRecord(record);
+    });
+  }, [activeTab, open, record, record == null ? void 0 : record.id, translation]);
+  (0, import_react.useEffect)(() => {
+    if (activeKind === "integrated" && activeTab === "connections") {
+      setActiveTab("info");
+    }
+  }, [activeKind, activeTab]);
+  return {
+    activeTab,
+    activeKind,
+    displayRecord,
+    setActiveTab
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDeviceDetail
+});

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/index.d.ts

@@ -1,14 +1,17 @@
 import React from 'react';
 import type { DeviceRow, I18nText } from '../../types';
+import { DrawerTabKey } from './components/DrawerSidebar';
 import './index.less';
 interface DeviceDetailDrawerProps {
     open: boolean;
     record?: DeviceRow;
+    initialTab?: DrawerTabKey;
     getText: (key: string) => string;
     translation: (val?: I18nText) => string;
     onClose: () => void;
     onEdit: () => void;
     onDelete: () => void;
+    onConnectionsChanged?: () => void;
 }
 declare const DeviceDetailDrawer: React.FC<DeviceDetailDrawerProps>;
 export default DeviceDetailDrawer;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/index.js

@@ -37,124 +37,45 @@ var import_antd = require("antd");
 var import_materials = require("@pisell/materials");
 var import_icons = require("@ant-design/icons");
 var import_classnames = __toESM(require("classnames"));
+var import_utils = require("../../utils");
+var import_DrawerSidebar = __toESM(require("./components/DrawerSidebar"));
+var import_DeviceInfoPanel = __toESM(require("./components/DeviceInfoPanel"));
+var import_DeviceConnectionsPanel = __toESM(require("./components/DeviceConnectionsPanel"));
+var import_useDeviceConnections = require("./hooks/useDeviceConnections");
+var import_useDeviceDetail = require("./hooks/useDeviceDetail");
 var import_index = require("./index.less");
-var EMPTY_VALUE = "-";
-var BYTE_PER_GB = 1024 * 1024 * 1024;
-var REPORT_GROUPS = [
-  {
-    key: "software",
-    fields: [{ key: "name" }, { key: "version" }]
-  },
-  {
-    key: "battery",
-    fields: [
-      {
-        key: "level",
-        value: (data, getText) => renderBatteryValue(data, getText)
-      }
-    ]
-  },
-  {
-    key: "network",
-    fields: [
-      { key: "type" },
-      { key: "local_ip" },
-      { key: "gateway" },
-      { key: "subnet_mask" },
-      { key: "ssid" }
-    ]
-  },
-  {
-    key: "hardware",
-    fields: [{ key: "model" }, { key: "os_version" }]
-  },
-  {
-    key: "storage",
-    fields: [
-      { key: "used", value: (data) => formatStorageValue(data.used) },
-      { key: "total", value: (data) => formatStorageValue(data.total) }
-    ]
-  }
-];
-var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
-var getReportText = (getText, key) => getText(`pisell2.saas.device-planning.detail.report.${key}`);
-var formatReportValue = (value, getText) => {
-  if (value === null || value === void 0 || value === "") {
-    return EMPTY_VALUE;
-  }
-  if (typeof value === "boolean") {
-    return getText(
-      `pisell2.saas.device-planning.detail.${value ? "yes" : "no"}`
-    );
-  }
-  if (Array.isArray(value) || isPlainObject(value)) {
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__json-value" }, JSON.stringify(value));
-  }
-  return String(value);
-};
-var formatStorageValue = (value) => {
-  const byteValue = typeof value === "number" || typeof value === "string" ? Number(value) : Number.NaN;
-  if (!Number.isFinite(byteValue)) {
-    return EMPTY_VALUE;
-  }
-  const gbValue = byteValue / BYTE_PER_GB;
-  const text = gbValue >= 10 ? String(Math.round(gbValue)) : gbValue.toFixed(2).replace(/\.?0+$/, "");
-  return `${text} GB`;
-};
-var formatLastSeen = (value) => typeof value === "string" && value.trim() ? value : EMPTY_VALUE;
-var renderBatteryValue = (data, getText) => {
-  const rawLevel = typeof data.level === "number" || typeof data.level === "string" ? Number(data.level) : Number.NaN;
-  const hasLevel = Number.isFinite(rawLevel);
-  const levelValue = hasLevel ? Math.max(0, Math.min(rawLevel, 100)) : 0;
-  const level = hasLevel ? `${rawLevel}%` : EMPTY_VALUE;
-  const charging = (data == null ? void 0 : data.charging) === true;
-  return /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__battery-value" }, /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      className: (0, import_classnames.default)("device-detail-drawer__battery-icon", {
-        "is-charging": charging
-      })
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: "device-detail-drawer__battery-fill",
-        style: { width: `${levelValue}%` }
-      }
-    ),
-    charging ? /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__battery-bolt" }) : null
-  ), /* @__PURE__ */ import_react.default.createElement("span", null, level), /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__battery-status" }, getReportText(getText, charging ? "charging" : "not-charging")));
-};
 var DeviceDetailDrawer = ({
   open,
   record,
+  initialTab = "info",
   getText,
   translation,
   onClose,
   onEdit,
-  onDelete
+  onDelete,
+  onConnectionsChanged
 }) => {
   var _a;
-  const device = record == null ? void 0 : record._raw;
-  const reportData = device == null ? void 0 : device.data;
-  const online = (record == null ? void 0 : record.status) === "online";
-  const lastSeen = formatLastSeen(device == null ? void 0 : device.last_seen);
-  const reportGroups = (0, import_react.useMemo)(() => {
-    if (!isPlainObject(reportData)) return [];
-    return REPORT_GROUPS.reduce((list, group) => {
-      const data = reportData[group.key];
-      if (isPlainObject(data)) {
-        list.push({ ...group, data });
-      }
-      return list;
-    }, []);
-  }, [reportData]);
+  const { activeTab, activeKind, displayRecord, setActiveTab } = (0, import_useDeviceDetail.useDeviceDetail)({
+    open,
+    record,
+    initialTab,
+    translation
+  });
+  const device = displayRecord == null ? void 0 : displayRecord._raw;
+  const connections = (0, import_useDeviceConnections.useDeviceConnections)({
+    open,
+    activeTab,
+    activeKind,
+    displayRecord,
+    onConnectionsChanged
+  });
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Drawer,
     {
       open,
       onClose,
-      width: 520,
+      width: 720,
       maskClosable: true,
       closable: false,
       className: "device-detail-drawer",
@@ -166,84 +87,52 @@ var DeviceDetailDrawer = ({
       },
       bodyStyle: { padding: 0 }
     },
-    record ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__header" }, ((_a = device == null ? void 0 : device.type) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__icon" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: device.type.icon })) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__heading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__name" }, record.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__type" }, record.typeName)), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "text", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null), onClick: onClose })), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__content" }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Card,
-      {
-        size: "small",
-        title: getText("pisell2.saas.device-planning.detail.basic-info"),
-        className: "device-detail-drawer__card"
-      },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.name")), /* @__PURE__ */ import_react.default.createElement("strong", null, record.name)), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.type")), /* @__PURE__ */ import_react.default.createElement("strong", null, record.typeName)), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.model")), /* @__PURE__ */ import_react.default.createElement("strong", null, record.modelName)), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-two-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.profile")), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__profile-card" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "FileTextOutlined" }), record.profileName)))
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Card,
+    displayRecord ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        size: "small",
-        title: getText("pisell2.saas.device-planning.detail.status"),
-        className: "device-detail-drawer__card"
+        className: (0, import_classnames.default)(
+          "device-detail-drawer__root",
+          `is-${activeKind}`
+        )
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.link-status")), /* @__PURE__ */ import_react.default.createElement(
-        import_materials.Tag,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_DrawerSidebar.default,
         {
-          color: record.link === "linked" ? "green" : "gold",
-          style: { marginRight: 0 }
-        },
-        getText(
-          `pisell2.saas.device-planning.status.${record.link}`
-        ) || record.link
-      )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText(
-        "pisell2.saas.device-planning.detail.online-status"
-      )), /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__online-status" }, /* @__PURE__ */ import_react.default.createElement(
-        "span",
+          activeKey: activeTab,
+          activeKind,
+          getText,
+          onChange: setActiveTab
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__header" }, ((_a = device == null ? void 0 : device.type) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__icon" }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Icon,
         {
-          className: (0, import_classnames.default)(
-            "device-detail-drawer__status-dot",
-            {
-              "is-online": online
-            }
-          )
+          type: device.type.icon,
+          color: import_utils.DEVICE_ICON_COLOR[activeKind]
         }
-      ), getText(
-        `pisell2.saas.device-planning.status.${record.status}`
-      ) || record.status)))
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Card,
-      {
-        size: "small",
-        title: getText("pisell2.saas.device-planning.detail.report-info"),
-        extra: /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__last-seen" }, getText("pisell2.saas.device-planning.detail.last-seen"), lastSeen),
-        className: "device-detail-drawer__card"
-      },
-      reportGroups.length > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__report-list" }, reportGroups.map((group) => /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Card,
+      )) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__heading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__name" }, displayRecord.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__type" }, displayRecord.typeName)), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "text", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null), onClick: onClose })), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__content" }, activeTab === "info" ? /* @__PURE__ */ import_react.default.createElement(
+        import_DeviceInfoPanel.default,
         {
-          key: group.key,
-          size: "small",
-          type: "inner",
-          title: getReportText(getText, `group.${group.key}`),
-          className: "device-detail-drawer__report-card"
-        },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__report-rows" }, group.fields.map((field) => /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            key: field.key,
-            className: "device-detail-drawer__report-row"
-          },
-          /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__report-label" }, getReportText(getText, `field.${field.key}`)),
-          /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__report-value" }, field.value ? field.value(group.data, getText) : formatReportValue(
-            group.data[field.key],
-            getText
-          ))
-        )))
-      ))) : /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Empty,
+          record: displayRecord,
+          getText
+        }
+      ) : /* @__PURE__ */ import_react.default.createElement(
+        import_DeviceConnectionsPanel.default,
         {
-          image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE,
-          description: getText(
-            "pisell2.saas.device-planning.detail.no-report-info"
-          )
+          activeKind,
+          currentDevice: displayRecord._raw,
+          connections: connections.connections,
+          loading: connections.loading,
+          submitting: connections.submitting,
+          deleting: connections.deleting,
+          getText,
+          translation,
+          onCreateConnection: connections.handleCreateConnection,
+          onUpdateConnection: connections.handleUpdateConnection,
+          onDeleteConnection: connections.handleDeleteConnection
         }
-      )
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__footer" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { danger: true, size: "large", onClick: onDelete }, getText("pisell2.saas.device-planning.detail.delete")), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", size: "large", onClick: onEdit }, getText("pisell2.saas.device-planning.detail.edit")))) : null
+      )), activeTab === "info" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__footer" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { danger: true, size: "large", onClick: onDelete }, getText("pisell2.saas.device-planning.detail.delete")), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", size: "large", onClick: onEdit }, getText("pisell2.saas.device-planning.detail.edit"))) : null)
+    ) : null
   );
 };
 var DeviceDetailDrawer_default = DeviceDetailDrawer;