semi-automatic-ui-process-list/dataImportArea.js

/**
 * Im Grunde eine gekapselte Textarea
 * Das Feld in welches roher Datentext eingefügt wird. 
 * Wir in der Zukunft eventuell in einen sepperaten View verschoben.
 *  
 * @param {Modifier} modifier 
 * @returns {Component}
 */
function rawTextImportArea(modifier = new Modifier()) {
    return builder.div()
        .modifier(
            new Modifier()
                .fillMaxSize()
                .padding(6)
        )
        .modifier(modifier)
        .setAttribute("id", "import-area")
        .chainChild()
        .textarea()
        .name("import-textarea")
        .modifier(
            new Modifier()
                .clip(Shapes.RoundedCorner.all(12))
                .fillMaxSize()
                .padding(6)
                .dimensions().height(120)
        )
}


/**
 * Bestimmt eine "Regel" die auf einen Datensatz im Rahmen seier Bearbeitung ausgeführt werden soll.
 */
class ProcessingRule {
    /**
     * @type {boolean} use Definiert ob diese Regel genutzt werden soll
     */
    use;
    /**
     * @type {*} der tatsächliche Wert, mit welcher die Regel definiert wurde.
     */
    value;

    /**
     * 
     * @param {string} display Der dartgestellte Text
     * @param {string} id Die referenz id
     * @param {string} type Der Input-Field-Type
     * @param {string} placeholder Der Platzhalterwert
     * @param {string} desc Die Beschreibung die beim Mouseover angezeigt werden soll (html-title)
     * @param {boolean} isFlagged Definiert ob eine ProcessingRule 
     *                  über eine Checkbox aktiviert/genutzt werden soll/darf.
     */
    constructor(display, id, type, placeholder, desc, isFlagged) {
        this.display = display;
        this.id = id;
        this.type = type;
        this.placeholder = placeholder;
        this.desc = desc;
        this.isFlagged = isFlagged;
    }

    /**
     * 
     * @returns {HTMLElement|null}
     */
    _getCorrespondingComponent() {
        return document.getElementById(this.id)
    }

    /**
     * 
     * @returns {boolean}
     */
    _getToBeUsedState() {
        return !this.isFlagged
            || this._getCorrespondingComponent()
                .querySelector('input[name="is_to_be_used"]').checked === true;
    }

    /**
     * 
     * @returns {*}
     */
    _getInputTagValue() {
        let container = this._getCorrespondingComponent()
            .querySelector('.value-container');
        if (this.type === "checkbox") {
            return container.checked === true;
        }

        if (container.value === "") {
            return this.placeholder;
        }
        return container.value;
    }

    updateFromUi() {
        this.use = this._getToBeUsedState();
        this.value = this._getInputTagValue();
    }
}


/**
 * PRD := ProcessingRuleDefine
 * Die Überschrift und unter der Bedingung rule.isFlagged auch eine checkbox die bestimmt 
 * ob die ProcessingRule genutzt werden soll.
 * 
 * @param {ProcessingRule} rule
 * @returns {Row}
 */
function prdUseboxAndLabel(rule) {
    return builder.row()
        .arrangement(Arrangement.CENTER)
        .childContext([
            builder.inputTags.checkbox({ "name": "is_to_be_used" })
                .modifier(new Modifier().margin().right(6))
                .hiddenByCondition(!rule.isFlagged)
            ,
            builder.label()
                .setAttribute("for", rule.id)
                .text(rule.display)
        ]);
}


/**
 * Componente die eine ProcessingRule definiert.
 * - Ob sie verwendet werden soll
 * - welche Standartwert erwartet/verwendet werden soll
 * 
 * @param {ProcessingRule} rule 
 * @returns {Column}
 */
function processingRuleDefineComponent(rule, index, arr, modifier = new Modifier()) {
    return builder.column()
        .isHigherComponent()
        .setAttribute("id", rule.id)
        .title(rule.desc)
        .modifier(modifier)
        .arrangement(Arrangement.CENTER)
        .childContext([
            prdUseboxAndLabel(rule)
            ,
            builder.span()
                .modifier(new Modifier().fillMaxSize())
                .arrangement(Arrangement.CENTER)
                .chainChild()
                .input(rule.type)
                .addStyleClass("value-container")
                .setAttribute("placeholder", rule.placeholder)
                .modifier(
                    new Modifier()
                        .padding(4)
                        .setStyleRule("field-sizing", "content")
                )
                .apply(function (el) {
                    if (!rule.isFlagged) {
                        el.setAttribute("deactivated", "");
                    }
                })
        ])
}


/**
 * Bereich der ProcessingRules
 * 
 * @param {ProcessingRule} rule 
 * @returns {Row}
 */
function processingRulesArea(modifier = new Modifier()) {
    return builder.row()
        .modifier(
            new Modifier()
                .fillMaxWidth()
                .padding(8)
        )
        .modifier(modifier)
        .arrangement(Arrangement.SPACE_EVENLY)
        .childContext(
            Object.keys(processingRules)
                .map(def => processingRules[def])
                .map(processingRuleDefineComponent)
        )
}


let importedData = [];


/**
 * Funktion keine Komponente
 */
function importEntries() {
    let rawtext = document.getElementById("import-area")
        .querySelector("textarea").value;
    let prules = Object.keys(processingRules)
        .reduce((a, c) => {
            let r = processingRules[c];
            let pr = new ProcessingRule(r.display, r.id, r.type, r.placeholder, r.desc, r.isFlagged);
            pr.updateFromUi();
            a[c] = pr;
            return a;
        }, processingRules);

    let lines = rawtext.split(prules.line_splitter.value);
    let splittedLines = lines
        .filter(e => e.trim() !== "");

    console.log(splittedLines);

    if (prules.entry_splitter.use) {
        console.log(prules.entry_splitter.value);
        splittedLines = splittedLines
            .map(line => line.split(prules.entry_splitter.value))
    } else {
        splittedLines = splittedLines
            .map(e => [e]);
    }

    importedData = splittedLines;
    console.log(splittedLines);

    let upcoming = document.querySelector(".plist-upcoming");

    splittedLines = splittedLines.map((e, i) => listEntryRow(e, i).generate().compext);

    splittedLines
        .forEach(element => {
            upcoming.insertAdjacentElement(
                "beforeend",
                element
            )
        });
}


/**
 * Bereich mit ausführbaren Elementen
 * 
 * @param {ProcessingRule} rule 
 * @returns {Row}
 */
function commandRow(modifier = new Modifier()) {
    return builder.row()
        .modifier(modifier)
        .childContext([
            builder.button()
                .text("Import")
                .addStyleClass("import-trigger")
                .addEventListener(
                    "click",
                    importEntries
                )
        ])
}


/**
 * 
 * 
 * @param {ProcessingRule} rule 
 * @returns {Column}
 */
function importArea(modifier = new Modifier()) {
    return builder.column()
        .addStyleClass("area")
        .addStyleClass("area-import")
        .modifier(
            new Modifier()
                .fillMaxWidth()
                .padding(12)
                .background(colorModifiers.import.secondary)
        )
        .modifier(componentModifiers.majorArea)
        .modifier(modifier)
        .arrangement(Arrangement.CENTER)
        .childContext([
            builder.header(4).text("Import")
            ,
            builder.column()
                .arrangement(Arrangement.CENTER)
                .modifier(
                    new Modifier()
                        .padding().all(32).top(16)
                )
                .childContext([

                    rawTextImportArea()
                    ,
                    processingRulesArea()
                    ,
                    commandRow()
                ])
        ])
}