@pisell/private-materials 3.4.96 → 3.4.98

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Drawer } from 'antd';
+import { Button, Icon, Tag } from '@pisell/materials';
+import { CloseOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import "./index.less";
+var DeviceDetailDrawer = function DeviceDetailDrawer(_ref) {
+  var _device$type;
+  var open = _ref.open,
+    record = _ref.record,
+    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 online = (record === null || record === void 0 ? void 0 : record.status) === 'online';
+  return /*#__PURE__*/React.createElement(Drawer, {
+    open: open,
+    onClose: onClose,
+    width: 520,
+    maskClosable: true,
+    closable: false,
+    className: "device-detail-drawer",
+    rootClassName: "device-detail-drawer-root",
+    styles: {
+      body: {
+        padding: 0
+      }
+    },
+    bodyStyle: {
+      padding: 0
+    }
+  }, record ? /*#__PURE__*/React.createElement("div", {
+    className: "device-detail-drawer__root"
+  }, /*#__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
+  })) : 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", {
+    className: "device-detail-drawer__type"
+  }, record.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("div", {
+    className: "device-detail-drawer__section-title"
+  }, getText('pisell2.saas.device-planning.detail.basic-info')), /*#__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("div", {
+    className: "device-detail-drawer__section-title"
+  }, getText('pisell2.saas.device-planning.detail.status')), /*#__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("div", {
+    className: "device-detail-drawer__footer"
+  }, /*#__PURE__*/React.createElement(Button, {
+    danger: true,
+    size: "large",
+    onClick: onDelete
+  }, getText('pisell2.saas.device-planning.detail.delete')), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "large",
+    onClick: onEdit
+  }, getText('pisell2.saas.device-planning.detail.edit')))) : null);
+};
+export default DeviceDetailDrawer;

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

@@ -0,0 +1,151 @@
+.device-detail-drawer-root {
+  .ant-drawer-content,
+  .ant-drawer-wrapper-body,
+  .ant-drawer-body {
+    height: 100%;
+  }
+
+  .ant-drawer-body {
+    padding: 0;
+  }
+}
+
+.device-detail-drawer {
+  .ant-drawer-body {
+    height: 100%;
+    padding: 0;
+  }
+
+  &__root {
+    display: flex;
+    flex-direction: column;
+    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 24px;
+    overflow: auto;
+  }
+
+  &__section-title {
+    margin: 10px 0 12px;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  &__info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 14px;
+
+    > span:first-child {
+      color: rgba(0, 0, 0, 0.55);
+    }
+
+    strong {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  &__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);
+    }
+
+    strong {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+
+  &__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);
+  }
+
+  &__online-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.25);
+
+    &.is-online {
+      background: #16a34a;
+    }
+  }
+
+  &__footer {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 8px;
+    padding: 24px;
+    border-top: 1px solid #f0f0f0;
+    background: #fff;
+  }
+}

package/es/plus/saasDevice/devicePlanning/components/DeviceTable/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { DeviceKind, DeviceRow } from '../../types';
+import './index.less';
+interface DeviceTableProps {
+    activeKind: DeviceKind;
+    data: DeviceRow[];
+    loading: boolean;
+    search: string;
+    typeFilter?: string;
+    typeOptions: {
+        label: string;
+        value: string;
+    }[];
+    page: number;
+    pageSize: number;
+    getText: (key: string) => string;
+    onSearchChange: (value: string) => void;
+    onTypeFilterChange: (value?: string) => void;
+    onPageChange: (page: number, pageSize: number) => void;
+    onAdd: () => void;
+    onSortChange: (orderedRows: DeviceRow[]) => void;
+    onRowClick: (record: DeviceRow) => void;
+}
+declare const DeviceTable: React.FC<DeviceTableProps>;
+export default DeviceTable;

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

