Skip to content

Commit 2b42c74

Browse files
AbrynosAbrynos
authored
Implement #1449 - speed up configuration workflow (#1450)
* Implement #1449 * Properly localize newly added text * Remove done TODO comments * Remove obsolete methods * Replace function parameter reassignment with local const * Change displayed texts casing to match master branch
1 parent a094ca7 commit 2b42c74

File tree

5 files changed

+79
-84
lines changed

5 files changed

+79
-84
lines changed

‎src/components/ConfigEditor.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
22
<div class="config-editor">
3-
<template v-if="categories">
4-
<ConfigCategory v-for="category in categories" v-if="categoryFields(category.name).length" :key="category.name" :name="category.name">
5-
<component :is="componentFromField(field)" v-for="field in categoryFields(category.name)" :key="field.param" class="form-item--config" :schema="field" :current-value="model[field.paramName]" @update="updateModel"></component>
3+
<template v-if="nonEmptyCategories">
4+
<ConfigCategory v-for="category in nonEmptyCategories" :key="category.name" :name="category.name">
5+
<component :is="componentFromField(field)" v-for="field in categoryFields(category.name)" :key="field.param" class="form-item--config" :schema="field" :currentValue="model[field.paramName]" @update="updateModel"></component>
66
</ConfigCategory>
77

88
<ConfigCategory v-if="uncategorizedFields.length" key="Other" :name="$t('other')">
9-
<component :is="componentFromField(field)" v-for="field in uncategorizedFields" :key="field.param" class="form-item--config" :schema="field" :current-value="model[field.paramName]" @update="updateModel"></component>
9+
<component :is="componentFromField(field)" v-for="field in uncategorizedFields" :key="field.param" class="form-item--config" :schema="field" :currentValue="model[field.paramName]" @update="updateModel"></component>
1010
</ConfigCategory>
1111
</template>
1212

