@pisell/private-materials 3.4.105 → 3.4.106

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

@@ -0,0 +1,58 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useRef, useState } from 'react';
+import { getDeviceDetail } from "../../../serve";
+import { createDeviceRow } from "../../../utils";
+/** 管理详情抽屉的当前 tab、设备详情补拉取和 integrated 设备 tab 保护。 */
+export var useDeviceDetail = function useDeviceDetail(_ref) {
+  var open = _ref.open,
+    record = _ref.record,
+    initialTab = _ref.initialTab,
+    translation = _ref.translation;
+  var _useState = useState('info'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    detailRecord = _useState4[0],
+    setDetailRecord = _useState4[1];
+  var detailFetchedIdRef = useRef();
+  var displayRecord = detailRecord || record;
+  var activeKind = (displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw.type_kind) || 'smart';
+  useEffect(function () {
+    if (open) {
+      setActiveTab(initialTab);
+      setDetailRecord(record);
+      detailFetchedIdRef.current = undefined;
+    }
+  }, [initialTab, open, record === null || record === void 0 ? void 0 : record.id]);
+  useEffect(function () {
+    if (!open || !(record !== null && record !== void 0 && record.id)) return;
+    var shouldFetchDetail = activeTab === 'info' || detailFetchedIdRef.current !== record.id;
+    if (!shouldFetchDetail) return;
+    detailFetchedIdRef.current = record.id;
+    getDeviceDetail(record.id).then(function (detail) {
+      if (detail) {
+        setDetailRecord(createDeviceRow(detail, translation));
+      }
+    }).catch(function () {
+      setDetailRecord(record);
+    });
+  }, [activeTab, open, record, record === null || record === void 0 ? void 0 : record.id, translation]);
+  useEffect(function () {
+    if (activeKind === 'integrated' && activeTab === 'connections') {
+      setActiveTab('info');
+    }
+  }, [activeKind, activeTab]);
+  return {
+    activeTab: activeTab,
+    activeKind: activeKind,
+    displayRecord: displayRecord,
+    setActiveTab: setActiveTab
+  };
+};

package/es/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/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/index.js

@@ -1,150 +1,49 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useMemo } from 'react';
-import { Card, Drawer, Empty } from 'antd';
-import { Button, Icon, Tag } from '@pisell/materials';
+import React from 'react';
+import { Drawer } from 'antd';
+import { Button, Icon } from '@pisell/materials';
 import { CloseOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
+import { DEVICE_ICON_COLOR } from "../../utils";
+import DrawerSidebar from "./components/DrawerSidebar";
+import DeviceInfoPanel from "./components/DeviceInfoPanel";
+import DeviceConnectionsPanel from "./components/DeviceConnectionsPanel";
+import { useDeviceConnections } from "./hooks/useDeviceConnections";
+import { useDeviceDetail } from "./hooks/useDeviceDetail";
 import "./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: function value(data, getText) {
-      return 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: function value(data) {
-      return formatStorageValue(data.used);
-    }
-  }, {
-    key: 'total',
-    value: function value(data) {
-      return formatStorageValue(data.total);
-    }
-  }]
-}];
-var isPlainObject = function isPlainObject(value) {
-  return Object.prototype.toString.call(value) === '[object Object]';
-};
-var getReportText = function getReportText(getText, key) {
-  return getText("pisell2.saas.device-planning.detail.report.".concat(key));
-};
-var formatReportValue = function formatReportValue(value, getText) {
-  if (value === null || value === undefined || value === '') {
-    return EMPTY_VALUE;
-  }
-  if (typeof value === 'boolean') {
-    return getText("pisell2.saas.device-planning.detail.".concat(value ? 'yes' : 'no'));
-  }
-  if (Array.isArray(value) || isPlainObject(value)) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: "device-detail-drawer__json-value"
-    }, JSON.stringify(value));
-  }
-  return String(value);
-};
-var formatStorageValue = function formatStorageValue(value) {
-  var byteValue = typeof value === 'number' || typeof value === 'string' ? Number(value) : Number.NaN;
-  if (!Number.isFinite(byteValue)) {
-    return EMPTY_VALUE;
-  }
-  var gbValue = byteValue / BYTE_PER_GB;
-  var text = gbValue >= 10 ? String(Math.round(gbValue)) : gbValue.toFixed(2).replace(/\.?0+$/, '');
-  return "".concat(text, " GB");
-};
-var formatLastSeen = function formatLastSeen(value) {
-  return typeof value === 'string' && value.trim() ? value : EMPTY_VALUE;
-};
-var renderBatteryValue = function renderBatteryValue(data, getText) {
-  var rawLevel = typeof data.level === 'number' || typeof data.level === 'string' ? Number(data.level) : Number.NaN;
-  var hasLevel = Number.isFinite(rawLevel);
-  var levelValue = hasLevel ? Math.max(0, Math.min(rawLevel, 100)) : 0;
-  var level = hasLevel ? "".concat(rawLevel, "%") : EMPTY_VALUE;
-  var charging = (data === null || data === void 0 ? void 0 : data.charging) === true;
-  return /*#__PURE__*/React.createElement("span", {
-    className: "device-detail-drawer__battery-value"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames('device-detail-drawer__battery-icon', {
-      'is-charging': charging
-    })
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "device-detail-drawer__battery-fill",
-    style: {
-      width: "".concat(levelValue, "%")
-    }
-  }), charging ? /*#__PURE__*/React.createElement("span", {
-    className: "device-detail-drawer__battery-bolt"
-  }) : null), /*#__PURE__*/React.createElement("span", null, level), /*#__PURE__*/React.createElement("span", {
-    className: "device-detail-drawer__battery-status"
-  }, getReportText(getText, charging ? 'charging' : 'not-charging')));
-};
 var DeviceDetailDrawer = function DeviceDetailDrawer(_ref) {
   var _device$type;
   var open = _ref.open,
     record = _ref.record,
+    _ref$initialTab = _ref.initialTab,
+    initialTab = _ref$initialTab === void 0 ? 'info' : _ref$initialTab,
     getText = _ref.getText,
     translation = _ref.translation,
     onClose = _ref.onClose,
     onEdit = _ref.onEdit,
-    onDelete = _ref.onDelete;
-  var device = record === null || record === void 0 ? void 0 : record._raw;
-  var reportData = device === null || device === void 0 ? void 0 : device.data;
-  var online = (record === null || record === void 0 ? void 0 : record.status) === 'online';
-  var lastSeen = formatLastSeen(device === null || device === void 0 ? void 0 : device.last_seen);
-  var reportGroups = useMemo(function () {
-    if (!isPlainObject(reportData)) return [];
-    return REPORT_GROUPS.reduce(function (list, group) {
-      var data = reportData[group.key];
-      if (isPlainObject(data)) {
-        list.push(_objectSpread(_objectSpread({}, group), {}, {
-          data: data
-        }));
-      }
-      return list;
-    }, []);
-  }, [reportData]);
+    onDelete = _ref.onDelete,
+    onConnectionsChanged = _ref.onConnectionsChanged;
+  var _useDeviceDetail = useDeviceDetail({
+      open: open,
+      record: record,
+      initialTab: initialTab,
+      translation: translation
+    }),
+    activeTab = _useDeviceDetail.activeTab,
+    activeKind = _useDeviceDetail.activeKind,
+    displayRecord = _useDeviceDetail.displayRecord,
+    setActiveTab = _useDeviceDetail.setActiveTab;
+  var device = displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw;
+  var connections = useDeviceConnections({
+    open: open,
+    activeTab: activeTab,
+    activeKind: activeKind,
+    displayRecord: displayRecord,
+    onConnectionsChanged: onConnectionsChanged
+  });
   return /*#__PURE__*/React.createElement(Drawer, {
     open: open,
     onClose: onClose,
-    width: 520,
+    width: 720,
     maskClosable: true,
     closable: false,
     className: "device-detail-drawer",
@@ -157,97 +56,50 @@ var DeviceDetailDrawer = function DeviceDetailDrawer(_ref) {
     bodyStyle: {
       padding: 0
     }
-  }, record ? /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__root"
+  }, displayRecord ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('device-detail-drawer__root', "is-".concat(activeKind))
+  }, /*#__PURE__*/React.createElement(DrawerSidebar, {
+    activeKey: activeTab,
+    activeKind: activeKind,
+    getText: getText,
+    onChange: setActiveTab
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__main"
   }, /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__header"
   }, device !== null && device !== void 0 && (_device$type = device.type) !== null && _device$type !== void 0 && _device$type.icon ? /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__icon"
   }, /*#__PURE__*/React.createElement(Icon, {
-    type: device.type.icon
+    type: device.type.icon,
+    color: DEVICE_ICON_COLOR[activeKind]
   })) : null, /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__heading"
   }, /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__name"
