@gingkoo/pandora-metabase 1.0.14 → 1.0.16

package/lib/cjs/components/dialog/select-column-multiple/index.js

@@ -0,0 +1,341 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NUMBER_GROUP_MAP = exports.DATE_GROUP_MAP = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+require("./index.less");
+var _react = require("react");
+var _pandora = require("@gingkoo/pandora");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _enum = require("../../../store/enum");
+var _helper = require("../../../store/helper");
+var _types = require("../../../store/types");
+var _locale = require("../../../locale");
+var _const = require("../const");
+var _useProvider = require("../../../hooks/use-provider");
+var _helper2 = require("../../../utils/helper");
+var _icons = require("../../icons");
+/**
+ * 选择表字段当条件
+ * 谁在用？
+ * 1、关联模块
+ * 2、过滤器模块
+ * 3、聚合模块
+ * 4、排序模块
+ */
+
+var DATE_GROUP_MAP = exports.DATE_GROUP_MAP = new Map([['分', '分'], ['时', '时'], ['天', '天'], ['周', '周'], ['月', '月'], ['季度', '季度'], ['一小时内的分钟数', '一小时内的分钟数'], ['一天内的小时数', '一天内的小时数'], ['一周内的天数', '一周内的天数'], ['一月内的天数', '一月内的天数'], ['一年内的天数', '一年内的天数'], ['一年的星期数', '一年的星期数'], ['一年的月数', '一年的月数']]);
+var NUMBER_GROUP_MAP = exports.NUMBER_GROUP_MAP = new Map([['自动间隔', '自动分组'], ['10个刻度间隔', '10 刻度间隔'], ['间隔50', '50 刻度间隔'], ['间隔100', '100 刻度间隔'], ['无间隔', '']]);
+var IconMap = {
+  CHAR: (0, _jsxRuntime.jsx)(_icons.LetterAaIcon, {}),
+  VARCHAR: (0, _jsxRuntime.jsx)(_icons.LetterAaIcon, {}),
+  CLOB: (0, _jsxRuntime.jsx)(_icons.LetterAaIcon, {}),
+  DOUBLE: (0, _jsxRuntime.jsx)(_icons.WellIcon, {}),
+  SMALLINT: (0, _jsxRuntime.jsx)(_icons.WellIcon, {}),
+  BIGINT: (0, _jsxRuntime.jsx)(_icons.WellIcon, {}),
+  INTEGER: (0, _jsxRuntime.jsx)(_icons.WellIcon, {}),
+  TIMESTAMP: (0, _jsxRuntime.jsx)(_icons.CalendarIcon, {}),
+  PK: (0, _jsxRuntime.jsx)(_icons.CircleIcon, {}),
+  FK: (0, _jsxRuntime.jsx)(_icons.ForeignKeyIcon, {})
+};
+var OPEN_GROUP = false; // mr.chen 说不弄这块 弄个开关防止后面要用
+var SelectJoinColumn = function SelectJoinColumn(_ref) {
+  var _value$;
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data,
+    _value = _ref.value,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? _enum.ColumnsPopupThemeEnum.skyBlue : _ref$theme,
+    onSelect = _ref.onSelect,
+    isGroup = _ref.isGroup,
+    onGroup = _ref.onGroup,
+    didUpdate = _ref.didUpdate,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    _ref$showNextBtn = _ref.showNextBtn,
+    showNextBtn = _ref$showNextBtn === void 0 ? false : _ref$showNextBtn,
+    _ref$nextBtnText = _ref.nextBtnText,
+    nextBtnText = _ref$nextBtnText === void 0 ? (0, _locale.__)('metabase.nextBtn') : _ref$nextBtnText,
+    onNextStep = _ref.onNextStep;
+  var store = (0, _useProvider.useStore)();
+  var _useState = (0, _react.useState)(_value),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1]; // 当前选择的字段
+  var _useState3 = (0, _react.useState)(_value === null || _value === void 0 || (_value$ = _value[0]) === null || _value$ === void 0 ? void 0 : _value$.tableUuid),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    curTable = _useState4[0],
+    setCurTable = _useState4[1]; // 当前选择的表
+  // const [curColumn, setCurColumn] = useState(_value); // 当前选择的字段
+  var _useState5 = (0, _react.useState)(data.map(function (v, i) {
+      var open = !i && !curTable ? true : v.tableUuid === curTable; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+        open: open,
+        searchText: '',
+        columns: v.columns.slice()
+      });
+    })),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    tableList = _useState6[0],
+    setTableList = _useState6[1];
+  // useEffect(() => {
+  //   setCurTable(tableInfo);
+  // }, [tableInfo]);
+  (0, _react.useEffect)(function () {
+    // setCurColumn(_value);
+    setValue(_value);
+  }, [_value]);
+  var isActive = function isActive(fieldUuid) {
+    return (value === null || value === void 0 ? void 0 : value.filter(function (v) {
+      return v.fieldUuid === fieldUuid;
+    }).length) > 0;
+  };
+  (0, _react.useEffect)(function () {
+    setTableList(data.map(function (v, i) {
+      var open = !i && !curTable ? true : v.tableUuid === curTable; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+        open: open,
+        searchText: '',
+        columns: v.columns.slice()
+      });
+    }));
+  }, [data, curTable]);
+  (0, _react.useEffect)(function () {
+    didUpdate === null || didUpdate === void 0 || didUpdate();
+  }, [tableList]);
+  function _onInput(val, tableAlias) {
+    var newData = (0, _cloneDeep["default"])(tableList).map(function (v, i) {
+      if (v.alias === tableAlias) {
+        var _data$i;
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+          columns: (_data$i = data[i]) === null || _data$i === void 0 ? void 0 : _data$i.columns.filter(function (v) {
+            return ~(v.name + (v.name_zh || '')).toLocaleLowerCase().indexOf(val.toLocaleLowerCase());
+          }),
+          searchText: val
+        });
+      }
+      return v;
+    });
+    setTableList(newData);
+  }
+  var getQuotes = function getQuotes(items) {
+    return items.map(function (v) {
+      return v.fieldName;
+    }).join(' || ');
+  };
+  var changeValue = function changeValue(tableUuid, val) {
+    var _value$filter;
+    if (!multiple) {
+      var _data = val ? [val] : [];
+      setValue(_data);
+      setCurTable(tableUuid);
+      onSelect === null || onSelect === void 0 || onSelect(_data, getQuotes(_data));
+      return;
+    }
+    var isHas = (value === null || value === void 0 || (_value$filter = value.filter(function (v) {
+      return v.fieldUuid === (val === null || val === void 0 ? void 0 : val.fieldUuid);
+    })) === null || _value$filter === void 0 ? void 0 : _value$filter.length) > 0;
+    var _value = value;
+    if (tableUuid != curTable) {
+      _value = [];
+    }
+    if (!isHas && val) {
+      _value.push(val);
+    } else {
+      _value = _value.filter(function (v) {
+        return v.fieldUuid != (val === null || val === void 0 ? void 0 : val.fieldUuid);
+      });
+    }
+    setValue(_value);
+    setCurTable(tableUuid);
+    onSelect === null || onSelect === void 0 || onSelect(_value, getQuotes(_value));
+  };
+  // const _condition = value?.condition || '';
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])("Sqb-SelectColumns--box ".concat(theme)),
+      children: (0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 300
+        },
+        children: tableList.map(function (tableItem) {
+          var tableAlias = tableItem.alias,
+            tableName = tableItem.name,
+            columns = tableItem.columns,
+            open = tableItem.open,
+            searchText = tableItem.searchText,
+            _tableItem$datasource = tableItem.datasourceName,
+            datasourceName = _tableItem$datasource === void 0 ? '' : _tableItem$datasource,
+            _tableItem$datasource2 = tableItem.datasourceId,
+            datasourceId = _tableItem$datasource2 === void 0 ? '' : _tableItem$datasource2,
+            _tableItem$tableUuid = tableItem.tableUuid,
+            tableUuid = _tableItem$tableUuid === void 0 ? '' : _tableItem$tableUuid;
+          var isMultiple = tableList.length > 1;
+          var isSummarize = tableAlias === _helper.SummarizeAlias;
+          return (0, _jsxRuntime.jsxs)("div", {
+            children: [!isSummarize && (0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])("Sqb-List-section"),
+              children: (0, _jsxRuntime.jsx)("div", {
+                className: (0, _classnames["default"])("Sqb-List-title mx-4 pb-4 pt-4", {
+                  shrink: isMultiple,
+                  active: open
+                }),
+                onClick: function onClick() {
+                  if (isGroup) {
+                    changeValue(tableUuid);
+                  }
+                  if (!isMultiple) return void 0;
+                  var newTables = (0, _cloneDeep["default"])(tableList);
+                  if (open) {
+                    setTableList(newTables.map(function (v) {
+                      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+                        open: tableUuid === v.tableUuid ? false : v.open
+                      });
+                    }));
+                  } else {
+                    setTableList(newTables.map(function (v) {
+                      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+                        open: tableUuid === v.tableUuid || v.alias === _helper.SummarizeAlias
+                      });
+                    }));
+                  }
+                },
+                children: (0, _jsxRuntime.jsxs)("div", {
+                  className: 'List-item',
+                  children: [(0, _jsxRuntime.jsx)("span", {
+                    className: 'List-item-icon',
+                    children: (0, _jsxRuntime.jsx)(_icons.TableIcon, {})
+                  }), (0, _jsxRuntime.jsx)("div", {
+                    style: {
+                      overflow: 'hidden'
+                    },
+                    children: (0, _jsxRuntime.jsx)("h3", {
+                      className: 'List-item-title ml-2',
+                      title: datasourceName ? "".concat(datasourceName, ".").concat(tableAlias || tableName) : tableAlias || tableName,
+                      children: datasourceName ? "".concat(datasourceName, ".").concat(tableAlias || tableName) : tableAlias || tableName
+                    })
+                  }), isMultiple && !isGroup && (0, _jsxRuntime.jsx)("span", {
+                    className: 'List-title-arrow',
+                    children: open ? (0, _jsxRuntime.jsx)(_icons.UpArrowIcon2, {}) : (0, _jsxRuntime.jsx)(_icons.DownArrowIcon2, {})
+                  })]
+                })
+              })
+            }), (open || isSummarize) && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [!isSummarize && !isGroup && (0, _jsxRuntime.jsx)("div", {
+                className: (0, _classnames["default"])("Sqb-List-section"),
+                children: (0, _jsxRuntime.jsxs)("div", {
+                  className: (0, _classnames["default"])("Sqb-List-search m-2 rounded-lg"),
+                  children: [(0, _jsxRuntime.jsx)("span", {
+                    className: 'px-2',
+                    children: (0, _jsxRuntime.jsx)(_icons.SearchIcon, {})
+                  }), (0, _jsxRuntime.jsx)("input", {
+                    type: 'text',
+                    className: 'p-2',
+                    autoFocus: true,
+                    value: searchText,
+                    placeholder: (0, _locale.__)('joinData.search'),
+                    onChange: function onChange() {},
+                    onInput: function onInput(e) {
+                      return _onInput(e.target.value, tableAlias);
+                    }
+                  })]
+                })
+              }), Array.isArray(columns) && columns.map(function (v, i) {
+                var special_type = v.special_type,
+                  _v$database_type = v.database_type,
+                  database_type = _v$database_type === void 0 ? '' : _v$database_type,
+                  name = v.name,
+                  _v$realName = v.realName,
+                  realName = _v$realName === void 0 ? '' : _v$realName,
+                  fieldId = v.id;
+                var groupe = _enum.SQL_GROUP_TYPE.STRING;
+                // @ts-ignore
+                if (~_const.NUMBER_GROUP.indexOf(database_type)) {
+                  groupe = _enum.SQL_GROUP_TYPE.NUMBER;
+                }
+                // @ts-ignore
+                if (~_const.DATE_GROUP.indexOf(database_type)) {
+                  groupe = _enum.SQL_GROUP_TYPE.DATE;
+                }
+                // let showCondition =
+                //   curColumn === name && curTable === tableUuid && _condition;
+                return (0, _jsxRuntime.jsx)("div", {
+                  className: (0, _classnames["default"])("Sqb-List-section"),
+                  children: (0, _jsxRuntime.jsx)("div", {
+                    className: (0, _classnames["default"])("Sqb-List-item mx-2", {
+                      active: isActive(v.fieldUuid)
+                    }),
+                    onClick: function onClick() {
+                      if (isSummarize) {
+                        // console.log(v, 'v');
+                      }
+                      console.log('🚀 ~ SelectJoinColumn ~ tableItem:', tableItem);
+                      changeValue(tableUuid, {
+                        tableName: tableItem.name,
+                        tableId: tableItem.id,
+                        tableNameZh: tableItem.name_zh,
+                        tableAlias: tableItem.alias,
+                        tableUuid: tableItem.tableUuid,
+                        datasourceName: tableItem.datasourceName || '',
+                        datasourceId: tableItem.datasourceId || '',
+                        fieldName: v.name,
+                        fieldId: v.id,
+                        fieldNameZh: v.name_zh || '',
+                        fieldAlias: v.fieldAlias,
+                        fieldUuid: v.fieldUuid,
+                        type: _types.AtomsTypeEnum.FIELD
+                        // quotes: v.fieldAlias || v.name,
+                      });
+                      // setCurTable(tableUuid);
+                      // typeof onSelect === 'function' &&
+                      //   onSelect({
+                      //     ...v,
+                      //     table,
+                      //     tableId,
+                      //     alias: tableAlias,
+                      //     name,
+                      //     database_type,
+                      //     sql: v.sql || '',
+                      //     datasourceId,
+                      //     datasourceName,
+                      //     realName,
+                      //   });
+                    },
+                    children: (0, _jsxRuntime.jsxs)("div", {
+                      className: 'p-2 List-item',
+                      children: [(0, _jsxRuntime.jsx)("span", {
+                        className: 'List-item-icon',
+                        children: IconMap[special_type || database_type] || (0, _jsxRuntime.jsx)(_icons.LetterAaIcon, {})
+                      }), (0, _jsxRuntime.jsx)("div", {
+                        children: (0, _jsxRuntime.jsx)("h4", {
+                          className: 'List-item-title ml-2',
+                          children: (0, _helper2.replaceTpl)(store.fieldNameTpl, v)
+                        })
+                      })]
+                    })
+                  })
+                }, i);
+              })]
+            })]
+          }, tableUuid || tableAlias);
+        })
+      })
+    }), showNextBtn && multiple && (0, _jsxRuntime.jsx)(_pandora.Button, {
+      block: true,
+      disabled: (value === null || value === void 0 ? void 0 : value.length) < 1,
+      primary: true,
+      className: 'mt-4 :Sqb-SelectColumns-btn',
+      onClick: function onClick() {
+        return onNextStep === null || onNextStep === void 0 ? void 0 : onNextStep();
+      },
+      children: nextBtnText
+    })]
+  });
+};
+var _default = exports["default"] = SelectJoinColumn;

