From 33c8c83d203a8d102830c87c67e7811634c89f45 Mon Sep 17 00:00:00 2001 From: jahn Date: Tue, 1 Sep 2020 10:04:56 -0700 Subject: [PATCH 1/2] Fix ordering issue of snippets after deleting while filtering or searching --- src/CodeSnippetDisplay.tsx | 4 ++++ src/CodeSnippetWidget.tsx | 1 + src/CodeSnippetWidgetModel.ts | 7 +++++++ 3 files changed, 12 insertions(+) diff --git a/src/CodeSnippetDisplay.tsx b/src/CodeSnippetDisplay.tsx index 567e7cc..41142a9 100644 --- a/src/CodeSnippetDisplay.tsx +++ b/src/CodeSnippetDisplay.tsx @@ -1166,9 +1166,13 @@ export class CodeSnippetDisplay extends React.Component< editor.dispose(); } + console.log('delete snippet'); + console.log(codeSnippet.id); + console.log(this.props._codeSnippetWidgetModel._snippets); // deleting snippets when there is one snippet active contentsService.delete('snippets/' + codeSnippet.name + '.json'); this.props._codeSnippetWidgetModel.deleteSnippet(codeSnippet.id); + this.props._codeSnippetWidgetModel.reorderSnippet(); this.props._codeSnippetWidgetModel.updateSnippetContents(); // active tags after delete diff --git a/src/CodeSnippetWidget.tsx b/src/CodeSnippetWidget.tsx index 2938aaa..40df3ed 100644 --- a/src/CodeSnippetWidget.tsx +++ b/src/CodeSnippetWidget.tsx @@ -331,6 +331,7 @@ export class CodeSnippetWidget extends ReactWidget { idx = parseInt(snippet.id); } + console.log(this._codeSnippetWidgetModel.snippets); /** * moving snippets inside the snippet panel */ diff --git a/src/CodeSnippetWidgetModel.ts b/src/CodeSnippetWidgetModel.ts index 8c53e73..d4dc7e7 100644 --- a/src/CodeSnippetWidgetModel.ts +++ b/src/CodeSnippetWidgetModel.ts @@ -26,6 +26,13 @@ export class CodeSnippetWidgetModel implements ICodeSnippetWidgetModel { this._snippets = snippetList; } + reorderSnippet(): void { + this.sortSnippets(); + for (let i = 0; i < this._snippets.length; i++) { + this._snippets[i].id = i; + } + } + addSnippet(newSnippet: ICodeSnippet, index: number): void { // append a new snippet created from input form to the end if (newSnippet.id === -1) { From 756a068afe248eca214d0c4650634d28ac868dd6 Mon Sep 17 00:00:00 2001 From: jahn Date: Tue, 1 Sep 2020 11:13:57 -0700 Subject: [PATCH 2/2] Fix the issue when creating a new snippet while filtering/searching --- src/CodeSnippetDisplay.tsx | 3 -- src/CodeSnippetWidget.tsx | 4 +- src/FilterTools.tsx | 77 ++++++++++++++++++++------------------ 3 files changed, 43 insertions(+), 41 deletions(-) diff --git a/src/CodeSnippetDisplay.tsx b/src/CodeSnippetDisplay.tsx index 41142a9..006ae82 100644 --- a/src/CodeSnippetDisplay.tsx +++ b/src/CodeSnippetDisplay.tsx @@ -1166,9 +1166,6 @@ export class CodeSnippetDisplay extends React.Component< editor.dispose(); } - console.log('delete snippet'); - console.log(codeSnippet.id); - console.log(this.props._codeSnippetWidgetModel._snippets); // deleting snippets when there is one snippet active contentsService.delete('snippets/' + codeSnippet.name + '.json'); this.props._codeSnippetWidgetModel.deleteSnippet(codeSnippet.id); diff --git a/src/CodeSnippetWidget.tsx b/src/CodeSnippetWidget.tsx index 40df3ed..c819a12 100644 --- a/src/CodeSnippetWidget.tsx +++ b/src/CodeSnippetWidget.tsx @@ -331,7 +331,6 @@ export class CodeSnippetWidget extends ReactWidget { idx = parseInt(snippet.id); } - console.log(this._codeSnippetWidgetModel.snippets); /** * moving snippets inside the snippet panel */ @@ -359,6 +358,9 @@ export class CodeSnippetWidget extends ReactWidget { event.dropAction = 'copy'; CodeSnippetInputDialog(this, data, idx); } + + // Reorder snippet just to make sure id's are in order. + this._codeSnippetWidgetModel.reorderSnippet(); } // move code snippet within code snippet explorer diff --git a/src/FilterTools.tsx b/src/FilterTools.tsx index 3fb9dd6..1655f79 100644 --- a/src/FilterTools.tsx +++ b/src/FilterTools.tsx @@ -35,21 +35,26 @@ export class FilterTools extends React.Component< this.createFilterBox = this.createFilterBox.bind(this); this.renderFilterOption = this.renderFilterOption.bind(this); this.renderTags = this.renderTags.bind(this); - this.renderTag = this.renderTag.bind(this); + this.renderAppliedTag = this.renderAppliedTag.bind(this); + this.renderUnappliedTag = this.renderUnappliedTag.bind(this); this.handleClick = this.handleClick.bind(this); this.filterSnippets = this.filterSnippets.bind(this); } componentDidMount() { - this.setState({ show: false, selectedTags: [], searchValue: '' }); + this.setState({ + show: false, + selectedTags: [], + searchValue: '' + }); } componentDidUpdate(prevProps: IFilterSnippetProps) { if (prevProps !== this.props) { this.setState(state => ({ - selectedTags: state.selectedTags.filter(tag => - this.props.tags.includes(tag) - ) + selectedTags: state.selectedTags + .filter(tag => this.props.tags.includes(tag)) + .sort() })); } } @@ -66,14 +71,39 @@ export class FilterTools extends React.Component< renderTags(): JSX.Element { return (
- {this.props.tags.map((tag: string, index: number) => - this.renderTag(tag, index.toString()) - )} + {this.props.tags.sort().map((tag: string, index: number) => { + if (this.state.selectedTags.includes(tag)) { + return this.renderAppliedTag(tag, index.toString()); + } else { + return this.renderUnappliedTag(tag, index.toString()); + } + })} +
+ ); + } + + renderAppliedTag(tag: string, index: string): JSX.Element { + return ( +
+ +
); } - renderTag(tag: string, index: string): JSX.Element { + renderUnappliedTag(tag: string, index: string): JSX.Element { return (
({ selectedTags: this.handleClickHelper( - target, parent, state.selectedTags, clickedTag @@ -104,47 +133,21 @@ export class FilterTools extends React.Component< } handleClickHelper( - target: HTMLElement, parent: HTMLElement, currentTags: string[], clickedTag: string ): string[] { if (parent.classList.contains('unapplied-tag')) { parent.classList.replace('unapplied-tag', 'applied-tag'); - const iconContainer = checkIcon.element({ - className: FILTER_CHECK, - tag: 'span', - elementPosition: 'center', - height: '18px', - width: '18px', - marginLeft: '5px', - marginRight: '-3px' - }); - const color = getComputedStyle(document.documentElement).getPropertyValue( - '--jp-ui-font-color1' - ); - target.style.color = color; - if (parent.children.length === 1) { - parent.appendChild(iconContainer); - } currentTags.splice(-1, 0, clickedTag); } else if (parent.classList.contains('applied-tag')) { parent.classList.replace('applied-tag', 'unapplied-tag'); - const color = getComputedStyle(document.documentElement).getPropertyValue( - '--jp-ui-font-color2' - ); - target.style.color = color; - - if (parent.children.length !== 1) { - // remove check icon - parent.removeChild(parent.children.item(1)); - } const idx = currentTags.indexOf(clickedTag); currentTags.splice(idx, 1); } - return currentTags; + return currentTags.sort(); } handleSearch = (event: React.ChangeEvent): void => {