137 lines
4.9 KiB
TypeScript
137 lines
4.9 KiB
TypeScript
// SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
|
|
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import type { ChannelConfiguration } from 'shared/lib/types'
|
|
import { ChannelDetailsService } from '../services/channel-details'
|
|
import { channelConfigurationContext, channelDetailsServiceContext } from '../contexts/channel'
|
|
import { LivechatElement } from '../../lib/elements/livechat'
|
|
import { ValidationError, ValidationErrorType } from '../../lib/models/validation'
|
|
import { tplChannelConfiguration } from './templates/channel-configuration'
|
|
import { TemplateResult, html, nothing } from 'lit'
|
|
import { customElement, property, state } from 'lit/decorators.js'
|
|
import { ptTr } from '../../lib/directives/translation'
|
|
import { Task } from '@lit/task'
|
|
import { provide } from '@lit/context'
|
|
|
|
@customElement('livechat-channel-configuration')
|
|
export class ChannelConfigurationElement extends LivechatElement {
|
|
@property({ attribute: false })
|
|
public channelId?: number
|
|
|
|
@provide({ context: channelConfigurationContext })
|
|
@state()
|
|
public channelConfiguration?: ChannelConfiguration
|
|
|
|
@provide({ context: channelDetailsServiceContext })
|
|
private _channelDetailsService?: ChannelDetailsService
|
|
|
|
@state()
|
|
public validationError?: ValidationError
|
|
|
|
@state()
|
|
public actionDisabled: boolean = false
|
|
|
|
private _asyncTaskRender: Task
|
|
|
|
constructor () {
|
|
super()
|
|
this._asyncTaskRender = this._initTask()
|
|
}
|
|
|
|
protected _initTask (): Task {
|
|
return new Task(this, {
|
|
task: async () => {
|
|
this._channelDetailsService = new ChannelDetailsService(this.ptOptions)
|
|
this.channelConfiguration = await this._channelDetailsService.fetchConfiguration(this.channelId ?? 0)
|
|
this.actionDisabled = false // in case of reset
|
|
},
|
|
args: () => []
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Resets the form by reloading data from backend.
|
|
*/
|
|
public async reset (event?: Event): Promise<void> {
|
|
event?.preventDefault()
|
|
this.actionDisabled = true
|
|
this._asyncTaskRender = this._initTask()
|
|
this.requestUpdate()
|
|
}
|
|
|
|
/**
|
|
* Saves the channel configuration.
|
|
* @param event event
|
|
*/
|
|
public readonly saveConfig = async (event?: Event): Promise<void> => {
|
|
event?.preventDefault()
|
|
if (this._channelDetailsService && this.channelConfiguration) {
|
|
this.actionDisabled = true
|
|
this._channelDetailsService.saveOptions(this.channelConfiguration.channel.id,
|
|
this.channelConfiguration.configuration)
|
|
.then(() => {
|
|
this.validationError = undefined
|
|
this.ptTranslate(LOC_SUCCESSFULLY_SAVED).then((msg) => {
|
|
this.ptNotifier.info(msg)
|
|
}, () => {})
|
|
this.requestUpdate('_validationError')
|
|
})
|
|
.catch(async (error: Error) => {
|
|
this.validationError = undefined
|
|
if (error instanceof ValidationError) {
|
|
this.validationError = error
|
|
}
|
|
console.warn(`A validation error occurred in saving configuration. ${error.name}: ${error.message}`)
|
|
this.ptNotifier.error(
|
|
error.message
|
|
? error.message
|
|
: await this.ptTranslate(LOC_ERROR)
|
|
)
|
|
this.requestUpdate('_validationError')
|
|
})
|
|
.finally(() => {
|
|
this.actionDisabled = false
|
|
})
|
|
}
|
|
}
|
|
|
|
public readonly getInputValidationClass = (propertyName: string): { [key: string]: boolean } => {
|
|
const validationErrorTypes: ValidationErrorType[] | undefined =
|
|
this.validationError?.properties[`${propertyName}`]
|
|
return validationErrorTypes ? (validationErrorTypes.length ? { 'is-invalid': true } : { 'is-valid': true }) : {}
|
|
}
|
|
|
|
public readonly renderFeedback = (feedbackId: string,
|
|
propertyName: string): TemplateResult | typeof nothing => {
|
|
const errorMessages: TemplateResult[] = []
|
|
const validationErrorTypes: ValidationErrorType[] | undefined =
|
|
this.validationError?.properties[`${propertyName}`] ?? undefined
|
|
|
|
if (validationErrorTypes && validationErrorTypes.length !== 0) {
|
|
if (validationErrorTypes.includes(ValidationErrorType.WrongType)) {
|
|
errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_WRONG_TYPE)}`)
|
|
}
|
|
if (validationErrorTypes.includes(ValidationErrorType.WrongFormat)) {
|
|
errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_WRONG_FORMAT)}`)
|
|
}
|
|
if (validationErrorTypes.includes(ValidationErrorType.NotInRange)) {
|
|
errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_NOT_IN_RANGE)}`)
|
|
}
|
|
|
|
return html`<div id=${feedbackId} class="invalid-feedback">${errorMessages}</div>`
|
|
} else {
|
|
return nothing
|
|
}
|
|
}
|
|
|
|
protected override render = (): unknown => {
|
|
return this._asyncTaskRender.render({
|
|
pending: () => html`<livechat-spinner></livechat-spinner>`,
|
|
error: () => html`<livechat-error></livechat-error>`,
|
|
complete: () => tplChannelConfiguration(this)
|
|
})
|
|
}
|
|
}
|