@easyquery/ui 7.4.0-rc03 → 7.4.0-rc04
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/easyquery.ui.cjs.js +84 -51
- package/dist/easyquery.ui.esm.js +84 -51
- package/package.json +2 -2
package/dist/easyquery.ui.cjs.js
CHANGED
|
@@ -613,6 +613,13 @@ class EntitiesPanel extends core.Widget {
|
|
|
613
613
|
}
|
|
614
614
|
}
|
|
615
615
|
|
|
616
|
+
exports.ColumnsEditMode = void 0;
|
|
617
|
+
(function (ColumnsEditMode) {
|
|
618
|
+
ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
|
|
619
|
+
ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
|
|
620
|
+
ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
|
|
621
|
+
})(exports.ColumnsEditMode || (exports.ColumnsEditMode = {}));
|
|
622
|
+
|
|
616
623
|
class MenuLevel {
|
|
617
624
|
get applyItem() {
|
|
618
625
|
return this._applyItem;
|
|
@@ -2009,15 +2016,22 @@ class ColumnRendererCP {
|
|
|
2009
2016
|
this.createFormatsMenu();
|
|
2010
2017
|
}
|
|
2011
2018
|
this.createButtonMenu();
|
|
2019
|
+
const isFullMode = this.panel.options.editMode === exports.ColumnsEditMode.Full;
|
|
2020
|
+
const isReadOnlyMode = this.panel.options.editMode === exports.ColumnsEditMode.ReadOnly;
|
|
2021
|
+
const showCheckboxes = this.panel.options.showCheckboxes !== false;
|
|
2012
2022
|
builder
|
|
2013
2023
|
.addClass(this.getClassesToAdd())
|
|
2014
|
-
.addClass(getMobileCssClass())
|
|
2015
|
-
|
|
2024
|
+
.addClass(getMobileCssClass());
|
|
2025
|
+
if (showCheckboxes && !isReadOnlyMode && !this.column.isReadOnly()) {
|
|
2026
|
+
builder.addChildElement(this.renderCheckbox());
|
|
2027
|
+
}
|
|
2028
|
+
if (!isReadOnlyMode) {
|
|
2016
2029
|
//start sort button
|
|
2017
|
-
.addChild('div', builder => builder
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2030
|
+
builder.addChild('div', builder => builder
|
|
2031
|
+
.addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
|
|
2032
|
+
.addChildElement(this.sortingButton));
|
|
2033
|
+
// end sort button
|
|
2034
|
+
}
|
|
2021
2035
|
builder.addChildElement(this.renderExpressionBlock());
|
|
2022
2036
|
if (this.panel.options.showColumnTitles !== false && !ui.browserUtils.isMobileMode()) {
|
|
2023
2037
|
builder
|
|
@@ -2031,36 +2045,37 @@ class ColumnRendererCP {
|
|
|
2031
2045
|
builder
|
|
2032
2046
|
.addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
|
|
2033
2047
|
.addClass(getMobileCssClass());
|
|
2048
|
+
const buttonsToShow = this.getButtonsToShow();
|
|
2034
2049
|
//start enable button
|
|
2035
|
-
if (
|
|
2050
|
+
if (buttonsToShow.indexOf("enable") >= 0 && isFullMode && !showCheckboxes && !this.column.isReadOnly()) {
|
|
2036
2051
|
builder.addChildElement(this.renderEnabledButton());
|
|
2037
2052
|
buttonsIndex++;
|
|
2038
2053
|
buttonsList += 'Enable';
|
|
2039
2054
|
}
|
|
2040
2055
|
//end enable button
|
|
2041
2056
|
//start aggr func button
|
|
2042
|
-
if (
|
|
2057
|
+
if (buttonsToShow.indexOf("type") >= 0 && this.columnEnabled && isFullMode) {
|
|
2043
2058
|
builder.addChildElement(this.renderColumnTypeButton());
|
|
2044
2059
|
buttonsIndex++;
|
|
2045
2060
|
buttonsList += 'Type';
|
|
2046
2061
|
}
|
|
2047
2062
|
//end aggr func button
|
|
2048
2063
|
//start format selector button
|
|
2049
|
-
if (
|
|
2064
|
+
if (buttonsToShow.indexOf("format") >= 0 && this.columnEnabled && !isReadOnlyMode) {
|
|
2050
2065
|
builder.addChildElement(this.renderColumnFormatButton());
|
|
2051
2066
|
buttonsIndex++;
|
|
2052
2067
|
buttonsList += 'Format';
|
|
2053
2068
|
}
|
|
2054
2069
|
//end format selector button
|
|
2055
2070
|
//start delete button
|
|
2056
|
-
if (
|
|
2071
|
+
if (buttonsToShow.indexOf("delete") >= 0 && isFullMode && !this.column.isReadOnly()) {
|
|
2057
2072
|
builder.addChildElement(this.renderDeleteButton());
|
|
2058
2073
|
buttonsIndex++;
|
|
2059
2074
|
buttonsList += 'Delete';
|
|
2060
2075
|
}
|
|
2061
2076
|
//end delete button
|
|
2062
2077
|
//start menu button
|
|
2063
|
-
if (
|
|
2078
|
+
if (buttonsToShow.indexOf("menu") >= 0 && !(this.column.isReadOnly() || isReadOnlyMode)) {
|
|
2064
2079
|
builder.addChildElement(this.renderMenuButton());
|
|
2065
2080
|
buttonsIndex++;
|
|
2066
2081
|
buttonsList += 'Menu';
|
|
@@ -2084,7 +2099,7 @@ class ColumnRendererCP {
|
|
|
2084
2099
|
if (this.panel.options.alwaysShowButtons) {
|
|
2085
2100
|
this.showButtons();
|
|
2086
2101
|
}
|
|
2087
|
-
if (
|
|
2102
|
+
if (!showCheckboxes) {
|
|
2088
2103
|
builder.addClass("eqjs-no-checkbox");
|
|
2089
2104
|
}
|
|
2090
2105
|
return this.element;
|
|
@@ -2260,25 +2275,20 @@ class ColumnRendererCP {
|
|
|
2260
2275
|
.toDOM();
|
|
2261
2276
|
}
|
|
2262
2277
|
renderCheckbox() {
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
.toDOM();
|
|
2278
|
-
}
|
|
2279
|
-
else {
|
|
2280
|
-
return null;
|
|
2281
|
-
}
|
|
2278
|
+
return ui.domel("div")
|
|
2279
|
+
.title(core.i18n.getText('CmdToggleEnable'))
|
|
2280
|
+
.attr('tabIndex', '0')
|
|
2281
|
+
.addClass(`${this.cssPrefix}-colelement ${this.cssPrefix}-column-checkbox`)
|
|
2282
|
+
.addClass(`${this.columnEnabled ? 'enabled' : ''}`)
|
|
2283
|
+
.on('click', () => {
|
|
2284
|
+
this.columnEnabled = !this.columnEnabled;
|
|
2285
|
+
this.column.fireChangedEvent();
|
|
2286
|
+
return false;
|
|
2287
|
+
})
|
|
2288
|
+
.on('keypress', evt => { if ([13, 32].includes(evt.keyCode)) {
|
|
2289
|
+
evt.target.click();
|
|
2290
|
+
} })
|
|
2291
|
+
.toDOM();
|
|
2282
2292
|
}
|
|
2283
2293
|
renderDeleteButton() {
|
|
2284
2294
|
return ui.domel('div')
|
|
@@ -2374,7 +2384,13 @@ class ColumnRendererCP {
|
|
|
2374
2384
|
} })).toDOM();
|
|
2375
2385
|
}
|
|
2376
2386
|
isEditable() {
|
|
2377
|
-
|
|
2387
|
+
// Allow editing (title/sort/order) in Full or FixedList mode only
|
|
2388
|
+
switch (this.panel.options.editMode) {
|
|
2389
|
+
case exports.ColumnsEditMode.ReadOnly:
|
|
2390
|
+
return false;
|
|
2391
|
+
default:
|
|
2392
|
+
return this.column.enabled && !this.column.isReadOnly();
|
|
2393
|
+
}
|
|
2378
2394
|
}
|
|
2379
2395
|
changeFormatHandler(ev) {
|
|
2380
2396
|
const formats = this.panel
|
|
@@ -2527,7 +2543,18 @@ class ColumnRendererCP {
|
|
|
2527
2543
|
.concat(formats.map(format => ({ id: format.format, text: core.i18n.getText("DisplayFormats", format.name) || format.name })));
|
|
2528
2544
|
}
|
|
2529
2545
|
getButtonsToShow() {
|
|
2530
|
-
|
|
2546
|
+
// In ReadOnly mode, no buttons
|
|
2547
|
+
if (this.panel.options.editMode === exports.ColumnsEditMode.ReadOnly) {
|
|
2548
|
+
return [];
|
|
2549
|
+
}
|
|
2550
|
+
// In FixedList mode, only allow sorting and caption editing
|
|
2551
|
+
if (this.panel.options.editMode === exports.ColumnsEditMode.FixedList) {
|
|
2552
|
+
return ["sorting", "format"];
|
|
2553
|
+
}
|
|
2554
|
+
// Default (Full)
|
|
2555
|
+
return this.panel.options.buttons && Array.isArray(this.panel.options.buttons)
|
|
2556
|
+
? this.panel.options.buttons
|
|
2557
|
+
: ["enable", "delete", "type", "sorting", "format"];
|
|
2531
2558
|
}
|
|
2532
2559
|
buttonMenuHandler(action, evt) {
|
|
2533
2560
|
switch (action) {
|
|
@@ -2760,7 +2787,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
|
|
|
2760
2787
|
renderBaseExpression() {
|
|
2761
2788
|
const baseAttr = this.getAttribute();
|
|
2762
2789
|
const attrCaption = this.panel.getContext().getAttributeTitle(baseAttr);
|
|
2763
|
-
if (this.isEditable()) {
|
|
2790
|
+
if (this.isEditable() && this.panel.options.editMode === exports.ColumnsEditMode.Full) {
|
|
2764
2791
|
return ui.domel('a')
|
|
2765
2792
|
.attr('href', 'javascript:void(0)')
|
|
2766
2793
|
.title(attrCaption)
|
|
@@ -2779,10 +2806,12 @@ class AttrColumnRendererCP extends ColumnRendererCP {
|
|
|
2779
2806
|
})
|
|
2780
2807
|
.toDOM();
|
|
2781
2808
|
}
|
|
2782
|
-
|
|
2783
|
-
.
|
|
2784
|
-
|
|
2785
|
-
|
|
2809
|
+
else {
|
|
2810
|
+
return ui.domel('span')
|
|
2811
|
+
.text(attrCaption)
|
|
2812
|
+
.title(attrCaption)
|
|
2813
|
+
.toDOM();
|
|
2814
|
+
}
|
|
2786
2815
|
}
|
|
2787
2816
|
baseExpressionItemSelectedCallback(data, item) {
|
|
2788
2817
|
const attrid = data.id;
|
|
@@ -2933,7 +2962,8 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
|
|
|
2933
2962
|
for (let idx = 0; idx < arrLength; idx++) {
|
|
2934
2963
|
item = arrFormat[idx];
|
|
2935
2964
|
if (item.type === 1) {
|
|
2936
|
-
|
|
2965
|
+
// Only allow function/type change in Full mode
|
|
2966
|
+
if (this.panel.options.editMode === exports.ColumnsEditMode.Full && this.isEditable()) {
|
|
2937
2967
|
const functionLink = ui.domel('a')
|
|
2938
2968
|
.attr('href', 'javascript:void(0)')
|
|
2939
2969
|
.text(item.text)
|
|
@@ -3070,7 +3100,7 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
|
|
|
3070
3100
|
let builder = ui.domel('div', exprBlock)
|
|
3071
3101
|
.addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
|
|
3072
3102
|
.addClass(getMobileCssClass());
|
|
3073
|
-
if (this.isEditable()) {
|
|
3103
|
+
if (this.isEditable() && this.panel.options.editMode === exports.ColumnsEditMode.Full) {
|
|
3074
3104
|
builder
|
|
3075
3105
|
.addChild('a', b => b
|
|
3076
3106
|
.attr('href', 'javascript:void(0)')
|
|
@@ -3146,7 +3176,8 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
|
|
|
3146
3176
|
builder = ui.domel('div', exprBlock)
|
|
3147
3177
|
.addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
|
|
3148
3178
|
.addClass(getMobileCssClass());
|
|
3149
|
-
|
|
3179
|
+
// Only allow data type change in Full mode
|
|
3180
|
+
if (this.panel.options.editMode === exports.ColumnsEditMode.Full && this.isEditable()) {
|
|
3150
3181
|
this.createDataTypeMenu();
|
|
3151
3182
|
builder
|
|
3152
3183
|
.addChild('a', dataTypeLink => dataTypeLink
|
|
@@ -3166,7 +3197,6 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
|
|
|
3166
3197
|
}));
|
|
3167
3198
|
}
|
|
3168
3199
|
else {
|
|
3169
|
-
this.column.expr.dataType;
|
|
3170
3200
|
builder
|
|
3171
3201
|
.addChild('span', b => {
|
|
3172
3202
|
b.text(core$1.DataType[this.column.expr.dataType])
|
|
@@ -3317,7 +3347,8 @@ class ColumnsPanel extends core.Widget {
|
|
|
3317
3347
|
customExpressionText: 0,
|
|
3318
3348
|
allowHiddenColumns: false,
|
|
3319
3349
|
showAddAllForEntity: false,
|
|
3320
|
-
showIndicatorOnLoad: true
|
|
3350
|
+
showIndicatorOnLoad: true,
|
|
3351
|
+
editMode: exports.ColumnsEditMode.Full
|
|
3321
3352
|
};
|
|
3322
3353
|
this.landingSlot = ui.domel('div')
|
|
3323
3354
|
.addClass(`${this.cssPrefix}-col-landing-slot`)
|
|
@@ -3423,7 +3454,8 @@ class ColumnsPanel extends core.Widget {
|
|
|
3423
3454
|
.addClass(`${this.cssPrefix}-columns`)
|
|
3424
3455
|
.addClass(getMobileCssClass())
|
|
3425
3456
|
.toDOM();
|
|
3426
|
-
|
|
3457
|
+
// Only show add row in Full edit mode
|
|
3458
|
+
if (this.options.showAddRow && this.options.editMode === exports.ColumnsEditMode.Full) {
|
|
3427
3459
|
this.addRowElement =
|
|
3428
3460
|
ui.domel('div', this.slot)
|
|
3429
3461
|
.addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
|
|
@@ -3708,6 +3740,10 @@ class ColumnsPanel extends core.Widget {
|
|
|
3708
3740
|
}
|
|
3709
3741
|
}
|
|
3710
3742
|
addNewColumn(attrs, index) {
|
|
3743
|
+
// Only allow adding columns in Full edit mode
|
|
3744
|
+
if (this.options.editMode !== exports.ColumnsEditMode.Full) {
|
|
3745
|
+
return null;
|
|
3746
|
+
}
|
|
3711
3747
|
this.getContext().getModel();
|
|
3712
3748
|
const query = this.getQuery();
|
|
3713
3749
|
if (Array.isArray(attrs)) {
|
|
@@ -3906,6 +3942,10 @@ class ColumnsPanel extends core.Widget {
|
|
|
3906
3942
|
this.entitiesMenu.showMenu(menuOptions);
|
|
3907
3943
|
}
|
|
3908
3944
|
moveColumn(column, direction) {
|
|
3945
|
+
// Only allow moving columns in Full or FixedList edit mode
|
|
3946
|
+
if (this.options.editMode !== exports.ColumnsEditMode.Full && this.options.editMode !== exports.ColumnsEditMode.FixedList) {
|
|
3947
|
+
return;
|
|
3948
|
+
}
|
|
3909
3949
|
const query = this.getQuery();
|
|
3910
3950
|
const columns = query.getColumns();
|
|
3911
3951
|
const index = columns.indexOf(column);
|
|
@@ -3975,13 +4015,6 @@ class ColumnsPanel extends core.Widget {
|
|
|
3975
4015
|
}
|
|
3976
4016
|
}
|
|
3977
4017
|
|
|
3978
|
-
exports.ColumnsEditMode = void 0;
|
|
3979
|
-
(function (ColumnsEditMode) {
|
|
3980
|
-
ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
|
|
3981
|
-
ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
|
|
3982
|
-
ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
|
|
3983
|
-
})(exports.ColumnsEditMode || (exports.ColumnsEditMode = {}));
|
|
3984
|
-
|
|
3985
4018
|
class ColumnRendererCB {
|
|
3986
4019
|
constructor(panel, column, slot) {
|
|
3987
4020
|
this.functionMenu = null;
|
package/dist/easyquery.ui.esm.js
CHANGED
|
@@ -611,6 +611,13 @@ class EntitiesPanel extends Widget {
|
|
|
611
611
|
}
|
|
612
612
|
}
|
|
613
613
|
|
|
614
|
+
var ColumnsEditMode;
|
|
615
|
+
(function (ColumnsEditMode) {
|
|
616
|
+
ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
|
|
617
|
+
ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
|
|
618
|
+
ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
|
|
619
|
+
})(ColumnsEditMode || (ColumnsEditMode = {}));
|
|
620
|
+
|
|
614
621
|
class MenuLevel {
|
|
615
622
|
get applyItem() {
|
|
616
623
|
return this._applyItem;
|
|
@@ -2007,15 +2014,22 @@ class ColumnRendererCP {
|
|
|
2007
2014
|
this.createFormatsMenu();
|
|
2008
2015
|
}
|
|
2009
2016
|
this.createButtonMenu();
|
|
2017
|
+
const isFullMode = this.panel.options.editMode === ColumnsEditMode.Full;
|
|
2018
|
+
const isReadOnlyMode = this.panel.options.editMode === ColumnsEditMode.ReadOnly;
|
|
2019
|
+
const showCheckboxes = this.panel.options.showCheckboxes !== false;
|
|
2010
2020
|
builder
|
|
2011
2021
|
.addClass(this.getClassesToAdd())
|
|
2012
|
-
.addClass(getMobileCssClass())
|
|
2013
|
-
|
|
2022
|
+
.addClass(getMobileCssClass());
|
|
2023
|
+
if (showCheckboxes && !isReadOnlyMode && !this.column.isReadOnly()) {
|
|
2024
|
+
builder.addChildElement(this.renderCheckbox());
|
|
2025
|
+
}
|
|
2026
|
+
if (!isReadOnlyMode) {
|
|
2014
2027
|
//start sort button
|
|
2015
|
-
.addChild('div', builder => builder
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2028
|
+
builder.addChild('div', builder => builder
|
|
2029
|
+
.addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
|
|
2030
|
+
.addChildElement(this.sortingButton));
|
|
2031
|
+
// end sort button
|
|
2032
|
+
}
|
|
2019
2033
|
builder.addChildElement(this.renderExpressionBlock());
|
|
2020
2034
|
if (this.panel.options.showColumnTitles !== false && !browserUtils.isMobileMode()) {
|
|
2021
2035
|
builder
|
|
@@ -2029,36 +2043,37 @@ class ColumnRendererCP {
|
|
|
2029
2043
|
builder
|
|
2030
2044
|
.addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
|
|
2031
2045
|
.addClass(getMobileCssClass());
|
|
2046
|
+
const buttonsToShow = this.getButtonsToShow();
|
|
2032
2047
|
//start enable button
|
|
2033
|
-
if (
|
|
2048
|
+
if (buttonsToShow.indexOf("enable") >= 0 && isFullMode && !showCheckboxes && !this.column.isReadOnly()) {
|
|
2034
2049
|
builder.addChildElement(this.renderEnabledButton());
|
|
2035
2050
|
buttonsIndex++;
|
|
2036
2051
|
buttonsList += 'Enable';
|
|
2037
2052
|
}
|
|
2038
2053
|
//end enable button
|
|
2039
2054
|
//start aggr func button
|
|
2040
|
-
if (
|
|
2055
|
+
if (buttonsToShow.indexOf("type") >= 0 && this.columnEnabled && isFullMode) {
|
|
2041
2056
|
builder.addChildElement(this.renderColumnTypeButton());
|
|
2042
2057
|
buttonsIndex++;
|
|
2043
2058
|
buttonsList += 'Type';
|
|
2044
2059
|
}
|
|
2045
2060
|
//end aggr func button
|
|
2046
2061
|
//start format selector button
|
|
2047
|
-
if (
|
|
2062
|
+
if (buttonsToShow.indexOf("format") >= 0 && this.columnEnabled && !isReadOnlyMode) {
|
|
2048
2063
|
builder.addChildElement(this.renderColumnFormatButton());
|
|
2049
2064
|
buttonsIndex++;
|
|
2050
2065
|
buttonsList += 'Format';
|
|
2051
2066
|
}
|
|
2052
2067
|
//end format selector button
|
|
2053
2068
|
//start delete button
|
|
2054
|
-
if (
|
|
2069
|
+
if (buttonsToShow.indexOf("delete") >= 0 && isFullMode && !this.column.isReadOnly()) {
|
|
2055
2070
|
builder.addChildElement(this.renderDeleteButton());
|
|
2056
2071
|
buttonsIndex++;
|
|
2057
2072
|
buttonsList += 'Delete';
|
|
2058
2073
|
}
|
|
2059
2074
|
//end delete button
|
|
2060
2075
|
//start menu button
|
|
2061
|
-
if (
|
|
2076
|
+
if (buttonsToShow.indexOf("menu") >= 0 && !(this.column.isReadOnly() || isReadOnlyMode)) {
|
|
2062
2077
|
builder.addChildElement(this.renderMenuButton());
|
|
2063
2078
|
buttonsIndex++;
|
|
2064
2079
|
buttonsList += 'Menu';
|
|
@@ -2082,7 +2097,7 @@ class ColumnRendererCP {
|
|
|
2082
2097
|
if (this.panel.options.alwaysShowButtons) {
|
|
2083
2098
|
this.showButtons();
|
|
2084
2099
|
}
|
|
2085
|
-
if (
|
|
2100
|
+
if (!showCheckboxes) {
|
|
2086
2101
|
builder.addClass("eqjs-no-checkbox");
|
|
2087
2102
|
}
|
|
2088
2103
|
return this.element;
|
|
@@ -2258,25 +2273,20 @@ class ColumnRendererCP {
|
|
|
2258
2273
|
.toDOM();
|
|
2259
2274
|
}
|
|
2260
2275
|
renderCheckbox() {
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
.toDOM();
|
|
2276
|
-
}
|
|
2277
|
-
else {
|
|
2278
|
-
return null;
|
|
2279
|
-
}
|
|
2276
|
+
return domel("div")
|
|
2277
|
+
.title(i18n$1.getText('CmdToggleEnable'))
|
|
2278
|
+
.attr('tabIndex', '0')
|
|
2279
|
+
.addClass(`${this.cssPrefix}-colelement ${this.cssPrefix}-column-checkbox`)
|
|
2280
|
+
.addClass(`${this.columnEnabled ? 'enabled' : ''}`)
|
|
2281
|
+
.on('click', () => {
|
|
2282
|
+
this.columnEnabled = !this.columnEnabled;
|
|
2283
|
+
this.column.fireChangedEvent();
|
|
2284
|
+
return false;
|
|
2285
|
+
})
|
|
2286
|
+
.on('keypress', evt => { if ([13, 32].includes(evt.keyCode)) {
|
|
2287
|
+
evt.target.click();
|
|
2288
|
+
} })
|
|
2289
|
+
.toDOM();
|
|
2280
2290
|
}
|
|
2281
2291
|
renderDeleteButton() {
|
|
2282
2292
|
return domel('div')
|
|
@@ -2372,7 +2382,13 @@ class ColumnRendererCP {
|
|
|
2372
2382
|
} })).toDOM();
|
|
2373
2383
|
}
|
|
2374
2384
|
isEditable() {
|
|
2375
|
-
|
|
2385
|
+
// Allow editing (title/sort/order) in Full or FixedList mode only
|
|
2386
|
+
switch (this.panel.options.editMode) {
|
|
2387
|
+
case ColumnsEditMode.ReadOnly:
|
|
2388
|
+
return false;
|
|
2389
|
+
default:
|
|
2390
|
+
return this.column.enabled && !this.column.isReadOnly();
|
|
2391
|
+
}
|
|
2376
2392
|
}
|
|
2377
2393
|
changeFormatHandler(ev) {
|
|
2378
2394
|
const formats = this.panel
|
|
@@ -2525,7 +2541,18 @@ class ColumnRendererCP {
|
|
|
2525
2541
|
.concat(formats.map(format => ({ id: format.format, text: i18n$1.getText("DisplayFormats", format.name) || format.name })));
|
|
2526
2542
|
}
|
|
2527
2543
|
getButtonsToShow() {
|
|
2528
|
-
|
|
2544
|
+
// In ReadOnly mode, no buttons
|
|
2545
|
+
if (this.panel.options.editMode === ColumnsEditMode.ReadOnly) {
|
|
2546
|
+
return [];
|
|
2547
|
+
}
|
|
2548
|
+
// In FixedList mode, only allow sorting and caption editing
|
|
2549
|
+
if (this.panel.options.editMode === ColumnsEditMode.FixedList) {
|
|
2550
|
+
return ["sorting", "format"];
|
|
2551
|
+
}
|
|
2552
|
+
// Default (Full)
|
|
2553
|
+
return this.panel.options.buttons && Array.isArray(this.panel.options.buttons)
|
|
2554
|
+
? this.panel.options.buttons
|
|
2555
|
+
: ["enable", "delete", "type", "sorting", "format"];
|
|
2529
2556
|
}
|
|
2530
2557
|
buttonMenuHandler(action, evt) {
|
|
2531
2558
|
switch (action) {
|
|
@@ -2758,7 +2785,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
|
|
|
2758
2785
|
renderBaseExpression() {
|
|
2759
2786
|
const baseAttr = this.getAttribute();
|
|
2760
2787
|
const attrCaption = this.panel.getContext().getAttributeTitle(baseAttr);
|
|
2761
|
-
if (this.isEditable()) {
|
|
2788
|
+
if (this.isEditable() && this.panel.options.editMode === ColumnsEditMode.Full) {
|
|
2762
2789
|
return domel('a')
|
|
2763
2790
|
.attr('href', 'javascript:void(0)')
|
|
2764
2791
|
.title(attrCaption)
|
|
@@ -2777,10 +2804,12 @@ class AttrColumnRendererCP extends ColumnRendererCP {
|
|
|
2777
2804
|
})
|
|
2778
2805
|
.toDOM();
|
|
2779
2806
|
}
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2807
|
+
else {
|
|
2808
|
+
return domel('span')
|
|
2809
|
+
.text(attrCaption)
|
|
2810
|
+
.title(attrCaption)
|
|
2811
|
+
.toDOM();
|
|
2812
|
+
}
|
|
2784
2813
|
}
|
|
2785
2814
|
baseExpressionItemSelectedCallback(data, item) {
|
|
2786
2815
|
const attrid = data.id;
|
|
@@ -2931,7 +2960,8 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
|
|
|
2931
2960
|
for (let idx = 0; idx < arrLength; idx++) {
|
|
2932
2961
|
item = arrFormat[idx];
|
|
2933
2962
|
if (item.type === 1) {
|
|
2934
|
-
|
|
2963
|
+
// Only allow function/type change in Full mode
|
|
2964
|
+
if (this.panel.options.editMode === ColumnsEditMode.Full && this.isEditable()) {
|
|
2935
2965
|
const functionLink = domel('a')
|
|
2936
2966
|
.attr('href', 'javascript:void(0)')
|
|
2937
2967
|
.text(item.text)
|
|
@@ -3068,7 +3098,7 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
|
|
|
3068
3098
|
let builder = domel('div', exprBlock)
|
|
3069
3099
|
.addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
|
|
3070
3100
|
.addClass(getMobileCssClass());
|
|
3071
|
-
if (this.isEditable()) {
|
|
3101
|
+
if (this.isEditable() && this.panel.options.editMode === ColumnsEditMode.Full) {
|
|
3072
3102
|
builder
|
|
3073
3103
|
.addChild('a', b => b
|
|
3074
3104
|
.attr('href', 'javascript:void(0)')
|
|
@@ -3144,7 +3174,8 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
|
|
|
3144
3174
|
builder = domel('div', exprBlock)
|
|
3145
3175
|
.addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
|
|
3146
3176
|
.addClass(getMobileCssClass());
|
|
3147
|
-
|
|
3177
|
+
// Only allow data type change in Full mode
|
|
3178
|
+
if (this.panel.options.editMode === ColumnsEditMode.Full && this.isEditable()) {
|
|
3148
3179
|
this.createDataTypeMenu();
|
|
3149
3180
|
builder
|
|
3150
3181
|
.addChild('a', dataTypeLink => dataTypeLink
|
|
@@ -3164,7 +3195,6 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
|
|
|
3164
3195
|
}));
|
|
3165
3196
|
}
|
|
3166
3197
|
else {
|
|
3167
|
-
this.column.expr.dataType;
|
|
3168
3198
|
builder
|
|
3169
3199
|
.addChild('span', b => {
|
|
3170
3200
|
b.text(DataType[this.column.expr.dataType])
|
|
@@ -3315,7 +3345,8 @@ class ColumnsPanel extends Widget {
|
|
|
3315
3345
|
customExpressionText: 0,
|
|
3316
3346
|
allowHiddenColumns: false,
|
|
3317
3347
|
showAddAllForEntity: false,
|
|
3318
|
-
showIndicatorOnLoad: true
|
|
3348
|
+
showIndicatorOnLoad: true,
|
|
3349
|
+
editMode: ColumnsEditMode.Full
|
|
3319
3350
|
};
|
|
3320
3351
|
this.landingSlot = domel('div')
|
|
3321
3352
|
.addClass(`${this.cssPrefix}-col-landing-slot`)
|
|
@@ -3421,7 +3452,8 @@ class ColumnsPanel extends Widget {
|
|
|
3421
3452
|
.addClass(`${this.cssPrefix}-columns`)
|
|
3422
3453
|
.addClass(getMobileCssClass())
|
|
3423
3454
|
.toDOM();
|
|
3424
|
-
|
|
3455
|
+
// Only show add row in Full edit mode
|
|
3456
|
+
if (this.options.showAddRow && this.options.editMode === ColumnsEditMode.Full) {
|
|
3425
3457
|
this.addRowElement =
|
|
3426
3458
|
domel('div', this.slot)
|
|
3427
3459
|
.addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
|
|
@@ -3706,6 +3738,10 @@ class ColumnsPanel extends Widget {
|
|
|
3706
3738
|
}
|
|
3707
3739
|
}
|
|
3708
3740
|
addNewColumn(attrs, index) {
|
|
3741
|
+
// Only allow adding columns in Full edit mode
|
|
3742
|
+
if (this.options.editMode !== ColumnsEditMode.Full) {
|
|
3743
|
+
return null;
|
|
3744
|
+
}
|
|
3709
3745
|
this.getContext().getModel();
|
|
3710
3746
|
const query = this.getQuery();
|
|
3711
3747
|
if (Array.isArray(attrs)) {
|
|
@@ -3904,6 +3940,10 @@ class ColumnsPanel extends Widget {
|
|
|
3904
3940
|
this.entitiesMenu.showMenu(menuOptions);
|
|
3905
3941
|
}
|
|
3906
3942
|
moveColumn(column, direction) {
|
|
3943
|
+
// Only allow moving columns in Full or FixedList edit mode
|
|
3944
|
+
if (this.options.editMode !== ColumnsEditMode.Full && this.options.editMode !== ColumnsEditMode.FixedList) {
|
|
3945
|
+
return;
|
|
3946
|
+
}
|
|
3907
3947
|
const query = this.getQuery();
|
|
3908
3948
|
const columns = query.getColumns();
|
|
3909
3949
|
const index = columns.indexOf(column);
|
|
@@ -3973,13 +4013,6 @@ class ColumnsPanel extends Widget {
|
|
|
3973
4013
|
}
|
|
3974
4014
|
}
|
|
3975
4015
|
|
|
3976
|
-
var ColumnsEditMode;
|
|
3977
|
-
(function (ColumnsEditMode) {
|
|
3978
|
-
ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
|
|
3979
|
-
ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
|
|
3980
|
-
ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
|
|
3981
|
-
})(ColumnsEditMode || (ColumnsEditMode = {}));
|
|
3982
|
-
|
|
3983
4016
|
class ColumnRendererCB {
|
|
3984
4017
|
constructor(panel, column, slot) {
|
|
3985
4018
|
this.functionMenu = null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@easyquery/ui",
|
|
3
|
-
"version": "7.4.0-
|
|
3
|
+
"version": "7.4.0-rc04",
|
|
4
4
|
"description": "EasyQuery.JS Community UI widgets",
|
|
5
5
|
"types": "./dist/types/public_api.d.ts",
|
|
6
6
|
"main": "./dist/easyquery.ui.cjs.js",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"bugs": "https://korzh.com/support",
|
|
31
31
|
"license": "LGPL-3.0",
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@easyquery/core": "^7.4.0-
|
|
33
|
+
"@easyquery/core": "^7.4.0-rc04"
|
|
34
34
|
},
|
|
35
35
|
"files": [
|
|
36
36
|
"dist",
|