@builder6/server 0.2.0

package/public/grid/index.js

@@ -0,0 +1,207 @@
+async function initializeGrid(baseId = 'test', tableId='test') {
+  const tableResponse = await fetch(`/b6/v0/meta/bases/${baseId}/tables/${tableId}`);
+  const table = await tableResponse.json();
+  
+  console.log(table)
+
+  function isNotEmpty(value) {
+    return value !== undefined && value !== null && value !== "";
+  }
+
+  var customDataSource = new DevExpress.data.CustomStore({
+    key: "_id",
+    load: function(loadOptions) {
+        var d = $.Deferred();
+        var params = {};
+
+        [
+            "filter",
+            "group", 
+            "groupSummary",
+            "parentIds",
+            "requireGroupCount",
+            "requireTotalCount",
+            "searchExpr",
+            "searchOperation",
+            "searchValue",
+            "select",
+            "sort",
+            "skip",     
+            "take",
+            "totalSummary", 
+            "userData"
+        ].forEach(function(i) {
+            if(i in loadOptions && isNotEmpty(loadOptions[i])) {
+                params[i] = JSON.stringify(loadOptions[i]);
+            }
+        });
+
+        $.getJSON(`/b6/v0/${baseId}/${tableId}`, params)
+            .done(function(response) {
+                d.resolve(response.data, { 
+                    totalCount: response.totalCount,
+                    summary: response.summary,
+                    groupCount: response.groupCount
+                });
+            })
+            .fail(function() { throw "Data loading error" });
+        return d.promise();
+    },
+
+    insert: function(values) {
+      var deferred = $.Deferred();
+      $.ajax({
+          url: `/b6/v0/${baseId}/${tableId}`,
+          method: "POST",
+          contentType: "application/json",
+          data: JSON.stringify(values)
+      })
+      .done(deferred.resolve)
+      .fail(function(e){
+          deferred.reject("Insertion failed");
+      });
+      return deferred.promise();
+    },
+    remove: function(key) {
+        var deferred = $.Deferred();
+        $.ajax({
+            url: `/b6/v0/${baseId}/${tableId}/` + encodeURIComponent(key),
+            method: "DELETE"
+        })
+        .done(deferred.resolve)
+        .fail(function(e){
+            deferred.reject("Deletion failed");
+        });
+        return deferred.promise();
+    },
+    update: function(key, values) {
+        var deferred = $.Deferred();
+        $.ajax({
+            url: `/b6/v0/${baseId}/${tableId}/` + encodeURIComponent(key),
+            method: "PUT",
+            contentType: "application/json",
+            data: JSON.stringify(values)
+        })
+        .done(deferred.resolve)
+        .fail(function(e){
+            deferred.reject("Update failed");
+        });
+        return deferred.promise();
+    }
+    // Needed to process selected value(s) in the SelectBox, Lookup, Autocomplete, and DropDownBox
+    // byKey: function(key) {
+    //     var d = new $.Deferred();
+    //     $.get('https://mydomain.com/MyDataService?id=' + key)
+    //         .done(function(result) {
+    //             d.resolve(result);
+    //         });
+    //     return d.promise();
+    // }
+  });
+
+
+  const columns = table.fields.map(field => {
+    let dataType;
+
+    // 根据字段类型设置 dataType
+    switch (field.type) {
+        case 'text':
+            dataType = 'string';
+            break;
+        case 'number':
+            dataType = 'number';
+            break;
+        case 'date':
+            dataType = 'date';
+            break;        
+        case 'datetime':
+            dataType = 'datetime';
+            break;
+        case 'boolean':
+            dataType = 'boolean';
+            break;
+        default:
+            dataType = 'string'; // 默认类型
+    }
+
+    return {
+        dataField: field.name.toLowerCase(), // 假设字段名需要小写
+        caption: field.name,
+        dataType: dataType,
+    };
+  });
+
+  $('#gridContainer').dxDataGrid({
+    dataSource: customDataSource,
+    paging: {
+      pageSize: 10,
+    },
+    pager: {
+      visible: true,
+      showPageSizeSelector: true,
+      allowedPageSizes: [10, 25, 50, 100],
+    },
+    remoteOperations: true,
+    searchPanel: {
+      visible: true,
+      highlightCaseSensitive: true,
+    },
+    groupPanel: { visible: true },
+    grouping: {
+      autoExpandAll: false,
+    },
+    editing: {
+      mode: 'popup',
+      allowUpdating: true,
+      allowAdding: true,
+      allowDeleting: true,
+      popup: {
+        title: 'Employee Info',
+        showTitle: true,
+        width: 700,
+        height: 525,
+      },
+    },
+    filterPanel: { visible: true },
+    headerFilter: { visible: true },
+    selection: {
+      mode: 'multiple',
+    },
+    allowColumnReordering: true,
+    allowColumnResizing: true,
+    columnAutoWidth: true,
+    columnChooser: {
+      enabled: true,
+    },
+    columnFixing: {
+      enabled: true,
+    },
+    rowAlternationEnabled: true,
+    showBorders: true,
+    width: '100%',
+    columns: columns,
+    export: {
+      enabled: true,
+      allowExportSelectedData: true,
+    },
+    onExporting(e) {
+      const workbook = new ExcelJS.Workbook();
+      const worksheet = workbook.addWorksheet(table.name);
+
+      DevExpress.excelExporter.exportDataGrid({
+        component: e.component,
+        worksheet,
+        autoFilterEnabled: true,
+      }).then(() => {
+        workbook.xlsx.writeBuffer().then((buffer) => {
+          saveAs(new Blob([buffer], { type: 'application/octet-stream' }),`${table.name}.xlsx`);
+        });
+      });
+    },
+    onContentReady(e) {
+    },
+  });
+}
+
+$(() => {initializeGrid()})
+

