Skip to content

Commit

Permalink
[TASK] Unify SVG toolbar generation
Browse files Browse the repository at this point in the history 
This change creates a default toolbar for SVG trees to filter, in order
to avoid duplicate code (which will be added via the SVG based trees
in the next feature again).

Resolves: #93886
Releases: master
Change-Id: Idb98bab80ca12fba4bafc5a4e4ac367a16bf6e87
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/68752
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack <benni@typo3.org>
  • Loading branch information
@bmack
bmack committed Apr 9, 2021
1 parent d12ca00 commit 2c0436e
Show file tree
Hide file tree
Showing 8 changed files with 97 additions and 141 deletions.
48 changes: 5 additions & 43 deletions Build/Sources/TypeScript/backend/Resources/Public/TypeScript/PageTree/PageTreeElement.ts
View file
Expand Up @@ -18,14 +18,11 @@ import {PageTree} from './PageTree';
import {TreeNode} from './../Tree/TreeNode';
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import DebounceEvent from 'TYPO3/CMS/Core/Event/DebounceEvent';
import Persistent from 'TYPO3/CMS/Backend/Storage/Persistent';
import ContextMenu = require('../ContextMenu');
import 'TYPO3/CMS/Backend/Element/IconElement';
import 'TYPO3/CMS/Backend/Input/Clearable';
import * as d3selection from 'd3-selection';
import {KeyTypesEnum as KeyTypes} from 'TYPO3/CMS/Backend/Enum/KeyTypes';
import {TreeNodeSelection, TreeWrapperSelection} from '../SvgTree';
import {TreeNodeSelection, TreeWrapperSelection, Toolbar} from '../SvgTree';
import {DragDrop, DragDropHandler, DraggablePositionEnum} from '../Tree/DragDrop';
import {D3DragEvent} from 'd3-drag';
import Modal = require('../Modal');
Expand All @@ -42,8 +39,6 @@ import Severity = require('../Severity');
*/

export const navigationComponentName: string = 'typo3-backend-navigation-component-pagetree';
const toolbarComponentName: string = 'typo3-backend-navigation-component-pagetree-toolbar';


/**
* PageTree which allows for drag+drop, and in-place editing, as well as
Expand Down Expand Up @@ -253,7 +248,7 @@ export class PageTreeNavigationComponent extends LitElement {
@property({type: String}) mountPointPath: string = null;

@query('.svg-tree-wrapper') tree: EditablePageTree;
@query(toolbarComponentName) toolbar: Toolbar;
@query('typo3-backend-navigation-component-pagetree-toolbar') toolbar: PageTreeToolbar;

private configuration: Configuration = null;

Expand Down Expand Up @@ -319,9 +314,7 @@ export class PageTreeNavigationComponent extends LitElement {

return html`
<div>
<div id="typo3-pagetree-toolbar" class="svg-toolbar">
<typo3-backend-navigation-component-pagetree-toolbar .tree="${this.tree}"></typo3-backend-navigation-component-pagetree-toolbar>
</div>
<typo3-backend-navigation-component-pagetree-toolbar id="typo3-pagetree-toolbar" class="svg-toolbar" .tree="${this.tree}"></typo3-backend-navigation-component-pagetree-toolbar>
<div id="typo3-pagetree-treeContainer" class="navigation-tree-container">
${this.renderMountPoint()}
<typo3-backend-navigation-component-pagetree-tree id="typo3-pagetree-tree" class="svg-tree-wrapper" .setup=${configuration} @svg-tree:initialized=${initialized}></typo3-backend-navigation-component-pagetree-tree>
Expand Down Expand Up @@ -452,15 +445,10 @@ export class PageTreeNavigationComponent extends LitElement {
}
}

@customElement(toolbarComponentName)
class Toolbar extends LitElement {
@customElement('typo3-backend-navigation-component-pagetree-toolbar')
class PageTreeToolbar extends Toolbar {
@property({type: EditablePageTree}) tree: EditablePageTree = null;

private settings = {
searchInput: '.search-input',
filterTimeout: 450
};

public initializeDragDrop(dragDrop: PageTreeDragDrop): void
{
if (this.tree?.settings?.doktypes?.length) {
Expand All @@ -475,28 +463,6 @@ class Toolbar extends LitElement {
}
}

// disable shadow dom for now
protected createRenderRoot(): HTMLElement | ShadowRoot {
return this;
}

protected firstUpdated(): void
{
const inputEl = this.querySelector(this.settings.searchInput) as HTMLInputElement;
if (inputEl) {
new DebounceEvent('input', (evt: InputEvent) => {
const el = evt.target as HTMLInputElement;
this.tree.filter(el.value.trim());
}, this.settings.filterTimeout).bindTo(inputEl);
inputEl.focus();
inputEl.clearable({
onClear: () => {
this.tree.resetFilter();
}
});
}
}

protected updated(changedProperties: PropertyValues): void {
changedProperties.forEach((oldValue, propName) => {
if (propName === 'tree' && this.tree !== null) {
Expand Down Expand Up @@ -534,10 +500,6 @@ class Toolbar extends LitElement {
`;
}

private refreshTree(): void {
this.tree.refreshOrFilterTree();
}

/**
* Register Drag and drop for new elements of toolbar
* Returns method from d3drag
Expand Down
67 changes: 61 additions & 6 deletions Build/Sources/TypeScript/backend/Resources/Public/TypeScript/SvgTree.ts
View file
Expand Up @@ -11,7 +11,7 @@
* The TYPO3 project - inspiring people to share!
*/

