@gingkoo/pandora-metabase 0.0.1-alpha.5 → 0.0.1-alpha.7

package/README.md

@@ -42,8 +42,9 @@ export type ToolbarType =
 export interface MetaBaseProps {
   loading?: boolean; // 加载状态
   btnText?: string;	//按钮文字
-  showPermissionTable?: boolean; // 是否显示权限表
 	showFields?:boolean ; //是否显示字段
+  tableNameTpl?: string; //表名
+  fieldNameTpl?: string; //字段名
 	/**
 	 * 工具栏列表
 	 * 默认 ['filter','summarize','joinData','permissionTable','customColumn','sort','rowLimit']
@@ -58,6 +59,7 @@ export interface MetaBaseProps {
 export interface SqlVisionBuilderRef {
   setDatasource: (list: DatasourceType[]) => void; // 设置数据源列表
   setPreData: (data: MetaListType[]) => void; // 设置回显数据
+  reset: () => void; // 重置到上次设置的数据
 }
 
 ```

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v0.0.1-alpha.5
+ * @gingkoo/pandora-metabase v0.0.1-alpha.7
  */
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -1901,6 +1901,11 @@ const sleep = (wait = 0) => {
 const flatArray = arr => {
   return [].concat.apply([], arr);
 };
+const replaceTpl = (inputString, values) => {
+  return inputString.replace(/\$\{([^}]*)\}/g, (match, variableName) => {
+    return typeof values[variableName] !== 'undefined' ? String(values[variableName]) : match;
+  });
+};
 
 class WinResetEvent {
   eventStack = {};
@@ -2164,10 +2169,11 @@ class SqlVisionStore {
   constructor() {
     makeAutoObservable(this);
   }
-  showPermissionTable = false; // 开启权限表
   showFields = true; // 开启权限表
   //工具列表
   toolbar = ['filter', 'summarize', 'joinData', 'permissionTable', 'customColumn', 'sort', 'rowLimit'];
+  fieldNameTpl = '${name}';
+  tableNameTpl = '${name}';
   sourceList = []; // 数据源列表
   _cacheSource2TableMap = {}; // 数据源id 对应数据集列表
   _cacheColumnsMap = {};
@@ -2196,6 +2202,9 @@ class SqlVisionStore {
     }
     return false;
   }
+  showToolbar(name) {
+    return !!~this.toolbar.indexOf(name);
+  }
   fetchDatasetFn = async () => {};
   fetchColumnsFn = async () => {};
   setFetchDatasetFn(fn) {
@@ -2228,8 +2237,50 @@ class SqlVisionStore {
   // 回显
   async setPreData(data) {
     if (data.length) {
-      this.metaList = data;
+      this.metaList = data.map((v, i) => {
+        // 设置右侧column
+        if (v.table2?.datasourceId && v.columns.length < 1) {
+          // let newMetaList = this.metaList.slice() as MetaData[];
+          let newMeta = data.slice();
+          let tableName = newMeta[i].table2.name;
+          this.fetchColumns(tableName, newMeta[i].table2.datasourceId, columns => {
+            newMeta[i].columns = columns;
+            this.setMeta(newMeta);
+          });
+          return {
+            ...v
+          };
+        }
+        // 设置column
+        if (v.table?.datasourceId && v.columns.length < 1) {
+          // let newMetaList = this.metaList.slice() as MetaData[];
+          let newMeta = data.slice();
+          let tableName = newMeta[i].table.name;
+          this.fetchColumns(tableName, newMeta[i].table.datasourceId, columns => {
+            newMeta[i].columns = columns;
+            this.setMeta(newMeta);
+          });
+          return {
+            ...v
+          };
+        }
+        return {
+          ...v
+        };
+      });
       metaKey = Math.max.apply(null, this.metaList.map(v => Number(v.metaKey)));
+    } else {
+      this.setMeta([{
+        metaKey,
+        type: TypeEnum.data,
+        table: {
+          name: '',
+          alias: '',
+          datasourceId: '',
+          datasourceName: ''
+        },
+        columns: []
+      }]);
     }
   }
   setSourceList(list) {
@@ -2250,6 +2301,7 @@ class SqlVisionStore {
       };
       if (index === 1) {
         table1 = {
+          ...mainTable.table,
           name: mainTable.table.name,
           alias: mainTable.table.alias,
           datasourceId: mainTable.table.datasourceId,
@@ -2364,15 +2416,18 @@ class SqlVisionStore {
   setClosable(payload) {
     this.popupClosable = payload;
   }
-  setShowPermissionTable(show) {
-    this.showPermissionTable = show;
-  }
   setShowFields(show) {
     this.showFields = show;
   }
   setToolbar(toolbar) {
     this.toolbar = toolbar;
   }
+  setFieldNameTpl(tpl) {
+    this.fieldNameTpl = tpl;
+  }
+  setTableNameTpl(tpl) {
+    this.tableNameTpl = tpl;
+  }
 }
 const sqlVisionStore = new SqlVisionStore();
 const Store = /*#__PURE__*/React__default.createContext(sqlVisionStore);
@@ -3134,7 +3189,7 @@ const SelectJoinColumn = ({
   onGroup,
   didUpdate
 }) => {
-  useStore();
+  const store = useStore();
   const [curTable, setCurTable] = useState(value.alias); // 当前选择的表
   const [curColumn, setCurColumn] = useState(value.name); // 当前选择的字段
   const [tableList, setTableList] = useState(_data.map((v, i) => {
@@ -3268,6 +3323,7 @@ const SelectJoinColumn = ({
                       let condition = '';
                       let quotes = name;
                       return onGroup({
+                        ...v,
                         table,
                         alias: tableAlias,
                         name,
@@ -3278,6 +3334,7 @@ const SelectJoinColumn = ({
                       });
                     }
                     typeof onSelect === 'function' && onSelect({
+                      ...v,
                       table,
                       alias: tableAlias,
                       name,
@@ -3296,7 +3353,7 @@ const SelectJoinColumn = ({
                     }), jsx("div", {
                       children: jsx("h4", {
                         className: 'List-item-title ml-2',
-                        children: name
+                        children: replaceTpl(store.fieldNameTpl, v)
                       })
                     })]
                   }), OPEN_GROUP]
@@ -4167,7 +4224,7 @@ const SelectTable = ({
                   }), jsx("div", {
                     children: jsx("h4", {
                       className: 'List-item-title ml-2',
-                      children: v.name
+                      children: replaceTpl(store.tableNameTpl, v)
                     })
                   })]
                 })
@@ -4388,11 +4445,10 @@ const metaIcon = (size, handleClick) => {
   3）特殊情况二 如果最后一个是排序，下面是small
 */
 // 判断icon大小
-const judgeSize = (props, nextLen) => {
+const judgeSize = (store, props, nextLen) => {
   let {
     meta
   } = props;
-  const store = useStore();
   let {
     type
   } = meta;
@@ -4416,11 +4472,10 @@ const judgeSize = (props, nextLen) => {
 /**
  * 查找模块下面能放哪些icon （参考来源：metabase.com）
  */
-const findNextIcon = props => {
+const findNextIcon = (store, props) => {
   const {
     meta
   } = props;
-  const store = useStore();
   let {
     type
   } = meta;
@@ -4588,11 +4643,11 @@ const NextDom = props => {
   const store = useStore();
   // @ts-ignore
   if (!store.metaList[0].table.name) return null;
-  let available = findNextIcon(props);
-  if (!store.showPermissionTable) {
+  let available = findNextIcon(store, props);
+  if (!store.showToolbar(TypeEnum.permissionTable)) {
     available = available.filter(v => v !== TypeEnum.permissionTable);
   }
-  let size = judgeSize(props, available.length);
+  let size = judgeSize(store, props, available.length);
   function handleClick(type) {
     let index = store.metaList.indexOf(meta);
     store.addMeta(type, index + 1);
@@ -4777,6 +4832,7 @@ const JoinData = props => {
               }
             }
             newMeta[index].table2 = {
+              ...data,
               name: tableName,
               alias,
               column: '',
@@ -4842,6 +4898,7 @@ const JoinData = props => {
         if (prevGroupBy?.group?.length) {
           _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
             return {
+              ...v,
               name: v.quotes,
               database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
               special_type: '',
@@ -4853,6 +4910,7 @@ const JoinData = props => {
         if (prevGroupBy?.by?.length) {
           _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
             return {
+              ...v,
               name: v.quotes,
               database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
               special_type: '',
@@ -5182,8 +5240,10 @@ const Filter = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             sql: v.sql,
             special_type: '',
@@ -5194,8 +5254,10 @@ const Filter = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             sql: v.sql,
             special_type: '',
@@ -5373,9 +5435,11 @@ const GroupBy = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -5385,9 +5449,11 @@ const GroupBy = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -5447,6 +5513,7 @@ const GroupBy = props => {
         isGroup: true,
         // @ts-ignore
         onGroup: data => {
+          console.log('🚀 ~ handleUpdate ~ data:', data);
           // @ts-ignore
           newMeta[index].by.splice(i, 1, data);
           // @ts-ignore
@@ -5487,6 +5554,7 @@ const GroupBy = props => {
         isGroup: true,
         // @ts-ignore
         onGroup: data => {
+          console.log('🚀 ~ handleAdd ~ data:', data);
           // @ts-ignore
           newMeta[index].by.push(data);
           // @ts-ignore
@@ -5982,9 +6050,11 @@ const SelectIndex = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -5994,9 +6064,11 @@ const SelectIndex = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
             realName: v.sql?.split(' AS ')?.[1] || '',
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             select: true
@@ -6214,8 +6286,10 @@ const Sort = props => {
       if (prevGroupBy?.group?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             sql: v.sql,
@@ -6226,8 +6300,10 @@ const Sort = props => {
       if (prevGroupBy?.by?.length) {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
+            name_zh: v.quotes,
+            ...v,
             name: v.quotes,
-            name_zh: '',
+            // name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
             sql: v.sql,
@@ -6631,28 +6707,35 @@ const Metabase = observer(props => {
 const SqlVisionBuilder = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   let {
     loading = false,
-    showPermissionTable = false,
     showFields = true,
     getTables,
     getColumns,
+    tableNameTpl = '${name}',
+    fieldNameTpl = '${name}',
     toolbar = ['filter', 'summarize', 'joinData', 'permissionTable', 'customColumn', 'sort', 'rowLimit']
   } = props;
   const store = useStore();
+  const [preData, setPreData] = useState([]);
   useEffect(() => {
     getTables && store.setFetchDatasetFn(getTables);
     getColumns && store.setFetchColumnsFn(getColumns);
   }, []);
   useEffect(() => {
-    store.setShowPermissionTable(showPermissionTable);
     store.setShowFields(showFields);
     store.setToolbar(toolbar || []);
-  }, [showFields, showPermissionTable, toolbar]);
+    store.setFieldNameTpl(fieldNameTpl || '${name}');
+    store.setTableNameTpl(tableNameTpl || '${name}');
+  }, [showFields, toolbar, fieldNameTpl, tableNameTpl]);
   React__default.useImperativeHandle(ref, () => ({
     setDatasource: list => {
       store.setSourceList(list);
     },
     setPreData: data => {
       store.setPreData(data);
+      setPreData(data);
+    },
+    reset: () => {
+      store.setPreData(preData);
     }
   }));
   // ② 表集合没有查出来前 不加载页面