@pisell/private-materials 3.4.105 → 3.4.106

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

@@ -38,20 +38,15 @@ var import_materials = require("@pisell/materials");
 var import_icons = require("@ant-design/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_types = require("../../types");
-var import_constants = require("../../constants");
+var import_utils = require("../../utils");
+var import_DeviceBasicInfoForm = __toESM(require("../shared/DeviceBasicInfoForm"));
+var import_DeviceModelPicker = __toESM(require("../shared/DeviceModelPicker"));
 var import_index = require("./index.less");
-var isProfileRequired = (model) => {
-  var _a, _b;
-  return Boolean((_b = (_a = model == null ? void 0 : model.data) == null ? void 0 : _a.profile_structure) == null ? void 0 : _b.required);
-};
-var hasI18nValue = (value) => {
-  if (!value) return false;
-  return Object.values(value).some((item) => String(item || "").trim());
-};
 var AddDeviceModal = ({
   open,
   activeKind,
   models,
+  brands = [],
   workAreaId,
   submitting,
   getText,
@@ -61,41 +56,21 @@ var AddDeviceModal = ({
 }) => {
   const [form] = import_antd.Form.useForm();
   const [step, setStep] = (0, import_react.useState)("model");
-  const [keyword, setKeyword] = (0, import_react.useState)("");
   const [selectedModel, setSelectedModel] = (0, import_react.useState)();
   const nameValue = import_antd.Form.useWatch("name", form);
   const profileValue = import_antd.Form.useWatch("profile_id", form);
+  const isPeripheral = activeKind === "dumb";
   (0, import_react.useEffect)(() => {
     if (!open) return;
     setStep("model");
-    setKeyword("");
     setSelectedModel(void 0);
     form.resetFields();
     form.setFieldsValue({ name: { ...import_types.EMPTY_I18N } });
   }, [form, open]);
-  const filteredModels = (0, import_react.useMemo)(() => {
-    const value = (0, import_constants.normalizeText)(keyword);
-    if (!value) return models;
-    return models.filter((model) => {
-      const name = translation(model.name);
-      const desc = translation(model.description);
-      return [name, desc, model.code, model.type_code].some(
-        (item) => (0, import_constants.normalizeText)(item || "").includes(value)
-      );
-    });
-  }, [keyword, models, translation]);
-  const groupedModels = (0, import_react.useMemo)(() => {
-    const groups = /* @__PURE__ */ new Map();
-    filteredModels.forEach((model) => {
-      const key = model.type_code || getText(import_constants.DEVICE_KIND_LABEL_KEY[activeKind]);
-      groups.set(key, [...groups.get(key) || [], model]);
-    });
-    return Array.from(groups.entries());
-  }, [activeKind, filteredModels, getText]);
-  const profileRequired = isProfileRequired(selectedModel);
+  const profileRequired = (0, import_utils.isProfileRequired)(selectedModel);
   const profiles = (selectedModel == null ? void 0 : selectedModel.active_profiles) || [];
   const canSave = Boolean(
-    workAreaId && selectedModel && hasI18nValue(nameValue) && (!profileRequired || profiles.length > 0) && (!profileRequired || Boolean(profileValue))
+    workAreaId && selectedModel && (0, import_utils.hasI18nValue)(nameValue) && (!profileRequired || profiles.length > 0) && (!profileRequired || Boolean(profileValue))
   );
   const handleSelectModel = (model) => {
     setSelectedModel(model);
@@ -113,95 +88,60 @@ var AddDeviceModal = ({
       name: values.name
     });
   };
-  const renderModelStep = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__body" }, /* @__PURE__ */ import_react.default.createElement(
-    import_materials.Input,
+  const renderModelStep = () => /* @__PURE__ */ import_react.default.createElement(
+    import_DeviceModelPicker.default,
     {
-      allowClear: true,
-      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null),
-      value: keyword,
-      placeholder: getText("pisell2.saas.device-planning.add.search"),
-      onChange: (event) => setKeyword(event.target.value)
+      activeKind,
+      models,
+      brands,
+      getText,
+      translation,
+      onSelect: handleSelectModel
     }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__model-list" }, groupedModels.length ? groupedModels.map(([typeCode, items]) => {
-    var _a;
-    const type = (_a = items[0]) == null ? void 0 : _a.type;
-    const typeName = translation(type == null ? void 0 : type.name) || typeCode;
-    return /* @__PURE__ */ import_react.default.createElement("div", { key: typeCode, className: "add-device-modal__model-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__group-title" }, (type == null ? void 0 : type.icon) ? /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: type == null ? void 0 : type.icon }) : null, /* @__PURE__ */ import_react.default.createElement("span", null, typeName)), /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__model-grid" }, items.map((model) => /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        key: model.code,
-        className: (0, import_classnames.default)("add-device-modal__model-card", {
-          "is-selected": (selectedModel == null ? void 0 : selectedModel.code) === model.code
-        }),
-        onClick: () => handleSelectModel(model)
-      },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__model-name" }, translation(model.name) || ""),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__model-desc" }, translation(model.description) || "")
-    ))));
-  }) : /* @__PURE__ */ import_react.default.createElement(
-    import_materials.Empty,
+  );
+  const renderConfigureStep = () => /* @__PURE__ */ import_react.default.createElement(
+    import_DeviceBasicInfoForm.default,
     {
-      image: import_materials.Empty.PRESENTED_IMAGE_SIMPLE,
-      description: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, getText("pisell2.saas.device-planning.add.no-devices")), /* @__PURE__ */ import_react.default.createElement("div", null, getText("pisell2.saas.device-planning.add.adjust-search")))
+      form,
+      selectedModel,
+      profiles,
+      profileRequired,
+      showProfile: true,
+      getText,
+      translation
     }
