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

fix linting

Browse Source
This commit is contained in:
Mehdi Benadel
2024-05-23 22:52:39 +02:00
parent f549142ae4
commit fb7f44692c
10 changed files with 282 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,8 @@
//
// SPDX-License-Identifier: AGPL-3.0-only
/* eslint no-fallthrough: "off" */
import { html, nothing, TemplateResult } from 'lit'
import { repeat } from 'lit/directives/repeat.js'
import { customElement, property, state } from 'lit/decorators.js'
@ -9,43 +11,45 @@ import { ifDefined } from 'lit/directives/if-defined.js'
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
import { LivechatElement } from './livechat'
// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
const AddSVG: string =
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square">
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-plus-square">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line>
</svg>`
// This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
// This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
const RemoveSVG: string =
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square">
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-x-square">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line>
</svg>`
type DynamicTableAcceptedTypes = number | string | boolean | Date | Array<number | string>
type DynamicTableAcceptedInputTypes = 'textarea'
| 'select'
| 'checkbox'
| 'range'
| 'color'
| 'date'
| 'datetime'
| 'datetime-local'
| 'email'
| 'file'
| 'image'
| 'month'
| 'number'
| 'password'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week'
| 'select'
| 'checkbox'
| 'range'
| 'color'
| 'date'
| 'datetime'
| 'datetime-local'
| 'email'
| 'file'
| 'image'
| 'month'
| 'number'
| 'password'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week'
interface CellDataSchema {
min?: number
@ -63,19 +67,17 @@ interface CellDataSchema {
@customElement('livechat-dynamic-table-form')
export class DynamicTableFormElement extends LivechatElement {
@property({ attribute: false })
public header: { [key: string]: { colName: TemplateResult, description: TemplateResult } } = {}
@property({ attribute: false })
public schema: { [key: string]: CellDataSchema } = {}
@property({ attribute: false })
public rows: { [key: string]: DynamicTableAcceptedTypes }[] = []
public rows: Array<{ [key: string]: DynamicTableAcceptedTypes }> = []
@state()
public _rowsById: { _id: number; row: { [key: string]: DynamicTableAcceptedTypes } }[] = []
public _rowsById: Array<{ _id: number, row: { [key: string]: DynamicTableAcceptedTypes } }> = []
@property({ attribute: false })
public formName: string = ''
@ -87,29 +89,28 @@ export class DynamicTableFormElement extends LivechatElement {
private columnOrder: string[] = []
// fixes situations when list has been reinitialized or changed outside of CustomElement
private _updateLastRowId = () => {
for (let rowById of this._rowsById) {
this._lastRowId = Math.max(this._lastRowId, rowById._id + 1);
private readonly _updateLastRowId = (): void => {
for (const rowById of this._rowsById) {
this._lastRowId = Math.max(this._lastRowId, rowById._id + 1)
}
}
private _getDefaultRow = () : { [key: string]: DynamicTableAcceptedTypes } => {
private readonly _getDefaultRow = (): { [key: string]: DynamicTableAcceptedTypes } => {
this._updateLastRowId()
return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])])
}
private _addRow = () => {
let newRow = this._getDefaultRow()
this._rowsById.push({_id:this._lastRowId++, row: newRow})
private readonly _addRow = (): void => {
const newRow = this._getDefaultRow()
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]
private readonly _removeRow = (rowId: number): void => {
const rowToRemove = this._rowsById.filter(rowById => rowById._id === rowId).map(rowById => rowById.row)[0]
this._rowsById = this._rowsById.filter(rowById => rowById._id !== rowId)
this.rows = this.rows.filter((row) => row !== rowToRemove)
this.requestUpdate('rows')
@ -117,16 +118,16 @@ export class DynamicTableFormElement extends LivechatElement {
this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
}
render = () => {
protected override render = (): unknown => {
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-table`
this._updateLastRowId()
this._rowsById.filter(rowById => this.rows.includes(rowById.row))
for (let row of this.rows) {
if (this._rowsById.filter(rowById => rowById.row === row).length == 0) {
this._rowsById.push({_id: this._lastRowId++, row })
for (const row of this.rows) {
if (this._rowsById.filter(rowById => rowById.row === row).length === 0) {
this._rowsById.push({ _id: this._lastRowId++, row })
}
}
@ -148,50 +149,68 @@ export class DynamicTableFormElement extends LivechatElement {
`
}
private _renderHeader = () => {
private readonly _renderHeader = (): TemplateResult => {
return html`<thead>
<tr>
${Object.entries(this.header).sort(([k1,_1], [k2,_2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
.map(([k,v]) => this._renderHeaderCell(v))}
${Object.entries(this.header)
.sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
.map(([_, v]) => this._renderHeaderCell(v))}
<th scope="col"></th>
</tr>
</thead>`
}
private _renderHeaderCell = (headerCellData: { colName: TemplateResult, description: TemplateResult }) => {
private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult
description: TemplateResult }): TemplateResult => {
return html`<th scope="col">
<div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>${headerCellData.colName}</div>
<div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>
${headerCellData.colName}
</div>
</th>`
}
private _renderDataRow = (rowData: { _id: number; row: {[key: string]: DynamicTableAcceptedTypes} }) => {
private readonly _renderDataRow = (rowData: { _id: number
row: {[key: string]: DynamicTableAcceptedTypes} }): TemplateResult => {
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`
return html`<tr id=${inputId}>
${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>
${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>`
}
private _renderFooter = () => {
private readonly _renderFooter = (): TemplateResult => {
return html`<tfoot>
<tr>
${Object.values(this.header).map(() => html`<td></td>`)}
<td><button type="button" class="peertube-button-link orange-button dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td>
<td>
<button type="button"
class="peertube-button-link orange-button dynamic-table-add-row"
@click=${this._addRow}>
${unsafeHTML(AddSVG)}
</button>
</td>
</tr>
</tfoot>`
}
renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number) => {
renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number): TemplateResult => {
let [propertyName, propertyValue] = property
const propertySchema = this.schema[propertyName] ?? {}
let formElement
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 (propertySchema.default?.constructor) {
case String:
@ -215,15 +234,30 @@ export class DynamicTableFormElement extends LivechatElement {
case 'time':
case 'url':
case 'week':
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
formElement = this._renderInput(rowId,
inputId,
inputName,
propertyName,
propertySchema,
propertyValue as string)
break
case 'textarea':
formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
formElement = this._renderTextarea(rowId,
inputId,
inputName,
propertyName,
propertySchema,
propertyValue as string)
break
case 'select':
formElement = this._renderSelect(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
formElement = this._renderSelect(rowId,
inputId,
inputName,
propertyName,
propertySchema,
propertyValue as string)
break
}
break
@ -237,7 +271,12 @@ export class DynamicTableFormElement extends LivechatElement {
case 'datetime':
case 'datetime-local':
case 'time':
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, (propertyValue as Date).toISOString())
formElement = this._renderInput(rowId,
inputId,
inputName,
propertyName,
propertySchema,
(propertyValue as Date).toISOString())
break
}
break
@ -249,7 +288,12 @@ export class DynamicTableFormElement extends LivechatElement {
case 'number':
case 'range':
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
formElement = this._renderInput(rowId,
inputId,
inputName,
propertyName,
propertySchema,
propertyValue as string)
break
}
break
@ -260,7 +304,12 @@ export class DynamicTableFormElement extends LivechatElement {
propertySchema.inputType = 'checkbox'
case 'checkbox':
formElement = this._renderCheckbox(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as boolean)
formElement = this._renderCheckbox(rowId,
inputId,
inputName,
propertyName,
propertySchema,
propertyValue as boolean)
break
}
break
@ -290,27 +339,32 @@ export class DynamicTableFormElement extends LivechatElement {
propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
}
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema,
(propertyValue as Array<number | string>)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
(propertyValue)?.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 ?? propertySchema.default ?? '')
(propertyValue)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
break
}
}
if (!formElement) {
console.warn(`value type '${propertyValue.constructor}' is incompatible`
+ `with field type '${propertySchema.inputType}' for form entry '${propertyName.toString()}'.`)
console.warn(`value type '${(propertyValue.constructor.toString())}' is incompatible` +
`with field type '${propertySchema.inputType as string}' for form entry '${propertyName.toString()}'.`)
}
return html`<td class="form-group">${formElement}</td>`
}
_renderInput = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
_renderInput = (rowId: number,
inputId: string,
inputName: string,
propertyName: string,
propertySchema: CellDataSchema,
propertyValue: string): TemplateResult => {
return html`<input
type=${propertySchema.inputType}
name=${inputName}
@ -324,13 +378,20 @@ export class DynamicTableFormElement extends LivechatElement {
@change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
.value=${propertyValue}
/>
${(propertySchema.datalist) ? html`<datalist id=${inputId + '-datalist'}>
${(propertySchema.datalist)
? html`<datalist id=${inputId + '-datalist'}>
${(propertySchema.datalist ?? []).map((value) => html`<option value=${value} />`)}
</datalist>` : nothing}
</datalist>`
: nothing}
`
}
_renderTextarea = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
_renderTextarea = (rowId: number,
inputId: string,
inputName: string,
propertyName: string,
propertySchema: CellDataSchema,
propertyValue: string): TemplateResult => {
return html`<textarea
name=${inputName}
class="form-control"
@ -344,7 +405,12 @@ export class DynamicTableFormElement extends LivechatElement {
></textarea>`
}
_renderCheckbox = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: boolean) => {
_renderCheckbox = (rowId: number,
inputId: string,
inputName: string,
propertyName: string,
propertySchema: CellDataSchema,
propertyValue: boolean): TemplateResult => {
return html`<input
type="checkbox"
name=${inputName}
@ -356,7 +422,12 @@ export class DynamicTableFormElement extends LivechatElement {
/>`
}
_renderSelect = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
_renderSelect = (rowId: number,
inputId: string,
inputName: string,
propertyName: string,
propertySchema: CellDataSchema,
propertyValue: string): TemplateResult => {
return html`<select
class="form-select"
aria-label="Default select example"
@ -370,13 +441,19 @@ export class DynamicTableFormElement extends LivechatElement {
</select>`
}
_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 : undefined
_updatePropertyFromValue = (event: Event,
propertyName: string,
propertySchema: CellDataSchema,
rowId: number): undefined => {
const target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
const value = (target)
? (target instanceof HTMLInputElement && target.type === 'checkbox')
? !!(target.checked)
: target.value
: undefined
if (value !== undefined) {
for (let rowById of this._rowsById) {
for (const rowById of this._rowsById) {
if (rowById._id === rowId) {
switch (propertySchema.default?.constructor) {
case Array:
@ -397,9 +474,8 @@ export class DynamicTableFormElement extends LivechatElement {
}
console.warn(`Could not update property : Did not find a property named '${propertyName}' in row '${rowId}'`)
}
else {
console.warn(`Could not update property : Target or value was undefined`)
} else {
console.warn('Could not update property : Target or value was undefined')
}
}
}

13
client/common/lib/elements/help-button.ts
View File

@ -17,7 +17,6 @@ import { LivechatElement } from './livechat'
@customElement('livechat-help-button')
export class HelpButtonElement extends LivechatElement {
@consume({ context: registerClientOptionsContext, subscribe: true })
public registerClientOptions: RegisterClientOptions | undefined
@ -30,14 +29,16 @@ export class HelpButtonElement extends LivechatElement {
@state()
public url: URL = new URL('https://lmddgtfy.net/')
private _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions], {signal}) => {
this.url = new URL(registerClientOptions ? await localizedHelpUrl(registerClientOptions, { page: this.page }) : '')
private readonly _asyncTaskRender = new Task(this, {
task: async ([registerClientOptions]) => {
this.url = new URL(registerClientOptions
? await localizedHelpUrl(registerClientOptions, { page: this.page })
: '')
},
args: () => [this.registerClientOptions]
});
})
render() {
protected override render = (): unknown => {
return this._asyncTaskRender.render({
complete: () => html`<a
href="${this.url.href}"

2
client/common/lib/elements/livechat.ts
View File

@ -8,7 +8,7 @@ import { LitElement } from 'lit'
* Base class for all Custom Elements.
*/
export class LivechatElement extends LitElement {
protected createRenderRoot = () => {
protected override createRenderRoot = (): Element | ShadowRoot => {
return this
}
}