Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Remove some unused code, especially in ViewConfigTab

Browse Source 
Summary: Remove several unused methods in ViewConfigTab.js, and all of SummaryConfig.js.

Test Plan: this

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D3245
This commit is contained in:
Alex Hall 2022-02-03 19:23:53 +02:00
parent d8aacbe3b4
commit 64abfcb0ac
6 changed files with 4 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
app/client/components/SummaryConfig.js
View File

@ -1,129 +0,0 @@
const ko = require('knockout');
const dispose = require('../lib/dispose');
const dom = require('../lib/dom');
const kd = require('../lib/koDom');
const kf = require('../lib/koForm');
const koArray = require('../lib/koArray');
const multiselect = require('../lib/multiselect');
const modelUtil = require('../models/modelUtil');
const gutil = require('app/common/gutil');
/**
* Maintains the part of side-pane configuration responsible for summary tables. In particular, it
* allows the user to see and change group-by columns.
* @param {GristDoc} options.gristDoc: the GristDoc instance.
* @param {observable} options.section: the observable for the ViewSection RowModel being configured.
*/
function SummaryConfig(options) {
this.gristDoc = options.gristDoc;
this.section = options.section;
// Whether or not this is a summary section at all.
this.isSummarySection = this.autoDispose(ko.computed(() =>
Boolean(this.section().table().summarySourceTable())));
// Observable for the RowModel for the source table for this summary table.
this._summarySourceTable = this.autoDispose(ko.computed(() =>
this.section().table().summarySource()
));
// Observable for the array of colRefs for the source group-by columns. It may be saved to sync
// to the server, or reverted.
this._groupByCols = this.autoDispose(modelUtil.customComputed({
read: () => (
this.section().viewFields().all().map(f => f.column().summarySourceCol())
.concat(
// If there are hidden group-by columns, list those as well.
this.section().hiddenColumns().map(col => col.summarySourceCol())
)
.filter(scol => scol)
),
save: colRefs => this.gristDoc.docData.sendAction(
["UpdateSummaryViewSection", this.section().getRowId(), colRefs]
)
}));
// Observable for the same set of colRefs as in this._groupByCols, for faster lookups.
this._groupBySourceColSet = this.autoDispose(ko.computed(() => new Set(this._groupByCols())));
// KoArray for the RowModels for the source group-by columns.
this._groupByItems = this.autoDispose(koArray.syncedKoArray(this._groupByCols,
colRef => this.gristDoc.docModel.columns.getRowModel(colRef)));
}
dispose.makeDisposable(SummaryConfig);
/**
* Helper that implements the auto-complete search of columns available for group-by.
* Calls response() with a list of {label, value} objects, where 'label' is the colId, and 'value'
* is the rowId.
*/
SummaryConfig.prototype._groupBySearch = function(request, response) {
response(
this._summarySourceTable().columns().peek().filter(c => {
return gutil.startsWith(c.label().toLowerCase(), request.term.toLowerCase()) &&
!this._groupBySourceColSet().has(c.getRowId()) && !c.isHiddenCol();
})
.map(c => ({label: c.label(), value: c.getRowId()}))
);
};
/**
* Saves this summary table as an independent table.
*/
SummaryConfig.prototype._saveAsTable = function() {
return this.gristDoc.docData.sendAction(
["DetachSummaryViewSection", this.section().getRowId()]);
};
/**
* Build the DOM for summary table config.
*/
SummaryConfig.prototype.buildSummaryConfigDom = function() {
return dom('div',
dom.testId('SummaryConfig'),
dom('div.multiselect-hint', 'Select columns to group by.'),
multiselect(this._groupBySearch.bind(this), this._groupByItems, col => {
return dom('div.multiselect-label', kd.text(col.label));
}, {
// Shows up when no group-by columns are selected
hint: "Showing totals.",
add: item => this._groupByCols.modifyAssign(colRefs =>
colRefs.push(item.value)),
remove: col => this._groupByCols.modifyAssign(colRefs =>
gutil.arrayRemove(colRefs, col.getRowId())),
reorder: (col, nextCol) => this._groupByCols.modifyAssign(colRefs => {
gutil.arrayRemove(colRefs, col.getRowId());
gutil.arrayInsertBefore(colRefs, col.getRowId(), nextCol ? nextCol.getRowId() : null);
}),
}),
kf.row(
2, kf.buttonGroup(
kf.button(() => this._groupByCols.revert(),
kd.toggleClass('disabled', this._groupByCols.isSaved),
'Cancel'
),
kf.button(() => this._groupByCols.save(),
kd.toggleClass('disabled', this._groupByCols.isSaved),
'Apply'
)
),
1, kf.buttonGroup(
kf.button(() => this._saveAsTable(),
{ title: 'Save summary as a separate table' },
'Detach'
)
)
)
);
};
module.exports = SummaryConfig;

