matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Several fixes around channel configuration

Browse Source
This commit is contained in:
Mehdi Benadel 2024-05-23 21:51:25 +02:00
parent 5ef429e9f2
commit f549142ae4
2 changed files with 66 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/common/configuration/elements/channel-configuration.ts
View File

@ -117,56 +117,50 @@ export class ChannelConfigurationElement extends LivechatElement {
forbiddenWords: { forbiddenWords: {
entries: { entries: {
inputType: 'textarea', inputType: 'textarea',
default: ['helloqwesad'], default: [''],
separator: '\n', separator: '\n',
}, },
regex: { regex: {
inputType: 'text', inputType: 'checkbox',
default: 'helloaxzca', default: false,
}, },
applyToModerators: { applyToModerators: {
inputType: 'checkbox', inputType: 'checkbox',
default: true default: false
}, },
label: { label: {
inputType: 'text', inputType: 'text',
default: 'helloasx' default: ''
}, },
reason: { reason: {
inputType: 'text', inputType: 'text',
default: 'transphobia', default: '',
datalist: ['Racism', 'Sexism', 'Transphobia', 'Bigotry'] datalist: []
}, },
comments: { comments: {
inputType: 'textarea', inputType: 'textarea',
default: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, default: ''
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.`
}, },
}, },
quotes: { quotes: {
messages: { messages: {
inputType: 'textarea', inputType: 'textarea',
default: ['default message'], default: [''],
separator: '\n', separator: '\n',
}, },
delay: { delay: {
inputType: 'number', inputType: 'number',
default: 100, default: 10,
} }
}, },
commands: { commands: {
command: { command: {
inputType: 'text', inputType: 'text',
default: 'default command', default: '',
}, },
message: { message: {
inputType: 'text', inputType: 'text',
default: 'default message', default: '',
} }
} }
} }

87
client/common/lib/elements/dynamic-table-form.ts
View File

@ -84,7 +84,7 @@ export class DynamicTableFormElement extends LivechatElement {
private _lastRowId = 1 private _lastRowId = 1
@property({ attribute: false }) @property({ attribute: false })
private _colOrder: string[] = [] private columnOrder: string[] = []
// fixes situations when list has been reinitialized or changed outside of CustomElement // fixes situations when list has been reinitialized or changed outside of CustomElement
private _updateLastRowId = () => { private _updateLastRowId = () => {
@ -95,9 +95,7 @@ export class DynamicTableFormElement extends LivechatElement {
private _getDefaultRow = () : { [key: string]: DynamicTableAcceptedTypes } => { private _getDefaultRow = () : { [key: string]: DynamicTableAcceptedTypes } => {
this._updateLastRowId() this._updateLastRowId()
return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])]) return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])])
} }
private _addRow = () => { private _addRow = () => {
@ -105,15 +103,17 @@ export class DynamicTableFormElement extends LivechatElement {
this._rowsById.push({_id:this._lastRowId++, row: newRow}) this._rowsById.push({_id:this._lastRowId++, row: newRow})
this.rows.push(newRow) this.rows.push(newRow)
this.requestUpdate('rows') this.requestUpdate('rows')
this.requestUpdate('_rowsById')
this.dispatchEvent(new CustomEvent('update', { detail: this.rows })) this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
} }
private _removeRow = (rowId: number) => { private _removeRow = (rowId: number) => {
let rowToRemove = this._rowsById.filter(rowById => rowById._id == rowId).map(rowById => rowById.row)[0] 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.rows = this.rows.filter((row) => row !== rowToRemove)
this.requestUpdate('rows') this.requestUpdate('rows')
this.requestUpdate('_rowsById')
this.dispatchEvent(new CustomEvent('update', { detail: this.rows })) 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` return html`
<table class="table table-striped table-hover table-sm" id=${inputId}> <div class="table-responsive">
<table class="table" id=${inputId}>
${this._renderHeader()} ${this._renderHeader()}
<tbody> <tbody>
${repeat(this._rowsById, (rowById) => rowById._id, this._renderDataRow)} ${repeat(this._rowsById, (rowById) => rowById._id, this._renderDataRow)}
</tbody> </tbody>
${this._renderFooter()} ${this._renderFooter()}
</table> </table>
</div>
` `
} }
private _renderHeader = () => { 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> return html`<thead>
<tr> <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))} .map(([k,v]) => this._renderHeaderCell(v))}
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
@ -166,9 +168,8 @@ export class DynamicTableFormElement extends LivechatElement {
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}` const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`
return html`<tr id=${inputId}> return html`<tr id=${inputId}>
${Object.entries(rowData.row).filter(([k, v]) => k != '_id') ${Object.keys(this.header).sort((k1, k2) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
.sort(([k1,_1], [k2,_2]) => this._colOrder.indexOf(k1) - this._colOrder.indexOf(k2)) .map(k => this.renderDataCell([k, rowData.row[k] ?? this.schema[k].default], rowData._id))}
.map((data) => this.renderDataCell(data, 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> <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>` </tr>`
@ -184,7 +185,7 @@ export class DynamicTableFormElement extends LivechatElement {
} }
renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number) => { renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number) => {
const [propertyName, propertyValue] = property let [propertyName, propertyValue] = property
const propertySchema = this.schema[propertyName] ?? {} const propertySchema = this.schema[propertyName] ?? {}
let formElement let formElement
@ -192,7 +193,7 @@ export class DynamicTableFormElement extends LivechatElement {
const inputName = `${this.formName.replace(/-/g, '_')}_${propertyName.toString().replace(/-/g, '_')}_${rowId}` const inputName = `${this.formName.replace(/-/g, '_')}_${propertyName.toString().replace(/-/g, '_')}_${rowId}`
const inputId = `peertube-livechat-${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: case String:
switch (propertySchema.inputType) { switch (propertySchema.inputType) {
case undefined: case undefined:
@ -285,12 +286,18 @@ export class DynamicTableFormElement extends LivechatElement {
case 'time': case 'time':
case 'url': case 'url':
case 'week': case 'week':
if (propertyValue.constructor !== Array) {
propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
}
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, 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 break
case 'textarea': case 'textarea':
if (propertyValue.constructor !== Array) {
propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
}
formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema, 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 break
} }
} }
@ -309,16 +316,16 @@ export class DynamicTableFormElement extends LivechatElement {
name=${inputName} name=${inputName}
class="form-control" class="form-control"
id=${inputId} id=${inputId}
list=${(propertySchema?.datalist) ? inputId + '-datalist' : nothing} list=${(propertySchema.datalist) ? inputId + '-datalist' : nothing}
min=${ifDefined(propertySchema?.min)} min=${ifDefined(propertySchema.min)}
max=${ifDefined(propertySchema?.max)} max=${ifDefined(propertySchema.max)}
minlength=${ifDefined(propertySchema?.minlength)} minlength=${ifDefined(propertySchema.minlength)}
maxlength=${ifDefined(propertySchema?.maxlength)} maxlength=${ifDefined(propertySchema.maxlength)}
@input=${(event: InputEvent) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)} @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
.value=${propertyValue} .value=${propertyValue}
/> />
${(propertySchema?.datalist) ? html`<datalist id=${inputId + '-datalist'}> ${(propertySchema.datalist) ? html`<datalist id=${inputId + '-datalist'}>
${(propertySchema?.datalist ?? []).map((value) => html`<option value=${value} />`)} ${(propertySchema.datalist ?? []).map((value) => html`<option value=${value} />`)}
</datalist>` : nothing} </datalist>` : nothing}
` `
} }
@ -328,11 +335,11 @@ export class DynamicTableFormElement extends LivechatElement {
name=${inputName} name=${inputName}
class="form-control" class="form-control"
id=${inputId} id=${inputId}
min=${ifDefined(propertySchema?.min)} min=${ifDefined(propertySchema.min)}
max=${ifDefined(propertySchema?.max)} max=${ifDefined(propertySchema.max)}
minlength=${ifDefined(propertySchema?.minlength)} minlength=${ifDefined(propertySchema.minlength)}
maxlength=${ifDefined(propertySchema?.maxlength)} maxlength=${ifDefined(propertySchema.maxlength)}
@input=${(event: InputEvent) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)} @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
.value=${propertyValue} .value=${propertyValue}
></textarea>` ></textarea>`
} }
@ -343,7 +350,7 @@ export class DynamicTableFormElement extends LivechatElement {
name=${inputName} name=${inputName}
class="form-check-input" class="form-check-input"
id=${inputId} id=${inputId}
@input=${(event: InputEvent) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)} @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
.value=${propertyValue} .value=${propertyValue}
?checked=${propertyValue} ?checked=${propertyValue}
/>` />`
@ -353,10 +360,10 @@ export class DynamicTableFormElement extends LivechatElement {
return html`<select return html`<select
class="form-select" class="form-select"
aria-label="Default select example" 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> <option ?selected=${!propertyValue}>${propertySchema.label ?? 'Choose your option'}</option>
${Object.entries(propertySchema?.options ?? {}) ${Object.entries(propertySchema.options ?? {})
?.map(([value, name]) => ?.map(([value, name]) =>
html`<option ?selected=${propertyValue === value} value=${value}>${name}</option>` 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) => { _updatePropertyFromValue = (event: Event, propertyName: string, propertySchema: CellDataSchema, rowId: number) => {
let target = event?.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) let target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
let value = (target && target instanceof HTMLInputElement && target.type == "checkbox") ? !!(target?.checked) : target?.value let value = (target) ? (target instanceof HTMLInputElement && target.type == "checkbox") ? !!(target.checked) : target.value : undefined
if (value !== undefined) { if (value !== undefined) {
for (let rowById of this._rowsById) { for (let rowById of this._rowsById) {
if (rowById._id === rowId) { if (rowById._id === rowId) {
switch (rowById.row[propertyName].constructor) { switch (propertySchema.default?.constructor) {
case Array: case Array:
rowById.row[propertyName] = (value as string).split(propertySchema.separator ?? ',') rowById.row[propertyName] = (value as string).split(propertySchema.separator ?? ',')
break
default: default:
rowById.row[propertyName] = value rowById.row[propertyName] = value
break
} }
this.rows = this._rowsById.map(rowById => rowById.row) this.rows = this._rowsById.map(rowById => rowById.row)
this.requestUpdate('rows') this.requestUpdate('rows')
this.requestUpdate('rowsById') this.requestUpdate('_rowsById')
this.dispatchEvent(new CustomEvent('update', { detail: this.rows })) this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
return return
} }