Re-organize webcfg structure

WebConfigGenerator/src/components/fields/CheckboxGroup.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="form-item form-checkboxes">
+        <label v-for="checkbox in schema.fields" :for="checkbox.field" class="checkbox">
+            <input type="checkbox" :id="checkbox.field" :name="checkbox.field" :required="checkbox.required" v-model="value">
+            {{ checkbox.label }}
+            <span v-if="checkbox.required" class="req">*</span>
+        </label>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'CheckboxGroup'
+    };
+</script>

WebConfigGenerator/src/components/fields/InputCheckbox.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field" class="checkbox" @click.self="value = !value">
+            <button class="button small" :class="{ outline: value }" @click.prevent="value = false">✖</button>
+            <button class="button small" :class="{ outline: !value }" @click.prevent="value = true">✔</button>
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+        </label>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputCheckbox'
+    };
+</script>
+
+<style lang="scss">
+    .checkbox {
+        button {
+            transition: all .3s;
+            margin-right: 2px;
+
+            &:last-of-type {
+                margin-right: 5px;
+            }
+        }
+    }
+
+    .checkbox-toggle {
+        height: 100%;
+    }
+</style>

WebConfigGenerator/src/components/fields/InputFlag.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ schema.description }}</span>
+        </label>
+
+        <div class="row gutters">
+            <div class="col col-10">
+                <div class="form-input">
+                    <select v-model="flagValue" :id="schema.field">
+                        <option v-for="val in schema.values" :value="val.value">{{ $t(val.name) }}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col col-2">
+                <div class="form-input">
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                </div>
+            </div>
+        </div>
+
+        <p class="label-list">
+            <span v-for="(item, index) in items" class="label outline" @click.prevent="removeElement(index)">{{ resolveOption(item, schema.values) }}</span>
+        </p>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputFlag',
+        data() {
+            return {
+                items: [], // Vue doesn't work well with Sets...
+                flagValue: this.schema.defaultValue
+            };
+        },
+        methods: {
+            addElement() {
+                if (!this.flagValue && this.flagValue !== 0) return;
+                if (!this.items.includes(this.flagValue)) this.items.push(this.flagValue);
+                this.flagValue = this.schema.defaultValue;
+                this.value = this.items.reduce((el, sum) => { return el + sum; });
+            },
+            removeElement(index) {
+                this.items.splice(index, 1);
+                this.value = this.items.reduce((el, sum) => { return el + sum; });
+            },
+            resolveOption(toResolve, options) {
+                if (!options) return toResolve;
+
+                options.forEach(({ value, name }) => {
+                    if (toResolve === value) toResolve = name;
+                });
+
+                return toResolve;
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .label-list {
+        margin-top: 5px;
+        margin-bottom: 0;
+
+        .label {
+            margin: 0 5px;
+            cursor: pointer;
+            transition: all 0.1s;
+
+            &:hover {
+                background: black;
+                color: white;
+            }
+        }
+    }
+</style>

WebConfigGenerator/src/components/fields/InputMap.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ $t(schema.description) }}</span>
+        </label>
+
+        <div class="row gutters">
+            <div class="col col-5">
+                <div class="form-item">
+                    <input v-if="!schema.keys" type="text" :placeholder="schema.keyPlaceholder" class="map-key" :class="{ error: keyInvalid }" v-model="mapKey">
+                    <span v-if="!schema.keys && keyInvalid" class="error">{{ keyErrors.join(' ') }}</span>
+                    <select v-if="schema.keys" v-model="mapKey">
+                        <option v-for="key in schema.keys" :value="key.value">{{ $t(key.name) }}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col col-5">
+                <div class="form-item">
+                    <input v-if="!schema.values" type="text" :placeholder="schema.valuePlaceholder" class="map-value" :class="{ error: valueInvalid }" v-model="mapValue">
+                    <span v-if="!schema.values && valueInvalid" class="error">{{ valueErrors.join(' ') }}</span>
+                    <select v-if="schema.values" v-model="mapValue">
+                        <option v-for="val in schema.values" :value="val.value">{{ $t(val.name) }}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col col-2">
+                <div class="form-input">
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                </div>
+            </div>
+        </div>
+
+        <p class="label-list">
+            <span v-for="(value, key) in items" class="label outline" @click.prevent="removeElement(key)">{{ resolveOption(key, schema.keys)
+                }} => {{ resolveOption(value, schema.values) }}</span>
+        </p>
+    </div>
+</template>
+
+<script>
+    import { each } from 'lodash';
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputMap',
+        computed: {
+            keyErrors() {
+                if (!this.schema.keyValidator) return [];
+                return this.validate(this.mapKey, this.schema.keyValidator);
+            },
+            keyInvalid() {
+                return this.keyErrors.length !== 0;
+            },
+            valueErrors() {
+                if (!this.schema.valueValidator) return [];
+                return this.validate(this.mapValue, this.schema.valueValidator);
+            },
+            valueInvalid() {
+                return this.valueErrors.length !== 0;
+            }
+        },
+        data() {
+            return {
+                items: {}, // Vue doesn't work well with Maps...
+                mapKey: this.schema.defaultKey,
+                mapValue: this.schema.defaultValue
+            };
+        },
+        methods: {
+            addElement() {
+                if (!this.mapValue && this.mapValue !== 0 || !this.mapKey && this.mapKey !== 0) return;
+
+                if (this.hasErrors()) return;
+
+                this.items[this.mapKey] = this.mapValue;
+                this.mapValue = this.schema.defaultValue;
+                this.mapKey = this.schema.defaultKey;
+                this.$emit('update', this.items, this.schema.field);
+            },
+            removeElement(key) {
+                this.$delete(this.items, key);
+                this.$emit('update', this.items, this.schema.field);
+            },
+            resolveOption(toResolve, options) {
+                if (!options) return toResolve;
+
+                options.forEach(({ value, name }) => {
+                    if (toResolve === value) toResolve = name;
+                });
+
+                return toResolve;
+            },
+            hasErrors() {
+                const invalid = this.keyInvalid || this.valueInvalid;
+                if (!invalid) return false;
+
+                const fields = [];
+                if (this.keyInvalid) each(this.$el.getElementsByClassName('map-key'), field => fields.push(field));
+                if (this.valueInvalid) each(this.$el.getElementsByClassName('map-value'), field => fields.push(field));
+
+                clearTimeout(this.shakeTimeout);
+                each(fields, field => { field.classList.add('shake'); });
+                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+
+                return true;
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .label-list {
+        margin-top: 5px;
+        margin-bottom: 0;
+
+        .label {
+            margin: 0 5px;
+            cursor: pointer;
+            transition: all 0.1s;
+
+            &:hover {
+                background: black;
+                color: white;
+            }
+        }
+    }
+</style>

WebConfigGenerator/src/components/fields/InputNumber.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ schema.description }}</span>
+        </label>
+        <input type="number" :name="schema.field" :id="schema.field" :placeholder="schema.placeholder" :required="schema.required" :class="{ error: invalid }"
+               v-model.number="value">
+        <span v-if="invalid" class="error">{{ errors.join(' ') }}</span>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputNumber',
+        computed: {
+            errors() {
+                return this.validate(this.value);
+            },
+            valid() {
+                return this.errors.length === 0;
+            },
+            invalid() {
+                return this.errors.length !== 0;
+            }
+        }
+    };
+</script>