223
app/client/components/ViewConfigTab.js
View File

@ -5,7 +5,6 @@ var dom = require('../lib/dom');
var kd = require('../lib/koDom');
var kf = require('../lib/koForm');
var koArray = require('../lib/koArray');
var SummaryConfig = require('./SummaryConfig');
var commands = require('./commands');
var {CustomSectionElement} = require('../lib/CustomSectionElement');
const {ChartConfig} = require('./ChartView');
@ -16,7 +15,6 @@ const {updatePositions} = require('app/client/lib/sortUtil');
const {attachColumnFilterMenu} = require('app/client/ui/ColumnFilterMenu');
const {addFilterMenu} = require('app/client/ui/FilterBar');
const {cssIcon, cssRow} = require('app/client/ui/RightPanel');
const {VisibleFieldsConfig} = require('app/client/ui/VisibleFieldsConfig');
const {basicButton, primaryButton} = require('app/client/ui2018/buttons');
const {labeledLeftSquareCheckbox} = require("app/client/ui2018/checkbox");
const {colors} = require('app/client/ui2018/cssVars');
@ -70,139 +68,10 @@ function ViewConfigTab(options) {
return this.viewModel.activeSection().parentKey() === 'record';}, this));
this.isCustom = this.autoDispose(ko.computed(function() {
return this.viewModel.activeSection().parentKey() === 'custom';}, this));
this._summaryConfig = this.autoDispose(SummaryConfig.create({
gristDoc: this.gristDoc,
section: this.viewModel.activeSection
}));
if (!options.skipDomBuild) {
this.gristDoc.addOptionsTab(
'View', dom('span.glyphicon.glyphicon-credit-card'),
this.buildConfigDomObj(),
{ 'category': 'options', 'show': this.activeSectionData }
);
}
}
dispose.makeDisposable(ViewConfigTab);
function getLabelFunc(field) { return field ? field.label() : null; }
ViewConfigTab.prototype._buildSectionFieldsConfig = function() {
var self = this;
return kd.maybe(this.activeSectionData, function(sectionData) {
const visibleFieldsConfig = VisibleFieldsConfig.create(null, self.gristDoc, sectionData.section, false);
const [fieldsDraggable, hiddenFieldsDraggable] = visibleFieldsConfig.buildSectionFieldsConfigHelper({
visibleFields: { itemCreateFunc: getLabelFunc },
hiddenFields: {itemCreateFunc: getLabelFunc }
});
return dom('div',
dom.autoDispose(visibleFieldsConfig),
kf.collapsible(function(isCollapsed) {
return [
kf.collapserLabel(isCollapsed, 'Visible Fields', kd.toggleClass('view_config_field_group', true)),
dom.testId('ViewConfigTab_visibleFields'),
fieldsDraggable,
];
}, false),
kf.collapsible(function(isCollapsed) {
return [
kf.collapserLabel(isCollapsed, 'Hidden Fields', kd.toggleClass('view_config_field_group', true)),
dom.testId('ViewConfigTab_hiddenFields'),
hiddenFieldsDraggable,
];
}, false),
);
});
};
// Builds object with ViewConfigTab dom builder and settings for the sidepane.
ViewConfigTab.prototype.buildConfigDomObj = function() {
return [{
'buildDom': this._buildNameDom.bind(this),
'keywords': ['view', 'name', 'title']
}, {
'buildDom': this._buildSectionNameDom.bind(this),
'keywords': ['section', 'viewsection', 'name', 'title']
}, {
'buildDom': this._buildAdvancedSettingsDom.bind(this),
'keywords': ['table', 'demand', 'ondemand', 'big']
}, {
'header': true,
'label': 'Summarize',
'showObs': this._summaryConfig.isSummarySection,
'items': [{
'buildDom': () => this._summaryConfig.buildSummaryConfigDom(),
'keywords': ['section', 'summary', 'summarize', 'group', 'breakdown']
}]
}, {
'header': true,
'label': 'Sort',
'items': [{
'buildDom': this.buildSortDom.bind(this),
'keywords': ['section', 'sort', 'order']
}]
}, {
'header': true,
'label': 'Filter',
'items': [{
'buildDom': this._buildFilterDom.bind(this),
'keywords': ['section', 'filters']
}]
}, {
'header': true,
'label': 'Link Sections',
'items': [{
'buildDom': this._buildLinkDom.bind(this),
'keywords': ['section', 'view', 'linking', 'edit', 'autoscroll', 'autofilter']
}]
}, {
'header': true,
'label': 'Customize Detail View',
'showObs': this.isDetail,
'items': [{
'buildDom': this._buildDetailTypeDom.bind(this),
'keywords': ['section', 'detail']
}, {
'buildDom': this._buildThemeDom.bind(this),
'keywords': ['section', 'theme', 'appearance', 'detail']
}, {
'buildDom': this._buildLayoutDom.bind(this),
'keywords': ['section', 'layout', 'arrangement', 'rearrange']
}]
}, {
'header': true,
'label': 'Customize Grid View',
'showObs': this.isGrid,
'items': [{
'buildDom': this._buildGridStyleDom.bind(this),
'keywords': ['section', 'zebra', 'stripe', 'appearance', 'grid', 'gridlines', 'style', 'border']
}]
}, {
'header': true,
'label': 'Chart',
'showObs': this.isChart,
'items': [{
'buildDom': () => this._buildChartConfigDom()
}]
}, {
'header': true,
'label': 'Custom View',
'showObs': this.isCustom,
'items': this._buildCustomTypeItems(),
'keywords': ['section', 'custom']
}, {
'header': true,
'label': 'Column Display',
'items': [{
'buildDom': this._buildSectionFieldsConfig.bind(this),
'keywords': ['section', 'fields', 'hidden', 'hide', 'show', 'visible']
}]
}];
};
ViewConfigTab.prototype.buildSortDom = function() {
return grainjsDom.maybe(this.activeSectionData, (sectionData) => {
const section = sectionData.section;
@ -462,24 +331,6 @@ ViewConfigTab.prototype._saveSort = function(sortSpec) {
this.activeSectionData().section.activeSortSpec(sortSpec);
};
ViewConfigTab.prototype._buildNameDom = function() {
return kf.row(
1, dom('div.glyphicon.glyphicon-tasks.config_icon'),
4, kf.label('View'),
13, kf.text(this.viewModel.name, {}, dom.testId('ViewManager_viewNameInput'))
);
};
ViewConfigTab.prototype._buildSectionNameDom = function() {
return kd.maybe(this.activeSectionData, function(sectionData) {
return kf.row(
1, dom('div.glyphicon.glyphicon-credit-card.config_icon'),
4, kf.label('Section'),
13, kf.text(sectionData.section.titleDef, {}, dom.testId('ViewConfigTab_sectionNameInput'))
);
});
};
ViewConfigTab.prototype._makeOnDemand = function(table) {
// After saving the changed setting, force the reload of the document.
const onConfirm = () => {
@ -540,21 +391,6 @@ ViewConfigTab.prototype._buildAdvancedSettingsDom = function() {
});
};
ViewConfigTab.prototype._buildDetailTypeDom = function() {
return kd.maybe(this.activeSectionData, (sectionData) => {
var section = sectionData.section;
if (this.isDetail()) {
return kf.row(
1, kf.label('Type'),
1, kf.buttonSelect(section.parentKey,
kf.optionButton('detail', 'List', dom.testId('ViewConfigTab_card')),
kf.optionButton('single', 'Single', dom.testId('ViewConfigTab_detail'))
)
);
}
});
};
ViewConfigTab.prototype._buildFilterDom = function() {
return grainjsDom.maybe(this.activeSectionData, (sectionData) => {
const section = sectionData.section;
@ -659,31 +495,6 @@ ViewConfigTab.prototype._buildThemeDom = function() {
});
};
ViewConfigTab.prototype._buildGridStyleDom = function() {
return kd.maybe(this.activeSectionData, (sectionData) => {
var section = sectionData.section;
return dom('div',
kf.row(
15, kf.label('Horizontal Gridlines'),
2, kf.checkbox(section.optionsObj.prop('horizontalGridlines'),
dom.testId('ViewConfigTab_hGridButton'))
),
kf.row(
15, kf.label('Vertical Gridlines'),
2, kf.checkbox(section.optionsObj.prop('verticalGridlines'),
dom.testId('ViewConfigTab_vGridButton'))
),
kf.row(
15, kf.label('Zebra Stripes'),
2, kf.checkbox(section.optionsObj.prop('zebraStripes'),
dom.testId('ViewConfigTab_zebraStripeButton'))
),
dom.testId('ViewConfigTab_gridOptions')
);
});
};
ViewConfigTab.prototype._buildChartConfigDom = function() {
return grainjsDom.maybe(this.viewModel.activeSection, (section) => grainjsDom.create(ChartConfig, this.gristDoc, section));
};
@ -706,40 +517,6 @@ ViewConfigTab.prototype._buildLayoutDom = function() {
});
};
ViewConfigTab.prototype._buildLinkDom = function() {
var linkSpecChanged = ko.computed(() =>
!this.viewModel.viewSections().all().every(vs => vs.isActiveLinkSaved()));
return dom('div',
dom.autoDispose(linkSpecChanged),
kf.buttonGroup(kf.checkButton(this.viewModel.isLinking,
dom('span', 'Edit Links', dom.testId('viewConfigTab_link')))),
kd.maybe(this.activeSectionData, (sectionData) => {
const section = sectionData.section;
// This section option affects section linking: it tells a link-target section to show rows
// matching any of the rows in link-source section, not only the current cursor row.
const filterByAllShown = section.optionsObj.prop('filterByAllShown');
return kf.row(
15, kf.label('Filter by all shown'),
2, kf.checkbox(filterByAllShown, dom.testId('ViewConfigTab_filterByAll'))
);
}),
kd.maybe(linkSpecChanged, () =>
kf.prompt(
kf.liteButtonGroup(
kf.liteButton(() => {
commands.allCommands.saveLinks.run();
this.viewModel.isLinking(false);
}, dom('span.config_icon.left_icon.glyphicon.glyphicon-save'), 'Save'),
kf.liteButton(() => commands.allCommands.revertLinks.run(),
dom('span.config_icon.left_icon.glyphicon.glyphicon-refresh'), 'Reset'
)
)
)
)
);
};
/**
* Builds the three items for configuring a `Custom View`:
* 1) Mode picker: let user choose between 'url' and 'plugin' mode

11
app/client/declarations.d.ts vendored
View File

@ -98,7 +98,7 @@ declare module "app/client/components/RefSelect" {
}
declare module "app/client/components/ViewConfigTab" {
import {GristDoc, TabContent} from 'app/client/components/GristDoc';
import {GristDoc} from 'app/client/components/GristDoc';
import {Disposable} from 'app/client/lib/dispose';
import {KoArray} from "app/client/lib/koArray";
import {ColumnRec, ViewRec, ViewSectionRec} from "app/client/models/DocModel";
@ -112,21 +112,14 @@ declare module "app/client/components/ViewConfigTab" {
}
class ViewConfigTab extends Disposable {
constructor(options: {gristDoc: GristDoc, viewModel: ViewRec, skipDomBuild?: boolean});
public buildConfigDomObj(): TabContent[];
constructor(options: {gristDoc: GristDoc, viewModel: ViewRec});
public buildSortDom(): DomContents;
// TODO: these should be made private or renamed.
public _buildSectionFieldsConfig(): DomArg;
public _buildNameDom(): DomArg;
public _buildSectionNameDom(): DomArg;
public _buildAdvancedSettingsDom(): DomArg;
public _buildDetailTypeDom(): DomArg;
public _buildFilterDom(): DomArg;
public _buildThemeDom(): DomArg;
public _buildGridStyleDom(): DomArg;
public _buildChartConfigDom(): DomContents;
public _buildLayoutDom(): DomArg;
public _buildLinkDom(): DomArg;
public _buildCustomTypeItems(): DomArg;
}
export = ViewConfigTab;

4
app/client/models/entities/ViewRec.ts
View File

@ -19,8 +19,6 @@ export interface ViewRec extends IRowModel<"_grist_Views"> {
// If the active section is removed, set the next active section to be the default.
_isActiveSectionGone: ko.Computed<boolean>;
isLinking: ko.Observable<boolean>;
}
export function createViewRec(this: ViewRec, docModel: DocModel): void {
@ -46,6 +44,4 @@ export function createViewRec(this: ViewRec, docModel: DocModel): void {
this.activeSectionId(0);
}
}));
this.isLinking = ko.observable(false);
}

2
app/client/models/entities/ViewSectionRec.ts
View File

@ -418,7 +418,7 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
this.hasFocus = ko.pureComputed({
// Read may occur for recently disposed sections, must check condition first.
read: () => !this.isDisposed() && this.view().activeSectionId() === this.id() && !this.view().isLinking(),
read: () => !this.isDisposed() && this.view().activeSectionId() === this.id(),
write: (val) => { if (val) { this.view().activeSectionId(this.id()); } }
});

2
app/client/ui/RightPanel.ts
View File

@ -282,7 +282,7 @@ export class RightPanel extends Disposable {
.then(ViewPane => {
if (owner.isDisposed()) { return; }
viewConfigTab.set(owner.autoDispose(
ViewPane.ViewConfigTab.create({gristDoc, viewModel: gristDoc.viewModel, skipDomBuild: true})));
ViewPane.ViewConfigTab.create({gristDoc, viewModel: gristDoc.viewModel})));
})
.catch(reportError);
return viewConfigTab;