13-
<template v-if="!categories">
13+
<template v-if="!nonEmptyCategories">
1414
<fieldset class="config-uncategorized">
15-
<component :is="componentFromField(field)" v-for="field in uncategorizedFields" :key="field.param" class="form-item--config" :schema="field" :current-value="model[field.paramName]" @update="updateModel"></component>
15+
<component :is="componentFromField(field)" v-for="field in uncategorizedFields" :key="field.param" class="form-item--config" :schema="field" :currentValue="model[field.paramName]" @update="updateModel"></component>
1616
</fieldset>
1717
</template>
1818
</div>
@@ -53,6 +53,11 @@
5353
},
5454
},
5555
computed: {
56+
nonEmptyCategories() {
57+
if (!this.categories) return this.categories;
58+
59+
return this.categories.filter(category => this.categoryFields(category.name).length);
60+
},
5661
uncategorizedFields() {
5762
if (!this.categories) return this.fields;
5863

‎src/components/ConfigFields/InputFlag.vue‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
<template>
22
<div class="form-item input-option">
3-
<input-label :label="label" :has-description="hasDescription"></input-label>
3+
<input-label :label="label" :hasDescription="hasDescription"></input-label>
44

55
<div class="form-item__value">
6-
<div class="input-option__field">
7-
<select :id="field" v-model="flagValue" class="form-item__input">
8-
<option v-for="(flagValue, name) in flags" v-show="flagValue === 0 || !((value & flagValue) === flagValue)" :key="name" :value="flagValue">
9-
{{ name }}
10-
</option>
11-
</select>
12-
<button class="button" @click.prevent="addFlag">
13-
{{ $t('add') }}
14-
</button>
15-
</div>
6+
<select :id="field" v-model="selectedElement" class="form-item__input" @change="addFlag($event.target.value)">
7+
<option :value="null" disabled selected hidden>{{ $t('input-select-enum-value') }}</option>
8+
<option v-for="(enumValue, name) in flags" v-show="enumValue === 0 || !((value & enumValue) === enumValue)" :key="name" :value="enumValue">
9+
{{ name }}
10+
</option>
11+
</select>
1612

1713
<div class="input-option__items">
18-
<button v-for="i in 32" v-if="value & (1 << i)" :key="i" class="button input-option__item" @click.prevent="removeFlag(1 << i)">
19-
{{ resolveFlagName(1 << i) }}
14+
<button v-for="enumValue in getSelectedFlagValues()" :key="enumValue" class="button input-option__item" @click.prevent="removeFlag(enumValue)">
15+
{{ resolveFlagName(enumValue) }}
2016
</button>
2117
</div>
2218
</div>
@@ -33,7 +29,7 @@
3329
mixins: [Input],
3430
data() {
3531
return {
36-
flagValue: this.schema.defaultValue,
32+
selectedElement: null,
3733
};
3834
},
3935
computed: {
@@ -42,12 +38,21 @@
4238
},
4339
},
4440
methods: {
45-
addFlag() {
46-
if (!this.flagValue && this.flagValue !== 0) return;
41+
getSelectedFlagValues() {
42+
return [...Array(32).keys()].map(i => 1 << i).filter(val => this.value & val);
43+
},
44+
addFlag(input) {
45+
const parsedInput = typeof (input) !== (typeof (0)) ? parseInt(input, 10) : input;
46+
47+
if (!parsedInput && parsedInput !== 0) return;
48+
49+
if (parsedInput === 0) {
50+
this.value = 0;
51+
} else {
52+
this.value |= parsedInput;
53+
}
4754
48-
if (this.flagValue === 0) this.value = 0;
49-
this.value |= this.flagValue;
50-
this.flagValue = this.schema.defaultValue;
55+
this.selectedElement = null;
5156
},
5257
removeFlag(value) {
5358
this.value &= ~value;

‎src/components/ConfigFields/InputList.vue‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
<template>
22
<div class="form-item">
3-
<input-label :label="label" :has-description="hasDescription"></input-label>
3+
<input-label :label="label" :hasDescription="hasDescription"></input-label>
44

55
<div class="form-item__value">
6-
<div class="input-option__field">
7-
<select :id="field" v-model="element" class="form-item__input" :disabled="!availableEnumValues.length">
8-
<option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
9-
{{ name }}
10-
</option>
11-
<option v-if="!availableEnumValues.length" :value="undefined" disabled>
12-
{{ $t('input-all-selected') }}
13-
</option>
14-
</select>
15-
16-
<button class="button" @click.prevent="addElement">
17-
{{ $t('add') }}
18-
</button>
19-
</div>
6+
<select :id="field" v-model="selectedElement" class="form-item__input" :disabled="!availableEnumValues.length" @change="addElement($event.target.value)">
7+
<option :value="null" disabled selected hidden>{{ $t('input-select-enum-value') }}</option>
8+
<option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
9+
{{ name }}
10+
</option>
11+
<option v-if="!availableEnumValues.length" :value="undefined" disabled>
12+
{{ $t('input-all-selected') }}
13+
</option>
14+
</select>
2015

2116
<div class="input-option__items">
22-
<button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElement(index)">
17+
<button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElementAtIndex(index)">
2318
{{ resolveOption(item) }}
2419
</button>
2520
</div>
@@ -37,7 +32,7 @@
3732
mixins: [Input],
3833
data() {
3934
return {
40-
element: null,
35+
selectedElement: null,
4136
};
4237
},
4338
computed: {
@@ -55,23 +50,17 @@
5550
return this.schema.values.values;
5651
},
5752
},
58-
created() {
59-
this.element = this.getDefaultElement();
60-
},
6153
methods: {
62-
getDefaultElement() {
63-
return this.availableEnumValues[0];
64-
},
65-
addElement() {
66-
if (!this.element && this.element !== 0) return;
67-
if (this.value.includes(this.element)) return;
54+
addElement(input) {
55+
const parsedInput = typeof (input) !== (typeof (0)) ? parseInt(input, 10) : input;
56+
57+
if (this.value.includes(parsedInput)) return;
6858
69-
this.value.push(this.element);
70-
this.element = this.getDefaultElement();
59+
this.value.push(parsedInput);
60+
this.selectedElement = null;
7161
},
72-
removeElement(index) {
62+
removeElementAtIndex(index) {
7363
this.value.splice(index, 1);
74-
this.element = this.getDefaultElement();
7564
},
7665
resolveOption(value) {
7766
return Object.keys(this.enumValues).find(key => this.enumValues[key] === value);

‎src/components/ConfigFields/InputSet.vue‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
<template>
22
<div class="form-item">
3-
<input-label :label="label" :has-description="hasDescription"></input-label>
3+
<input-label :label="label" :hasDescription="hasDescription"></input-label>
44

55
<div class="form-item__value">
6-
<div class="input-option__field">
7-
<select :id="field" v-model="element" class="form-item__input" :disabled="!availableEnumValues.length">
8-
<option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
9-
{{ name }}
10-
</option>
11-
<option v-if="!availableEnumValues.length" :value="undefined" disabled>
12-
{{ $t('input-all-selected') }}
13-
</option>
14-
</select>
15-
16-
<button class="button" @click.prevent="addElement">
17-
{{ $t('add') }}
18-
</button>
19-
</div>
6+
<select :id="field" v-model="selectedElement" class="form-item__input" :disabled="!availableEnumValues.length" @change="addElement($event.target.value)">
7+
<option :value="null" disabled selected hidden>{{ $t('input-select-enum-value') }}</option>
8+
<option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
9+
{{ name }}
10+
</option>
11+
<option v-if="!availableEnumValues.length" :value="undefined" disabled>
12+
{{ $t('input-all-selected') }}
13+
</option>
14+
</select>
2015

2116
<div class="input-option__items">
22-
<button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElement(index)">
17+
<button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElement(item)">
2318
{{ resolveOption(item) }}
2419
</button>
2520
</div>
@@ -37,7 +32,7 @@
3732
mixins: [Input],
3833
data() {
3934
return {
40-
element: null,
35+
selectedElement: null,
4136
};
4237
},
4338
computed: {
@@ -57,24 +52,24 @@
5752
},
5853
created() {
5954
this.value.sort();
60-
this.element = this.getDefaultElement();
6155
},
6256
methods: {
63-
getDefaultElement() {
64-
return this.availableEnumValues[0];
65-
},
66-
addElement() {
67-
if (!this.element && this.element !== 0) return;
68-
if (this.value.includes(this.element)) return;
57+
addElement(input) {
58+
const parsedInput = typeof (input) !== (typeof (0)) ? parseInt(input, 10) : input;
59+
60+
if (this.value.includes(parsedInput)) return;
6961
70-
this.value.push(this.element);
62+
this.value.push(parsedInput);
7163
this.value.sort();
7264
73-
this.element = this.getDefaultElement();
65+
this.selectedElement = null;
7466
},
75-
removeElement(index) {
76-
this.value.splice(index, 1);
77-
this.element = this.getDefaultElement();
67+
removeElement(input) {
68+
if (typeof (input) !== (typeof (0))) {
69+
input = parseInt(input);
70+
}
71+
72+
this.value = this.value.filter(item => item !== input);
7873
},
7974
resolveOption(value) {
8075
return Object.keys(this.enumValues).find(key => this.enumValues[key] === value);

‎src/i18n/locale/default.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
"input-label-steamguard": "Steam Guard code",
9696
"input-label-steamparentalcode": "Steam Parental code",
9797
"input-label-twofactorauthentication": "2FA code",
98+
"input-select-enum-value": "Select option",
9899
"input-no-code-login": "You have to enter a Steam login name",
99100
"input-no-code-password": "You have to enter a Steam password",
100101
"input-no-code-steamguard": "You have to enter a Steam Guard code",

0 commit comments

Comments
 (0)