Custom channel emoticons WIP (#130)

client/common/lib/elements/dynamic-table-form.ts

@@ -6,6 +6,7 @@
 import type { TagsInputElement } from './tags-input'
 import type { DirectiveResult } from 'lit/directive'
 import { ValidationErrorType } from '../models/validation'
+import { maxSize, inputFileAccept } from 'shared/lib/emojis'
 import { html, nothing, TemplateResult } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -93,6 +94,9 @@ export class DynamicTableFormElement extends LivechatElement {
   @property({ attribute: false })
   public schema: DynamicFormSchema = {}
 
+  @property({ attribute: false })
+  public maxLines?: number = undefined
+
   @property()
   public validation?: {[key: string]: ValidationErrorType[] }
 
@@ -223,6 +227,9 @@ export class DynamicTableFormElement extends LivechatElement {
   }
 
   private readonly _renderFooter = (): TemplateResult => {
+    if (this.maxLines && this._rowsById.length >= this.maxLines) {
+      return html``
+    }
     return html`<tfoot>
     <tr>
       ${Object.values(this.header).map(() => html`<td></td>`)}
@@ -574,7 +581,10 @@ export class DynamicTableFormElement extends LivechatElement {
       id=${inputId}
       aria-describedby="${inputId}-feedback"
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
-      .value=${propertyValue}></livechat-image-file-input>`
+      .value=${propertyValue}
+      .maxSize=${maxSize}
+      .accept=${inputFileAccept}
+    ></livechat-image-file-input>`
   }
 
   _getInputValidationClass = (propertyName: string,
@@ -595,6 +605,9 @@ export class DynamicTableFormElement extends LivechatElement {
       this.validation?.[`${this.validationPrefix}.${originalIndex}.${propertyName}`]
 
     if (validationErrorTypes !== undefined && validationErrorTypes.length !== 0) {
+      if (validationErrorTypes.includes(ValidationErrorType.Missing)) {
+        errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_MISSING)}`)
+      }
       if (validationErrorTypes.includes(ValidationErrorType.WrongType)) {
         errorMessages.push(html`${ptTr(LOC_INVALID_VALUE_WRONG_TYPE)}`)
       }

client/common/lib/elements/image-file-input.ts

@@ -33,6 +33,12 @@ export class ImageFileInputElement extends LivechatElement {
   @property({ reflect: true })
   public value: string | undefined
 
+  @property({ attribute: false })
+  public maxSize?: number
+
+  @property({ attribute: false })
+  public accept: string[] = ['image/jpg', 'image/png', 'image/gif']
+
   protected override render = (): unknown => {
     // FIXME: limit file size in the upload field.
     return html`
@@ -46,7 +52,7 @@ export class ImageFileInputElement extends LivechatElement {
       }
       <input
         type="file"
-        accept="image/jpg,image/png,image/gif"
+        accept="${this.accept.join(',')}"
         class="form-control"
         style=${this.value ? 'visibility: hidden;' : ''}
         @change=${async (ev: Event) => this._upload(ev)}
@@ -65,9 +71,16 @@ export class ImageFileInputElement extends LivechatElement {
     const target = ev.target
     const file = (target as HTMLInputElement).files?.[0]
     if (!file) {
-      this.value = ''
-      const event = new Event('change')
-      this.dispatchEvent(event)
+      return
+    }
+
+    if (this.maxSize && file.size > this.maxSize) {
+      let msg = await this.registerClientOptions?.peertubeHelpers.translate(LOC_INVALID_VALUE_FILE_TOO_BIG)
+      if (msg) {
+        // FIXME: better unit handling (here we force kb)
+        msg = msg.replace('%s', Math.round(this.maxSize / 1024).toString() + 'k')
+        this.registerClientOptions?.peertubeHelpers.notifier.error(msg)
+      }
       return
     }