Skip to content

Commit

Permalink
[TASK] Add button for table wizard to set row/col count
Browse files Browse the repository at this point in the history 
It's not possible to add rows/colums once all
have been deleted manually.

This has been fixed by adding a new button
next to this "Small fields" button which allows
a user to set the needed amount of columns
and rows.

Resolves: #94802
Releases: master
Change-Id: I437d07c5d9176e9c962698882bbacef5eab19349
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70443
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
  • Loading branch information
@ochorocho @o-ba
ochorocho authored and o-ba committed Aug 26, 2021
1 parent db8a678 commit 6b15336
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 3 deletions.
102 changes: 101 additions & 1 deletion Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Element/TableWizardElement.ts
View file
Expand Up @@ -11,10 +11,13 @@
* The TYPO3 project - inspiring people to share!
*/

import {html, LitElement, TemplateResult} from 'lit';
import {html, LitElement, TemplateResult, render} from 'lit';
import {customElement, property} from 'lit/decorators';
import {lll} from 'TYPO3/CMS/Core/lit-helper';
import 'TYPO3/CMS/Backend/Element/IconElement';
import Severity = require('TYPO3/CMS/Backend/Severity');
import Modal = require('TYPO3/CMS/Backend/Modal');
import {SeverityEnum} from 'TYPO3/CMS/Backend/Enum/Severity';