package/lib/cjs/components/dialog/select-column-multiple/index.less

@@ -0,0 +1,246 @@
+// 选择表关联字段
+.Sqb-SelectColumns--box {
+  box-sizing: border-box;
+  min-width: 1em;
+  max-width: 500px;
+  background-color: #ffffff;
+  overflow: hidden;
+
+  .Sqb-List-item {
+    display: flex;
+    border-radius: 4px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+
+    .List-item {
+      flex: auto;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
+    .List-item-icon {
+      display: flex;
+      align-items: center;
+      color: #b8bbc3;
+    }
+    .List-item-title {
+      word-break: break-word;
+      word-wrap: anywhere;
+      color: #4c5773;
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 14px;
+    }
+    .Field-extra {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem;
+      cursor: pointer;
+      border-left: 2px solid rgba(113, 114, 173, 0.1);
+      color: rgba(255, 255, 255, 0.5);
+      visibility: hidden;
+      h4 {
+        margin-bottom: 0;
+        color: inherit;
+      }
+      svg {
+        color: #fff;
+        margin-left: 0.5rem;
+      }
+      &:hover {
+        color: #fff;
+      }
+    }
+    &:not(.disabled):hover,
+    &.active {
+      background-color: #509ee3;
+      border-color: rgba(169, 137, 197, 0.2);
+      .List-item-icon {
+        color: #fff !important;
+      }
+      .List-item-title {
+        color: #fff !important;
+      }
+      .Field-extra {
+        visibility: visible;
+      }
+    }
+    &.disabled {
+      .List-item-title {
+        color: #949aab !important;
+      }
+    }
+  }
+
+  .Sqb-List-title {
+    display: flex;
+    border-radius: 4px;
+
+    .List-item {
+      flex: auto;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: #4c5773;
+      overflow: hidden;
+    }
+    .List-item-icon {
+      display: flex;
+      align-items: center;
+    }
+    .List-item-title {
+      word-break: break-word;
+      word-wrap: anywhere;
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 16px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .List-title-arrow {
+      margin-left: auto;
+    }
+
+    &.active {
+      .List-item-icon {
+        color: #509ee3;
+      }
+    }
+    &.shrink {
+      cursor: pointer;
+      .List-item {
+        cursor: pointer;
+      }
+      &:hover {
+        .List-item {
+          color: #509ee3;
+          .List-item-title {
+            color: #509ee3;
+          }
+        }
+      }
+    }
+  }
+
+  .Sqb-List-search {
+    display: flex;
+    align-items: center;
+    flex: 1 0 auto;
+    color: #b8bbc3;
+    background-color: #fff;
+    border: 1px solid #f0f0f0;
+    font-size: 14px;
+    span {
+      line-height: 0;
+    }
+    input {
+      box-shadow: none;
+      outline: 0;
+      border: none !important;
+      background: transparent;
+      color: #4c5773;
+      font-size: 1.12em;
+      font-weight: 600;
+      &::-webkit-input-placeholder {
+        color: #b8bbc3;
+      }
+      &::-ms-input-placeholder {
+        color: #b8bbc3;
+      }
+    }
+  }
+
+  &.greenGrass {
+    .Sqb-List-item {
+      &:not(.disabled):hover,
+      &.active {
+        background-color: #88bf4d;
+      }
+    }
+
+    .Sqb-List-title {
+      &.active {
+        .List-item-icon {
+          color: #88bf4d;
+        }
+      }
+      &.shrink {
+        &:hover {
+          a {
+            color: #88bf4d;
+            .List-item-title {
+              color: #88bf4d;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.purple {
+    .Sqb-List-item {
+      &:not(.disabled):hover,
+      &.active {
+        background-color: #7172ad;
+      }
+    }
+
+    .Sqb-List-title {
+      &.active {
+        .List-item-icon {
+          color: #7172ad;
+        }
+      }
+      &.shrink {
+        &:hover {
+          a {
+            color: #7172ad;
+            .List-item-title {
+              color: #7172ad;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.Sqb-SelectColumns-btn {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  height: 36px;
+
+  &.purple-name {
+    color: white;
+    background-color: rgb(113, 114, 173);
+    &:hover {
+      background-color: rgba(113, 114, 173, 0.8) !important;
+    }
+    svg.closeIcon {
+      opacity: 0.6;
+      margin-left: 8px;
+    }
+    &.notSelected {
+      border: 2px solid rgba(113, 114, 173, 0.25);
+      color: rgb(113, 114, 173);
+      background-color: #fff;
+      &:hover {
+        border-color: rgba(113, 114, 173, 0.8);
+      }
+    }
+  }
+}
+.menu-list {
+  border: none !important;
+  .ant-menu-item:hover {
+    color: #88bf4d !important;
+  }
+  .ant-menu-item-selected {
+    background-color: #88bf4d !important;
+    color: #fff !important;
+    border-radius: 4px !important;
+  }
+}

package/lib/cjs/components/dialog/select-table/index.js

@@ -50,9 +50,9 @@ var SelectTable = function SelectTable(_ref) {
     originList = _useState8[0],
     setOriginList = _useState8[1];
   var _useState9 = (0, _react.useState)(value),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    val = _useState10[0],
-    setVal = _useState10[1];
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    val = _useState0[0],
+    setVal = _useState0[1];
   (0, _react.useEffect)(function () {
     if (value.datasourceId) {
       getTables(value.datasourceId);
@@ -64,18 +64,18 @@ var SelectTable = function SelectTable(_ref) {
   function _getTables() {
     _getTables = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(datasourceId) {
       var tables;
-      return _regenerator["default"].wrap(function _callee$(_context) {
+      return _regenerator["default"].wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             setLoading(true);
-            _context.next = 3;
+            _context.next = 1;
             return store.fetchDataset(datasourceId);
-          case 3:
+          case 1:
             tables = _context.sent;
             setLoading(false);
             setList(tables);
             setOriginList(tables);
-          case 7:
+          case 2:
           case "end":
             return _context.stop();
         }
@@ -98,6 +98,7 @@ var SelectTable = function SelectTable(_ref) {
       datasourceId: '',
       datasourceName: '',
       name: '',
+      name_zh: '',
       tableUuid: '',
       id: '',
       alias: ''
@@ -128,6 +129,7 @@ var SelectTable = function SelectTable(_ref) {
                     datasourceId: v.datasourceId,
                     datasourceName: v.datasourceName,
                     name: '',
+                    name_zh: '',
                     id: '',
                     tableUuid: (0, _helper.uuidv4)('table'),
                     alias: ''