@pisell/private-materials 3.4.104 → 3.4.106

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

@@ -0,0 +1,270 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/ConnectExistingDeviceModal.tsx
+var ConnectExistingDeviceModal_exports = {};
+__export(ConnectExistingDeviceModal_exports, {
+  default: () => ConnectExistingDeviceModal_default
+});
+module.exports = __toCommonJS(ConnectExistingDeviceModal_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_types = require("../../../types");
+var import_useConnectDeviceModal = require("../hooks/useConnectDeviceModal");
+var import_ConnectDeviceModalHeader = __toESM(require("./connectDeviceModal/ConnectDeviceModalHeader"));
+var import_ConnectionConfigFields = __toESM(require("./connectDeviceModal/ConnectionConfigFields"));
+var import_DeviceConnectionSummary = __toESM(require("./connectDeviceModal/DeviceConnectionSummary"));
+var import_NewPeripheralInfoFields = __toESM(require("./connectDeviceModal/NewPeripheralInfoFields"));
+var import_PickExistingDeviceStep = __toESM(require("./connectDeviceModal/PickExistingDeviceStep"));
+var import_PickNewPeripheralStep = __toESM(require("./connectDeviceModal/PickNewPeripheralStep"));
+var import_AddDeviceModal = require("../../AddDeviceModal/index.less");
+var import_ConnectExistingDeviceModal = require("./ConnectExistingDeviceModal.less");
+var ConnectExistingDeviceModal = ({
+  open,
+  mode,
+  currentDevice,
+  editConnection,
+  connectedDeviceIds,
+  currentWorkAreaId,
+  getText,
+  translation,
+  submitting,
+  onClose,
+  onSubmit,
+  onUpdate
+}) => {
+  var _a;
+  const [form] = import_antd.Form.useForm();
+  const modal = (0, import_useConnectDeviceModal.useConnectDeviceModal)({
+    open,
+    mode,
+    currentDevice,
+    editConnection,
+    connectedDeviceIds,
+    currentWorkAreaId,
+    getText,
+    translation,
+    onSubmit,
+    onUpdate
+  });
+  const {
+    step,
+    workAreas,
+    brands,
+    models,
+    selectedWorkAreaId,
+    selectedModel,
+    keyword,
+    editFormValues,
+    loading,
+    detailLoading,
+    pickingDeviceId,
+    currentIsSmart,
+    targetKind,
+    peripheral,
+    smartDevice,
+    profileOptions,
+    profileRequired,
+    filteredDevices,
+    getWorkAreaDeviceCount,
+    getDeviceCountText,
+    setSelectedWorkAreaId,
+    setKeyword,
+    handlePickDevice,
+    handlePickModel,
+    handleBackToPick,
+    handleSubmit
+  } = modal;
+  const connectionType = import_antd.Form.useWatch("connection_type", form);
+  const networkMethod = import_antd.Form.useWatch("connection_method", form) || "auto";
+  const newDeviceWorkAreaId = import_antd.Form.useWatch("workarea_id", form);
+  const selectedTargetId = currentIsSmart ? peripheral == null ? void 0 : peripheral.id : smartDevice == null ? void 0 : smartDevice.id;
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    form.resetFields();
+    form.setFieldsValue({
+      name: { ...import_types.EMPTY_I18N },
+      workarea_id: currentWorkAreaId,
+      connection_method: "auto",
+      profile_ids: []
+    });
+  }, [currentWorkAreaId, form, open]);
+  (0, import_react.useEffect)(() => {
+    if (!open || mode !== "edit" || !editFormValues) return;
+    form.setFieldsValue(editFormValues);
+  }, [editFormValues, form, mode, open]);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    if (!open || mode !== "new" || step !== "config" || !selectedModel) return;
+    const nextName = translation(selectedModel.name) || selectedModel.code;
+    form.setFieldsValue({
+      name: { ...import_types.EMPTY_I18N, original: `${nextName} 1` },
+      workarea_id: form.getFieldValue("workarea_id") || currentWorkAreaId || ((_a2 = workAreas[0]) == null ? void 0 : _a2.id),
+      connection_type: void 0,
+      connection_method: "auto",
+      connection_ip: void 0,
+      profile_ids: []
+    });
+  }, [
+    currentWorkAreaId,
+    form,
+    mode,
+    open,
+    selectedModel == null ? void 0 : selectedModel.code,
+    step,
+    translation,
+    (_a = workAreas[0]) == null ? void 0 : _a.id
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!open || mode !== "existing" || step !== "config" || !selectedTargetId) {
+      return;
+    }
+    form.setFieldsValue({
+      connection_type: void 0,
+      connection_method: "auto",
+      connection_ip: void 0,
+      profile_ids: []
+    });
+  }, [form, mode, open, selectedTargetId, step]);
+  const handleValidateAndSubmit = async () => {
+    const values = await form.validateFields();
+    handleSubmit(values);
+  };
+  const renderPickStep = () => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `device-detail-drawer__connect-picker is-${mode}`
+    },
+    mode === "new" ? /* @__PURE__ */ import_react.default.createElement(
+      import_PickNewPeripheralStep.default,
+      {
+        loading,
+        models,
+        brands,
+        getText,
+        translation,
+        onSelect: handlePickModel
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement(
+      import_PickExistingDeviceStep.default,
+      {
+        workAreas,
+        selectedWorkAreaId,
+        currentWorkAreaId,
+        filteredDevices,
+        connectedDeviceIds,
+        loading,
+        pickingDeviceId,
+        keyword,
+        targetKind,
+        getText,
+        translation,
+        getWorkAreaDeviceCount,
+        getDeviceCountText,
+        onWorkAreaChange: setSelectedWorkAreaId,
+        onKeywordChange: setKeyword,
+        onPickDevice: handlePickDevice
+      }
+    )
+  );
+  const renderConfigStep = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connect-config" }, /* @__PURE__ */ import_react.default.createElement(
+    import_DeviceConnectionSummary.default,
+    {
+      mode,
+      smartDevice,
+      peripheral,
+      selectedModel,
+      translation
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", preserve: false }, mode === "new" ? /* @__PURE__ */ import_react.default.createElement(
+    import_NewPeripheralInfoFields.default,
+    {
+      workAreas,
+      workAreaId: newDeviceWorkAreaId,
+      currentWorkAreaId,
+      getText,
+      translation
+    }
+  ) : null, /* @__PURE__ */ import_react.default.createElement(
+    import_ConnectionConfigFields.default,
+    {
+      connectionType,
+      networkMethod,
+      profileRequired,
+      profileOptions,
+      getText
+    }
+  )));
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open,
+      width: step === "pick" ? 980 : 860,
+      okVisible: step === "config",
+      okText: getText(
+        mode === "edit" ? "pisell2.saas.device-planning.connect.update" : "pisell2.saas.device-planning.add.save"
+      ),
+      cancelText: getText("pisell2.saas.device-planning.add.cancel"),
+      okButtonProps: {
+        block: true,
+        size: "large",
+        loading: submitting,
+        onClick: handleValidateAndSubmit
+      },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        onClick: onClose
+      },
+      title: /* @__PURE__ */ import_react.default.createElement(
+        import_ConnectDeviceModalHeader.default,
+        {
+          mode,
+          step,
+          currentDevice,
+          currentIsSmart,
+          getText,
+          translation,
+          onBack: handleBackToPick
+        }
+      ),
+      closeIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
+      onCancel: onClose,
+      className: "device-detail-drawer__connect-modal",
+      bodyStyle: {
+        padding: "24px",
+        overflow: step === "pick" ? "hidden" : "auto"
+      }
+    },
+    step === "pick" ? renderPickStep() : /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: detailLoading }, renderConfigStep())
+  );
+};
+var ConnectExistingDeviceModal_default = ConnectExistingDeviceModal;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/ConnectExistingDeviceModal.less