/**
* Module: TYPO3/CMS/Backend/Element/TableWizardElement
Expand Down Expand Up @@ -165,6 +168,10 @@ export class TableWizardElement extends LitElement {
@click="${(evt: Event) => this.toggleType(evt)}">
<typo3-backend-icon identifier="${this.type === 'input' ? 'actions-chevron-expand' : 'actions-chevron-contract'}" size="small"></typo3-backend-icon>
</button>
<button class="btn btn-default" type="button" title="${lll('table_setCount')}"
@click="${(evt: Event) => this.showTableConfigurationModal(evt)}">
<span class="t3-icon fa fa-fw fa-plus"></span>
</button>
</span>
`;
}
Expand Down Expand Up @@ -234,4 +241,97 @@ export class TableWizardElement extends LitElement {
</span>
`;
}

private showTableConfigurationModal(evt: Event): void {
const lastColIndex: number = this.firstRow.length;
const lastRowIndex: number = this.table.length;
const initRowValue: number = lastRowIndex || 1;
const initTableValue: number = lastColIndex || 1;

Modal.advanced({
content: '', // Callback is used to fill in content
title: lll('table_setCountHeadline'),
severity: SeverityEnum.notice,
size: Modal.sizes.small,
buttons: [
{
text: lll('button.close') || 'Close',
active: true,
btnClass: 'btn-default',
name: 'cancel',
trigger: (): void => Modal.dismiss(),
},
{
text: lll('table_buttonApply') || 'Apply',
btnClass: 'btn-' + Severity.getCssClass(SeverityEnum.info),
name: 'apply',
trigger: (): void => {
const rows: HTMLInputElement = Modal.currentModal[0].querySelector('#t3js-expand-rows');
const cols: HTMLInputElement = Modal.currentModal[0].querySelector('#t3js-expand-cols');

if (rows === null || cols === null) {
return;
}

if (rows.checkValidity() && cols.checkValidity()) {
const modifyRows: number = Number(rows.value) - lastRowIndex;
const modifyCols: number = Number(cols.value) - lastColIndex;
this.setColAndRowCount(evt, modifyCols, modifyRows);
Modal.dismiss();
} else {
rows.reportValidity();
cols.reportValidity();
}
}
}
],
callback: (currentModal: HTMLCollection): void => {
render(
html`
<div class="form-group ">
<label>${lll('table_rowCount')}</label>
<input id="t3js-expand-rows" class="form-control" type="number" min="1" required value="${initRowValue}">
</div>
<div class="form-group ">
<label>${lll('table_colCount')}</label>
<input id="t3js-expand-cols" class="form-control" type="number" min="1" required value="${initTableValue}">
</div>
`,
currentModal[0].querySelector('.t3js-modal-body') as HTMLElement
);
}
});
}

/**
* Allow user to set a specific row/col count
*
* @param evt
* @param colCount
* @param rowCount
* @private
*/
private setColAndRowCount(evt: Event, colCount: number, rowCount: number) {
const lastRowIndex: number = this.table.length;

if (rowCount > 0) {
for (let count = 0; count < rowCount; count++) {
this.appendRow(evt, lastRowIndex);
}
} else {
for (let count = 0; count < Math.abs(rowCount); count++) {
this.removeRow(evt, this.table.length - 1);
}
}

if (colCount > 0) {
for (let count = 0; count < colCount; count++) {
this.appendColumn(evt, colCount);
}
} else {
for (let count = 0; count < Math.abs(colCount); count++) {
this.removeColumn(evt, this.firstRow.length - 1);
}
}
}
}
17 changes: 15 additions & 2 deletions typo3/sysext/backend/Resources/Public/JavaScript/Element/TableWizardElement.js
View file
Expand Up @@ -10,7 +10,7 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,l):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,l,a);else for(var i=t.length-1;i>=0;i--)(s=t[i])&&(o=(n<3?s(o):n>3?s(e,l,o):s(e,l))||o);return n>3&&o&&Object.defineProperty(e,l,o),o};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/lit-helper","TYPO3/CMS/Backend/Element/IconElement"],(function(t,e,l,a,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TableWizardElement=void 0;let n=class extends l.LitElement{constructor(){super(...arguments),this.type="textarea",this.table=[],this.appendRows=1,this.l10n={}}get firstRow(){return this.table[0]||[]}createRenderRoot(){return this}render(){return this.renderTemplate()}provideMinimalTable(){0!==this.table.length&&0!==this.firstRow.length||(this.table=[[""]])}modifyTable(t,e,l){const a=t.target;this.table[e][l]=a.value,this.requestUpdate()}toggleType(t){this.type="input"===this.type?"textarea":"input"}moveColumn(t,e,l){this.table=this.table.map(t=>{const a=t.splice(e,1);return t.splice(l,0,...a),t}),this.requestUpdate()}appendColumn(t,e){this.table=this.table.map(t=>(t.splice(e+1,0,""),t)),this.requestUpdate()}removeColumn(t,e){this.table=this.table.map(t=>(t.splice(e,1),t)),this.requestUpdate()}moveRow(t,e,l){const a=this.table.splice(e,1);this.table.splice(l,0,...a),this.requestUpdate()}appendRow(t,e){let l=this.firstRow.concat().fill(""),a=new Array(this.appendRows).fill(l);this.table.splice(e+1,0,...a),this.requestUpdate()}removeRow(t,e){this.table.splice(e,1),this.requestUpdate()}renderTemplate(){const t=Object.keys(this.firstRow).map(t=>parseInt(t,10)),e=t[t.length-1],a=this.table.length-1;return l.html`
var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,l):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,l,a);else for(var i=t.length-1;i>=0;i--)(s=t[i])&&(o=(n<3?s(o):n>3?s(e,l,o):s(e,l))||o);return n>3&&o&&Object.defineProperty(e,l,o),o};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/lit-helper","TYPO3/CMS/Backend/Severity","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Backend/Enum/Severity","TYPO3/CMS/Backend/Element/IconElement"],(function(t,e,l,a,s,n,o,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TableWizardElement=void 0;let r=class extends l.LitElement{constructor(){super(...arguments),this.type="textarea",this.table=[],this.appendRows=1,this.l10n={}}get firstRow(){return this.table[0]||[]}createRenderRoot(){return this}render(){return this.renderTemplate()}provideMinimalTable(){0!==this.table.length&&0!==this.firstRow.length||(this.table=[[""]])}modifyTable(t,e,l){const a=t.target;this.table[e][l]=a.value,this.requestUpdate()}toggleType(t){this.type="input"===this.type?"textarea":"input"}moveColumn(t,e,l){this.table=this.table.map(t=>{const a=t.splice(e,1);return t.splice(l,0,...a),t}),this.requestUpdate()}appendColumn(t,e){this.table=this.table.map(t=>(t.splice(e+1,0,""),t)),this.requestUpdate()}removeColumn(t,e){this.table=this.table.map(t=>(t.splice(e,1),t)),this.requestUpdate()}moveRow(t,e,l){const a=this.table.splice(e,1);this.table.splice(l,0,...a),this.requestUpdate()}appendRow(t,e){let l=this.firstRow.concat().fill(""),a=new Array(this.appendRows).fill(l);this.table.splice(e+1,0,...a),this.requestUpdate()}removeRow(t,e){this.table.splice(e,1),this.requestUpdate()}renderTemplate(){const t=Object.keys(this.firstRow).map(t=>parseInt(t,10)),e=t[t.length-1],a=this.table.length-1;return l.html`
<style>
:host, typo3-backend-table-wizard { display: inline-block; }
</style>
Expand Down Expand Up @@ -46,6 +46,10 @@ var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length
@click="${t=>this.toggleType(t)}">
<typo3-backend-icon identifier="${"input"===this.type?"actions-chevron-expand":"actions-chevron-contract"}" size="small"></typo3-backend-icon>
</button>
<button class="btn btn-default" type="button" title="${s.lll("table_setCount")}"
@click="${t=>this.showTableConfigurationModal(t)}">
<span class="t3-icon fa fa-fw fa-plus"></span>
</button>
</span>
`}renderColButtons(t,e){const a={title:0===t?s.lll("table_end"):s.lll("table_left"),class:0===t?"double-right":"left",target:0===t?e:t-1},n={title:t===e?s.lll("table_start"):s.lll("table_right"),class:t===e?"double-left":"right",target:t===e?0:t+1};return l.html`
<span class="btn-group">
Expand Down Expand Up @@ -85,4 +89,13 @@ var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length
<span class="t3-icon fa fa-fw fa-plus"></span>
</button>
</span>
`}};__decorate([a.property({type:String})],n.prototype,"type",void 0),__decorate([a.property({type:Array})],n.prototype,"table",void 0),__decorate([a.property({type:Number,attribute:"append-rows"})],n.prototype,"appendRows",void 0),__decorate([a.property({type:Object})],n.prototype,"l10n",void 0),n=__decorate([a.customElement("typo3-backend-table-wizard")],n),e.TableWizardElement=n}));
`}showTableConfigurationModal(t){const e=this.firstRow.length,a=this.table.length,r=a||1,c=e||1;o.advanced({content:"",title:s.lll("table_setCountHeadline"),severity:i.SeverityEnum.notice,size:o.sizes.small,buttons:[{text:s.lll("button.close")||"Close",active:!0,btnClass:"btn-default",name:"cancel",trigger:()=>o.dismiss()},{text:s.lll("table_buttonApply")||"Apply",btnClass:"btn-"+n.getCssClass(i.SeverityEnum.info),name:"apply",trigger:()=>{const l=o.currentModal[0].querySelector("#t3js-expand-rows"),s=o.currentModal[0].querySelector("#t3js-expand-cols");if(null!==l&&null!==s)if(l.checkValidity()&&s.checkValidity()){const n=Number(l.value)-a,i=Number(s.value)-e;this.setColAndRowCount(t,i,n),o.dismiss()}else l.reportValidity(),s.reportValidity()}}],callback:t=>{l.render(l.html`
<div class="form-group ">
<label>${s.lll("table_rowCount")}</label>
<input id="t3js-expand-rows" class="form-control" type="number" min="1" required value="${r}">
</div>
<div class="form-group ">
<label>${s.lll("table_colCount")}</label>
<input id="t3js-expand-cols" class="form-control" type="number" min="1" required value="${c}">
</div>
`,t[0].querySelector(".t3js-modal-body"))}})}setColAndRowCount(t,e,l){const a=this.table.length;if(l>0)for(let e=0;e<l;e++)this.appendRow(t,a);else for(let e=0;e<Math.abs(l);e++)this.removeRow(t,this.table.length-1);if(e>0)for(let l=0;l<e;l++)this.appendColumn(t,e);else for(let l=0;l<Math.abs(e);l++)this.removeColumn(t,this.firstRow.length-1)}};__decorate([a.property({type:String})],r.prototype,"type",void 0),__decorate([a.property({type:Array})],r.prototype,"table",void 0),__decorate([a.property({type:Number,attribute:"append-rows"})],r.prototype,"appendRows",void 0),__decorate([a.property({type:Object})],r.prototype,"l10n",void 0),r=__decorate([a.customElement("typo3-backend-table-wizard")],r),e.TableWizardElement=r}));
15 changes: 15 additions & 0 deletions typo3/sysext/core/Resources/Private/Language/locallang_wizards.xlf
View file
Expand Up @@ -81,6 +81,21 @@
<trans-unit id="table_noData" resname="table_noData">
<source>No table,field or uid given</source>
</trans-unit>
<trans-unit id="table_setCount" resname="table_setCount">
<source>Set row and column count</source>
</trans-unit>
<trans-unit id="table_colCount" resname="table_colCount">
<source>Column count</source>
</trans-unit>
<trans-unit id="table_rowCount" resname="table_rowCount">
<source>Row count</source>
</trans-unit>
<trans-unit id="table_setCountHeadline" resname="table_setCountHeadline">
<source>Change table size</source>
</trans-unit>
<trans-unit id="table_buttonApply" resname="table_buttonApply">
<source>Apply</source>
</trans-unit>
<trans-unit id="forms_title" resname="forms_title">
<source>Forms wizard</source>
</trans-unit>
Expand Down

0 comments on commit 6b15336

Please sign in to comment.