mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-22 10:21:37 +00:00
Remove unused table-column-options-panel (#620)
Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
This commit is contained in:
Sunil Kumar Yadav
committed by
GitHub
GitHub
parent
ba3f4829fa
commit
c75618862e
@@ -1,78 +0,0 @@
|
||||
<div data-bind="visible: visible">
|
||||
<div
|
||||
class="contextual-pane-out"
|
||||
data-bind="
|
||||
click: cancel,
|
||||
clickBubble: false"
|
||||
></div>
|
||||
<div class="contextual-pane" id="tablecolumnoptionspane">
|
||||
<!-- Table Column Options form - Start -->
|
||||
<div class="contextual-pane-in">
|
||||
<form
|
||||
class="paneContentContainer"
|
||||
data-bind="
|
||||
submit: submit"
|
||||
>
|
||||
<!-- Table Column Options header - Start -->
|
||||
<div class="firstdivbg headerline">
|
||||
Column Options
|
||||
<div
|
||||
class="closeImg"
|
||||
role="button"
|
||||
aria-label="Close pane"
|
||||
tabindex="0"
|
||||
data-bind="
|
||||
click: cancel"
|
||||
>
|
||||
<img src="../../../../images/close-black.svg" title="Close" alt="Close" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Column Options header - End -->
|
||||
<div class="paneMainContent paneContentContainer">
|
||||
<div><span>Choose the columns and the order in which you want to display them in the table.</span></div>
|
||||
<div class="column-options">
|
||||
<div class="columns-border">
|
||||
<input class="all-select-check" type="checkbox" data-bind="checked: allSelected" />
|
||||
<label
|
||||
style="font-weight: 700"
|
||||
id="availableColumnsLabel"
|
||||
data-bind="text: availableColumnsLabel"
|
||||
></label>
|
||||
<span class="column-arrows-svg" data-bind="click: moveDown, enable: canMoveDown">
|
||||
<img class="column-opt-arrow-Img" src="/Down.svg" alt="Move down" />
|
||||
</span>
|
||||
<span class="column-arrows-svg" data-bind="click: moveUp, enable: canMoveUp">
|
||||
<img class="column-opt-arrow-Img" src="/Up.svg" alt="Move up" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<section>
|
||||
<ul data-bind="foreach: columnOptions" aria-labelledby="availableColumnsLabel" tabindex="0">
|
||||
<li
|
||||
class="list-item columns-border"
|
||||
data-bind="attr: { title: columnName }, click: $parent.handleClick "
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
for="columnName"
|
||||
data-bind="attr: { title: columnName, 'aria-selected': (selected()? 'true': 'false') }, checked: selected"
|
||||
/>
|
||||
<label id="columnName" data-bind="text: columnName"></label>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-label" data-bind="style: { visibility: anyColumnSelected() ? 'hidden': 'visible' }">
|
||||
<label class="warning" role="alert" aria-atomic="true" data-bind="text: noColumnSelectedWarning"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paneFooter">
|
||||
<div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Table Column Options form - End -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,195 +0,0 @@
|
||||
import * as ko from "knockout";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import * as DataTableOperations from "../../Tables/DataTable/DataTableOperations";
|
||||
import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
|
||||
import { ContextualPaneBase } from "../ContextualPaneBase";
|
||||
import _ from "underscore";
|
||||
|
||||
/**
|
||||
* Represents an item shown in the available columns.
|
||||
* columnName: the name of the column.
|
||||
* selected: indicate whether user wants to display the column in the table.
|
||||
* order: the order in the initial table. E.g.,
|
||||
* Order array of initial table: I = [0, 1, 2, 3, 4, 5, 6, 7, 8] <----> {prop0, prop1, prop2, prop3, prop4, prop5, prop6, prop7, prop8}
|
||||
* Order array of current table: C = [0, 1, 2, 6, 7, 3, 4, 5, 8] <----> {prop0, prop1, prop2, prop6, prop7, prop3, prop4, prop5, prop8}
|
||||
* if order = 6, then this column will be the one with column name prop6
|
||||
* index: index in the observable array, this used for selection and moving up/down.
|
||||
*/
|
||||
interface IColumnOption {
|
||||
columnName: ko.Observable<string>;
|
||||
selected: ko.Observable<boolean>;
|
||||
order: number;
|
||||
index: number;
|
||||
}
|
||||
|
||||
export interface IColumnSetting {
|
||||
columnNames: string[];
|
||||
visible?: boolean[];
|
||||
order?: number[];
|
||||
}
|
||||
|
||||
export class TableColumnOptionsPane extends ContextualPaneBase {
|
||||
public titleLabel: string = "Column Options";
|
||||
public instructionLabel: string = "Choose the columns and the order in which you want to display them in the table.";
|
||||
public availableColumnsLabel: string = "Available Columns";
|
||||
public moveUpLabel: string = "Move Up";
|
||||
public moveDownLabel: string = "Move Down";
|
||||
public noColumnSelectedWarning: string = "At least one column should be selected.";
|
||||
|
||||
public columnOptions: ko.ObservableArray<IColumnOption>;
|
||||
public allSelected: ko.Computed<boolean>;
|
||||
public anyColumnSelected: ko.Computed<boolean>;
|
||||
public canSelectAll: ko.Computed<boolean>;
|
||||
public canMoveUp: ko.Observable<boolean>;
|
||||
public canMoveDown: ko.Observable<boolean>;
|
||||
|
||||
public tableViewModel: TableEntityListViewModel;
|
||||
public parameters: IColumnSetting;
|
||||
|
||||
private selectedColumnOption: IColumnOption = null;
|
||||
|
||||
constructor(options: ViewModels.PaneOptions) {
|
||||
super(options);
|
||||
|
||||
this.columnOptions = ko.observableArray<IColumnOption>();
|
||||
this.anyColumnSelected = ko.computed<boolean>(() => {
|
||||
return _.some(this.columnOptions(), (value: IColumnOption) => {
|
||||
return value.selected();
|
||||
});
|
||||
});
|
||||
|
||||
this.canSelectAll = ko.computed<boolean>(() => {
|
||||
return _.some(this.columnOptions(), (value: IColumnOption) => {
|
||||
return !value.selected();
|
||||
});
|
||||
});
|
||||
|
||||
this.canMoveUp = ko.observable<boolean>(false);
|
||||
this.canMoveDown = ko.observable<boolean>(false);
|
||||
|
||||
this.allSelected = ko.pureComputed<boolean>({
|
||||
read: () => {
|
||||
return !this.canSelectAll();
|
||||
},
|
||||
write: (value) => {
|
||||
if (value) {
|
||||
this.selectAll();
|
||||
} else {
|
||||
this.clearAll();
|
||||
}
|
||||
},
|
||||
owner: this,
|
||||
});
|
||||
}
|
||||
|
||||
public submit() {
|
||||
var newColumnSetting = this.getParameters();
|
||||
DataTableOperations.reorderColumns(this.tableViewModel.table, newColumnSetting.order).then(() => {
|
||||
DataTableOperations.filterColumns(this.tableViewModel.table, newColumnSetting.visible);
|
||||
this.visible(false);
|
||||
});
|
||||
}
|
||||
public open() {
|
||||
this.setDisplayedColumns(this.parameters.columnNames, this.parameters.order, this.parameters.visible);
|
||||
super.open();
|
||||
}
|
||||
|
||||
private getParameters(): IColumnSetting {
|
||||
var newColumnSettings: IColumnSetting = <IColumnSetting>{
|
||||
columnNames: [],
|
||||
order: [],
|
||||
visible: [],
|
||||
};
|
||||
this.columnOptions().map((value: IColumnOption) => {
|
||||
newColumnSettings.columnNames.push(value.columnName());
|
||||
newColumnSettings.order.push(value.order);
|
||||
newColumnSettings.visible.push(value.selected());
|
||||
});
|
||||
return newColumnSettings;
|
||||
}
|
||||
|
||||
public setDisplayedColumns(columnNames: string[], order: number[], visible: boolean[]): void {
|
||||
var options: IColumnOption[] = order.map((value: number, index: number) => {
|
||||
var columnOption: IColumnOption = {
|
||||
columnName: ko.observable<string>(columnNames[index]),
|
||||
order: value,
|
||||
selected: ko.observable<boolean>(visible[index]),
|
||||
index: index,
|
||||
};
|
||||
return columnOption;
|
||||
});
|
||||
this.columnOptions(options);
|
||||
}
|
||||
|
||||
public selectAll(): void {
|
||||
const columnOptions = this.columnOptions && this.columnOptions();
|
||||
columnOptions &&
|
||||
columnOptions.forEach((value: IColumnOption) => {
|
||||
value.selected(true);
|
||||
});
|
||||
}
|
||||
|
||||
public clearAll(): void {
|
||||
const columnOptions = this.columnOptions && this.columnOptions();
|
||||
columnOptions &&
|
||||
columnOptions.forEach((value: IColumnOption) => {
|
||||
value.selected(false);
|
||||
});
|
||||
|
||||
if (columnOptions && columnOptions.length > 0) {
|
||||
columnOptions[0].selected(true);
|
||||
}
|
||||
}
|
||||
|
||||
public moveUp(): void {
|
||||
if (this.selectedColumnOption) {
|
||||
var currentSelectedIndex: number = this.selectedColumnOption.index;
|
||||
var swapTargetIndex: number = currentSelectedIndex - 1;
|
||||
//Debug.assert(currentSelectedIndex > 0);
|
||||
|
||||
this.swapColumnOption(this.columnOptions(), swapTargetIndex, currentSelectedIndex);
|
||||
this.selectTargetItem($(`div.column-options li:eq(${swapTargetIndex})`), this.columnOptions()[swapTargetIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
public moveDown(): void {
|
||||
if (this.selectedColumnOption) {
|
||||
var currentSelectedIndex: number = this.selectedColumnOption.index;
|
||||
var swapTargetIndex: number = currentSelectedIndex + 1;
|
||||
//Debug.assert(currentSelectedIndex < (this.columnOptions().length - 1));
|
||||
|
||||
this.swapColumnOption(this.columnOptions(), swapTargetIndex, currentSelectedIndex);
|
||||
this.selectTargetItem($(`div.column-options li:eq(${swapTargetIndex})`), this.columnOptions()[swapTargetIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
public handleClick = (data: IColumnOption, event: KeyboardEvent): boolean => {
|
||||
this.selectTargetItem($(event.currentTarget), data);
|
||||
return true;
|
||||
};
|
||||
|
||||
private selectTargetItem($target: JQuery, targetColumn: IColumnOption): void {
|
||||
this.selectedColumnOption = targetColumn;
|
||||
|
||||
this.canMoveUp(targetColumn.index !== 0);
|
||||
this.canMoveDown(targetColumn.index !== this.columnOptions().length - 1);
|
||||
|
||||
$(".list-item.selected").removeClass("selected");
|
||||
$target.addClass("selected");
|
||||
}
|
||||
|
||||
private swapColumnOption(options: IColumnOption[], indexA: number, indexB: number): void {
|
||||
var tempColumnName: string = options[indexA].columnName();
|
||||
var tempSelected: boolean = options[indexA].selected();
|
||||
var tempOrder: number = options[indexA].order;
|
||||
|
||||
options[indexA].columnName(options[indexB].columnName());
|
||||
options[indexB].columnName(tempColumnName);
|
||||
|
||||
options[indexA].selected(options[indexB].selected());
|
||||
options[indexB].selected(tempSelected);
|
||||
|
||||
options[indexA].order = options[indexB].order;
|
||||
options[indexB].order = tempOrder;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user