package/public/grid/styles.css

@@ -0,0 +1,4 @@
+.dx-datagrid .dx-data-row > td.bullet {
+  padding-top: 0;
+  padding-bottom: 0;
+}

package/public/pivot/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>Pivot Grid</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.4.4/dist/cldr.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.4.4/dist/cldr/event.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.4.4/dist/cldr/supplemental.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.4.4/dist/cldr/unresolved.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/filesaver.js@1.3.4/FileSaver.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/devextreme@22.2.14/dist/css/dx.material.blue.light.css" />
+    <script src="https://cdn.jsdelivr.net/npm/devextreme@22.2.14/dist/js/dx.all.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/devextreme-aspnet-data@4.0.2/js/dx.aspnet.data.js"></script> -->
+
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <script src="index.js"></script>
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="pivotgrid-demo">
+        <div id="pivotgrid-chart"></div>
+        <div id="pivotgrid"></div>
+      </div>
+    </div>
+  </body>
+</html>

package/public/pivot/index.js

@@ -0,0 +1,109 @@
+async function initializeGrid(baseId = 'test', tableId='test') {
+  const tableResponse = await fetch(`/b6/v0/meta/bases/${baseId}/tables/${tableId}`);
+  const table = await tableResponse.json();
+  
+  console.log(table)
+  
+  function isNotEmpty(value) {
+    return value !== undefined && value !== null && value !== "";
+  }
+
+  var customDataSource = {
+    key: "_id",
+    remoteOperations: true,
+    load: function(loadOptions) {
+      var d = $.Deferred();
+      var params = {};
+
+      [
+          "filter",
+          "group", 
+          "groupSummary",
+          "parentIds",
+          "requireGroupCount",
+          "requireTotalCount",
+          "searchExpr",
+          "searchOperation",
+          "searchValue",
+          "select",
+          "sort",
+          "skip",     
+          "take",
+          "totalSummary", 
+          "userData"
+      ].forEach(function(i) {
+          if(i in loadOptions && isNotEmpty(loadOptions[i])) {
+              params[i] = JSON.stringify(loadOptions[i]);
+          }
+      });
+
+      $.getJSON(`/b6/v0/${baseId}/${tableId}`, params)
+          .done(function(response) {
+              d.resolve(response.data, { 
+                  totalCount: response.totalCount,
+                  summary: response.summary,
+                  groupCount: response.groupCount
+              });
+          })
+          .fail(function() { throw "Data loading error" });
+      return d.promise();
+    },
+  };
+
+  const pivotGridChart = $('#pivotgrid-chart').dxChart({
+    commonSeriesSettings: {
+      type: 'bar',
+    },
+    tooltip: {
+      enabled: true,
+      format: 'currency',
+      customizeTooltip(args) {
+        return {
+          html: `${args.seriesName} | Total<div class='currency'>${args.valueText}</div>`,
+        };
+      },
+    },
+    size: {
+      height: 200,
+    },
+    adaptiveLayout: {
+      width: 450,
+    },
+  }).dxChart('instance');
+
+  const pivotGrid = $('#pivotgrid').dxPivotGrid({
+    allowSortingBySummary: true,
+    allowFiltering: true,
+    showBorders: true,
+    showColumnGrandTotals: false,
+    showRowGrandTotals: false,
+    showRowTotals: false,
+    showColumnTotals: false,
+    fieldChooser: {
+      enabled: true,
+      allowSearch: true,
+      height: 600,
+    },
+    headerFilter: {
+      search: {
+        enabled: true,
+      },
+      showRelevantValues: true,
+      width: 300,
+      height: 400,
+    },
+    fieldPanel: {
+      visible: true,
+    },
+    dataSource: customDataSource,
+  }).dxPivotGrid('instance');
+
+  pivotGrid.bindChart(pivotGridChart, {
+    dataFieldsDisplayMode: 'splitPanes',
+    alternateDataFields: false,
+  });
+}
+
+
+$(() => {initializeGrid()})
+

package/public/pivot/styles.css

@@ -0,0 +1,7 @@
+#pivotgrid {
+  margin-top: 20px;
+}
+
+.currency {
+  text-align: center;
+}

package/views/ag-grid/README.md

@@ -0,0 +1,15 @@
+## 数据校验
+
+先校验字段值有效性，校验合法的各种字段类型值，再校验用户配置的校验规则，最终把所有校验错误信息合并提示给用户。
+
+### 字段类型校验
+
+各种字段类型校验规则：
+
+- number: 合法number，小数位数
+- date: 合法的日期格式，YYYY-MM-DD、YYYY/MM/DD，兼容前导0省略情况，另外兼容了 YYYY-MM-DDTHH:MM:SS.SSSZ 这种服务端返回的格式（复制其它字段列保存时，是保存整行数据，日期列会自动取这种格式提交）
+- select: 数据类型只支持字符串，且必须是字段定义过的选项范围内值
+- boolean: true/false TRUE/FALSE
+
+其它逻辑：每种字段类型校验失败都不会去主动变更转换字段值，以原始值交给ag-grid显示以明显告知用户数据不合法。
+