first templates for the components Select and Breadcrumbs

public/css/components/Profil.css

@@ -74,29 +74,12 @@
   padding-left: 0.5rem;
 }
 
-/*   dl {
-    width: 100%;
-    overflow: hidden;
-   
-    padding: 0;
-    margin: 0
-  }
-  dt {
-    float: left;
-    width: 35%;
-    
+
+option:checked{
+  background: linear-gradient(#005485, #005485);
+
+}
+
+#SelectStyle{
   
-   
-    padding: 0;
-    margin: 0
-  }
-  dd {
-    float: left;
-    width: 50%;
-   
-  
-    padding: 0;
-    margin: 0
-  }
- */
- 
+}

public/js/components/Cis/Profil/EditProfil.js

@@ -1,11 +1,14 @@
 import BsModal from "../../Bootstrap/Modal.js";
 import Alert from "../../Bootstrap/Alert.js";
-
+import BreadCrumb from "../Selection/Breadcrumb.js";
+import Select from "../Selection/Select.js";
 
 export default {
   components: {
     BsModal,
     Alert,
+    BreadCrumb,
+    Select,
   },
   mixins: [BsModal],
   props: {
@@ -27,6 +30,15 @@ export default {
   },
   data() {
     return {
+      propertySelected: false,
+      testValue:null,
+      testListe:{
+        privateInfo:{username:"hans33",Titel:"Doktor", Anrede:"Herr"},
+        privateKontakte:[{strasse:"strasse1",plz:100},{strasse:"strasse1",plz:100},{strasse:"strasse1",plz:100}],
+        privateAdressen:[{kontakt:"telefon",anmerkung:"1"},{kontakt:"email",anmerkung:"2"},{kontakt:"telefon",anmerkung:"3"}]
+      },
+
+
       topic:null,
       firstSelectedOption:null,
       secondSelectedOption: null,
@@ -47,7 +59,12 @@ export default {
 
   methods: {
     
-
+    testEvent: function(){
+      if(!this.propertySelected){
+        this.testListe = this.testListe[this.testValue];
+        this.propertySelected = true;
+      }
+    },
     createDeepCopy: function(object){
       //? using Vue.toRaw because deep clones with structuredClone can not be done on proxies
       return structuredClone(Vue.toRaw(object));
@@ -128,15 +145,20 @@ export default {
       {{"Profil bearbeiten" }}
     </template>
     <template v-slot:default>
-
-    <!-- Breadcrumbs -->
+    
+    <bread-crumb :list="['this','is a','test']" ></bread-crumb>
+    <p>{{testValue}}</p>
+    <Select ariaLabel="test" v-model="testValue" @select="testEvent" :list="testListe"></Select>
+    <!-- DONT FORGET TO UNCOMMENT THIS -->
+    <!-- Breadcrumbs 
     <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
         <li class="breadcrumb-item" v-if="firstSelectedOption">{{firstSelectedOption}}</li>
         <li class="breadcrumb-item" v-if="secondSelectedOption" >{{firstSelectedOption ==="Personen_Informationen" ? Object.keys(secondSelectedOption)[0] : secondSelectedOptionIndex+1 }}</li>
-        <!--<li class="breadcrumb-item" aria-current="page">Drei</li>-->
+       
       </ol>
     </nav>
+    -->
 
 
     <select v-if="!firstSelectedOption" v-model="firstSelectedOption"  class="form-select" size="3" aria-label="size 3 select example">
@@ -187,7 +209,7 @@ export default {
     <!-- optional footer -->
     <template   v-slot:footer>
       <button class="btn btn-outline-danger " @click="hide">Abbrechen</button>
-      <p v-if="editTimestamp" class="flex-fill">Letzte Anfrage: {{editTimestamp}}</p>
+      <!--<p v-if="editTimestamp" class="flex-fill">Letzte Anfrage: {{editTimestamp}}</p>-->
     
       <button v-if="isInputFieldChanged"  @click="submitProfilChange" role="button" class="btn btn-primary">Senden</button>
     </template>

public/js/components/Cis/Profil/MitarbeiterProfil.js

@@ -793,12 +793,13 @@ export default {
                  
                     <div class="card">
                       <div class="card-header">
-                      Something else
-                      </div>
-                      <div class="card-body">
-                      
-                       <p v-for="update in data.profilUpdates">{{JSON.stringify(update)}}</p>
+                      Profil Updates
                       </div>
+                      <div class="card-body d-flex justify-content-start flex-wrap">
+                      <!--  -->
+                  <button v-for="update in data.profilUpdates" class="btn m-1" :class="{'btn-outline-primary':(update.topic !== 'Private_Kontakte' || update.topic !== 'Private_Adressen'), 'btn-outline-danger':update.topic == 'Private_Kontakte', 'btn-outline-success':update.topic == 'Private_Adressen'}" ><i class="fa fa-edit"></i> {{update.topic}}</button>
+                        
+                       </div>
                     </div>
 
                    

public/js/components/Cis/Selection/Breadcrumb.js

@@ -0,0 +1,37 @@
+
+
+export default {
+  components: {
+  },
+  props: {
+    //! this should throw an error in the js console, have to check later
+    list:Number,
+   
+  },
+  data() {
+    return {
+   
+    }
+  },
+
+  methods: {
+  },
+  computed: {
+    lastElement: function(){
+        return this.list[this.list.length-1];
+    }
+  },
+  created() {
+    
+  },
+  mounted() {
+  },
+  template: `
+  <nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current -->
+    <li class="breadcrumb-item"  :class="{'active':element===lastElement}" :aria-current="element===lastElement?'page':'false'" v-for="element in list">{{element}}</li>
+   
+  </ol>
+</nav>`,
+};

public/js/components/Cis/Selection/Select.js

@@ -0,0 +1,86 @@
+
+
+export default {
+    components: {
+    },
+    props: {
+
+      //! this should throw an error in the js console, have to check later
+      list:[Array,Object],
+      //? prop modelValue allows v-model on custom Components
+      modelValue:String,
+      //? Prop used to determine how many options the select should initially show
+      size:{
+        type:Number,
+        default: null,
+      },
+      //? Content for the aria label of the select
+      ariaLabel:{
+        type:String,
+        required:true,
+      },
+     
+    },
+    emits:{
+        //? update:modelValue event is needed to notify the v-model when the value has changed
+        ['update:modelValue']:null,
+        select:null,
+    },
+    data() {
+      return {
+        selectedOption: [],
+        optionLength:this.size,
+      }
+    },
+  
+    methods: {
+    },
+    computed: {
+      listLength: function(){
+        return this.list.length;
+      },
+      lastElement: function(){
+          return this.list[this.list.length-1];
+      },
+      computedList: function(){
+        if(Array.isArray(this.list)){
+            //? the passed data is an array
+            return this.list;
+        }else if(typeof(this.list) === 'object' && this.list !== null){
+            //? the passed data is an object
+            return Object.keys(this.list);
+        }else{
+            console.warn("The passed data is neither an Array or an Object");
+            return null;
+            //! the passed data is neither an object or an array
+        }
+        
+      }
+    },
+    created() {
+        console.log(this.optionLength);
+        //? sets the default length of the options to show equal to the number of elements in the list
+        if(!this.optionLength){
+            //? if it is an object, then it will take the length of the object keys, otherwise it takes the normal length
+            this.optionLength = this.computedList.length;
+        }
+    },
+    mounted() {
+    },
+    template: `
+    <p>size:{{optionLength}}</p>
+    <!-- styling des Selects und dessen Options könnte man noch anpassen -->
+    <div id="SelectStyle">
+    <select  v-model="selectedOption"  class="form-select" :size="this.optionLength" :aria-label="ariaLabel">
+      <option  @click="$emit('update:modelValue', option); $emit('select')" v-for="(option,index) in computedList" :value="option">
+        <template v-if="typeof(option) === 'object' && option !== null" >
+            <div class="row " v-for="(element,index) in option"><div class="col">{{index}} : </div><div class="col">{{element}}</div></div>
+        </template>
+        <template v-else >
+            {{option}}
+        </template>
+      </option>
+    </select>
+    </div>`,
+  };
+