Use OpenAPI definitions as configuration schema

src/components/ConfigEditor.vue

@@ -44,14 +44,14 @@
 				required: true
 			},
 			categories: Array,
-			descriptions: Object,
 			extendedFields: Object
 		},
 		computed: {
 			uncategorizedFields() {
 				if (!this.categories) return this.fields;
 
-				const categorizedFields = this.categories.map(category => category.fields).reduce((categorizedFields, categoryFields) => [...categorizedFields, ...categoryFields], []);
+				const categorizedFields = this.categories.map(category => category.fields)
+						.reduce((categorizedFields, categoryFields) => [...categorizedFields, ...categoryFields], []);
 
 				return this.fields.filter(field => !categorizedFields.includes(field.param));
 			},
@@ -60,7 +60,8 @@
 					if (!this.categories) return [];
 					const category = this.categories.find(({ name }) => name === categoryName);
 					if (!category) return [];
-					return this.getFields(category.fields).sort((a, b) => category.fields.indexOf(a.paramName) - category.fields.indexOf(b.paramName));
+					return this.getFields(category.fields)
+							.sort((a, b) => category.fields.indexOf(a.paramName) - category.fields.indexOf(b.paramName));
 				};
 			},
 			isValid() {
@@ -76,26 +77,24 @@
 		},
 		methods: {
 			componentFromField(field) {
+				if (field.format === 'flags') return InputFlag;
+				if (field.enum) return InputEnum;
+
 				switch (field.type) {
 					case 'string':
-					case 'uint64':
 						return InputString;
 					case 'boolean':
 						return InputBoolean;
-					case 'uint32':
-					case 'uint16':
-					case 'byte':
+					case 'integer':
 						return InputNumber;
-					case 'flag':
-						return InputFlag;
-					case 'enum':
-						return InputEnum;
-					case 'hashSet':
-					case 'list':
-						if (['enum'].includes(field.values.type)) return field.type === 'list' ? InputList : InputSet;
-						if (['byte', 'uint16', 'uint32', 'uint64', 'string'].includes(field.values.type)) return InputTag;
-						return InputUnknown;
-					case 'dictionary':
+					case 'array':
+						if (field.items.enum) {
+							if (field.uniqueItems) return InputSet;
+							return InputList;
+						}
+
+						return InputTag;
+					case 'object':
 						return InputDictionary;
 					default:
 						return InputUnknown;
@@ -129,7 +128,8 @@
 					case 'list':
 						return a.length === b.length && a.every((item, index) => item === b[index]);
 					case 'dictionary':
-						return Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(key => a[key] === b[key]);
+						return Object.keys(a).length === Object.keys(b).length && Object.keys(a)
+								.every(key => a[key] === b[key]);
 				}
 
 				return false;
@@ -141,7 +141,8 @@
 				this.$el.style.setProperty('--label-width', 'auto');
 
 				this.$nextTick(() => {
-					const labelWidth = Math.max(...Array.from(this.$el.querySelectorAll('.form-item__label')).map(el => Math.ceil(parseFloat(getComputedStyle(el).width))));
+					const labelWidth = Math.max(...Array.from(this.$el.querySelectorAll('.form-item__label'))
+							.map(el => Math.ceil(parseFloat(getComputedStyle(el).width))));
 					this.$el.style.setProperty('--label-width', `${labelWidth}px`);
 				});
 			}

src/components/ConfigFields/Input.vue

@@ -13,25 +13,22 @@
 			currentValue: true
 		},
 		data() {
-			const initialValue = typeof this.currentValue !== 'undefined' ? this.currentValue : this.schema.defaultValue;
+			const initialValue = typeof this.currentValue !== 'undefined' ? this.currentValue : null;
 
 			return {
 				value: typeof initialValue === 'object' ? JSON.parse(JSON.stringify(initialValue)) : initialValue,
 				showDescription: false
 			};
 		},
 		computed: {
-			defaultValue() {
-				return this.schema.defaultValue;
-			},
 			label() {
 				return this.schema.label || this.schema.param || this.schema.paramName;
 			},
 			field() {
 				return this.schema.paramName;
 			},
 			placeholder() {
-				return this.schema.placeholder || this.schema.defaultValue;
+				return this.schema.placeholder;
 			},
 			description() {
 				return this.schema.description;

src/components/ConfigFields/InputDictionary.vue

@@ -4,17 +4,13 @@
 
 		<div class="form-item__value">
 			<div class="input-option__field input-option__field--three">
-				<input v-if="keyIsString" :id="`${field}-key`" v-model="elementKey" class="form-item__input" type="text" @keydown.enter="addElement">
+				<input :id="`${field}-key`" v-model="elementKey" class="form-item__input" type="text" @keydown.enter="addElement">
 
-				<select v-if="valueIsEnum" :id="`${field}-value`" v-model="elementValue" class="form-item__input">
-					<option v-for="(enumValue, name) in schema.value.values" :value="enumValue">
-						{{ name }}
-					</option>
+				<select :id="`${field}-value`" v-model="elementValue" class="form-item__input">
+					<option v-for="{ label, value } in availableEnumValues" :value="value">{{ label }}</option>
 				</select>
 
-				<button class="button" @click.prevent="addElement">
-					{{ $t('add') }}
-				</button>
+				<button class="button" @click.prevent="addElement">{{ $t('add') }}</button>
 			</div>
 
 			<div class="input-option__items">
@@ -41,20 +37,19 @@
 			};
 		},
 		computed: {
-			keyIsString() {
-				return ['string', 'uint64'].includes(this.schema.key.type);
+			availableEnumValues() {
+				return this.enumValues;
 			},
-			valueIsEnum() {
-				return this.schema.value.type === 'enum';
+			enumValues() {
+				return Object.entries(this.schema.additionalProperties['x-definition'])
+						.map(([label, value]) => ({ label, value }));
 			},
-			valueAvailableEnumValues() {
-				const availableEnumValues = [];
-
-				for (const key of Object.keys(this.schema.value.values)) {
-					availableEnumValues.push(this.schema.value.values[key]);
+			resolveValue() {
+				return value => {
+					const enumValue = this.enumValues.find(({ value: enumValue }) => value === enumValue)
+					if (!enumValue) return value
+					return enumValue.label
 				}
-
-				return availableEnumValues;
 			}
 		},
 		created() {
@@ -66,12 +61,7 @@
 				return null;
 			},
 			getDefaultValue() {
-				if (this.valueIsEnum) return this.valueAvailableEnumValues[0];
-				return null;
-			},
-			resolveValue(value) {
-				if (!this.valueIsEnum) return value;
-				return Object.keys(this.schema.value.values).find(key => this.schema.value.values[key] === value);
+				return this.availableEnumValues[0].value
 			},
 			addElement() {
 				if (!this.elementValue && this.elementValue !== 0 || !this.elementKey && this.elementKey !== 0) return;

src/components/ConfigFields/InputEnum.vue

@@ -4,9 +4,7 @@
 
 		<div class="form-item__value">
 			<select :id="field" v-model="value" class="form-item__input" :name="field">
-				<option v-for="(enumValue, name) in values" v-if="!(name === 'Max' && isLastValue(enumValue))" :value="enumValue">
-					{{ name }}
-				</option>
+				<option v-for="{ label, value } in enums" :value="value">{{ label }}</option>
 			</select>
 		</div>
 
@@ -21,13 +19,8 @@
 		name: 'input-enum',
 		mixins: [Input],
 		computed: {
-			values() {
-				return this.schema.values;
-			}
-		},
-		methods: {
-			isLastValue(value) {
-				return value === Math.max(...Object.values(this.values));
+			enums() {
+				return Object.entries(this.schema['x-definition']).map(([label, value]) => ({ label, value }))
 			}
 		}
 	};

src/components/ConfigFields/InputFlag.vue

@@ -4,11 +4,11 @@
 
 		<div class="form-item__value">
 			<div class="input-option__field">
-				<select :id="field" v-model="flagValue" class="form-item__input">
-					<option v-for="(flagValue, name) in flags" v-show="flagValue === 0 || !((value & flagValue) === flagValue)" :value="flagValue">
-						{{ name }}
-					</option>
+				<select :id="field" v-model="flagValue" class="form-item__input" :disabled="!availableFlags.length">
+					<option v-for="{ label, flag } in availableFlags" :value="flag">{{ label }}</option>
+					<option :value="null" disabled v-if="!availableFlags.length">{{ $t('input-all-selected') }}</option>
 				</select>
+
 				<button class="button" @click.prevent="addFlag">
 					{{ $t('add') }}
 				</button>
@@ -33,27 +33,46 @@
 		mixins: [Input],
 		data() {
 			return {
-				flagValue: this.schema.defaultValue
+				flagValue: null
 			};
 		},
 		computed: {
+			availableFlags() {
+				return this.flags
+						.filter(({ flag }) => (flag & this.value) !== flag);
+			},
 			flags() {
-				return this.schema.values;
+				return Object.entries(this.schema['x-definition'])
+						.map(([label, flag]) => ({
+							label,
+							flag
+						}))
+						.filter(({ flag }) => flag % 2 === 0 || flag === 1);
 			}
 		},
+		created () {
+			this.setDefaultFlag()
+		},
 		methods: {
+			setDefaultFlag() {
+				this.flagValue = !this.availableFlags.length ? null : this.availableFlags[0].flag;
+			},
 			addFlag() {
+				if (!this.flagValue) return;
 				if (!this.flagValue && this.flagValue !== 0) return;
-
 				if (this.flagValue === 0) this.value = 0;
+
 				this.value |= this.flagValue;
-				this.flagValue = this.schema.defaultValue;
+				this.setDefaultFlag();
 			},
 			removeFlag(value) {
 				this.value &= ~value;
+				if (!this.flagValue) this.setDefaultFlag()
 			},
 			resolveFlagName(value) {
-				return Object.keys(this.flags).find(key => this.flags[key] === value);
+				const flag = this.flags.find(({ flag }) => flag === value);
+				if (!flag) return value;
+				return flag.label;
 			}
 		}
 	};