#10 bennung skills und levels

public/img/bootstrap-icons-1.5.0/pencil.license

@@ -0,0 +1 @@
+SPDX-License-Identifier: MIT

public/img/bootstrap-icons-1.5.0/pencil.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+  <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+</svg>

src/assets/language_level.json

@@ -0,0 +1,7 @@
+{
+    "1": "Keine Angabe",
+    "2": "Grundkentnisse",
+    "3": "Gut",
+    "4": "Fließend",
+    "5": "Muttersprache"
+}

src/assets/skill_level.json

@@ -0,0 +1,7 @@
+{
+    "1": "bis 6 Monate",
+    "2": "bis 1 Jahr",
+    "3": "bis 3 Jahre",
+    "4": "bis 5 Jahre",
+    "5": "mehr als 5 Jahre"
+}

src/components/AutoComplete.vue

@@ -15,19 +15,7 @@
       </div>
       <div class="col">
         <div v-if="selectedResult">
-          <div v-if="type != 'contacttype'">
+          <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>
             <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,
     }
   }
 };