changing the text_input component to accept documents for the name or the title of a PersonUpdateRequest

This commit is contained in:
SimonGschnell
2024-01-30 15:59:56 +01:00
parent a21a292da6
commit 3362eb8e31
8 changed files with 214 additions and 66 deletions
+22 -10
View File
@@ -70,6 +70,15 @@ class Profil extends Auth_Controller
public function insertFile(){
//? Version des Dokuments
/*$this->DmsVersionModel->addSelect(["version"]);
$fileVersion = $this->DmsVersionModel->loadWhere(["name"=>$_FILES['files']['name'], "mimetype"=>$_FILES['files']['type']]);
$fileVersion = hasData($fileVersion) ? getData($fileVersion)[0]->version : 0;
if($fileVersion) $fileVersion++; */
$res=[];
$this->load->library('DmsLib');
$this->load->model('DmsVersion_model','DmsVersionModel');
$files = $_FILES['files'];
@@ -81,19 +90,22 @@ class Profil extends Auth_Controller
$_FILES['files']['tmp_name'] = $files['tmp_name'][$i];
$_FILES['files']['error'] = $files['error'][$i];
$_FILES['files']['size'] = $files['size'][$i];
//! ID CHANGES EVERYTIME AND TMP_FILENAME IS A HASH THAT ALSO CHANGES EVERYTIME
$this->DmsVersionModel->addSelect(["version"]);
$fileVersion = $this->DmsVersionModel->loadWhere(["filename"=>$_FILES['files']['tmp_name']]);
$fileVersion = hasData($fileVersion) ? getData($fileVersion)[0]->version : 0;
if($fileVersion) $fileVersion++;
$res=$this->dmslib->upload(["kategorie_kurzbz"=>"dokumente","version"=>$fileVersion] , 'files');
echo json_encode($res);
echo "\n\n";
$dms = [
"kategorie_kurzbz"=>"dokumente",
"version"=>0,
"name"=>$_FILES['files']['name'],
"mimetype"=>$_FILES['files']['type'],
"beschreibung"=>$this->uid . " Profil Änderung",
"insertvon"=>$this->uid,
"insertamum"=>"NOW()",
];
$tmp_res=$this->dmslib->upload($dms , 'files');
$tmp_res = hasData($tmp_res)? getData($tmp_res) : null;
array_push($res,$tmp_res);
}
echo json_encode($res);
}
+36 -5
View File
@@ -38,10 +38,22 @@ export default {
},
methods: {
submitProfilChange(){
async submitProfilChange(){
//? when the update contains a file upload
//TODO: check if the updated value is different from the original value before submitting the request
if(this.topic && this.profilUpdate){
if(this.profilUpdate.files){
const fileIDs = await this.uploadFiles(this.profilUpdate.files);
if(fileIDs){
this.profilUpdate.files=fileIDs;
console.log("here is the update",this.profilUpdate);
};
}
//? inserts new row in public.tbl_cis_profil_update
//* calls the update api call if an update field is present in the data that was passed to the module
Vue.$fhcapi.UserData[this.editData.update?'updateProfilRequest':'insertProfilRequest'](this.topic,this.profilUpdate).then((res)=>{
@@ -53,13 +65,31 @@ export default {
}else{
this.result= false;
this.hide();
console.log(res.data);
Alert.popup("Ein Fehler ist aufgetreten: "+ JSON.stringify(res.data.retval));
}
}
});
}
},
//? uploads files to the dms table and returns an array with the ids of the created files
uploadFiles: async function(files){
let formData = new FormData();
for(let i = 0; i < files.length; i++){
formData.append("files[]",files[i]);
}
return await Vue.$fhcapi.UserData.insertFile(formData).then(res => {
/* returns file information as
[{"name":"example.png", "dms_id":282531}] */
return res.data.map(file => { return {dms_id:file.dms_id, name:file.client_name}});
}).catch(err=>{
console.log(err);
return null;
})
},
},
computed: {
},
@@ -100,7 +130,8 @@ export default {
</template>
<!-- optional footer -->
<template v-slot:footer>
<button class="btn btn-outline-danger " @click="hide">Abbrechen</button>
<button class="btn btn-outline-danger " @click="hide">Abbrechen</button>
<button v-if="profilUpdate" @click="submitProfilChange" role="button" class="btn btn-primary">Senden</button>
</template>
<!-- end of optional footer -->
@@ -3,6 +3,7 @@ import EditKontakt from "./ProfilComponents/EditKontakt.js";
import Adresse from "./ProfilComponents/Adresse.js";
import EditAdresse from "./ProfilComponents/EditAdresse.js";
import Status from "./ProfilComponents/Status.js";
import TextInputDokument from "./ProfilComponents/TextInputDokument.js";
export default {
components: {
@@ -11,10 +12,11 @@ export default {
Adresse,
EditAdresse,
Status,
TextInputDokument,
},
props: {
//! this should throw an error in the js console, have to check later
list:Object,
//? Prop used to determine how many options the select should initially show
@@ -48,6 +50,7 @@ export default {
data:null,
breadcrumbItems:[],
topic:null,
properties:null,
}
},
@@ -100,13 +103,16 @@ export default {
profilUpdateEmit: function(event){
//? passes the updated profil information to the parent component
this.$emit('update:profilUpdate',event);
},
updateOptions: function(event, item){
this.properties = item;
this.data=item.data;
this.view=item.view;
this.view=item.view;
console.log("properties",this.properties);
if(item.title){
//? emits the selected topic to the parent component
this.topic= item.title;
@@ -132,6 +138,8 @@ export default {
},
created() {
//? JSON parse and stringify are used to deep clone the objects
this.properties = {...this.list};
this.data = JSON.parse(JSON.stringify(this.list.data));
this.view = JSON.parse(JSON.stringify(this.list.view));
@@ -142,6 +150,7 @@ export default {
template: `
<template v-if="!view">
<div class="list-group">
<template v-for="item in data">
<div class="d-flex flex-row align-items-center">
@@ -176,8 +185,9 @@ export default {
<!-- if it not a normal text input field then reder the custom edit input component -->
<!-- custom component is required to emit an profilUpdate event to register the new entered value -->
<template v-else>
<!-- both v-bind="list" and :data="data" pass a data prop, in this case the last one is the one that gets taken -->
<component @profilUpdate="profilUpdateEmit" :is="view" v-bind="list" :data="data"></component>
<!-- receives two events, one for normal data update and one when a file has to be stored to the database -->
<component @profilUpdate="profilUpdateEmit" :is="view" v-bind="properties" :data="data" ></component>
</template>
`,
};
@@ -10,7 +10,7 @@ import QuickLinks from "./ProfilComponents/QuickLinks.js";
import ProfilEmails from "./ProfilComponents/ProfilEmails.js"
import RoleInformation from "./ProfilComponents/RoleInformation.js";
import ProfilInformation from "./ProfilComponents/ProfilInformation.js";
import Dms from "../../Form/Upload/Dms.js";
export default {
components: {
@@ -25,13 +25,10 @@ export default {
ProfilEmails,
RoleInformation,
ProfilInformation,
Dms,
},
data() {
return {
//? used for dms component
dmsData:[],
funktionen_table_options: {
@@ -142,30 +139,8 @@ export default {
methods: {
testUpdload: function(){
let formData = new FormData();
for(let i = 0; i < this.dmsData.length; i++){
formData.append("files[]",this.dmsData[i]);
}
Vue.$fhcapi.UserData.insertFile(formData).then(res => {
console.log(res);
}).catch(err=>{
console.log(err);
})
},
//! delete later
stringifyFile(file) {
return JSON.stringify({
lastModified: file.lastModified,
lastModifiedDate: file.lastModifiedDate,
name: file.name,
size: file.size,
type: file.type
});
},
fetchProfilUpdates: function(){
@@ -277,14 +252,17 @@ export default {
vorname: {
title:"vorname",
view:"text_input",
view:"TextInputDokument",
withFiles:true,
data:{
titel:"vorname",
value:this.data.vorname,
}},
nachname: {
title:"nachname",
view:"text_input",
view:"TextInputDokument",
withFiles:true,
data:{
titel:"nachname",
value:this.data.nachname,
@@ -292,7 +270,8 @@ export default {
},
titel:{
title:"titel",
view:"text_input",
view:"TextInputDokument",
withFiles:true,
data:{
titel:"titel",
value:this.data.titel,
@@ -300,7 +279,8 @@ export default {
},
postnomen:{
title:"postnomen",
view:"text_input",
view:"TextInputDokument",
withFiles:true,
data:{
titel:"postnomen",
value:this.data.postnomen,
@@ -346,9 +326,7 @@ export default {
template: `
<div class="container-fluid text-break fhc-form" >
<pre>{{JSON.stringify(Array.from(dmsData).map(item=>{return stringifyFile(item);}),null,2)}}</pre>
<button @click="testUpdload">upload</button>
<dms ref="upload" id="files" :noList="false" :multiple="true" v-model="dmsData" ></dms>
<div class="row">
@@ -36,7 +36,7 @@ export default {
case "Add Kontakte" : return status ==='pending'? "EditKontakt": "Status"; break;
case "Delete Adressen" : return status ==='pending'? "Adresse": "Status" ; break;
case "Delete Kontakte" : return status ==='pending'? "Kontakt": "Status"; break;
default: return status ==='pending'? "text_input": "Status"; break;
default: return status ==='pending'? "TextInputDokument": "Status"; break;
}
},
openModal(updateRequest) {
@@ -45,27 +45,40 @@ export default {
let data = null;
let content =null;
if(view === "text_input"){
if(view === "TextInputDokument"){
// this should be the files : updateRequest.requested_change.files
data = {
titel:updateRequest.topic,
value: updateRequest.requested_change,
value: updateRequest.requested_change.value,
};
}
else{
data = updateRequest.requested_change;
}
const exampleFile = updateRequest.requested_change.files.map(file=>{return new File(["files[]"], file.name);})
const exampleFileList = new DataTransfer();
exampleFile.forEach(file => {
exampleFileList.items.add(file);
})
content={
view:view,
data:data,
withFiles:view==="TextInputDokument" ? true:false,
update:true,
topic:updateRequest.topic,
files: view==="TextInputDokument" ? exampleFileList.files:null,
}
//? adds the status information if the profil update request was rejected or accepted
if(updateRequest.status !== 'pending'){
content['status']= updateRequest.status;
@@ -71,10 +71,16 @@ export default {
{{cardHeader}}
</div>
<div class="card-body">
<div v-if="getComponentView === 'text_input'" class="form-underline mb-2">
<template v-if="getComponentView === 'text_input'">
<div class="form-underline mb-2">
<div class="form-underline-titel">{{topic}}</div>
<span class="form-underline-content">{{data}} </span>
<span class="form-underline-content">{{data.value}} </span>
</div>
<div class="ms-2">
<p>files:</p>
<p v-for="file in data.files">{{file}}</p>
</div>
</template>
<component v-else :is="getComponentView" :data="data"></component>
</div>
@@ -0,0 +1,93 @@
import Dms from "../../../Form/Upload/Dms.js";
export default {
data(){
return {
dmsData:[],
originalValue:null,
originalFiles:null,
}
},
components:{
Dms,
},
props:{
data:{
type:Object,
},
withFiles:{
type:Boolean,
default:false,
},
files:{
type:FileList,
},
update:{
type:Boolean,
}
},
computed: {
isChanged: function(){
if(this.update ){
if(this.originalFiles !== this.dmsData || this.originalValue !== JSON.stringify(this.data)){
return true;
}else{
return false;
}
}else{
//? controls whether the user is allowed to send the profil update or not
if(this.withFiles && !this.dmsData.length) {return false;}
return JSON.stringify(this.data) !== Vue.toRaw(this.originalValue);
}
}
},
emits:["profilUpdate"],
watch: {
//? watcher to trigger the event emit when a file was uploaded or removed
dmsData(value) {
this.emitChanges();
console.log("dmsData",this.dmsData);
console.log("original files",Vue.toRaw(this.originalFiles));
console.log("compare",this.dmsData == Vue.toRaw(this.originalFiles));
}
},
methods:{
emitChanges: function(){
if(this.isChanged){
this.$emit('profilUpdate', this.withFiles?{value:this.data.value, files:this.dmsData}:{value:this.data.value});
}else{
this.$emit('profilUpdate',null);
}
},
},
created(){
this.originalValue = JSON.stringify(this.data);
this.originalFiles = this.files;
if(this.files){
this.dmsData = this.files;
}
},
template:`
<div class="form-underline">
<div class="form-underline-titel">{{data.titel?data.titel:"titel"}}</div>
<input class="form-control" @input="emitChanges" v-model="data.value" :placeholder="data.value">
<dms v-if="withFiles" id="files" :noList="false" :multiple="true" v-model="dmsData" ></dms>
</div>
`,
}
@@ -98,7 +98,7 @@ export default {
},
},
created() {
console.log("data passed as prop",this.data);
},
mounted() {
@@ -181,12 +181,17 @@ export default {
<div class="card">
<div class="card-header">update</div>
<div class="card-body">
<div v-if="getComponentView==='text_input'" class="form-underline mb-2">
<template v-if="getComponentView==='text_input'">
<div class="form-underline mb-2">
<div class="form-underline-titel">{{data.topic}}</div>
<span class="form-underline-content" >{{data.requested_change}}</span>
<span class="form-underline-content" >{{data.requested_change.value}}</span>
</div>
<div class="ms-2">
<p>files:</p>
<p v-for="file in data.requested_change.files">{{file}}</p>
</div>
</template>
<component v-else :is="getComponentView" :data="data.requested_change"></component>