-  }, record.name), /*#__PURE__*/React.createElement("div", {
+  }, displayRecord.name), /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__type"
-  }, record.typeName)), /*#__PURE__*/React.createElement(Button, {
+  }, displayRecord.typeName)), /*#__PURE__*/React.createElement(Button, {
     type: "text",
     icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
     onClick: onClose
   })), /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__content"
-  }, /*#__PURE__*/React.createElement(Card, {
-    size: "small",
-    title: getText('pisell2.saas.device-planning.detail.basic-info'),
-    className: "device-detail-drawer__card"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-list"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-row"
-  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.name')), /*#__PURE__*/React.createElement("strong", null, record.name)), /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-row"
-  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.type')), /*#__PURE__*/React.createElement("strong", null, record.typeName)), /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-row"
-  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.model')), /*#__PURE__*/React.createElement("strong", null, record.modelName)), /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-two-row"
-  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.profile')), /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__profile-card"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "FileTextOutlined"
-  }), record.profileName)))), /*#__PURE__*/React.createElement(Card, {
-    size: "small",
-    title: getText('pisell2.saas.device-planning.detail.status'),
-    className: "device-detail-drawer__card"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-list"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-row"
-  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.link-status')), /*#__PURE__*/React.createElement(Tag, {
-    color: record.link === 'linked' ? 'green' : 'gold',
-    style: {
-      marginRight: 0
-    }
-  }, getText("pisell2.saas.device-planning.status.".concat(record.link)) || record.link)), /*#__PURE__*/React.createElement("div", {
-    className: "device-detail-drawer__info-row"
-  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.online-status')), /*#__PURE__*/React.createElement("span", {
-    className: "device-detail-drawer__online-status"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames('device-detail-drawer__status-dot', {
-      'is-online': online
-    })
-  }), getText("pisell2.saas.device-planning.status.".concat(record.status)) || record.status)))), /*#__PURE__*/React.createElement(Card, {
-    size: "small",
-    title: getText('pisell2.saas.device-planning.detail.report-info'),
-    extra: /*#__PURE__*/React.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__*/React.createElement("div", {
-    className: "device-detail-drawer__report-list"
-  }, reportGroups.map(function (group) {
-    return /*#__PURE__*/React.createElement(Card, {
-      key: group.key,
-      size: "small",
-      type: "inner",
-      title: getReportText(getText, "group.".concat(group.key)),
-      className: "device-detail-drawer__report-card"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "device-detail-drawer__report-rows"
-    }, group.fields.map(function (field) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: field.key,
-        className: "device-detail-drawer__report-row"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "device-detail-drawer__report-label"
-      }, getReportText(getText, "field.".concat(field.key))), /*#__PURE__*/React.createElement("span", {
-        className: "device-detail-drawer__report-value"
-      }, field.value ? field.value(group.data, getText) : formatReportValue(group.data[field.key], getText)));
-    })));
-  })) : /*#__PURE__*/React.createElement(Empty, {
-    image: Empty.PRESENTED_IMAGE_SIMPLE,
-    description: getText('pisell2.saas.device-planning.detail.no-report-info')
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, activeTab === 'info' ? /*#__PURE__*/React.createElement(DeviceInfoPanel, {
+    record: displayRecord,
+    getText: getText
+  }) : /*#__PURE__*/React.createElement(DeviceConnectionsPanel, {
+    activeKind: activeKind,
+    currentDevice: displayRecord._raw,
+    connections: connections.connections,
+    loading: connections.loading,
+    submitting: connections.submitting,
+    deleting: connections.deleting,
+    getText: getText,
+    translation: translation,
+    onCreateConnection: connections.handleCreateConnection,
+    onUpdateConnection: connections.handleUpdateConnection,
+    onDeleteConnection: connections.handleDeleteConnection
+  })), activeTab === 'info' ? /*#__PURE__*/React.createElement("div", {
     className: "device-detail-drawer__footer"
   }, /*#__PURE__*/React.createElement(Button, {
     danger: true,
@@ -257,6 +109,6 @@ var DeviceDetailDrawer = function DeviceDetailDrawer(_ref) {
     type: "primary",
     size: "large",
     onClick: onEdit
-  }, getText('pisell2.saas.device-planning.detail.edit')))) : null);
+  }, getText('pisell2.saas.device-planning.detail.edit'))) : null)) : null);
 };
 export default DeviceDetailDrawer;