Several fixes around channel configuration
This commit is contained in:
Mehdi Benadel
parent
5ef429e9f2
commit
f549142ae4
@ -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: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`
|
||||
<table class="table table-striped table-hover table-sm" id=${inputId}>
|
||||
${this._renderHeader()}
|
||||
<tbody>
|
||||
${repeat(this._rowsById, (rowById) => rowById._id, this._renderDataRow)}
|
||||
</tbody>
|
||||
${this._renderFooter()}
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table" id=${inputId}>
|
||||
${this._renderHeader()}
|
||||
<tbody>
|
||||
${repeat(this._rowsById, (rowById) => rowById._id, this._renderDataRow)}
|
||||
</tbody>
|
||||
${this._renderFooter()}
|
||||
</table>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
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`<thead>
|
||||
<tr>
|
||||
${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))}
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
@ -166,9 +168,8 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`
|
||||
|
||||
return html`<tr id=${inputId}>
|
||||
${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))}
|
||||
<td class="form-group"><button type="button" class="peertube-button-link orange-button dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td>
|
||||
</tr>`
|
||||
|
||||
@ -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<number | string>).join(propertySchema.separator ?? ','))
|
||||
(propertyValue as Array<number | string>)?.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<number | string>).join(propertySchema.separator ?? ','))
|
||||
(propertyValue as Array<number | string>)?.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`<datalist id=${inputId + '-datalist'}>
|
||||
${(propertySchema?.datalist ?? []).map((value) => html`<option value=${value} />`)}
|
||||
${(propertySchema.datalist) ? html`<datalist id=${inputId + '-datalist'}>
|
||||
${(propertySchema.datalist ?? []).map((value) => html`<option value=${value} />`)}
|
||||
</datalist>` : nothing}
|
||||
`
|
||||
}
|
||||
@ -328,11 +335,11 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
name=${inputName}
|
||||
class="form-control"
|
||||
id=${inputId}
|
||||
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)}
|
||||
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}
|
||||
></textarea>`
|
||||
}
|
||||
@ -343,7 +350,7 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
name=${inputName}
|
||||
class="form-check-input"
|
||||
id=${inputId}
|
||||
@input=${(event: InputEvent) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
|
||||
@change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
|
||||
.value=${propertyValue}
|
||||
?checked=${propertyValue}
|
||||
/>`
|
||||
@ -353,10 +360,10 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
return html`<select
|
||||
class="form-select"
|
||||
aria-label="Default select example"
|
||||
@change=${(event: InputEvent) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
|
||||
@change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
|
||||
>
|
||||
<option ?selected=${!propertyValue}>${propertySchema?.label ?? 'Choose your option'}</option>
|
||||
${Object.entries(propertySchema?.options ?? {})
|
||||
<option ?selected=${!propertyValue}>${propertySchema.label ?? 'Choose your option'}</option>
|
||||
${Object.entries(propertySchema.options ?? {})
|
||||
?.map(([value, name]) =>
|
||||
html`<option ?selected=${propertyValue === value} value=${value}>${name}</option>`
|
||||
)}
|
||||
@ -365,23 +372,25 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
|
||||
|
||||
_updatePropertyFromValue = (event: Event, propertyName: string, propertySchema: CellDataSchema, rowId: number) => {
|
||||
let target = event?.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
|
||||
let value = (target && target instanceof HTMLInputElement && target.type == "checkbox") ? !!(target?.checked) : target?.value
|
||||
let target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
|
||||
let value = (target) ? (target instanceof HTMLInputElement && target.type == "checkbox") ? !!(target.checked) : target.value : undefined
|
||||
|
||||
if (value !== undefined) {
|
||||
for (let rowById of this._rowsById) {
|
||||
if (rowById._id === rowId) {
|
||||
switch (rowById.row[propertyName].constructor) {
|
||||
switch (propertySchema.default?.constructor) {
|
||||
case Array:
|
||||
rowById.row[propertyName] = (value as string).split(propertySchema.separator ?? ',')
|
||||
break
|
||||
default:
|
||||
rowById.row[propertyName] = value
|
||||
break
|
||||
}
|
||||
|
||||
this.rows = this._rowsById.map(rowById => rowById.row)
|
||||
|
||||
this.requestUpdate('rows')
|
||||
this.requestUpdate('rowsById')
|
||||
this.requestUpdate('_rowsById')
|
||||
this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
|
||||
return
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user