#10 bennung skills und levels

src/components/AutoComplete.vue

@@ -15,19 +15,7 @@
       </div>
       <div class="col">
         <div v-if="selectedResult">
-          <div v-if="type != 'contacttype'">
-            <select
-              class="form-select"
-              aria-label="Selektiere dein Level"
-              v-model="level"
-            >
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-            </select>
-          </div>
-          <div v-else>
+          <div v-if="type === 'contacttype'">
             <input
               type="text"
               class="form-control"
@@ -35,6 +23,24 @@
               v-model="contactContent"
             />
           </div>
+          <div v-if="type === 'language'">
+            <select
+              class="form-select"
+              aria-label="Selektiere dein Level"
+              v-model="level"
+            >
+              <option v-for="(value, key) in languagesSelection" :value="key" :key="key">{{value}}</option>
+            </select>
+          </div>
+          <div v-else>
+            <select
+              class="form-select"
+              aria-label="Selektiere dein Level"
+              v-model="level"
+            >
+              <option v-for="(value, key) in levelSelection" :value="key" :key="key">{{value}}</option>
+            </select>
+          </div>
         </div>
       </div>
       <div class="col">
@@ -92,6 +98,9 @@
 <script>
 import ProfileList from "@/components/ProfileList";
 
+import levelJson from "@/assets/skill_level.json"
+import languagesJson from "@/assets/language_level.json"
+
 export default {
   name: "AutoComplete",
   components: {
@@ -115,8 +124,10 @@ export default {
       contactContent: "",
       searchResults: [],
       showErrorMessage: false,
-      level: 1,
+      level: "1",
       selectedResult: null,
+      levelSelection: levelJson,
+      languagesSelection: languagesJson,
     };
   },
   methods: {

src/components/ProfileList.vue

@@ -9,7 +9,10 @@
         :alt="`${value[type].name} Logo`"
       />
       {{ value[type].name }}
-      <span v-if="value.level">({{ value.level }})</span>
+      <span v-if="value.level">
+        <span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
+        <span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
+      </span>
       <span v-if="value.content">:
           <span v-if="value[type].name === 'E-Mail'">
               <a :href="`mailto:${value.content}`">{{ value.content }}</a>
@@ -44,6 +47,9 @@
   </ul>
 </template>
 <script>
+import levelJson from "@/assets/skill_level.json"
+import languagesJson from "@/assets/language_level.json"
+
 export default {
   name: "ProfileList",
   props: {
@@ -60,7 +66,9 @@ export default {
   },
   data() {
     return {
-      iconUrl: this.apiUrl
+      iconUrl: this.apiUrl,
+      levelSelection: levelJson,
+      languagesSelection: languagesJson,
     }
   }
 };