diff --git a/client/@types/global.d.ts b/client/@types/global.d.ts index 5758cf4c..11b999ac 100644 --- a/client/@types/global.d.ts +++ b/client/@types/global.d.ts @@ -106,3 +106,4 @@ declare const LOC_ACTION_EXPORT: string 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 diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts index 96f303f8..cb88d75e 100644 --- a/client/common/lib/elements/dynamic-table-form.ts +++ b/client/common/lib/elements/dynamic-table-form.ts @@ -5,6 +5,8 @@ import type { TagsInputElement } from './tags-input' import type { DirectiveResult } from 'lit/directive' +import type { RegisterClientOptions } from '@peertube/peertube-types/client' +import { registerClientOptionsContext } from '../../lib/contexts/peertube' import { ValidationErrorType } from '../models/validation' import { maxSize, inputFileAccept } from 'shared/lib/emojis' import { html, nothing, TemplateResult } from 'lit' @@ -15,6 +17,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js' import { classMap } from 'lit/directives/class-map.js' import { LivechatElement } from './livechat' import { ptTr } from '../directives/translation' +import { consume } from '@lit/context' // This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/ const AddSVG: string = @@ -92,6 +95,9 @@ export interface DynamicFormSchema { [key: string]: CellDataSchema } @customElement('livechat-dynamic-table-form') export class DynamicTableFormElement extends LivechatElement { + @consume({ context: registerClientOptionsContext, subscribe: true }) + public registerClientOptions?: RegisterClientOptions + @property({ attribute: false }) public header: DynamicFormHeader = {} @@ -144,7 +150,28 @@ export class DynamicTableFormElement extends LivechatElement { this.dispatchEvent(new CustomEvent('update', { detail: this.rows })) } - private readonly _removeRow = (rowId: number): void => { + private async _removeRow (rowId: number): Promise { + if (!this.registerClientOptions) { + console.error('Missing registreClientOptions.') + return + } + const peertubeHelpers = this.registerClientOptions.peertubeHelpers + const confirmMsg = await peertubeHelpers.translate(LOC_ACTION_REMOVE_ENTRY_CONFIRM) + await new Promise((resolve, reject) => { + peertubeHelpers.showModal({ + title: confirmMsg, + content: '', + close: true, + cancel: { + value: 'cancel', + action: reject + }, + confirm: { + value: 'confirm', + action: resolve + } + }) + }) 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) diff --git a/languages/en.yml b/languages/en.yml index a2f87ca4..11981df6 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -514,3 +514,4 @@ action_import_emojis_info: If imported data are okay, don't forgot to save the f action_add_entry: Add an entry action_remove_entry: Remove this entry +action_remove_entry_confirm: Are you sure you want to remove this entry?