neue Component File, filehandling mit datatransfer

application/controllers/components/stv/Notiz.php

@@ -62,50 +62,23 @@ class Notiz extends FHC_Controller
 	public function addNewNotiz($id)
 	{
 		$this->load->library('form_validation');
-		$dms_id = null;
+		//$_POST = json_decode($this->input->raw_input_stream, true);
 
-		//DMS-Logik zum Speichern des Anhangs
-/*		var_dump("im Backend: addNewNotiz, dmslogik");
-		var_dump($_FILES);*/
+		//TODO(Manu) Validation
 
+		$this->form_validation->set_rules('titel', 'titel', 'required');
+		$this->form_validation->set_rules('text', 'Text', 'required');
+
+		//TODO(Manu) form validation - schon für type hier?,
 		$this->load->library('DmsLib');
-
-
-
-
-
 		$uid = getAuthUID();
 
-		//single
-		$dms_id = null;
-		$dms = array(
-			'kategorie_kurzbz'  => 'notiz',
-			'version'           => 0,
-			'name'              => $_FILES["anhang"]["name"],
-			'mimetype'          => $_FILES["anhang"]["type"],
-			'insertamum'        => date('c'),
-			'insertvon'         => $uid
-		);
-
-		//var_dump($dms);
-
-		$result = $this->dmslib->upload($dms, 'anhang', array('pdf'));
-		//var_dump($result);
-
-		if (isSuccess($result))
-		{
-			//TODO(Manu) change to array
-			$dms_id = $result->retval['dms_id'];
-		}
-
-		//var_dump($dms_id);
-
-/*		//multiple files
+		//multiple files
 		$dms_id = [];
-		foreach ($_FILES as $file)
+		foreach ($_FILES as $k => $file)
 		{
-			//var_dump($file["name"]);
-			var_dump($file);
+/*			var_dump($file["name"]);
+			var_dump($file);*/
 			$dms = array(
 				'kategorie_kurzbz'  => 'notiz',
 				'version'           => 0,
@@ -115,26 +88,27 @@ class Notiz extends FHC_Controller
 				'insertvon'         => $uid
 			);
 
-			$result = $this->dmslib->upload($dms, 'file', array('pdf'));
-			var_dump($result);
+			$result = $this->dmslib->upload($dms, $k, array('pdf'));
 
 			if (isSuccess($result))
 			{
 				//TODO(Manu) change to array
 				$dms_id[] = $result->retval['dms_id'];
 			}
+/*			else {
+				$this->output->set_status_header(REST_Controller::HTTP_INTERNAL_SERVER_ERROR);
+
+				//TODO(manu) error handling
+				//feedback, dass ein File nicht erfolgreich gespeichert werden konnte
+				//$this->outputJson($result);
+				//$this->outputJsonError(['filetype nicht erlaubt' => getError($result)]);
+			}*/
 
 
 		}
 
-		var_dump($dms_id);
-		return;*/
-
-
 		$this->load->model('person/Notiz_model', 'NotizModel');
 
-		//var_dump($_POST);
-
 		$uid = getAuthUID();
 		$titel = isset($_POST['titel']) ? $_POST['titel'] : null;
 		$text = isset($_POST['text']) ? $_POST['text'] : null;
@@ -180,30 +154,12 @@ class Notiz extends FHC_Controller
 
 
 		//Todo(manu) multiple files
+		// mit id_type
 		$result = $this->NotizModel->addNotizForType($type, $id, $titel, $text, $uid, $dms_id, $start, $ende, $erledigt, $verfasser_uid, $bearbeiter_uid);
 
 		//vorher
 		//$result = $this->NotizModel->addNotizForPersonWithDoc($id, $titel, $text, $erledigt, $verfasser_uid, $start, $ende, $dms_id);
 
