New page loading and error cases:
* adding new custom elements: spinner and error * using them on async tasks
This commit is contained in:
2
client/@types/global.d.ts
vendored
2
client/@types/global.d.ts
vendored
@ -107,3 +107,5 @@ declare const LOC_ACTION_IMPORT_EMOJIS_INFO: string
|
||||
declare const LOC_ACTION_ADD_ENTRY: string
|
||||
declare const LOC_ACTION_REMOVE_ENTRY: string
|
||||
declare const LOC_ACTION_REMOVE_ENTRY_CONFIRM: string
|
||||
|
||||
declare const LOC_LOADING_ERROR: string
|
||||
|
@ -230,6 +230,8 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
}
|
||||
|
||||
return this._asyncTaskRender.render({
|
||||
pending: () => html`<livechat-spinner></livechat-spinner>`,
|
||||
error: () => html`<livechat-error></livechat-error>`,
|
||||
complete: () => html`
|
||||
<div class="margin-content peertube-plugin-livechat-configuration
|
||||
peertube-plugin-livechat-configuration-channel">
|
||||
|
@ -71,7 +71,8 @@ export class ChannelEmojisElement extends LivechatElement {
|
||||
}
|
||||
}
|
||||
return this._asyncTaskRender.render({
|
||||
pending: () => {},
|
||||
pending: () => html`<livechat-spinner></livechat-spinner>`,
|
||||
error: () => html`<livechat-error></livechat-error>`,
|
||||
complete: () => html`
|
||||
<div
|
||||
class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel"
|
||||
@ -150,10 +151,7 @@ export class ChannelEmojisElement extends LivechatElement {
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`,
|
||||
error: (err: any) => {
|
||||
this.registerClientOptions?.peertubeHelpers.notifier.error(err.toString())
|
||||
}
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -47,6 +47,8 @@ export class ChannelHomeElement extends LivechatElement {
|
||||
|
||||
protected override render = (): unknown => {
|
||||
return this._asyncTaskRender.render({
|
||||
pending: () => html`<livechat-spinner></livechat-spinner>`,
|
||||
error: () => html`<livechat-error></livechat-error>`,
|
||||
complete: () => html`
|
||||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
|
||||
<h1>
|
||||
@ -62,7 +64,7 @@ export class ChannelHomeElement extends LivechatElement {
|
||||
<a href="${channel.livechatConfigurationUri}">
|
||||
${channel.avatar
|
||||
? html`<img class="avatar channel" src="${channel.avatar.path}">`
|
||||
: html`<div class="avatar channel initial gray"></div>`
|
||||
: html`<div class="avatar channel initial gray"></div>`
|
||||
}
|
||||
</a>
|
||||
<div class="peertube-plugin-livechat-configuration-home-info">
|
||||
|
19
client/common/lib/elements/error.ts
Normal file
19
client/common/lib/elements/error.ts
Normal file
@ -0,0 +1,19 @@
|
||||
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { DirectiveResult } from 'lit/directive'
|
||||
import { html, TemplateResult } from 'lit'
|
||||
import { customElement, property } from 'lit/decorators.js'
|
||||
import { LivechatElement } from './livechat'
|
||||
import { ptTr } from '../directives/translation'
|
||||
|
||||
@customElement('livechat-error')
|
||||
export class ErrorElement extends LivechatElement {
|
||||
@property({ attribute: false })
|
||||
public msg: string | DirectiveResult = ptTr(LOC_LOADING_ERROR)
|
||||
|
||||
protected override render = (): TemplateResult => {
|
||||
return html`${this.msg}`
|
||||
}
|
||||
}
|
@ -9,3 +9,5 @@ import './dynamic-table-form'
|
||||
import './configuration-row'
|
||||
import './tags-input'
|
||||
import './image-file-input'
|
||||
import './spinner'
|
||||
import './error'
|
||||
|
14
client/common/lib/elements/spinner.ts
Normal file
14
client/common/lib/elements/spinner.ts
Normal file
@ -0,0 +1,14 @@
|
||||
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { html, TemplateResult } from 'lit'
|
||||
import { customElement } from 'lit/decorators.js'
|
||||
import { LivechatElement } from './livechat'
|
||||
|
||||
@customElement('livechat-spinner')
|
||||
export class SpinnerElement extends LivechatElement {
|
||||
protected override render = (): TemplateResult => {
|
||||
return html`<div></div>` // CSS does the trick.
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user