From f549142ae40df6d65554dbb6f8b95990a1fd60a1 Mon Sep 17 00:00:00 2001 From: Mehdi Benadel Date: Thu, 23 May 2024 21:51:25 +0200 Subject: [PATCH] Several fixes around channel configuration --- .../elements/channel-configuration.ts | 30 +++--- .../common/lib/elements/dynamic-table-form.ts | 99 ++++++++++--------- 2 files changed, 66 insertions(+), 63 deletions(-) diff --git a/client/common/configuration/elements/channel-configuration.ts b/client/common/configuration/elements/channel-configuration.ts index ba9db30c..5f7706dd 100644 --- a/client/common/configuration/elements/channel-configuration.ts +++ b/client/common/configuration/elements/channel-configuration.ts @@ -117,56 +117,50 @@ export class ChannelConfigurationElement extends LivechatElement { forbiddenWords: { entries: { inputType: 'textarea', - default: ['helloqwesad'], + default: [''], separator: '\n', }, regex: { - inputType: 'text', - default: 'helloaxzca', + inputType: 'checkbox', + default: false, }, applyToModerators: { inputType: 'checkbox', - default: true + default: false }, label: { inputType: 'text', - default: 'helloasx' + default: '' }, reason: { inputType: 'text', - default: 'transphobia', - datalist: ['Racism', 'Sexism', 'Transphobia', 'Bigotry'] + default: '', + datalist: [] }, comments: { inputType: 'textarea', - default: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum.` + default: '' }, }, quotes: { messages: { inputType: 'textarea', - default: ['default message'], + default: [''], separator: '\n', }, delay: { inputType: 'number', - default: 100, + default: 10, } }, commands: { command: { inputType: 'text', - default: 'default command', + default: '', }, message: { inputType: 'text', - default: 'default message', + default: '', } } } diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts index 05435ba0..4f489d9c 100644 --- a/client/common/lib/elements/dynamic-table-form.ts +++ b/client/common/lib/elements/dynamic-table-form.ts @@ -84,7 +84,7 @@ export class DynamicTableFormElement extends LivechatElement { private _lastRowId = 1 @property({ attribute: false }) - private _colOrder: string[] = [] + private columnOrder: string[] = [] // fixes situations when list has been reinitialized or changed outside of CustomElement private _updateLastRowId = () => { @@ -95,9 +95,7 @@ export class DynamicTableFormElement extends LivechatElement { private _getDefaultRow = () : { [key: string]: DynamicTableAcceptedTypes } => { this._updateLastRowId() - return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])]) - } private _addRow = () => { @@ -105,15 +103,17 @@ export class DynamicTableFormElement extends LivechatElement { this._rowsById.push({_id:this._lastRowId++, row: newRow}) this.rows.push(newRow) this.requestUpdate('rows') + this.requestUpdate('_rowsById') this.dispatchEvent(new CustomEvent('update', { detail: this.rows })) } private _removeRow = (rowId: number) => { let rowToRemove = this._rowsById.filter(rowById => rowById._id == rowId).map(rowById => rowById.row)[0] - this._rowsById = this._rowsById.filter((rowById) => rowById._id !== rowId) + this._rowsById = this._rowsById.filter(rowById => rowById._id !== rowId) this.rows = this.rows.filter((row) => row !== rowToRemove) this.requestUpdate('rows') + this.requestUpdate('_rowsById') this.dispatchEvent(new CustomEvent('update', { detail: this.rows })) } @@ -130,26 +130,28 @@ export class DynamicTableFormElement extends LivechatElement { } } + if (this.columnOrder.length !== Object.keys(this.header).length) { + this.columnOrder = this.columnOrder.filter(key => Object.keys(this.header).includes(key)) + this.columnOrder.push(...Object.keys(this.header).filter(key => !this.columnOrder.includes(key))) + } + return html` - - ${this._renderHeader()} - - ${repeat(this._rowsById, (rowById) => rowById._id, this._renderDataRow)} - - ${this._renderFooter()} -
+
+ + ${this._renderHeader()} + + ${repeat(this._rowsById, (rowById) => rowById._id, this._renderDataRow)} + + ${this._renderFooter()} +
+
` } private _renderHeader = () => { - if (this._colOrder.length !== Object.keys(this.header).length) { - this._colOrder = this._colOrder.filter(key => Object.keys(this.header).includes(key)) - this._colOrder.push(...Object.keys(this.header).filter(key => !this._colOrder.includes(key))) - } - return html` - ${Object.entries(this.header).sort(([k1,_1], [k2,_2]) => this._colOrder.indexOf(k1) - this._colOrder.indexOf(k2)) + ${Object.entries(this.header).sort(([k1,_1], [k2,_2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2)) .map(([k,v]) => this._renderHeaderCell(v))} @@ -166,9 +168,8 @@ export class DynamicTableFormElement extends LivechatElement { const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}` return html` - ${Object.entries(rowData.row).filter(([k, v]) => k != '_id') - .sort(([k1,_1], [k2,_2]) => this._colOrder.indexOf(k1) - this._colOrder.indexOf(k2)) - .map((data) => this.renderDataCell(data, rowData._id))} + ${Object.keys(this.header).sort((k1, k2) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2)) + .map(k => this.renderDataCell([k, rowData.row[k] ?? this.schema[k].default], rowData._id))} ` @@ -184,7 +185,7 @@ export class DynamicTableFormElement extends LivechatElement { } renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number) => { - const [propertyName, propertyValue] = property + let [propertyName, propertyValue] = property const propertySchema = this.schema[propertyName] ?? {} let formElement @@ -192,7 +193,7 @@ export class DynamicTableFormElement extends LivechatElement { const inputName = `${this.formName.replace(/-/g, '_')}_${propertyName.toString().replace(/-/g, '_')}_${rowId}` const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-${propertyName.toString().replace(/_/g, '-')}-${rowId}` - switch (propertyValue.constructor) { + switch (propertySchema.default?.constructor) { case String: switch (propertySchema.inputType) { case undefined: @@ -285,12 +286,18 @@ export class DynamicTableFormElement extends LivechatElement { case 'time': case 'url': case 'week': + if (propertyValue.constructor !== Array) { + propertyValue = (propertyValue) ? [propertyValue as (number | string)] : [] + } formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, - (propertyValue as Array).join(propertySchema.separator ?? ',')) + (propertyValue as Array)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '') break case 'textarea': + if (propertyValue.constructor !== Array) { + propertyValue = (propertyValue) ? [propertyValue as (number | string)] : [] + } formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema, - (propertyValue as Array).join(propertySchema.separator ?? ',')) + (propertyValue as Array)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '') break } } @@ -309,16 +316,16 @@ export class DynamicTableFormElement extends LivechatElement { name=${inputName} class="form-control" id=${inputId} - list=${(propertySchema?.datalist) ? inputId + '-datalist' : nothing} - min=${ifDefined(propertySchema?.min)} - max=${ifDefined(propertySchema?.max)} - minlength=${ifDefined(propertySchema?.minlength)} - maxlength=${ifDefined(propertySchema?.maxlength)} - @input=${(event: InputEvent) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)} + list=${(propertySchema.datalist) ? inputId + '-datalist' : nothing} + min=${ifDefined(propertySchema.min)} + max=${ifDefined(propertySchema.max)} + minlength=${ifDefined(propertySchema.minlength)} + maxlength=${ifDefined(propertySchema.maxlength)} + @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)} .value=${propertyValue} /> - ${(propertySchema?.datalist) ? html` - ${(propertySchema?.datalist ?? []).map((value) => html`