Merge pull request #447 from droberts-ctrlo/input-components

Refactored out input components into different files

src/frontend/components/form-group/input/lib/autocompleteComponent.ts

@@ -0,0 +1,39 @@
+class AutocompleteComponent {
+    readonly type = 'autocomplete';
+    input: JQuery<HTMLInputElement>;
+    el: JQuery<HTMLElement>;
+
+    constructor(el: HTMLElement | JQuery<HTMLElement>) {
+        this.el = $(el);
+        this.input = this.el.find<HTMLInputElement>('.form-control');
+    }
+
+    init() {
+        const suggestionCallback = (suggestion: { id: number, name:string }) => {
+            this.el.find('input[type="hidden"]').val(suggestion.id);
+        };
+
+        import(/* webpackChunkName: "typeahead" */ 'util/typeahead')
+            .then(({ default: TypeaheadBuilder }) => {
+                const builder = new TypeaheadBuilder();
+                builder
+                    .withInput(this.input)
+                    .withCallback(suggestionCallback)
+                    .withAjaxSource(this.getURL())
+                    .withAppendQuery()
+                    .withName('users')
+                    .build();
+            });
+    }
+
+    getURL(): string {
+        const devEndpoint = window.siteConfig?.urls?.autocompleteApi;
+        const layoutIdentifier = $('body').data('layout-identifier');
+
+        return devEndpoint ?? `/${layoutIdentifier ? layoutIdentifier + '/' : ''}match/user/?q=`;
+    }
+}
+
+export default function autocompleteComponent(el: HTMLElement | JQuery<HTMLElement>) {
+    new AutocompleteComponent(el).init();
+}

src/frontend/components/form-group/input/lib/component.ts

@@ -0,0 +1,48 @@
+import { Component } from "component";
+import passwordComponent from "./passwordComponent";
+import logoComponent from "./logoComponent";
+import documentComponent from "./documentComponent";
+import fileComponent from "./fileComponent";
+import dateComponent from "./dateComponent";
+import autocompleteComponent from "./autocompleteComponent";
+import { initValidationOnField } from "validation";
+
+type ComponentInitializer = (element: JQuery<HTMLElement> | HTMLElement) => void;
+
+class InputComponent extends Component {
+    private static componentMap: { [key: string]: ComponentInitializer } = {
+        'input--password': passwordComponent,
+        'input--logo': logoComponent,
+        'input--document': documentComponent,
+        'input--file': fileComponent,
+        'input--datepicker': dateComponent,
+        'input--autocomplete': autocompleteComponent
+    };
+
+    constructor(element: HTMLElement | JQuery<HTMLElement>) {
+        super(element);
+        this.initializeComponent();
+        this.initializeValidation();
+    }
+
+    private initializeComponent() {
+        const $el = $(this.element);
+
+        for (const [className, initializer] of Object.entries(InputComponent.componentMap)) {
+            if ($el.hasClass(className)) {
+                initializer(this.element);
+                break; // Assuming only one component type per element
+            }
+        }
+    }
+
+    private initializeValidation() {
+        const $el = $(this.element);
+
+        if ($el.hasClass('input--required')) {
+            initValidationOnField($el);
+        }
+    }
+}
+
+export default InputComponent;