@eqproject/eqp-dynamic-module 0.0.5 → 0.0.7

package/src/lib/services/utilityHelper.services.ts

@@ -0,0 +1,413 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from "@angular/forms";
+import { BaseField, ColSpanSizesEnum, FieldTypeEnum } from "../models/baseField.model";
+import { Context } from "../models/context.model";
+import { EndPointConfiguration, EndPointData, EndPointDataParams, ParamTypeEnum, RequestMethodEnum } from "../models/endPointConfiguration.model";
+import { AttachmentField } from "../models/fields/attachmentField.model";
+import { ImageField } from "../models/fields/imageField.model";
+import { ListValueField } from "../models/fields/listValueField.model";
+import { TextareaField } from "../models/fields/testareaField.model";
+import { TextMaskEnum, TextField, UrlRegex, TelRegex } from "../models/fields/textField.model";
+import { Form } from "../models/form.model";
+import { Record } from "../models/record.model";
+import { ArrayValidators } from "./custom-form-validators.service";
+import { EqpDynamicModuleDialogService } from "./eqp-dynamic-module-dialog.service";
+import { SpinnerService } from "./spinner.service";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class UtilityHelperService {
+
+    public static context: Context = new Context();
+
+    constructor(
+        private formBuilder: FormBuilder,
+        private http: HttpClient,
+        private spinnerService: SpinnerService
+    ) {
+    }
+
+    public static EvaluateFieldFormula(formula: string, rec: Record, ctx: any): any {
+        const evaluatedValue = eval(formula);
+        return (evaluatedValue ? evaluatedValue : null);
+    }
+
+    public static SetContext(ctx: Context) {
+        this.context = ctx;
+    }
+
+    public static GetFieldType(field: BaseField){
+      switch (field.FieldType) {
+        case FieldTypeEnum["Campo di testo"]: {
+          const t: TextField = Object.assign(new TextField,field);
+          return t;
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    }
+
+    /**
+     * Metodo per impostare i valori da suggerire nell'autocomplete per i campi in cui l'utente deve scrivere comandi javascript.
+     * In base all'ultimo carattere digitato viene impostato un elenco di oggetti o proprietà che l'utente ha a disposizione in quel momento.
+     * @param fields Array di BaseField aggiunti alla Form
+     * @param typedFormula Stringa digitata dall'utente
+     * @summary Il metodo imposta i suggerimenti basandosi su 3 casi:
+     *  1) l'utente non ha digitato nulla o la stringa digitata dall'utente finisce con uno spazio vuoto
+     *  2) la stringa digitata dall'utente finisce con un "."
+     *  3) la stringa digitata dall'utente non coincide con nessun altro caso sopra (finisce con un carattere qualunque)
+     */
+    public static GetAutocompleteOptions(fields: Array<BaseField>, typedFormula: string): Array<{ label: string, value: string }> {
+
+        let autocompleteOptions: Array<{ label: string, value: string }> = [];
+
+        // Recupero i nomi di tutti i campi creati fino ad ora nella form.
+        const availableRecProperties: Array<string> = fields.map(f => f.Label.split(' ').join('_'));
+
+        // Nel casi in cui l'utente non ha inserito nulla oppure la stringa finisce con uno spazio vuoto o un simbolo diverso da "."
+        // (un carattere non alfanumerico) imposto come suggerimenti solo "rec" e "ctx", ovvero gli unici due oggetti a cui l'utente ha accesso.
+        if (
+            !typedFormula ||
+            (
+                !typedFormula.endsWith(".")
+                && new RegExp("[^0-9a-zA-Z_]").test(typedFormula.substring(typedFormula.length - 1, typedFormula.length))
+            )
+        ) {
+            autocompleteOptions = [
+                { label: "rec", value: (typedFormula ? typedFormula : '') + "rec" },
+                { label: "ctx", value: (typedFormula ? typedFormula : '') + "ctx" }
+            ];
+        }
+        // Se la stringa finisce con un "." vuol dire che l'utente sta cercando di accedere ad una proprietà di un oggetto
+        // a sua disposizione. Recupero il nome dell'ultimo oggetto digitato dall'utente e se l'oggetto scelto è "rec" o "ctx"
+        // allora suggerisco le proprietà che esistono all'interno di questi oggetti altrimenti non mostro nulla.
+        else if (typedFormula.endsWith(".")) {
+            const formulaPieces: Array<string> = typedFormula.split(" ")[typedFormula.split(" ").length - 1].split('.');
+            if (formulaPieces[formulaPieces.length - 2] === "rec") {
+                autocompleteOptions = availableRecProperties.map(f => { return { label: f, value: typedFormula + f }; });
+            } else if (formulaPieces[formulaPieces.length - 2] === "ctx") {
+                autocompleteOptions = Object.keys(UtilityHelperService.context).map(f => { return { label: f, value: typedFormula + f }; });
+            } else if (formulaPieces.length > 2 && formulaPieces[formulaPieces.length - 3] === "ctx" && formulaPieces[formulaPieces.length - 2] === "User") {
+                autocompleteOptions = Object.keys(UtilityHelperService.context.User).map(f => { return { label: f, value: typedFormula + f }; });
+            } else {
+                autocompleteOptions = [];
+            }
+        }
+        // In tutti gli altri casi, ovvero quando la stringa digitata finisce con un carattere diverso da quelli
+        // controllati finora, vuol dire che l'utente sta digitanto il nome di un oggetto, una proprietà o una
+        // funzione javascript. Controllo la parola che l'utente sta digitando e se fa parte di uno degli oggetti a disposizione
+        // o una proprietà di essi allora suggerisco i possibili match.
+        else {
+            const availableOptions: Array<{ label: string, value: string }> = [];
+
+            // Prendo tutti i blocchi di caratteri digitati dall'utente
+            const allFormulaWords: Array<string> = typedFormula.split(" ");
+            // Prendo l'ultimo blocco di caratteri digitato dall'utente
+            const lastTypedString: string = allFormulaWords[allFormulaWords.length - 1];
+
+            // Se la l'ultima stringa digitata non contiene caratteri speciali allora splitto la stringa
+            // sui "." e imposto i suggerimenti in base al path della prorpietà che si sta digitando.
+            if (!new RegExp("[^0-9a-zA-Z_.]").test(lastTypedString)) {
+                const propertyPath = lastTypedString.split(".");
+                const lastTypedWork = propertyPath[propertyPath.length - 1];
+
+                let propertiesToCheck: Array<string> = [];
+
+                if (propertyPath.length == 1) {
+                    propertiesToCheck = ["rec", "ctx"];
+                } else if (propertyPath.length > 1 && propertyPath[propertyPath.length - 2] === "ctx") {
+                    propertiesToCheck = Object.keys(UtilityHelperService.context);
+                } else if (propertyPath.length > 2 && propertyPath[propertyPath.length - 3] === "ctx" && propertyPath[propertyPath.length - 2] === "User") {
+                    propertiesToCheck = Object.keys(UtilityHelperService.context.User);
+                } else if (propertyPath.length > 1 && propertyPath[propertyPath.length - 2] === "rec") {
+                    propertiesToCheck = availableRecProperties;
+                }
+
+                // Eseguo il controllo sulle proprietà recuperate, aggiungo ai suggerimenti tutti i nomi che iniziano con
+                // quello che sta digitando l'utente.
+                propertiesToCheck.forEach(prop => {
+                    if (prop.startsWith(lastTypedWork)) {
+                        availableOptions.push({ label: prop, value: typedFormula + prop.substring(lastTypedWork.length, prop.length) })
+                    }
+                });
+            }
+
+            autocompleteOptions = availableOptions;
+        }
+
+        return autocompleteOptions;
+    }
+
+    /**
+     * Metodo invocato dall'html per impostare le classi css per visualizzare il campo all'interno della form.
+     * Se per il field sono state specificate delle classi allora vengono applcate quelle, altrimenti vengono usate
+     * delle classi di default.
+     * @param field BaseField da visualizzare.
+     * @returns Restituisce una stringa contenente le classi css da applicare.
+     */
+    getFieldSyleClass(field: BaseField): string {
+        if (field.ColSpanSizes && field.ColSpanSizes.length > 0)
+            return field.ColSpanSizes.map(size => ColSpanSizesEnum[size].toString()).join(" ");
+
+        switch (field.FieldType) {
+            case FieldTypeEnum["Campo di testo"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Area di testo"]:
+                return "col-sm-12 col-md-12 col-lg-12";
+            case FieldTypeEnum["Booleano"]:
+                return "col-sm-12 col-md-4 col-lg-4 d-flex align-items-center";
+            case FieldTypeEnum["Data e/o ora"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Campo numerico"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Allegato"]:
+                if (
+                    (field as AttachmentField).IsMultiAttach ||
+                    ((field as AttachmentField).MetadataFields && (field as AttachmentField).MetadataFields.length > 0)
+                ) {
+                    return "col-sm-12 col-md-12 col-lg-12";
+                } else {
+                    return "col-sm-12 col-md-4 col-lg-4";
+                }
+            case FieldTypeEnum["Immagine"]:
+                if (
+                    (field as ImageField).AttachDefinition.IsMultiAttach ||
+                    ((field as ImageField).AttachDefinition.MetadataFields && (field as ImageField).AttachDefinition.MetadataFields.length > 0)
+                ) {
+                    return "col-sm-12 col-md-12 col-lg-12";
+                } else {
+                    return "col-sm-12 col-md-4 col-lg-4";
+                }
+            case FieldTypeEnum["Elenco generico"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Lookup"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum['Form di dettaglio']:
+                return "col-sm-12 col-md-12 col-lg-12";
+        }
+    }
+
+    /**
+     * Metodo per creare il FormGroup che rappresenta una Form a partire dai suoi BaseField.
+     * @param formFields Lista dei BaseField che compongono la form.
+     * @param record Oggetto di tipo Record che contiene i valori dei campi.
+     * @param onlyView Se TRUE disabilita la form per renderla in sola lettura.
+     * @param includeCurrentFormInField Se TRUE popola la proprietà FormFormGroup all'interno di ogni BaseField con il FormGroup corrente.
+     * @returns Restituisce un FormGroup rappresentate la Form a cui appartengono i BaseField ricevuti in input.
+     */
+    public CreateFormFormGroup(formFields: Array<BaseField>,
+                               record: Record,
+                               onlyView = false,
+                               includeCurrentFormInField = true): FormGroup {
+        const formForm: FormGroup = this.formBuilder.group([]);
+        formFields.forEach(field => {
+            formForm.addControl(field.Name, this.createFieldFormControl(field, record));
+            if (includeCurrentFormInField) {
+                field.FormFormGroup = formForm;
+            }
+        });
+        if (onlyView) {
+            formForm.disable();
+        }
+
+        return formForm;
+    }
+
+    /**
+     * Funzione per creare e aggiungere al FormGroup rappresentante la form un nuovo FormControl a partire da un Field.
+     * In nuovo FormControl avrà il nome del campo passato e verranno impostati i Validators in base al tipo del campo stesso.
+     * @param field BaseField per cui creare il FormControl da inserire nel FormGroup dela form.
+     */
+    private createFieldFormControl(field: BaseField, record: Record): AbstractControl {
+        const validators: Array<ValidatorFn> = [];
+
+        if (field.Required)
+            validators.push(Validators.required);
+
+        switch (field.FieldType) {
+            case FieldTypeEnum["Campo di testo"]:
+                if ((field as TextField).MaxLenght) { validators.push(Validators.maxLength((field as TextField).MaxLenght)); }
+                if ((field as TextField).MinLenght) { validators.push(Validators.minLength((field as TextField).MinLenght)); }
+                switch ((field as TextField).TextMask) {
+                    case TextMaskEnum.Url:
+                        validators.push(Validators.pattern(UrlRegex));
+                        break;
+                    case TextMaskEnum.Email:
+                        validators.push(Validators.email);
+                        break;
+                    case TextMaskEnum.Telefono:
+                        validators.push(Validators.pattern(TelRegex));
+                        break;
+                }
+                break;
+            case FieldTypeEnum["Area di testo"]:
+                if ((field as TextareaField).MaxLenght) { validators.push(Validators.maxLength((field as TextareaField).MaxLenght)); }
+                if ((field as TextareaField).MinLenght) { validators.push(Validators.minLength((field as TextareaField).MinLenght)); }
+                break;
+            case FieldTypeEnum.Allegato:
+            case FieldTypeEnum.Immagine:
+                if (field.Required)
+                    validators.push(ArrayValidators.minLenght(1));
+                break;
+            case FieldTypeEnum['Elenco generico']:
+                if ((field as ListValueField).IsMultiChoiche)
+                    if (field.Required)
+                        validators.push(ArrayValidators.minLenght(1));
+                break;
+        }
+
+        return new FormControl(record[field.Name], validators);
+    }
+
+    /**
+     * Metodo per configurare gli endpoint da usare di default a partire dall'url base del server
+     * a cui si deve connettere e al token da passare per autenticarsi.
+     * @param baseServerUrl Stringa dell'url base del server (es: "http://localhost:5000").
+     * @param userToken Token dell'utente loggato da usare per autenticarsi se necessario.
+     * @returns Resituisce la configurazione completa degli endPoint da usare di default.
+     */
+    public ConfigureDefaultEndPoints(baseServerUrl: string, userToken: string): EndPointConfiguration {
+        let endPointConfiguration: EndPointConfiguration = new EndPointConfiguration();
+        endPointConfiguration = new EndPointConfiguration();
+        endPointConfiguration.Records = {
+            GetByFormIDEndPoint: {
+                Url: baseServerUrl + "/api/v1/getall",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            GetByIDEndPoint: {
+                Url: baseServerUrl + "/api/v1/getByID",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            SaveEndPoint: {
+                Url: baseServerUrl + "/api/v1/save",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            },
+            DuplicateEndPoint: {
+                Url: baseServerUrl + "/api/v1/duplicate",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            },
+            DeleteEndPoint: {
+                Url: baseServerUrl + "/api/v1/delete",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.DELETE,
+            }
+        }
+        endPointConfiguration.Forms = {
+            GetByIDEndPoint: {
+                Url: baseServerUrl + "/api/conf/form",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            SaveEndPoint: {
+                Url: baseServerUrl + "/api/conf/form",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            }
+        }
+        return endPointConfiguration;
+    }
+
+    /**
+     * Metodo che data la configurazione di un endpoint costruisce l'url da chiamare, gli eventuali parametri
+     * da passare (nel body o nella rotta) ed effettua la chiamata. Al termine della chiamata esegue le eventuali
+     * funzioni di callback (sia in caso di successo che in caso di errore) passate in input.
+     * @param endPointData Cofigurazione dell'endpoint da chiamare.
+     * @param dynamicModuleParams Array dei parametri aggiunti dal modulo dinamico a quelli già configurati
+     * (ad esempio il record o la form da salvare oppure l'ID per recuperare una particolare entità).
+     * @param callback Metodo da eseguire in caso di successo dopo la chiamata http.
+     * NOTA: in input viene passata la risposta della chiamata stessa.
+     * @param errorCallBack Metodo da eseguire in caso di errore dopo la chiamata http.
+     * NOTA: in input viene passato l'errore generato della chiamata stessa.
+     */
+    public RunEndPointCall(
+        endPointData: EndPointData,
+        dynamicModuleParams: Array<EndPointDataParams> = null,
+        callback: (e: Form | Record | Array<Record> ) => void  = null,
+        errorCallBack: (err: unknown) => void = null
+        ): void {
+        this.spinnerService.addRequestCounter();
+
+        let url = `${endPointData.Url}`;
+        let queryParams: string = null;
+        const bodyParams = {
+            AdditionalParams: {}
+        };
+
+        // Se nella configurazione sono stati definiti parametri da aggiungere alla chiamata questi vengono ciclati
+        // e aggiunti nel punto in cui devono essere usati.
+        if (endPointData.Params) {
+            endPointData.Params.forEach(p => {
+                switch (p.ParamType) {
+                    case ParamTypeEnum['Query param']: {
+                        const stringParam: string = p.ParamName + "=" + p.ParamValue;
+                        queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                        break;
+                    }
+                    case ParamTypeEnum['In route']: {
+                        url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                        break;
+                    }
+                    case ParamTypeEnum['In Body']: {
+                        bodyParams.AdditionalParams[p.ParamName] = p.ParamValue;
+                        break;
+                    }
+                }
+            });
+        }
+
+        // Se sono stati passati parametri da aggiungere alla chiamata definiti all'interno del modulo dinamico
+        // vengono ciclati e aggiunti nel punto in cui devono essere usati dopo quelli definiti nella configurazione.
+        if (dynamicModuleParams) {
+            dynamicModuleParams.forEach(p => {
+                switch (p.ParamType) {
+                    case ParamTypeEnum['Query param']: {
+                        const stringParam: string = p.ParamName + "=" + p.ParamValue;
+                        queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                        break;
+                    }
+                    case ParamTypeEnum['In route']: {
+                        url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                        break;
+                    }
+                    case ParamTypeEnum['In Body']: {
+                        bodyParams[p.ParamName] = p.ParamValue;
+                        break;
+                    }
+                }
+            })
+        }
+
+        if (queryParams != null) {
+            url = (url.endsWith("/") ? url.substring(0, url.length - 1) : url) + "?" + queryParams;
+        }
+
+        this.http.request(endPointData.RequestMethod, url, {
+            headers: endPointData.Token ? { Authorization: endPointData.Token } : null,
+            body: ![RequestMethodEnum.DELETE, RequestMethodEnum.GET].includes(endPointData.RequestMethod) ? bodyParams : null
+        })
+            .subscribe(
+                (res: Form | Record | Array<Record> ) => {
+                    this.spinnerService.removeRequestCounter();
+                    if (callback) {
+                        callback(res);
+                    }
+                },
+                (error) => {
+                    this.spinnerService.removeRequestCounter();
+                    if (errorCallBack) {
+                        errorCallBack(error);
+                    }
+                    EqpDynamicModuleDialogService.Error(error.message);
+                    throw new Error(error.message);
+                }
+            );
+    }
+}

package/{public-api.d.ts → src/public-api.ts}

@@ -1,3 +1,6 @@
+/*
+ * Public API Surface of eqp-dynamic-module
+ */
 export * from './lib/eqp-dynamic-module.module';
 export * from './lib/components/exported/eqp-dynamic-module/eqp-dynamic-module.component';
 export * from './lib/components/exported/eqp-dynamic-module-configurator/eqp-dynamic-module-configurator.component';

package/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "eqp",
+      "kebab-case"
+    ]
+  }
+}