@choerodon/master/lib/containers/components/c7n/routes/projectOverview/ProjectOverview.js

A package of Master for Choerodon platform.

import "choerodon-ui/pro/lib/button/style";
import _Button from "choerodon-ui/pro/lib/button";
import "choerodon-ui/pro/lib/modal/style";
import _Modal from "choerodon-ui/pro/lib/modal";

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 _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useMemo, useCallback, useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import ResponsiveReactGridLayout from 'react-grid-layout';
import ResizeObserver from 'resize-observer-polyfill';
import { get, forEach, map } from 'lodash';
import GridBg from "../../components/gridBackground";
import DragCard from "../../components/dragCard";
import AddModal from "../../components/addComponentsModal";
import { Breadcrumb } from "../../../../../index";
import { Content, Page } from "../../../../../components/c7n-page";
import { Permission } from "../../../../../components/permission";
import ServiceInfo from "./components/ServiceInfo";
import EnvInfo from "./components/EnvInfo";
import BurnDownChart from "./components/BurnDownChart";
import DefectTreatment from "./components/DefectTreatment";
import SprintWaterWave from "./components/SprintWaterWave";
import UserList from "./components/UserList";
import SprintCount from "./components/SprintCount";
import DeployChart from "./components/deploy-chart";
import CommitChart from "./components/commit-chart";
import DefectChart from "./components/defect-chart";
import PipelineChart from "./components/pipeline-chart";
import AssigneeChart from "./components/assignee-chart";
import mappings from "./stores/mappings";
import { useProjectOverviewStore } from "./stores";
import "./ProjectOverview.less";
import UserConfirmation from "../../components/UserConfirm";
import EmptyCard from "../../components/EmptyCard";
import PriorityChart from "./components/priority-chart";
import IssueTypeChart from "./components/issue-type-chart";
import IssueTable from "./components/issue-table";
import ProjectDynamic from "./components/project-dynamic";
import PersonalWorkload from "./components/personal-workload";
import Workload from "./components/Workload";
import CustomChart from "./components/custom-chart";
var observerLayout;