-
-
-
-	//	var_dump($result);
-
-/*		$result = $this->NotizModel->insert(
-			[
-				'titel' => $titel,
-				'text' =>  $text,
-				'insertvon' => $uid,
-				'insertamum' => date('c'),
-				'verfasser_uid' => $verfasser_uid,
-				'bearbeiter_uid' => $bearbeiter_uid,
-				'start' => $start,
-				'ende' => $ende,
-				'erledigt' => $_POST['erledigt'],
-				//'dms_id' => $dms_id
-			]
-		);*/
 		if (isError($result))
 		{
 			$this->output->set_status_header(REST_Controller::HTTP_INTERNAL_SERVER_ERROR);

application/models/person/Notiz_model.php

@@ -162,7 +162,13 @@ class Notiz_model extends DB_Model
 				// Loads model Notizdokument_model
 				$this->load->model('person/Notizdokument_model', 'NotizdokumentModel');
 				//Todo(manu) change for multiple files
-				$result = $this->NotizdokumentModel->insert(array('notiz_id' => $notiz_id, 'dms_id' => $dms_id));
+				foreach ($dms_id as $file)
+				{
+					$result = $this->NotizdokumentModel->insert(array('notiz_id' => $notiz_id, 'dms_id' => $file));
+				}
+
+				//single File
+				//$result = $this->NotizdokumentModel->insert(array('notiz_id' => $notiz_id, 'dms_id' => $dms_id));
 			}
 
 			if ($type == 'person')

public/js/components/Form/Upload/File.js

@@ -0,0 +1,51 @@
+export default {
+	props: [
+		'dateien',
+		'multiupload'
+	],
+	computed: {
+		intDateien:{
+			get() {
+				return this.dateien;
+			},
+			set(value) {
+				this.$emit('update:dateien', value);
+			}
+		},
+	},
+	methods: {
+		handleFileChange(event) {
+			this.intDateien = event.target.files;
+		},
+		deleteFile(id) {
+			const dt = new DataTransfer();
+			const files = this.$refs.upload.files;
+
+			for (let i = 0; i < files.length; i++) {
+				const file = files[i];
+				if (id !== i)
+					dt.items.add(file);
+			}
+
+			this.$refs.upload.files = dt.files;
+			this.$emit('update:dateien', dt.files);
+		}
+	},
+	template: `		
+		<span v-if="multiupload">
+		  	<input type="file" multiple ref="upload" @change="handleFileChange" v-model="dateien"/>								
+		</span>
+		<span v-else>
+			<input type="file" ref="upload" @change="handleFileChange" v-model="dateien"/>
+		</span>
+		
+		<span>					
+			<ul>							
+				<li v-for="(datei,index) in dateien">
+					<button>{{datei.name}}</button><button class="text-danger" @click="deleteFile(index)">X</button>
+				</li>
+			</ul>
+		</span>
+</div>
+</template>`
+}

public/js/components/Form/Upload/SingleFile.js

@@ -1,36 +0,0 @@
-export default {
-	data() {
-		return {
-			file: null,
-		};
-	},
-	methods: {
-		handleFileChange(event) {
-			this.file = event.target.files[0];
-		},
-		uploadFile() {
-			if (this.file) {
-				// You can perform your file upload logic here
-				console.log('Uploading file:', this.file);
-				// Reset the file input
-				this.$refs.fileInput.value = '';
-				this.file = null;
-			} else {
-				console.error('No file selected');
-			}
-		},
-	},
-};
-template: `
-	<div>
-		<h2>File Upload</h2>
-		<form
-		@submit.prevent="uploadFile">
-		<input type="file" ref="fileInput" @change="handleFileChange" />
-		<button type="submit">Upload</button>
-	</form>
-	<div v-if="file">
-		<p>Selected File: {{file.name}}</p>
-	</div>
-</div>
-</template>`

public/js/components/Notiz/Notiz.js

@@ -1,11 +1,10 @@
 import VueDatePicker from '../vueDatepicker.js.php';