@@ -0,0 +1,175 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+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 { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { ADD_BUTTON_KEY, SEARCH_PLACEHOLDER_KEY } from "../../constants";
+import "./index.less";
+var DeviceTable = function DeviceTable(_ref) {
+  var activeKind = _ref.activeKind,
+    data = _ref.data,
+    loading = _ref.loading,
+    search = _ref.search,
+    typeFilter = _ref.typeFilter,
+    typeOptions = _ref.typeOptions,
+    page = _ref.page,
+    pageSize = _ref.pageSize,
+    getText = _ref.getText,
+    onSearchChange = _ref.onSearchChange,
+    onTypeFilterChange = _ref.onTypeFilterChange,
+    onPageChange = _ref.onPageChange,
+    onAdd = _ref.onAdd,
+    onSortChange = _ref.onSortChange,
+    onRowClick = _ref.onRowClick;
+  var columns = useMemo(function () {
+    return [{
+      title: getText('pisell2.saas.device-planning.column.name'),
+      dataIndex: 'name',
+      key: 'name',
+      render: function render(name, record) {
+        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
+        }) : null, name);
+      }
+    }, {
+      title: getText('pisell2.saas.device-planning.column.device-type'),
+      dataIndex: 'typeName',
+      key: 'typeName'
+    }, {
+      title: getText('pisell2.saas.device-planning.column.device-model'),
+      dataIndex: 'modelName',
+      key: 'modelName'
+    }, {
+      title: getText('pisell2.saas.device-planning.column.profile'),
+      dataIndex: 'profileName',
+      key: 'profileName'
+    }, {
+      title: getText('pisell2.saas.device-planning.column.link-status'),
+      dataIndex: 'link',
+      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);
+      }
+    }, {
+      title: getText('pisell2.saas.device-planning.column.online-status'),
+      dataIndex: 'status',
+      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);
+      }
+    }];
+  }, [getText]);
+  var pagedData = useMemo(function () {
+    var start = (page - 1) * pageSize;
+    return data.slice(start, start + pageSize);
+  }, [data, page, pageSize]);
+  var handleSortChange = function handleSortChange(detail) {
+    var sortedPageData = (detail === null || detail === void 0 ? void 0 : detail.dataSource) || [];
+    var start = (page - 1) * pageSize;
+    var nextData = _toConsumableArray(data);
+    nextData.splice.apply(nextData, [start, sortedPageData.length].concat(_toConsumableArray(sortedPageData)));
+    onSortChange(nextData);
+    return false;
+  };
+  var emptyContent = /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table__empty"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "SettingOutlined"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table__empty-title"
+  }, getText("pisell2.saas.device-planning.empty.".concat(activeKind, ".title"))), /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table__empty-desc"
+  }, getText("pisell2.saas.device-planning.empty.".concat(activeKind, ".desc"))), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+    className: "saas-device-planning-device-table__empty-button",
+    onClick: onAdd
+  }, getText(ADD_BUTTON_KEY[activeKind])));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table__toolbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table__filters"
+  }, /*#__PURE__*/React.createElement(Input, {
+    allowClear: true,
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    value: search,
+    placeholder: getText(SEARCH_PLACEHOLDER_KEY[activeKind]),
+    onChange: function onChange(event) {
+      return onSearchChange(event.target.value);
+    },
+    style: {
+      width: 260
+    }
+  }), /*#__PURE__*/React.createElement(Select, {
+    allowClear: true,
+    value: typeFilter,
+    placeholder: getText('pisell2.saas.device-planning.all-types'),
+    options: typeOptions,
+    onChange: function onChange(value) {
+      return onTypeFilterChange(value);
+    },
+    style: {
+      width: 200
+    }
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+    className: "saas-device-planning-device-table__add-button",
+    onClick: onAdd
+  }, getText(ADD_BUTTON_KEY[activeKind]))), /*#__PURE__*/React.createElement("div", {
+    className: "saas-device-planning-device-table__table"
+  }, /*#__PURE__*/React.createElement(Table, {
+    rowKey: "id",
+    dataSource: pagedData,
+    columns: columns,
+    rowClassName: "saas-device-planning-device-table__row",
+    loading: loading,
+    dragSort: data.length > 1,
+    virtual: false,
+    onSortChange: handleSortChange,
+    onRow: function onRow(record) {
+      return {
+        onClick: function onClick() {
+          return onRowClick(record);
+        }
+      };
+    },
+    pagination: {
+      localPagination: false,
+      current: page,
+      pageSize: pageSize,
+      total: data.length,
+      showSizeChanger: true,
+      onChange: function onChange(value) {
+        onPageChange(value.page || 1, value.size || pageSize);
+      }
+    },
+    showTitle: false,
+    showSubTitle: false,
+    locale: {
+      emptyText: emptyContent
+    },
+    bordered: false
+  })));
+};
+export default DeviceTable;

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

@@ -0,0 +1,98 @@
+.saas-device-planning-device-table {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0 16px;
+  }
+
+  &__filters {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__add-button,
+  &__empty-button {
+    position: relative;
+    z-index: 1;
+  }
+
+  &__table {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    background: #fff;
+  }
+
+  &__device-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+
+    .anticon {
+      color: #1677ff;
+    }
+  }
+
+  &__online-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.25);
+
+    &.is-online {
+      background: #16a34a;
+    }
+  }
+
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 220px;
+    padding: 32px 16px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.45);
+
+    > .anticon {
+      margin-bottom: 12px;
+      font-size: 36px;
+      color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &__empty-title {
+    margin-bottom: 4px;
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.72);
+  }
+
+  &__empty-desc {
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+
+  :global(.ant-table-wrapper),
+  :global(.ant-spin-nested-loading),
+  :global(.ant-spin-container) {
+    height: 100%;
+  }
+}
+
+.saas-device-planning-device-table__row {
+  cursor: pointer;
+}

package/es/plus/saasDevice/devicePlanning/components/EditDeviceModal/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { DeviceModelItem, DeviceRow, I18nText, UpdateDevicePayload, WorkAreaItem } from '../../types';
+import './index.less';
+interface EditDeviceModalProps {
+    open: boolean;
+    record?: DeviceRow;
+    workAreas: WorkAreaItem[];
+    models: DeviceModelItem[];
+    submitting: boolean;
+    getText: (key: string) => string;
+    translation: (val?: I18nText) => string;
+    onCancel: () => void;
+    onSubmit: (id: number, payload: UpdateDevicePayload) => void;
+}
+declare const EditDeviceModal: React.FC<EditDeviceModalProps>;
+export default EditDeviceModal;