var ProjectOverview = function ProjectOverview() {
  var _useProjectOverviewSt = useProjectOverviewStore(),
      category = _useProjectOverviewSt.AppState.currentMenuType.category,
      prefixCls = _useProjectOverviewSt.prefixCls,
      projectOverviewStore = _useProjectOverviewSt.projectOverviewStore,
      componentsDs = _useProjectOverviewSt.componentsDs,
      customChartAvailableList = _useProjectOverviewSt.customChartAvailableList,
      availableServiceList = _useProjectOverviewSt.availableServiceList,
      allCode = _useProjectOverviewSt.allCode;

  var isEdit = projectOverviewStore.isEdit,
      setEdit = projectOverviewStore.setEdit;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      layOutWidth = _useState2[0],
      setWidth = _useState2[1];

  useEffect(function () {
    if (!observerLayout) {
      var domTem = document.querySelector('.c7n-project-overview-container');
      observerLayout = new ResizeObserver(function (entries) {
        var dom = get(entries[0], 'target');
        var width = get(dom, 'offsetWidth');
        setWidth(width);
      }).observe(domTem);
    }
  }, []);
  useEffect(function () {
    return function () {
      observerLayout && observerLayout.disconnect();
    };
  });
  var ComponetsObjs = useMemo(function () {
    return {
      sprintNotDone: /*#__PURE__*/React.createElement(SprintWaterWave, null),
      sprintCount: /*#__PURE__*/React.createElement(SprintCount, null),
      burnDownChart: /*#__PURE__*/React.createElement(BurnDownChart, null),
      defectTreatment: /*#__PURE__*/React.createElement(DefectTreatment, null),
      defectChart: /*#__PURE__*/React.createElement(DefectChart, null),
      appService: /*#__PURE__*/React.createElement(ServiceInfo, null),
      env: /*#__PURE__*/React.createElement(EnvInfo, null),
      pipelineChart: /*#__PURE__*/React.createElement(PipelineChart, null),
      commitChart: /*#__PURE__*/React.createElement(CommitChart, null),
      deployChart: /*#__PURE__*/React.createElement(DeployChart, null),
      onlineMember: /*#__PURE__*/React.createElement(UserList, null),
      assigneeChart: /*#__PURE__*/React.createElement(AssigneeChart, null),
      priorityChart: /*#__PURE__*/React.createElement(PriorityChart, null),
      issueTypeChart: /*#__PURE__*/React.createElement(IssueTypeChart, null),
      issueTable: /*#__PURE__*/React.createElement(IssueTable, null),
      projectDynamic: /*#__PURE__*/React.createElement(ProjectDynamic, null),
      workLoad: /*#__PURE__*/React.createElement(Workload, null),
      personalWorkload: /*#__PURE__*/React.createElement(PersonalWorkload, null)
    };
  }, []);
  var renderCustomChart = useCallback(function (type) {
    var chartConfig = projectOverviewStore.getCustomChart(type); // 无敏捷数据获取hook 则返回空

    if (!chartConfig || !customChartAvailableList.length) {
      return undefined;
    }

    return /*#__PURE__*/React.createElement(CustomChart, {
      customChartConfig: chartConfig
    });
  }, [customChartAvailableList, projectOverviewStore]);
  var renderBg = useCallback(function () {
    return /*#__PURE__*/React.createElement(GridBg, {
      rowHeight: (layOutWidth - 11 * 18) / 10,
      selector: ".".concat(prefixCls, "-container"),
      cols: 10,
      style: {
        padding: '0'
      }
    });
  }, [layOutWidth]);

  function handleEditable() {
    setEdit(true);
  }

  function handleCancel() {
    componentsDs.loadData(projectOverviewStore.initData);
    setEdit(false);
  }

  function addComponent(newTypeArr, deleteArr) {
    var existData = map(componentsDs.filter(function (record) {
      return !deleteArr.includes(record.get('i'));
    }), function (record) {
      return record.toData();
    });
    forEach(newTypeArr, function (type) {
      var _ref = mappings[type] || projectOverviewStore.getCustomChart(type),
          layout = _ref.layout;

      var tempCp = _objectSpread(_objectSpread({}, layout), {}, {
        x: 0,
        y: Infinity
      });

      existData.push(tempCp);
    });
    componentsDs.loadData(existData);
  }

  function openAddComponents() {
    var subPrefix = 'c7ncd-workbench-addModal';
    var typeArr = map(componentsDs.toData(), function (item) {
      return get(item, 'i');
    });

    _Modal.open({
      title: '添加卡片',
      key: _Modal.key(),
      drawer: true,
      style: {
        width: '740px'
      },
      bodyStyle: {
        padding: 0
      },
      children: /*#__PURE__*/React.createElement(AddModal, {
        subPrefix: subPrefix,
        existTypes: typeArr,
        addComponent: addComponent,
        mappings: [].concat(_toConsumableArray(allCode.map(function (item) {
          return mappings[item];
        })), _toConsumableArray(projectOverviewStore.customDataList)),
        isProjects: true
      }),
      className: "".concat(subPrefix)
    });
  }

  function hanldeSave() {
    var tempData = componentsDs.toData();
    projectOverviewStore.setInitData(tempData);
    projectOverviewStore.saveConfig(tempData);
    setEdit(false);
  }

  function handleReset() {
    var defaultValues = map(mappings, function (item) {
      return item.layout;
    });
    componentsDs.loadData(defaultValues);
  }

  function handleResetModal() {
    _Modal.open({
      className: 'c7n-reset-modal',
      title: '重置项目概览页面',
      children: '确定要重置项目概览页面吗？',
      onOk: handleReset
    });
  }

  var renderBtns = function renderBtns() {
    var btnGroups;

    if (isEdit) {
      btnGroups = [/*#__PURE__*/React.createElement(_Button, {
        onClick: openAddComponents,
        key: "5",
        icon: "settings-o"
      }, "\u5361\u7247\u914D\u7F6E"), /*#__PURE__*/React.createElement(_Button, {
        onClick: hanldeSave,
        key: "4"
      }, "\u4FDD\u5B58"), /*#__PURE__*/React.createElement(_Button, {
        onClick: handleResetModal,
        key: "3"
      }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(_Button, {
        onClick: handleCancel,
        key: "2",
        color: "primary"
      }, "\u53D6\u6D88")];
    } else {
      btnGroups = [/*#__PURE__*/React.createElement(_Button, {
        onClick: handleEditable,
        key: "1",
        icon: "settings-o",
        color: "primary"
      }, "\u9879\u76EE\u6982\u89C8\u914D\u7F6E")];
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-btnGroups")
    }, btnGroups);
  };

  function onLayoutChange(layout, layouts) {
    componentsDs.loadData(layout);
  }

  function renderEmptyTitle(groupId, customFlag) {
    if (!availableServiceList.includes(groupId)) {
      return groupId === 'devops' ? '未选择【DevOps流程】项目类型，卡片暂不可用' : '未选择【敏捷管理】项目类型，卡片暂不可用';
    }

    if (customFlag === 'agile' && groupId === 'agile') {
      return customChartAvailableList.length === 0 ? '未安装【敏捷服务】，卡片无法显示' : '当前自定义敏捷图表已被删除，此卡片无法显示';
    }

    return '卡片暂不可用';
  }

  var SwitchComponents = function SwitchComponents(type, title) {
    var tempComponent = renderCustomChart(type);
    var hasOwnProperty = tempComponent || Object.prototype.hasOwnProperty.call(ComponetsObjs, type);
    var hasType = allCode.includes(type) || projectOverviewStore.getCustomChart(type);

    if (hasOwnProperty && hasType) {
      tempComponent = tempComponent || ComponetsObjs[type];
    } else {
      var chartConfig = mappings[type] || projectOverviewStore.getCustomChart(type);
      tempComponent = /*#__PURE__*/React.createElement(EmptyCard, {
        title: title,
        emptyTitle: renderEmptyTitle(get(chartConfig, 'groupId'), get(chartConfig, 'layout.customFlag')),
        index: type,
        sizeObserver: ['appService', 'env'].includes(type)
      });
    }

    return tempComponent;
  };

  function handleDelete(record) {
    componentsDs.remove(record);
  }

  var generateDOM = useMemo(function () {
    return componentsDs.map(function (record) {
      var key = record.get('i');
      var title = get(mappings[key], 'title');
      return /*#__PURE__*/React.createElement(DragCard, {
        record: record,
        onDelete: function onDelete() {
          return handleDelete(record);
        },
        isEdit: isEdit,
        key: record.get('i')
      }, SwitchComponents(record.get('i'), title));
    });
  }, [componentsDs, handleDelete, isEdit]);

  var renderGridLayouts = function renderGridLayouts() {
    var tempObj = {
      className: "".concat(prefixCls, "-layout"),
      onLayoutChange: onLayoutChange,
      layout: componentsDs.toData(),
      breakpoints: 1200,
      margin: [18, 18],
      resizeHandles: ['se'],
      cols: 10,
      measureBeforeMount: true,
      containerPadding: [0, 0],
      useCSSTransformss: true,
      rowHeight: (layOutWidth - 11 * 18) / 10,
      shouldComponentUpdate: true,
      width: layOutWidth,
      isDraggable: isEdit,
      isResizable: isEdit
    };
    return /*#__PURE__*/React.createElement(ResponsiveReactGridLayout, tempObj, generateDOM);
  };

  function renderConfirm() {
    return /*#__PURE__*/React.createElement(UserConfirmation, {
      title: "\u63D0\u793A",
      content: "\u9879\u76EE\u6982\u89C8\u914D\u7F6E\u672A\u4FDD\u5B58\uFF0C\u786E\u8BA4\u8DF3\u8F6C\u65B0\u9875\u9762\uFF1F",
      when: isEdit
    });
  }

  return /*#__PURE__*/React.createElement(Page, {
    className: prefixCls
  }, /*#__PURE__*/React.createElement(Breadcrumb, null), /*#__PURE__*/React.createElement(Permission, {
    service: ['choerodon.code.project.project.overview.edit']
  }, renderBtns()), /*#__PURE__*/React.createElement(Content, {
    className: "".concat(prefixCls, "-content")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-container")
  }, isEdit && renderBg(), category && renderGridLayouts())), renderConfirm());
};

export default observer(ProjectOverview);