-//import SingleFile from '../Form/Upload/SingleFile.js';
+import File from '../Form/Upload/File.js';
 
 export default {
 	components: {
 		VueDatePicker,
-		//BsModal
-		//SingleFile
+		File
 	},
 	props: [
 		'typeId',
@@ -22,6 +21,11 @@ export default {
 		'showDocument',
 		'anhang'
 		],
+	data(){
+		return {
+			multiupload: true
+		}
+	},
 	computed: {
 		intTitel: {
 			get() {
@@ -103,26 +107,45 @@ export default {
 		}
 	},*/
 	methods: {
-		handleFileChange(event) {
-			//single
-			this.intAnhang = event.target.files[0];
-
-			//multiple not working
-			//this.intAnhang = event.target.files;
+/*		handleFileChange(event) {
+			this.intAnhang = event.target.files;
+		},*/
+		reset() {
+			this.$refs.form.reset();
+			//this.$emit('update:anhang', dt.files);
 		},
+/*		deleteFile(id){
+			//console.log("Delete file with id " + id );
+
+			//console.log(this.intAnhang[id]);
+
+			const dt = new DataTransfer();
+			const files = this.$refs.upload.files;
+
+			for (let i = 0; i < files.length; i++) {
+				const file = files[i];
+				if (id !== i)
+					dt.items.add(file); // here you exclude the file. thus removing it.
+			}
+
+			this.$refs.upload.files = dt.files; // Assign the updates list
+			this.$emit('update:anhang', dt.files);
+		}*/
 	},
+
 	template: `
 <div>
-
-component: {{intTitel}} {{intVon}} || {{intAnhang.name}} {{intAnhang}} {{typeId}}
-	<form class="row">
+	<form ref="form" @submit.prevent class="row">
 		<div>
 			<div class="row mb-3">
-				<b>{{action}}</b>
+				<b>{{action}}
+				<div class="col-sm-7">
+					</b><span class="small">[{{this.typeId}}]</span>
+				</div>	
 			</div>
-			<div>
+<!--			<div>
 				<p>Zuordnung {{this.typeId}}</p>
-			</div>
+			</div>-->
 			<div class="notizTitle row mb-3">
 				<label for="titel" class="form-label col-sm-2">Titel</label>
 				<div class="col-sm-7">
@@ -143,29 +166,30 @@ component: {{intTitel}} {{intVon}} || {{intAnhang.name}} {{intAnhang}} {{typeId}
 				<div class="row mb-3">
 					<label for="text" class="form-label col-sm-2">Dokument</label>
 					
-					<!--Todo(Manu) Component SingleFile-->
-					<!--<single-file id="file" v-model="intDocument"></single-file>-->
+				<!-- Component File-->
+				<div  class="col-sm-7">		
+					<File ref="upload" id="file" :multiupload="multiupload" v-model:dateien="intAnhang" ></File>
+				</div>
 
-					<div  class="col-sm-7">					
+<!--					<div  class="col-sm-7">					
 						<span>
-						  <input type="file" multiple ref="fileInput" @change="handleFileChange" v-model="intAnhang"/>
-	<!--      							<button type="submit">Upload</button>-->
-								<div v-if="intAnhang.name">
-								  <p>Selected File: {{ intAnhang.name }}</p>
-								  <button class="text-danger">X</button>
-								</div>
+						
+						  <input ref="upload" type="file" multiple ref="fileInput" @change="handleFileChange" v-model="intAnhang"/>
+													
 						</span>
 						
-<!--						Anzeige outputs-->
 						<span >					
 							<ul>							
-								<li v-for="anh in anhang">
-									<button>{{anh.name}}</button><button class="text-danger">X</button>
+								<li v-for="(anh,index) in intAnhang">
+									<button>{{anh.name}}</button><button class="text-danger" @click="deleteFile(index)">X {{index}}</button>
 								</li>
 							</ul>
 						</span>
 					</div>
-				</div>
+				</div>-->
+				
+				<hr>
+
 				
 			</slot>
 	</div>	
@@ -175,7 +199,7 @@ component: {{intTitel}} {{intVon}} || {{intAnhang.name}} {{intAnhang}} {{typeId}
 				<div class="row mb-3">
 					<label for="bis" class="form-label col-sm-2">VerfasserIn</label>
 					<div class="col-sm-7">
-						<input type="text" v-model="intVerfasser" class="form-contrsol">	
+						<input type="text" v-model="intVerfasser" class="form-control">	
 						{{uid}}
 					</div>
 				</div>

public/js/components/Stv/Studentenverwaltung/Details/Notizen.js

@@ -30,8 +30,8 @@ export default {
 					{title: "Text", field: "text", width: 350},
 					{title: "VerfasserIn", field: "verfasser_uid"},
 					{title: "BearbeiterIn", field: "bearbeiter_uid", visible: false},
-					{title: "Start", field: "start"},
-					{title: "Ende", field: "ende"},
+					{title: "Start", field: "start", visible: false},
+					{title: "Ende", field: "ende", visible: false},
 /*					{title: "Dokumente", field: "dms_id"},*/
 					{title: "Dokumente", field: "countdoc"},
 					{title: "Erledigt", field: "erledigt"},
@@ -71,7 +71,7 @@ export default {
 				bearbeiter: null,
 				anhang: []
 			},
-			showErweitert: true,
+			showErweitert: false,
 			showDocument: true,
 
 		}
@@ -104,7 +104,8 @@ export default {
 			});
 		},
 		actionNewNotiz(){
-			this.formData.typeId = 'person';
+			this.resetFormData();
+/*			this.formData.typeId = 'person';
 			this.formData.titel = '';
 			this.formData.action = 'Neue Notiz2';
 			this.formData.text = null;
@@ -114,14 +115,24 @@ export default {
 			this.formData.erledigt = false;
 			this.formData.verfasser = null;
 			this.formData.bearbeiter = null;
-			this.formData.anhang = [];
+			this.formData.anhang = [];*/
 		},
 		addNewNotiz(notizData) {
 /*			console.log("here: anhang noch empty");
 			console.log(this.formData);*/
+
 			const formData = new FormData();
 
-			Object.entries(this.formData).forEach(([k, v]) => formData.append(k, v));
+			//working with single files
+		//	Object.entries(this.formData).forEach(([k, v]) => formData.append(k, v));
+
+			//multiple files
+			//console.log(this.formData.anhang);
+			Object.entries(this.formData).forEach(([k, v]) => {
+				if(k!= 'anhang')
+					formData.append(k, v);
+			});
+			Object.entries(this.formData.anhang).forEach(([k, v]) => formData.append(k, v));
 
 /*			for( var i = 0; i < this.formData.anhang.length; i++ ){
 				let file = this.formData.anhang[i];
@@ -129,8 +140,8 @@ export default {
 				formData.append('files[' + i + ']', file);
 			}*/
 
-			console.log("after append");
-			console.log(formData);
+/*			console.log("after append");
+			console.log(this.formData);*/
 			CoreRESTClient.post('components/stv/Notiz/addNewNotiz/' + this.modelValue.person_id,
 				formData,
 				{ Headers: { "Content-Type": "multipart/form-data" } }
@@ -152,9 +163,6 @@ export default {
 				window.scrollTo(0, 0);
 			});
 		},
-		attachFile(){
-			console.log("ATTACH FILE");
-		},
 		deleteNotiz(notiz_id){
 			CoreRESTClient.post('components/stv/Notiz/deleteNotiz/' + notiz_id)
 				.then(response => {
@@ -208,16 +216,21 @@ export default {
 			this.$refs.table.reloadTable();
 		},
 		resetFormData(){
-			this.formData.titel = null;
-			this.formData.text = null;
-			this.formData.von = null;
-			this.formData.bis = null;
-			this.formData.document = null;
-			this.formData.erledigt = false;
-			this.formData.verfasser = null;
-			this.formData.bearbeiter = null;
-			this.formData.anhang = [];
-			//this.formData.anhang = {};
+			this.$refs.form.reset();
+			//sicherstellen, dass über props nur leere felder übergeben werden
+			this.formData = {
+				typeId: 'person',
+					titel: null,
+					action: 'Neue Notiz',
+					text: null,
+					von: null,
+					bis: null,
+					document: null,
+					erledigt: false,
+					verfasser: null,
+					bearbeiter: null,
+					anhang: []
+			};
 		},
 		updateNotiz(notiz_id){
 			CoreRESTClient.post('components/stv/Notiz/updateNotiz/' + notiz_id,
@@ -274,6 +287,7 @@ export default {
 	<br>	
 	<hr>
 		<Notiz 
+			ref="form"
 			:showErweitert="showErweitert"
 			:showDocument="showDocument"
 			v-model:typeId="formData.typeId"
@@ -295,7 +309,7 @@ export default {
 		
 		
 		<div>
-			parent: {{formData.anhang}} {{formData.typeId}} | {{formData.anhang.name}}
+<!--			PARENT: {{formData.anhang}} {{formData.typeId}} | single: {{formData.anhang.name}} , multi: {{formData.anhang}} <span v-for="(anhang,index) in formData.anhang"> {{anhang.name}} {{index}}<br></span> ref: {{formData.ref}}-->
 		</div>
 	</div>
 `