update(Profil Profilbild): first version of the profilbild upload endpoint

public/js/api/factory/profilUpdate.js

@@ -61,6 +61,13 @@ export default {
 			params: dms
 		};
 	},
+	updateProfilbild(dms) {
+		return {
+			method: 'post',
+			url: `/api/frontend/v1/ProfilUpdate/updateProfilbild`,
+			params: dms
+		};
+	},
 	getProfilRequestFiles(requestID) {
 		return {
 			method: 'get',

public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js

@@ -1,4 +1,5 @@
 import ApiProfil from '../../../../api/factory/profil.js';
+import ImageUpload from '../../Profil/ProfilModal/EditProfilComponents/ImageUpload.js';
 
 export default {
 	props: {
@@ -17,6 +18,9 @@ export default {
 			default: true
 		}
 	},
+	components:{
+		ImageUpload,
+	},
 	data() {
 		return {
 			FotoSperre: this.data.foto_sperre,
@@ -25,6 +29,9 @@ export default {
 	emits: ["showEditProfilModal"],
 
 	methods: {
+		showModal(){
+			this.$refs.imageUpload.show();
+		},
 		sperre_foto_function() {
 			//TODO: refactor
 			if (!this.data) {
@@ -66,6 +73,7 @@ export default {
 	template: /*html*/ `
 
 <div class="card h-100">
+	<image-upload ref="imageUpload" titel="test"></image-upload>
     <div class="card-header">
         <div class="row">
             <div v-if="editable" @click="$emit('showEditProfilModal','Personen_Informationen')" class="col-auto" type="button">
@@ -88,7 +96,7 @@ export default {
                         <div v-if="editable" role="button" @click.prevent="sperre_foto_function" class="image-lock">
                             <i :class="{'fa':true, ...(FotoSperre?{'fa-lock':true}:{'fa-lock-open':true})} "></i>
                         </div>
-						<div v-if="!fotoStatus" role="button" @click.prevent="" class="image-upload">
+						<div v-if="!fotoStatus" role="button" @click.prevent="showModal" class="image-upload">
                             <i class="fa fa-upload"></i>
                         </div>
                     </div>

public/js/components/Cis/Profil/ProfilModal/EditProfilComponents/ImageUpload.js

@@ -0,0 +1,83 @@
+import Dms from "../../../../Form/Upload/Dms.js";
+import BsModal from "../../../../Bootstrap/Modal.js";
+
+import ApiProfilUpdate from '../../../../../api/factory/profilUpdate.js';
+
+export default {
+	data() {
+		return {
+			dmsData: [],
+		};
+	},
+	components: {
+		Dms,
+		BsModal,
+	},
+	mixins: [BsModal],
+	props: {
+		titel: {
+			type: Object,
+		},
+		files: {
+			type: Array,
+		},
+		updateID: {
+			type: Boolean,
+		},
+		onHideBsModal: Function,
+		onHiddenBsModal: Function,
+		onHidePreventedBsModal: Function,
+		onShowBsModal: Function,
+		onShownBsModal: Function,
+	},
+	methods:{
+		async uploadImage(){
+			if(this.dmsData){
+				let formData = new FormData();
+				formData.append("files[]", this.dmsData[0]);
+				await this.$api
+					.call(ApiProfilUpdate.updateProfilbild(formData))
+					.then((res) => {
+						console.log("here", res.data?.map((file) => file.dms_id)) ;
+					});	
+			}
+			
+		}
+	},
+	mounted() {
+		this.modal = this.$refs.modalContainer.modal;
+		if (this.files) {
+			this.dmsData = this.files;
+		}
+	},
+	popup(options) {
+			BsModal.popup.bind(this);
+			return BsModal.popup(null, options);
+	},
+	template: /*html*/`
+
+	<bs-modal v-show="!loading" ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" :backdrop="false">
+		<template #title>
+			<p style="opacity:0.8" class="ms-2" v-if="!updateID">{{$p.t('profilUpdate','profilUpdateInformationMessage',[titel])}}</p>
+		</template>
+		<template #default>
+			<div class="form-underline">
+				<div class="form-underline-titel">{{titel?titel:$p.t('global','titel')}}</div>
+			</div>
+			<div class="row gx-2">
+				<div class="col">
+					<dms ref="update" id="files" name="files" :multiple="false" v-model="dmsData" @update:model-value="didFilesChange"  ></dms>
+				</div>
+				<div class="col-auto">
+					<button @click="dmsData=[]" class="btn btn-danger"><i style="color:white" class="fa fa-trash"></i></button>
+				</div>
+			</div>
+			<div class="d-flex" style="margin-left:auto;">
+				<button @click="uploadImage" class="btn btn-primary">upload</button>
+			</div>
+		</template>
+		<template #footer>
+		</template>
+	</bs-modal>
+    `,
+};