import {html, property, internalProperty, LitElement, TemplateResult} from 'lit-element';
import {html, property, internalProperty, LitElement, TemplateResult, customElement} from 'lit-element';
import {TreeNode} from './Tree/TreeNode';
import * as d3selection from 'd3-selection';
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
Expand All @@ -21,6 +21,10 @@ import Icons = require('./Icons');
import Tooltip = require('./Tooltip');
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import {MarkupIdentifiers} from './Enum/IconTypes';
import {lll} from 'TYPO3/CMS/Core/lit-helper';
import DebounceEvent from 'TYPO3/CMS/Core/Event/DebounceEvent';
import 'TYPO3/CMS/Backend/Element/IconElement';
import 'TYPO3/CMS/Backend/Input/Clearable';

export type TreeWrapperSelection<TBase extends d3selection.BaseType> = d3selection.Selection<TBase, any, any, any>;
export type TreeNodeSelection = d3selection.Selection<d3selection.BaseType, TreeNode, any, any>;
Expand Down Expand Up @@ -122,11 +126,8 @@ export class SvgTree extends LitElement {
protected searchTerm: string|null = null;
protected unfilteredNodes: string = '';

/**
* @todo: use generic labels
*/
protected networkErrorTitle: string = TYPO3.lang.pagetree_networkErrorTitle;
protected networkErrorMessage: string = TYPO3.lang.pagetree_networkErrorDesc;
protected networkErrorTitle: string = top.TYPO3.lang.tree_networkError;
protected networkErrorMessage: string = top.TYPO3.lang.tree_networkErrorDescription;

/**
* Initializes the tree component - created basic markup, loads and renders data
Expand Down Expand Up @@ -1181,3 +1182,57 @@ export class SvgTree extends LitElement {
}

}


/**
* A basic toolbar allowing to search / filter
*/
@customElement('typo3-backend-tree-toolbar')
export class Toolbar extends LitElement {
@property({type: SvgTree}) tree: SvgTree = null;
protected settings = {
searchInput: '.search-input',
filterTimeout: 450
};

protected createRenderRoot(): HTMLElement | ShadowRoot {
return this;
}

protected firstUpdated(): void
{
const inputEl = this.querySelector(this.settings.searchInput) as HTMLInputElement;
if (inputEl) {
new DebounceEvent('input', (evt: InputEvent) => {
const el = evt.target as HTMLInputElement;
this.tree.filter(el.value.trim());
}, this.settings.filterTimeout).bindTo(inputEl);
inputEl.focus();
inputEl.clearable({
onClear: () => {
this.tree.resetFilter();
}
});
}
}

protected render(): TemplateResult {
/* eslint-disable @typescript-eslint/indent */
return html`
<div class="tree-toolbar">
<div class="svg-toolbar__menu">
<div class="svg-toolbar__search">
<input type="text" class="form-control form-control-sm search-input" placeholder="${lll('tree.searchTermInfo')}">
</div>
<button class="btn btn-default btn-borderless btn-sm" @click="${() => this.refreshTree()}" data-tree-icon="actions-refresh" title="${lll('labels.refresh')}">
<typo3-backend-icon identifier="actions-refresh" size="small"></typo3-backend-icon>
</button>
</div>
</div>
`;
}

protected refreshTree(): void {
this.tree.refreshOrFilterTree();
}
}
3 changes: 0 additions & 3 deletions Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Tree/FileStorageTree.ts
View file
Expand Up @@ -20,9 +20,6 @@ import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
* A tree for folders / storages
*/
export class FileStorageTree extends SvgTree {
protected networkErrorTitle: string = TYPO3.lang.tree_networkError;
protected networkErrorMessage: string = TYPO3.lang.tree_networkErrorDescription;

public constructor() {
super();
this.settings.defaultProperties = {
Expand Down
64 changes: 4 additions & 60 deletions ...d/Sources/TypeScript/backend/Resources/Public/TypeScript/Tree/FileStorageTreeContainer.ts
View file
Expand Up @@ -11,10 +11,8 @@
* The TYPO3 project - inspiring people to share!
*/

import {html, customElement, property, query, LitElement, TemplateResult} from 'lit-element';
import {lll} from 'TYPO3/CMS/Core/lit-helper';
import {html, customElement, query, LitElement, TemplateResult} from 'lit-element';
import {FileStorageTree} from './FileStorageTree';
import DebounceEvent from 'TYPO3/CMS/Core/Event/DebounceEvent';
import 'TYPO3/CMS/Backend/Element/IconElement';
import {TreeNode} from 'TYPO3/CMS/Backend/Tree/TreeNode';
import Persistent from 'TYPO3/CMS/Backend/Storage/Persistent';
Expand All @@ -25,10 +23,9 @@ import Modal = require('../Modal');
import Severity = require('../Severity');
import Notification = require('../Notification');
import AjaxRequest from 'TYPO3/CMS/Core/Ajax/AjaxRequest';
import {TreeNodeSelection} from '../SvgTree';
import {TreeNodeSelection, Toolbar} from '../SvgTree';

export const navigationComponentName: string = 'typo3-backend-navigation-component-filestoragetree';
const toolbarComponentName: string = 'typo3-backend-navigation-component-filestoragetree-toolbar';

/**
* FileStorageTree which allows for drag+drop, and in-place editing, as well as
Expand Down Expand Up @@ -65,7 +62,7 @@ class EditableFileStorageTree extends FileStorageTree {
@customElement(navigationComponentName)
export class FileStorageTreeNavigationComponent extends LitElement {
@query('.svg-tree-wrapper') tree: EditableFileStorageTree;
@query(toolbarComponentName) toolbar: Toolbar;
@query('typo3-backend-tree-toolbar') toolbar: Toolbar;

public connectedCallback(): void {
super.connectedCallback();
Expand Down Expand Up @@ -97,7 +94,7 @@ export class FileStorageTreeNavigationComponent extends LitElement {
return html`
<div id="typo3-filestoragetree" class="svg-tree">
<div>
<typo3-backend-navigation-component-filestoragetree-toolbar .tree="${this.tree}" id="filestoragetree-toolbar" class="svg-toolbar"></typo3-backend-navigation-component-filestoragetree-toolbar>
<typo3-backend-tree-toolbar .tree="${this.tree}" id="filestoragetree-toolbar" class="svg-toolbar"></typo3-backend-tree-toolbar>
<div class="navigation-tree-container">
<typo3-backend-navigation-component-filestorage-tree id="typo3-filestoragetree-tree" class="svg-tree-wrapper" .setup=${treeSetup}></typo3-backend-navigation-component-filestorage-tree>
</div>
Expand Down Expand Up @@ -191,59 +188,6 @@ export class FileStorageTreeNavigationComponent extends LitElement {
}
}

/**
* Creates the toolbar above the tree
*/
@customElement(toolbarComponentName)
class Toolbar extends LitElement {
@property({type: FileStorageTree}) tree: FileStorageTree = null;

private settings = {
searchInput: '.search-input',
filterTimeout: 450
};

// disable shadow dom for now
protected createRenderRoot(): HTMLElement | ShadowRoot {
return this;
}

protected firstUpdated(): void
{
const inputEl = this.querySelector(this.settings.searchInput) as HTMLInputElement;
if (inputEl) {
new DebounceEvent('input', (evt: InputEvent) => {
const el = evt.target as HTMLInputElement;
this.tree.filter(el.value.trim());
}, this.settings.filterTimeout).bindTo(inputEl);
inputEl.focus();
inputEl.clearable({
onClear: () => {
this.tree.resetFilter();
}
});
}
}

protected render(): TemplateResult {
return html`
<div class="tree-toolbar">
<div class="svg-toolbar__menu">
<div class="svg-toolbar__search">
<input type="text" class="form-control form-control-sm search-input" placeholder="${lll('tree.searchTermInfo')}">
</div>
<button class="btn btn-default btn-borderless btn-sm" @click="${() => this.refreshTree()}" data-tree-icon="actions-refresh" title="${lll('labels.refresh')}">
<typo3-backend-icon identifier="actions-refresh" size="small"></typo3-backend-icon>
</button>
</div>
</div>
`;
}

private refreshTree(): void {
this.tree.refreshOrFilterTree();
}
}



Expand Down

0 comments on commit 2c0436e

Please sign in to comment.