WebConfigGenerator/src/components/fields/InputPassword.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ $t(schema.description) }}</span>
+        </label>
+        <input type="password" :name="schema.field" :id="schema.field" :placeholder="schema.placeholder" :required="schema.required" :class="{ error: invalid }" v-model="value">
+        <span v-if="invalid" class="error">{{ errors.join(' ') }}</span>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputPassword',
+        computed: {
+            errors() {
+                return this.validate(this.value);
+            },
+            valid() {
+                return this.errors.length === 0;
+            },
+            invalid() {
+                return this.errors.length !== 0;
+            }
+        }
+    };
+</script>

WebConfigGenerator/src/components/fields/InputSelect.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ schema.description }}</span>
+        </label>
+        <select :name="schema.field" :id="schema.field" :required="schema.required" v-model="value">
+            <option v-for="option in schema.options" :value="option.value">{{ $t(option.name) }}</option>
+        </select>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputSelect'
+    };
+</script>

WebConfigGenerator/src/components/fields/InputSet.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ $t(schema.description) }}</span>
+        </label>
+
+        <div class="row gutters">
+            <div class="col col-10">
+                <div class="form-input">
+                    <input v-if="!schema.values" type="text" :name="schema.field" :placeholder="schema.placeholder" :id="schema.field" class="set-value" :class="{ error: invalid }"
+                           v-model="setValue">
+                    <span v-if="!schema.values && invalid" class="error">{{ errors.join(' ') }}</span>
+                    <select v-if="schema.values" v-model="setValue" :id="schema.field">
+                        <option v-for="val in schema.values" :value="val.value">{{ $t(val.name) }}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col col-2">
+                <div class="form-input">
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                </div>
+            </div>
+        </div>
+
+        <p class="label-list">
+            <span v-for="(item, index) in items" class="label outline" @click.prevent="removeElement(index)">{{ resolveOption(item, schema.values) }}</span>
+        </p>
+    </div>
+</template>
+
+<script>
+    import { each } from 'lodash';
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputSet',
+        computed: {
+            errors() {
+                return this.schema.values ? [] : this.validate(this.setValue);
+            },
+            invalid() {
+                return this.errors.length !== 0;
+            }
+        },
+        data() {
+            return {
+                items: [], // Vue doesn't work well with Sets...
+                setValue: this.schema.defaultValue
+            };
+        },
+        methods: {
+            addElement() {
+                if (!this.setValue && this.setValue !== 0) return;
+                if (this.hasErrors()) return;
+                if (!this.items.includes(this.setValue)) this.items.push(this.setValue);
+                this.setValue = this.schema.defaultValue;
+                this.$emit('update', this.items, this.schema.field);
+            },
+            removeElement(index) {
+                this.items.splice(index, 1);
+                this.$emit('update', this.items, this.schema.field);
+            },
+            resolveOption(toResolve, options) {
+                if (!options) return toResolve;
+
+                options.forEach(({ value, name }) => {
+                    if (toResolve === value) toResolve = name;
+                });
+
+                return toResolve;
+            },
+            hasErrors() {
+                if (!this.invalid) return false;
+
+                const fields = [];
+                each(this.$el.getElementsByClassName('set-value'), field => fields.push(field));
+
+                clearTimeout(this.shakeTimeout);
+                each(fields, field => { field.classList.add('shake'); });
+                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+
+                return true;
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .label-list {
+        margin-top: 5px;
+        margin-bottom: 0;
+
+        .label {
+            margin: 0 5px;
+            cursor: pointer;
+            transition: all 0.1s;
+
+            &:hover {
+                background: black;
+                color: white;
+            }
+        }
+    }
+</style>

WebConfigGenerator/src/components/fields/InputText.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="form-item">
+        <label :for="schema.field">
+            {{ schema.label }}
+            <span v-if="schema.required" class="req">*</span>
+            <span v-if="schema.description" class="desc">{{ $t(schema.description) }}</span>
+        </label>
+        <input type="text" :name="schema.field" :id="schema.field" :placeholder="schema.placeholder" :required="schema.required" :class="{ error: invalid }" v-model="value">
+        <span v-if="invalid" class="error">{{ errors.join(' ') }}</span>
+    </div>
+</template>
+
+<script>
+    import Input from '../mixin/Input.vue';
+
+    export default {
+        mixins: [Input],
+        name: 'InputText',
+        computed: {
+            errors() {
+                return this.validate(this.value);
+            },
+            valid() {
+                return this.errors.length === 0;
+            },
+            invalid() {
+                return this.errors.length !== 0;
+            }
+        }
+    };
+</script>