-  )));
-  const renderConfigureStep = () => {
-    var _a;
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__body" }, selectedModel ? /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__selected-model" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: ((_a = selectedModel.type) == null ? void 0 : _a.icon) || "DesktopOutlined" }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__model-name" }, translation(selectedModel.name) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__model-desc" }, translation(selectedModel.description) || ""))) : null, /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", preserve: false }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
-      {
-        name: "name",
-        label: getText("pisell2.saas.device-planning.add.device-name"),
-        required: true,
-        rules: [
-          {
-            validator: (0, import_types.validateI18nRequired)(
-              getText("pisell2.saas.device-planning.add.device-name-required")
-            )
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_materials.BaseTranslation, { renderMode: "edit" })
-    ), profileRequired ? /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Form.Item,
-      {
-        name: "profile_id",
-        label: getText("pisell2.saas.device-planning.add.device-profile"),
-        required: true,
-        rules: [
-          {
-            required: true,
-            message: getText(
-              "pisell2.saas.device-planning.add.device-profile-required"
-            )
-          }
-        ],
-        help: profiles.length === 0 ? getText("pisell2.saas.device-planning.add.create-profile-first") : void 0
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_materials.Select,
-        {
-          disabled: profiles.length === 0,
-          options: profiles.map((profile) => ({
-            label: translation(profile.name) || String(profile.id),
-            value: profile.id
-          }))
-        }
-      )
-    ) : null));
-  };
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     import_materials.PisellModal,
     {
       open,
       onCancel: onClose,
       title: step === "model" ? getText(`pisell2.saas.device-planning.add.title.${activeKind}`) : getText("pisell2.saas.device-planning.add.configure-title"),
-      footer: null,
+      okVisible: step === "configure",
+      okText: getText("pisell2.saas.device-planning.add.save"),
+      cancelText: getText(
+        step === "model" ? "pisell2.saas.device-planning.add.cancel" : "pisell2.saas.device-planning.add.back"
+      ),
+      okButtonProps: {
+        block: true,
+        size: "large",
+        disabled: !canSave,
+        loading: submitting,
+        onClick: handleSave
+      },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        onClick: step === "model" ? onClose : () => setStep("model")
+      },
       destroyOnClose: true,
       maskClosable: false,
-      width: step === "model" ? 760 : 480,
-      className: "add-device-modal",
-      bodyStyle: { padding: "24px" }
+      width: step === "model" ? "980px" : "480px",
+      className: (0, import_classnames.default)("add-device-modal", {
+        "is-peripheral": isPeripheral && step === "model"
+      }),
+      bodyStyle: { padding: "24px", overflow: step === "model" ? "hidden" : "auto" }
     },
     step === "configure" ? /* @__PURE__ */ import_react.default.createElement(
       import_materials.Button,
@@ -212,17 +152,7 @@ var AddDeviceModal = ({
         onClick: () => setStep("model")
       }
     ) : null,
-    step === "model" ? renderModelStep() : renderConfigureStep(),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "add-device-modal__footer" }, step === "model" ? /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "text", onClick: onClose }, getText("pisell2.saas.device-planning.add.cancel")) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "text", onClick: () => setStep("model") }, getText("pisell2.saas.device-planning.add.back")), /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Button,
-      {
-        type: "primary",
-        disabled: !canSave,
-        loading: submitting,
-        onClick: handleSave
-      },
-      getText("pisell2.saas.device-planning.add.save")
-    )))
+    step === "model" ? renderModelStep() : renderConfigureStep()
   );
 };
 var AddDeviceModal_default = AddDeviceModal;

package/lib/plus/saasDevice/devicePlanning/components/AddDeviceModal/index.less

@@ -3,15 +3,33 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    min-height: 260px;
+    min-height: auto;
+    max-height: calc(80vh - 200px) !important;
   }
 
   &__model-list {
-    max-height: 420px;
+    flex: 1;
+    min-height: 0;
     overflow: auto;
     padding-right: 8px;
   }
 
