@pisell/private-materials 3.4.104 → 3.4.106

package/es/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/index.less

@@ -11,6 +11,8 @@
 }
 
 .device-detail-drawer {
+  --device-detail-drawer-header-height: 88px;
+
   .ant-drawer-body {
     height: 100%;
     padding: 0;
@@ -18,262 +20,154 @@
 
   &__root {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    width: 100%;
     height: 100%;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    background: #e6f4ff;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    background: #dbeafe;
-    color: #1677ff;
-  }
-
-  &__heading {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__name {
-    font-size: 15px;
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
-  }
-
-  &__type {
-    margin-top: 2px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.45);
-  }
-
-  &__content {
-    flex: 1;
     min-height: 0;
-    padding: 20px 10px;
-    overflow: auto;
-    background: #f5f6f8;
-  }
 
-  &__card {
-    border-radius: 10px;
+    &.is-smart {
+      .device-detail-drawer__header {
+        background: #e6f4ff;
+      }
 
-    & + & {
-      margin-top: 12px;
+      .device-detail-drawer__icon {
+        background: #dbeafe;
+        color: #1677ff;
+      }
     }
 
-    .ant-card-head {
-      min-height: 42px;
-      padding: 0 16px;
-    }
+    &.is-dumb {
+      .device-detail-drawer__header {
+        background: #fffbe6;
+      }
 
-    .ant-card-head-title {
-      padding: 10px 0;
-      font-size: 14px;
-      font-weight: 600;
+      .device-detail-drawer__icon {
+        background: #fff1b8;
+        color: #faad14;
+      }
     }
 
-    .ant-card-body {
-      padding: 16px;
+    &.is-integrated {
+      .device-detail-drawer__header {
+        background: #eef7e8;
+      }
+
+      .device-detail-drawer__icon {
+        background: #d9ead2;
+        color: #389e0d;
+      }
     }
   }
 
-  &__info-list {
+  &__sidebar {
     display: flex;
+    flex: 0 0 72px;
     flex-direction: column;
-    gap: 12px;
+    align-items: stretch;
+    height: 100%;
+    min-height: 0;
+    border-right: 1px solid #f0f0f0;
+    background: #fafafa;
   }
 
-  &__info-row {
+  &__sidebar-item {
+    position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    font-size: 14px;
-
-    > span:first-child {
-      color: rgba(0, 0, 0, 0.55);
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    height: var(--device-detail-drawer-header-height);
+    min-height: var(--device-detail-drawer-header-height);
+    width: 100%;
+    padding: 8px 4px;
+    color: rgba(0, 0, 0, 0.55);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+
+    .anticon {
+      font-size: 18px;
     }
 
-    strong {
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
+    span {
+      font-size: 12px;
+      line-height: 16px;
     }
-  }
-
-  &__info-two-row {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    font-size: 14px;
 
-    > span:first-child {
-      color: rgba(0, 0, 0, 0.55);
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background: transparent;
+      content: '';
     }
 
-    strong {
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
+    &:hover,
+    &.is-active {
+      color: #1677ff;
+      background: #fff;
     }
-  }
 
-  &__profile-card {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 180px;
-    padding: 8px 10px;
-    border-radius: 6px;
-    background: #f5f6f8;
-    color: rgba(0, 0, 0, 0.72);
+    &.is-active::before {
+      background: #1677ff;
+    }
   }
 
-  &__report-list {
+  &__main {
     display: flex;
+    flex: 1;
     flex-direction: column;
-    gap: 12px;
-  }
-
-  &__last-seen {
-    font-size: 12px;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.45);
-  }
-
-  &__report-card {
-    border-radius: 8px;
-    background: #fafafa;
-
-    .ant-card-head {
-      min-height: 38px;
-      padding: 0 12px;
-    }
-
-    .ant-card-head-title {
-      padding: 8px 0;
-      font-size: 13px;
-      font-weight: 600;
-    }
-
-    .ant-card-body {
-      padding: 12px;
-    }
+    min-width: 0;
+    min-height: 0;
   }
 
-  &__report-rows {
+  &__header {
     display: flex;
-    flex-direction: column;
+    align-items: center;
     gap: 12px;
+    box-sizing: border-box;
+    min-height: var(--device-detail-drawer-header-height);
+    padding: 16px;
   }
 
-  &__report-row {
+  &__icon {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    font-size: 14px;
-  }
-
-  &__report-label {
-    flex-shrink: 0;
-    color: rgba(0, 0, 0, 0.55);
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
   }
 
-  &__report-value,
-  &__json-value {
+  &__heading {
+    flex: 1;
     min-width: 0;
-    color: rgba(0, 0, 0, 0.88);
-    text-align: right;
-    word-break: break-word;
-  }
-
-  &__battery-value {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
   }
 
-  &__battery-icon {
-    position: relative;
-    box-sizing: border-box;
-    width: 24px;
-    height: 12px;
-    border: 1.5px solid rgba(0, 0, 0, 0.65);
-    border-radius: 3px;
-
-    &::before {
-      position: absolute;
-      top: 2px;
-      right: -4px;
-      width: 2px;
-      height: 6px;
-      border-radius: 0 2px 2px 0;
-      background: rgba(0, 0, 0, 0.65);
-      content: '';
-    }
-
-    &.is-charging {
-      border-color: #16a34a;
-
-      &::before {
-        background: #16a34a;
-      }
-    }
-  }
-
-  &__battery-fill {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    max-width: 17px;
-    height: 5px;
-    border-radius: 1px;
-    background: #16a34a;
-  }
-
-  &__battery-bolt {
-    position: absolute;
-    top: -3px;
-    left: 8px;
-    width: 7px;
-    height: 14px;
-    background: #f59e0b;
-    clip-path: polygon(45% 0, 100% 0, 62% 42%, 100% 42%, 35% 100%, 48% 56%, 0 56%);
-  }
-
-  &__battery-status {
-    color: #16a34a;
+  &__name {
+    font-size: 15px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
   }
 
-  &__online-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+  &__type {
+    margin-top: 2px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
   }
 
-  &__status-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.25);
-
-    &.is-online {
-      background: #16a34a;
-    }
+  &__content {
+    flex: 1;
+    min-height: 0;
+    padding: 24px;
+    overflow: auto;
+    background: #fff;
   }
 
   &__footer {

package/es/plus/saasDevice/devicePlanning/components/DeviceTable/index.js

@@ -5,10 +5,12 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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; }
 import React, { useMemo } from 'react';
-import { Input, Select, Table, Tag, Button, Icon } from '@pisell/materials';
+import { Input, Select, Table, Button, Icon } from '@pisell/materials';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
 import { ADD_BUTTON_KEY, SEARCH_PLACEHOLDER_KEY } from "../../constants";
+import DeviceIcon from "../shared/DeviceIcon";
+import LinkStatusTag from "../shared/LinkStatusTag";
+import OnlineStatus from "../shared/OnlineStatus";
 import "./index.less";
 var DeviceTable = function DeviceTable(_ref) {
   var activeKind = _ref.activeKind,
@@ -27,7 +29,7 @@ var DeviceTable = function DeviceTable(_ref) {
     onSortChange = _ref.onSortChange,
     onRowClick = _ref.onRowClick;
   var columns = useMemo(function () {
-    return [{
+    var nameColumn = {
       title: getText('pisell2.saas.device-planning.column.name'),
       dataIndex: 'name',
       key: 'name',
@@ -35,19 +37,27 @@ var DeviceTable = function DeviceTable(_ref) {
         var _record$_raw$type;
         return /*#__PURE__*/React.createElement("span", {
           className: "saas-device-planning-device-table__device-name"
-        }, (_record$_raw$type = record._raw.type) !== null && _record$_raw$type !== void 0 && _record$_raw$type.icon ? /*#__PURE__*/React.createElement(Icon, {
-          type: record._raw.type.icon
+        }, (_record$_raw$type = record._raw.type) !== null && _record$_raw$type !== void 0 && _record$_raw$type.icon ? /*#__PURE__*/React.createElement(DeviceIcon, {
+          className: "saas-device-planning-device-table__device-icon",
+          icon: record._raw.type.icon,
+          kind: record._raw.type_kind
         }) : null, name);
       }
-    }, {
+    };
+    var typeColumn = {
       title: getText('pisell2.saas.device-planning.column.device-type'),
       dataIndex: 'typeName',
       key: 'typeName'
-    }, {
+    };
+    var modelColumn = {
       title: getText('pisell2.saas.device-planning.column.device-model'),
       dataIndex: 'modelName',
       key: 'modelName'
-    }, {
+    };
+    if (activeKind === 'dumb') {
+      return [nameColumn, typeColumn, modelColumn];
+    }
+    return [nameColumn, typeColumn, modelColumn, {
       title: getText('pisell2.saas.device-planning.column.profile'),
       dataIndex: 'profileName',
       key: 'profileName'
@@ -57,9 +67,10 @@ var DeviceTable = function DeviceTable(_ref) {
       key: 'link',
       width: 140,
       render: function render(value) {
-        return /*#__PURE__*/React.createElement(Tag, {
-          color: value === 'linked' ? 'green' : 'gold'
-        }, getText("pisell2.saas.device-planning.status.".concat(value)) || value);
+        return /*#__PURE__*/React.createElement(LinkStatusTag, {
+          value: value,
+          getText: getText
+        });
       }
     }, {
       title: getText('pisell2.saas.device-planning.column.online-status'),
@@ -67,16 +78,15 @@ var DeviceTable = function DeviceTable(_ref) {
       key: 'status',
       width: 140,
       render: function render(value) {
-        return /*#__PURE__*/React.createElement("span", {
-          className: "saas-device-planning-device-table__online-status"
-        }, /*#__PURE__*/React.createElement("span", {
-          className: classNames('saas-device-planning-device-table__status-dot', {
-            'is-online': value === 'online'
-          })
-        }), getText("pisell2.saas.device-planning.status.".concat(value)) || value);
+        return /*#__PURE__*/React.createElement(OnlineStatus, {
+          value: value,
+          getText: getText,
+          className: "saas-device-planning-device-table__online-status",
+          dotClassName: "saas-device-planning-device-table__status-dot"
+        });
       }
     }];
-  }, [getText]);
+  }, [activeKind, getText]);
   var pagedData = useMemo(function () {
     var start = (page - 1) * pageSize;
     return data.slice(start, start + pageSize);

package/es/plus/saasDevice/devicePlanning/components/DeviceTable/index.less

@@ -34,10 +34,31 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
+    font-weight: 500;
+  }
+
+  &__device-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
 
-    .anticon {
+    &.is-smart {
+      background: #e6f4ff;
       color: #1677ff;
     }
+
+    &.is-dumb {
+      background: #fffbe6;
+      color: #faad14;
+    }
+
+    &.is-integrated {
+      background: #eef7e8;
+      color: #389e0d;
+    }
   }
 
   &__online-status {

package/es/plus/saasDevice/devicePlanning/components/EditDeviceModal/index.js

@@ -9,15 +9,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 React, { useEffect, useMemo } from 'react';
-import { Alert, Form, Input as AntdInput } from 'antd';
-import { BaseTranslation, PisellModal, Select } from '@pisell/materials';
-import { ExclamationCircleFilled } from '@ant-design/icons';
-import { toLangDict, validateI18nRequired } from "../../types";
+import { Form, Input as AntdInput } from 'antd';
+import { PisellModal, Select } from '@pisell/materials';
+import { toLangDict } from "../../types";
+import { isProfileRequired } from "../../utils";
+import I18nNameFormItem from "../shared/I18nNameFormItem";
+import OnlineWarningAlert from "../shared/OnlineWarningAlert";
 import "./index.less";
-var isProfileRequired = function isProfileRequired(model) {
-  var _model$data;
-  return Boolean(model === null || model === void 0 || (_model$data = model.data) === null || _model$data === void 0 || (_model$data = _model$data.profile_structure) === null || _model$data === void 0 ? void 0 : _model$data.required);
-};
 var EditDeviceModal = function EditDeviceModal(_ref) {
   var open = _ref.open,
     record = _ref.record,
@@ -40,6 +38,7 @@ var EditDeviceModal = function EditDeviceModal(_ref) {
   var profileRequired = isProfileRequired(currentModel);
   var profiles = (currentModel === null || currentModel === void 0 ? void 0 : currentModel.active_profiles) || [];
   var online = (record === null || record === void 0 ? void 0 : record.status) === 'online';
+  var showProfile = (record === null || record === void 0 ? void 0 : record._raw.type_kind) === 'smart';
   useEffect(function () {
     if (!open || !record) return;
     form.setFieldsValue({
@@ -67,7 +66,7 @@ var EditDeviceModal = function EditDeviceModal(_ref) {
             onSubmit(record.id, {
               workarea_id: values.workarea_id,
               name: values.name,
-              profile_id: values.profile_id || null
+              profile_id: showProfile ? values.profile_id || null : null
             });
           case 6:
           case "end":
@@ -87,10 +86,15 @@ var EditDeviceModal = function EditDeviceModal(_ref) {
     okText: getText('pisell2.saas.device-planning.detail.save'),
     cancelText: getText('pisell2.saas.device-planning.detail.cancel'),
     okButtonProps: {
+      block: true,
+      size: 'large',
       loading: submitting,
       onClick: handleOk
     },
     cancelButtonProps: {
+      block: true,
+      size: 'large',
+      type: 'default',
       disabled: submitting
     },
     destroyOnClose: true,
@@ -101,10 +105,7 @@ var EditDeviceModal = function EditDeviceModal(_ref) {
     form: form,
     layout: "vertical",
     preserve: false
-  }, online ? /*#__PURE__*/React.createElement(Alert, {
-    type: "warning",
-    showIcon: true,
-    icon: /*#__PURE__*/React.createElement(ExclamationCircleFilled, null),
+  }, online ? /*#__PURE__*/React.createElement(OnlineWarningAlert, {
     message: getText('pisell2.saas.device-planning.edit.online-title'),
     description: getText('pisell2.saas.device-planning.edit.online-desc'),
     style: {
@@ -139,16 +140,11 @@ var EditDeviceModal = function EditDeviceModal(_ref) {
         value: item.id
       };
     })
-  })), /*#__PURE__*/React.createElement(Form.Item, {
+  })), /*#__PURE__*/React.createElement(I18nNameFormItem, {
     name: "name",
     label: getText('pisell2.saas.device-planning.detail.name'),
-    required: true,
-    rules: [{
-      validator: validateI18nRequired(getText('pisell2.saas.device-planning.add.device-name-required'))
-    }]
-  }, /*#__PURE__*/React.createElement(BaseTranslation, {
-    renderMode: "edit"
-  })), profileRequired || profiles.length > 0 ? /*#__PURE__*/React.createElement(Form.Item, {
+    requiredMessage: getText('pisell2.saas.device-planning.add.device-name-required')
+  }), showProfile && (profileRequired || profiles.length > 0) ? /*#__PURE__*/React.createElement(Form.Item, {
     name: "profile_id",
     label: getText('pisell2.saas.device-planning.detail.profile'),
     help: profileRequired && profiles.length === 0 ? getText('pisell2.saas.device-planning.add.create-profile-first') : undefined

package/es/plus/saasDevice/devicePlanning/components/WorkAreaModal/index.js

@@ -15,8 +15,9 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect } from 'react';
 import { Form } from 'antd';
-import { BaseTranslation, PisellModal } from '@pisell/materials';
-import { EMPTY_I18N, toLangDict, validateI18nRequired } from "../../types";
+import { PisellModal } from '@pisell/materials';
+import { EMPTY_I18N, toLangDict } from "../../types";
+import I18nNameFormItem from "../shared/I18nNameFormItem";
 var WorkAreaModal = function WorkAreaModal(_ref) {
   var open = _ref.open,
     mode = _ref.mode,
@@ -64,10 +65,15 @@ var WorkAreaModal = function WorkAreaModal(_ref) {
     okText: getText(mode === 'create' ? 'pisell2.saas.device-planning.modal.create' : 'pisell2.saas.device-planning.modal.save'),
     cancelText: getText('pisell2.saas.device-planning.modal.cancel'),
     okButtonProps: {
+      block: true,
+      size: 'large',
       loading: submitting,
       onClick: handleOk
     },
     cancelButtonProps: {
+      block: true,
+      size: 'large',
+      type: 'default',
       disabled: submitting
     },
     destroyOnClose: true,
@@ -78,21 +84,14 @@ var WorkAreaModal = function WorkAreaModal(_ref) {
     form: form,
     layout: "vertical",
     preserve: false
-  }, /*#__PURE__*/React.createElement(Form.Item, {
+  }, /*#__PURE__*/React.createElement(I18nNameFormItem, {
     name: "name",
     label: getText('pisell2.saas.device-planning.modal.name'),
-    required: true,
-    rules: [{
-      validator: validateI18nRequired(getText('pisell2.saas.device-planning.modal.name-required'))
-    }]
-  }, /*#__PURE__*/React.createElement(BaseTranslation, {
-    renderMode: "edit"
-  })), /*#__PURE__*/React.createElement(Form.Item, {
+    requiredMessage: getText('pisell2.saas.device-planning.modal.name-required')
+  }), /*#__PURE__*/React.createElement(I18nNameFormItem, {
     name: "description",
-    label: getText('pisell2.saas.device-planning.modal.description')
-  }, /*#__PURE__*/React.createElement(BaseTranslation, {
-    renderMode: "edit",
-    type: "textarea"
-  }))));
+    label: getText('pisell2.saas.device-planning.modal.description'),
+    textarea: true
+  })));
 };
 export default WorkAreaModal;

package/es/plus/saasDevice/devicePlanning/components/shared/DeviceBasicInfoForm.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { FormInstance } from 'antd';
+import type { DeviceModelItem, DeviceProfileItem, I18nText, LangDict, WorkAreaItem } from '../../types';
+interface DeviceBasicInfoFormProps {
+    form: FormInstance<{
+        name: LangDict;
+        profile_id?: number;
+    }>;
+    selectedModel?: DeviceModelItem;
+    profiles?: DeviceProfileItem[];
+    profileRequired?: boolean;
+    showProfile?: boolean;
+    workAreas?: WorkAreaItem[];
+    workAreaId?: number;
+    currentWorkAreaId?: number;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    onWorkAreaChange?: (value: number) => void;
+    onValuesChange?: (_changed: unknown, values: {
+        name?: LangDict;
+    }) => void;
+    showSelectedModel?: boolean;
+}
+declare const DeviceBasicInfoForm: React.FC<DeviceBasicInfoFormProps>;
+export default DeviceBasicInfoForm;