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
JustArchiNET · Jun 29, 2021 · 2b42c74 · 2b42c74
1 parent a094ca7
commit 2b42c74
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 84 deletions.
diff --git a/src/components/ConfigEditor.vue b/src/components/ConfigEditor.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="config-editor">
-    <template v-if="categories">
-      <ConfigCategory v-for="category in categories" v-if="categoryFields(category.name).length" :key="category.name" :name="category.name">
-        <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>
+    <template v-if="nonEmptyCategories">
+      <ConfigCategory v-for="category in nonEmptyCategories" :key="category.name" :name="category.name">
+        <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>
       </ConfigCategory>
 
       <ConfigCategory v-if="uncategorizedFields.length" key="Other" :name="$t('other')">
-        <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>
+        <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>
       </ConfigCategory>
     </template>
 
-    <template v-if="!categories">
+    <template v-if="!nonEmptyCategories">
       <fieldset class="config-uncategorized">
-        <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>
+        <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>
       </fieldset>
     </template>
   </div>
@@ -53,6 +53,11 @@
       },
     },
     computed: {
+      nonEmptyCategories() {
+        if (!this.categories) return this.categories;
+
+        return this.categories.filter(category => this.categoryFields(category.name).length);
+      },
       uncategorizedFields() {
         if (!this.categories) return this.fields;
 

diff --git a/src/components/ConfigFields/InputFlag.vue b/src/components/ConfigFields/InputFlag.vue
@@ -1,22 +1,18 @@
 <template>
   <div class="form-item input-option">
-    <input-label :label="label" :has-description="hasDescription"></input-label>
+    <input-label :label="label" :hasDescription="hasDescription"></input-label>
 
     <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)" :key="name" :value="flagValue">
-            {{ name }}
-          </option>
-        </select>
-        <button class="button" @click.prevent="addFlag">
-          {{ $t('add') }}
-        </button>
-      </div>
+      <select :id="field" v-model="selectedElement" class="form-item__input" @change="addFlag($event.target.value)">
+        <option :value="null" disabled selected hidden>{{ $t('input-select-enum-value') }}</option>
+        <option v-for="(enumValue, name) in flags" v-show="enumValue === 0 || !((value & enumValue) === enumValue)" :key="name" :value="enumValue">
+          {{ name }}
+        </option>
+      </select>
 
       <div class="input-option__items">
-        <button v-for="i in 32" v-if="value & (1 << i)" :key="i" class="button input-option__item" @click.prevent="removeFlag(1 << i)">
-          {{ resolveFlagName(1 << i) }}
+        <button v-for="enumValue in getSelectedFlagValues()" :key="enumValue" class="button input-option__item" @click.prevent="removeFlag(enumValue)">
+          {{ resolveFlagName(enumValue) }}
         </button>
       </div>
     </div>
@@ -33,7 +29,7 @@
     mixins: [Input],
     data() {
       return {
-        flagValue: this.schema.defaultValue,
+        selectedElement: null,
       };
     },
     computed: {
@@ -42,12 +38,21 @@
       },
     },
     methods: {
-      addFlag() {
-        if (!this.flagValue && this.flagValue !== 0) return;
+      getSelectedFlagValues() {
+        return [...Array(32).keys()].map(i => 1 << i).filter(val => this.value & val);
+      },
+      addFlag(input) {
+        const parsedInput = typeof (input) !== (typeof (0)) ? parseInt(input, 10) : input;
+
+        if (!parsedInput && parsedInput !== 0) return;
+
+        if (parsedInput === 0) {
+          this.value = 0;
+        } else {
+          this.value |= parsedInput;
+        }
 
-        if (this.flagValue === 0) this.value = 0;
-        this.value |= this.flagValue;
-        this.flagValue = this.schema.defaultValue;
+        this.selectedElement = null;
       },
       removeFlag(value) {
         this.value &= ~value;

diff --git a/src/components/ConfigFields/InputList.vue b/src/components/ConfigFields/InputList.vue
@@ -1,25 +1,20 @@
 <template>
   <div class="form-item">
-    <input-label :label="label" :has-description="hasDescription"></input-label>
+    <input-label :label="label" :hasDescription="hasDescription"></input-label>
 
     <div class="form-item__value">
-      <div class="input-option__field">
-        <select :id="field" v-model="element" class="form-item__input" :disabled="!availableEnumValues.length">
-          <option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
-            {{ name }}
-          </option>
-          <option v-if="!availableEnumValues.length" :value="undefined" disabled>
-            {{ $t('input-all-selected') }}
-          </option>
-        </select>
-
-        <button class="button" @click.prevent="addElement">
-          {{ $t('add') }}
-        </button>
-      </div>
+      <select :id="field" v-model="selectedElement" class="form-item__input" :disabled="!availableEnumValues.length" @change="addElement($event.target.value)">
+        <option :value="null" disabled selected hidden>{{ $t('input-select-enum-value') }}</option>
+        <option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
+          {{ name }}
+        </option>
+        <option v-if="!availableEnumValues.length" :value="undefined" disabled>
+          {{ $t('input-all-selected') }}
+        </option>
+      </select>
 
       <div class="input-option__items">
-        <button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElement(index)">
+        <button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElementAtIndex(index)">
           {{ resolveOption(item) }}
         </button>
       </div>
@@ -37,7 +32,7 @@
     mixins: [Input],
     data() {
       return {
-        element: null,
+        selectedElement: null,
       };
     },
     computed: {
@@ -55,23 +50,17 @@
         return this.schema.values.values;
       },
     },
-    created() {
-      this.element = this.getDefaultElement();
-    },
     methods: {
-      getDefaultElement() {
-        return this.availableEnumValues[0];
-      },
-      addElement() {
-        if (!this.element && this.element !== 0) return;
-        if (this.value.includes(this.element)) return;
+      addElement(input) {
+        const parsedInput = typeof (input) !== (typeof (0)) ? parseInt(input, 10) : input;
+
+        if (this.value.includes(parsedInput)) return;
 
-        this.value.push(this.element);
-        this.element = this.getDefaultElement();
+        this.value.push(parsedInput);
+        this.selectedElement = null;
       },
-      removeElement(index) {
+      removeElementAtIndex(index) {
         this.value.splice(index, 1);
-        this.element = this.getDefaultElement();
       },
       resolveOption(value) {
         return Object.keys(this.enumValues).find(key => this.enumValues[key] === value);

diff --git a/src/components/ConfigFields/InputSet.vue b/src/components/ConfigFields/InputSet.vue
@@ -1,25 +1,20 @@
 <template>
   <div class="form-item">
-    <input-label :label="label" :has-description="hasDescription"></input-label>
+    <input-label :label="label" :hasDescription="hasDescription"></input-label>
 
     <div class="form-item__value">
-      <div class="input-option__field">
-        <select :id="field" v-model="element" class="form-item__input" :disabled="!availableEnumValues.length">
-          <option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
-            {{ name }}
-          </option>
-          <option v-if="!availableEnumValues.length" :value="undefined" disabled>
-            {{ $t('input-all-selected') }}
-          </option>
-        </select>
-
-        <button class="button" @click.prevent="addElement">
-          {{ $t('add') }}
-        </button>
-      </div>
+      <select :id="field" v-model="selectedElement" class="form-item__input" :disabled="!availableEnumValues.length" @change="addElement($event.target.value)">
+        <option :value="null" disabled selected hidden>{{ $t('input-select-enum-value') }}</option>
+        <option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :key="name" :value="enumValue">
+          {{ name }}
+        </option>
+        <option v-if="!availableEnumValues.length" :value="undefined" disabled>
+          {{ $t('input-all-selected') }}
+        </option>
+      </select>
 
       <div class="input-option__items">
-        <button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElement(index)">
+        <button v-for="(item, index) in value" :key="index" class="button input-option__item" @click.prevent="removeElement(item)">
           {{ resolveOption(item) }}
         </button>
       </div>
@@ -37,7 +32,7 @@
     mixins: [Input],
     data() {
       return {
-        element: null,
+        selectedElement: null,
       };
     },
     computed: {
@@ -57,24 +52,24 @@
     },
     created() {
       this.value.sort();
-      this.element = this.getDefaultElement();
     },
     methods: {
-      getDefaultElement() {
-        return this.availableEnumValues[0];
-      },
-      addElement() {
-        if (!this.element && this.element !== 0) return;
-        if (this.value.includes(this.element)) return;
+      addElement(input) {
+        const parsedInput = typeof (input) !== (typeof (0)) ? parseInt(input, 10) : input;
+
+        if (this.value.includes(parsedInput)) return;
 
-        this.value.push(this.element);
+        this.value.push(parsedInput);
         this.value.sort();
 
-        this.element = this.getDefaultElement();
+        this.selectedElement = null;
       },
-      removeElement(index) {
-        this.value.splice(index, 1);
-        this.element = this.getDefaultElement();
+      removeElement(input) {
+        if (typeof (input) !== (typeof (0))) {
+          input = parseInt(input);
+        }
+
+        this.value = this.value.filter(item => item !== input);
       },
       resolveOption(value) {
         return Object.keys(this.enumValues).find(key => this.enumValues[key] === value);

diff --git a/src/i18n/locale/default.json b/src/i18n/locale/default.json
@@ -95,6 +95,7 @@
   "input-label-steamguard": "Steam Guard code",
   "input-label-steamparentalcode": "Steam Parental code",
   "input-label-twofactorauthentication": "2FA code",
+  "input-select-enum-value": "Select option",
   "input-no-code-login": "You have to enter a Steam login name",
   "input-no-code-password": "You have to enter a Steam password",
   "input-no-code-steamguard": "You have to enter a Steam Guard code",