+  &__filters {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__search {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__filter-select {
+    width: 150px;
+    flex: 0 0 150px;
+  }
+
   &__model-group {
     & + & {
       margin-top: 20px;
@@ -35,10 +53,15 @@
   }
 
   &__model-card {
+    display: block;
+    width: 100%;
+    height: auto;
     padding: 14px;
     border: 1px solid transparent;
     border-radius: 8px;
     background: #f5f6f8;
+    text-align: left;
+    white-space: normal;
     cursor: pointer;
     transition: all 0.18s;
 
@@ -62,6 +85,33 @@
     color: rgba(0, 0, 0, 0.45);
   }
 
+  &__model-brand {
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  &__connection-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 8px;
+  }
+
+  &__connection-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 6px;
+    font-size: 11px;
+    line-height: 16px;
+    color: rgba(0, 0, 0, 0.65);
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    background: #fff;
+  }
+
   &__selected-model {
     display: flex;
     gap: 12px;
@@ -70,16 +120,19 @@
     background: #f5f6f8;
   }
 
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 20px;
-  }
-
   &__back-icon {
     position: absolute;
     top: 18px;
     left: 16px;
   }
+
+  &.is-peripheral {
+    .add-device-modal__model-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .add-device-modal__model-card {
+      min-height: 108px;
+    }
+  }
 }

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

@@ -33,10 +33,9 @@ __export(DeleteDeviceModal_exports, {
 });
 module.exports = __toCommonJS(DeleteDeviceModal_exports);
 var import_react = __toESM(require("react"));
-var import_antd = require("antd");
 var import_materials = require("@pisell/materials");
-var import_icons = require("@ant-design/icons");
 var import_constants = require("../../constants");
+var import_OnlineWarningAlert = __toESM(require("../shared/OnlineWarningAlert"));
 var DeleteDeviceModal = ({
   open,
   record,
@@ -58,19 +57,27 @@ var DeleteDeviceModal = ({
         online ? "pisell2.saas.device-planning.delete-device.delete-anyway" : "pisell2.saas.device-planning.detail.delete"
       ),
       cancelText: getText("pisell2.saas.device-planning.detail.cancel"),
-      okButtonProps: { danger: true, loading: submitting, onClick: onConfirm },
-      cancelButtonProps: { disabled: submitting },
+      okButtonProps: {
+        block: true,
+        size: "large",
+        danger: true,
+        loading: submitting,
+        onClick: onConfirm
+      },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        disabled: submitting
+      },
       destroyOnClose: true,
       maskClosable: false,
       width: 460,
       bodyStyle: { padding: "0 24px 24px" }
     },
     online ? /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Alert,
+      import_OnlineWarningAlert.default,
       {
-        type: "warning",
-        showIcon: true,
-        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleFilled, null),
         message: getText("pisell2.saas.device-planning.delete-device.online-title"),
         description: (0, import_constants.formatToken)(
           getText("pisell2.saas.device-planning.delete-device.online-desc"),

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

@@ -35,8 +35,8 @@ module.exports = __toCommonJS(DeleteWorkAreaModal_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_materials = require("@pisell/materials");
-var import_icons = require("@ant-design/icons");
 var import_constants = require("../../constants");
+var import_OnlineWarningAlert = __toESM(require("../shared/OnlineWarningAlert"));
 var import_index = require("./index.less");
 var DeleteWorkAreaModal = ({
   open,
@@ -65,11 +65,18 @@ var DeleteWorkAreaModal = ({
         hasDevices ? "pisell2.saas.device-planning.delete.close" : "pisell2.saas.device-planning.delete.cancel"
       ),
       okButtonProps: {
+        block: true,
+        size: "large",
         danger: true,
         loading: submitting,
         onClick: onConfirm
       },
-      cancelButtonProps: { disabled: submitting },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        disabled: submitting
+      },
       destroyOnClose: true,
       maskClosable: false,
       width: 520,
@@ -78,11 +85,8 @@ var DeleteWorkAreaModal = ({
       footer: loading ? null : void 0
     },
     loading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-planning-delete-modal__loading" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, null)) : hasDevices ? /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-device-planning-delete-modal__body" }, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Alert,
+      import_OnlineWarningAlert.default,
       {
-        type: "warning",
-        showIcon: true,
-        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleFilled, null),
         message: getText("pisell2.saas.device-planning.delete.block-title"),
         description: (0, import_constants.formatToken)(
           getText("pisell2.saas.device-planning.delete.block-content"),

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { CreateDeviceConnectionPayload, DeviceConnectionItem, DeviceItem, I18nText, UpdateDeviceConnectionPayload } from '../../../types';
+import type { ConnectMode } from '../hooks/useConnectDeviceModal';
+import '../../AddDeviceModal/index.less';
+import './ConnectExistingDeviceModal.less';
+interface ConnectExistingDeviceModalProps {
+    open: boolean;
+    mode: ConnectMode;
+    currentDevice: DeviceItem;
+    editConnection?: DeviceConnectionItem;
+    connectedDeviceIds: number[];
+    currentWorkAreaId?: number;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    submitting: boolean;
+    onClose: () => void;
+    onSubmit?: (payload: CreateDeviceConnectionPayload) => void;
+    onUpdate?: (id: number, payload: UpdateDeviceConnectionPayload) => void;
+}
+declare const ConnectExistingDeviceModal: React.FC<ConnectExistingDeviceModalProps>;
+export default ConnectExistingDeviceModal;