@@ -0,0 +1,323 @@
+.device-detail-drawer {
+  &__connect-modal-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__connect-picker {
+    display: grid;
+    grid-template-columns: 260px 1fr;
+    gap: 32px;
+
+    &.is-new {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__connect-areas,
+  &__connect-targets,
+  &__connect-config {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__connect-area-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow-y: auto;
+    padding-right: 8px;
+  }
+
+  &__connect-targets {
+    min-width: 0;
+  }
+
+  &__connect-device-list {
+    overflow-y: auto;
+    padding-right: 8px;
+  }
+
+  &__connect-picker.is-existing {
+    .device-detail-drawer__connect-area-list,
+    .device-detail-drawer__connect-device-list {
+      max-height: calc(80vh - 260px);
+      overflow-y: auto;
+    }
+  }
+
+  &__connect-section-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+  }
+
+  &__connect-section-desc,
+  &__connect-help {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  &__connect-area,
+  &__connect-device-card,
+  &__connect-model-card,
+  &__connect-option,
+  &__connect-summary-card {
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    background: #fff;
+  }
+
+  &__connect-area {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-height: 64px;
+    padding: 12px;
+    cursor: pointer;
+
+    &.is-active {
+      border-color: #1677ff;
+      background: #e6f4ff;
+    }
+  }
+
+  &__connect-area-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+  }
+
+  &__connect-current {
+    margin-top: 4px;
+    padding: 1px 6px;
+    font-size: 11px;
+    color: #1677ff;
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  &__connect-workarea-name {
+    font-weight: 600;
+  }
+
+  &__connect-filters,
+  &__connect-two-columns,
+  &__connect-option-grid,
+  &__connect-summary {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__connect-picker.is-new &__connect-filters {
+    grid-template-columns: 1fr auto auto;
+  }
+
+  &__connect-model-grid,
+  &__connect-device-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__connect-picker.is-new &__connect-model-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &__connect-model-card,
+  &__connect-device-card {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    width: 100%;
+    min-height: 76px;
+    height: auto;
+    padding: 12px;
+    text-align: left;
+    white-space: normal;
+    cursor: pointer;
+
+    &.is-disabled {
+      color: rgba(0, 0, 0, 0.25);
+      background: #fafafa;
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    > div > span {
+      display: block;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  &__connect-device-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+
+    &.is-smart {
+      background: #e6f4ff;
+      color: #1677ff;
+    }
+
+    &.is-dumb {
+      background: #fffbe6;
+      color: #faad14;
+    }
+
+    &.is-integrated {
+      background: #eef7e8;
+      color: #389e0d;
+    }
+  }
+
+  &__connect-model-card {
+    align-items: flex-start;
+    flex-direction: column;
+    min-height: 168px;
+  }
+
+  &__connect-model-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  &__connect-model-group-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+  }
+
+  &__connect-model-name {
+    font-weight: 600;
+  }
+
+  &__connect-model-brand {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  &__connect-model-desc {
+    font-size: 12px;
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  &__connect-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+
+    span {
+      padding: 0 6px;
+      font-size: 11px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      background: #fff;
+    }
+  }
+
+  &__connect-summary {
+    align-items: center;
+    grid-template-columns: 1fr auto 1fr;
+
+    > .anticon {
+      justify-self: center;
+    }
+  }
+
+  &__connect-summary-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 88px;
+    padding: 12px;
+    background: #fafafa;
+
+    &.is-smart {
+      background: #f0f7ff;
+      border-color: #d6e4ff;
+    }
+
+    &.is-dumb {
+      background: #fffdf0;
+      border-color: #ffe7ba;
+    }
+
+    > div > span {
+      display: block;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  &__connect-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 220px;
+  }
+
+  &__connect-new-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__connect-new-info &__connect-two-columns {
+    grid-template-columns: minmax(2, 1fr) 260px;
+    align-items: start;
+  }
+
+  &__connect-new-info .pisell-lowcode-select,
+  &__connect-new-info .ant-select,
+  &__connect-new-info .ant-input,
+  &__connect-new-info input {
+    width: 100%;
+  }
+
+  &__connect-label {
+    margin-top: 4px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.72);
+  }
+
+  &__connect-option {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 56px;
+    width: 100%;
+    padding: 12px;
+    margin-inline-end: 0;
+    cursor: pointer;
+
+    > span:not(.ant-radio):not(.pisell-lowcode-radio) {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+    }
+
+    &.ant-radio-wrapper-checked,
+    &.pisell-lowcode-radio-wrapper-checked {
+      border-color: var(--primary-600, #7f56d9);
+      background: var(--Primary-50, #f9f5ff);
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { CreateDeviceConnectionPayload, DeviceConnectionItem, DeviceItem, DeviceKind, I18nText, UpdateDeviceConnectionPayload } from '../../../types';
+import './DeviceConnectionsPanel.less';
+interface DeviceConnectionsPanelProps {
+    activeKind: DeviceKind;
+    currentDevice: DeviceItem;
+    connections: DeviceConnectionItem[];
+    loading: boolean;
+    submitting: boolean;
+    deleting: boolean;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    onCreateConnection: (payload: CreateDeviceConnectionPayload) => Promise<void>;
+    onUpdateConnection: (id: number, payload: UpdateDeviceConnectionPayload) => Promise<void>;
+    onDeleteConnection: (id: number) => Promise<void>;
+}
+declare const DeviceConnectionsPanel: React.FC<DeviceConnectionsPanelProps>;
+export default DeviceConnectionsPanel;