BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/forms.ts

   1 import {EditorUiContext, EditorUiElement} from "./core";
   2 import {EditorContainerUiElement} from "./containers";
   3 import {el} from "../../helpers";
   4
   5 export interface EditorFormFieldDefinition {
   6     label: string;
   7     name: string;
   8     type: 'text' | 'select';
   9 }
  10
  11 export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefinition {
  12     type: 'select',
  13     valuesByLabel: Record<string, string>
  14 }
  15
  16 export interface EditorFormDefinition {
  17     submitText: string;
  18     action: (formData: FormData, context: EditorUiContext) => boolean;
  19     fields: EditorFormFieldDefinition[];
  20 }
  21
  22 export class EditorFormField extends EditorUiElement {
  23     protected definition: EditorFormFieldDefinition;
  24
  25     constructor(definition: EditorFormFieldDefinition) {
  26         super();
  27         this.definition = definition;
  28     }
  29
  30     setValue(value: string) {
  31         const input = this.getDOMElement().querySelector('input,select') as HTMLInputElement;
  32         input.value = value;
  33     }
  34
  35     getName(): string {
  36         return this.definition.name;
  37     }
  38
  39     protected buildDOM(): HTMLElement {
  40         const id = `editor-form-field-${this.definition.name}-${Date.now()}`;
  41         let input: HTMLElement;
  42
  43         if (this.definition.type === 'select') {
  44             const options = (this.definition as EditorSelectFormFieldDefinition).valuesByLabel
  45             const labels = Object.keys(options);
  46             const optionElems = labels.map(label => el('option', {value: options[label]}, [label]));
  47             input = el('select', {id, name: this.definition.name, class: 'editor-form-field-input'}, optionElems);
  48         } else {
  49             input = el('input', {id, name: this.definition.name, class: 'editor-form-field-input'});
  50         }
  51
  52         return el('div', {class: 'editor-form-field-wrapper'}, [
  53             el('label', {class: 'editor-form-field-label', for: id}, [this.trans(this.definition.label)]),
  54             input,
  55         ]);
  56     }
  57 }
  58
  59 export class EditorForm extends EditorContainerUiElement {
  60     protected definition: EditorFormDefinition;
  61     protected onCancel: null|(() => void) = null;
  62
  63     constructor(definition: EditorFormDefinition) {
  64         super(definition.fields.map(fieldDefinition => new EditorFormField(fieldDefinition)));
  65         this.definition = definition;
  66     }
  67
  68     setValues(values: Record<string, string>) {
  69         for (const name of Object.keys(values)) {
  70             const field = this.getFieldByName(name);
  71             if (field) {
  72                 field.setValue(values[name]);
  73             }
  74         }
  75     }
  76
  77     setOnCancel(callback: () => void) {
  78         this.onCancel = callback;
  79     }
  80
  81     protected getFieldByName(name: string): EditorFormField|null {
  82         for (const child of this.children as EditorFormField[]) {
  83             if (child.getName() === name) {
  84                 return child;
  85             }
  86         }
  87
  88         return null;
  89     }
  90
  91     protected buildDOM(): HTMLElement {
  92         const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans('Cancel')]);
  93         const form = el('form', {}, [
  94             ...this.children.map(child => child.getDOMElement()),
  95             el('div', {class: 'editor-form-actions'}, [
  96                 cancelButton,
  97                 el('button', {type: 'submit', class: 'editor-form-action-primary'}, [this.trans(this.definition.submitText)]),
  98             ])
  99         ]);
 100
 101         form.addEventListener('submit', (event) => {
 102             event.preventDefault();
 103             const formData = new FormData(form as HTMLFormElement);
 104             this.definition.action(formData, this.getContext());
 105         });
 106
 107         cancelButton.addEventListener('click', (event) => {
 108             if (this.onCancel) {
 109                 this.onCancel();
 110             }
 111         });
 112
 113         return form;
 114     }
 115 }