blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-15 05:52:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

adds an edit button over every section in the profil page to edit that section

Browse Source
This commit is contained in:
SimonGschnell
2024-04-18 14:53:51 +02:00
parent ea9bd93e73
commit 4e5379c5d9
4 changed files with 180 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Profil/MitarbeiterProfil.js
+40 -12
View File
@@ -30,7 +30,9 @@ export default {
data() {
return {
showModal: false,
editDataFilter: null,
// tabulator options
funktionen_table_options: {
height: 300,
layout: "fitColumns",
@@ -159,14 +161,20 @@ export default {
// when modal was closed without submitting request
}
this.showModal = false;
this.editDataFilter = null;
},
showEditProfilModal() {
showEditProfilModal(view) {
if (view) {
this.editDataFilter = view;
}
this.showModal = true;
// after a state change, wait for the DOM updates to complete
Vue.nextTick(() => {
this.$refs.editModal.show();
});
// after a state change, wait for the DOM updates to complete
},
fetchProfilUpdates: function () {
@@ -181,6 +189,11 @@ export default {
},
computed: {
filteredEditData() {
return this.editDataFilter
? this.editData.data[this.editDataFilter]
: this.editData;
},
profilInformation() {
if (!this.data) {
return {};
@@ -233,12 +246,11 @@ export default {
template: /*html*/ `
<div class="container-fluid text-break fhc-form" >
<edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(editData))" :title="$p.t('profil','profilBearbeiten')"></edit-profil>
<edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" :title="$p.t('profil','profilBearbeiten')"></edit-profil>
<div class="row">
<div class="d-md-none col-12 ">
<div class="row mb-3">
<div class="col">
<!-- MOBILE QUICK LINKS -->
@@ -250,7 +262,7 @@ export default {
<div class="row mb-3 ">
<div class="col">
<button @click="showEditProfilModal" type="button" class="text-start w-100 btn btn-outline-secondary" >
<button @click="()=>showEditProfilModal()" type="button" class="text-start w-100 btn btn-outline-secondary" >
<div class="row">
<div class="col-auto">
<i class="fa fa-edit"></i>
@@ -289,7 +301,7 @@ export default {
<div class="col">
<!-- PROFIL INFORMATION -->
<profil-information :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation"></profil-information>
<profil-information @showEditProfilModal="showEditProfilModal" :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation"></profil-information>
</div>
@@ -328,7 +340,14 @@ export default {
<div class="card">
<div class="card-header">
{{$p.t('profil','privateKontakte')}}
<div class="row">
<div @click="showEditProfilModal('Private_Kontakte')" class="col-auto" type="button">
<i class="fa fa-edit"></i>
</div>
<div class="col">
<span>{{$p.t('profil','privateKontakte')}}</span>
</div>
</div>
</div>
<div class="card-body ">
@@ -351,9 +370,18 @@ export default {
<!-- PRIVATE ADRESSEN-->
<div class="card">
<div class="card-header">{{$p.t('profil','privateAdressen')}}</div>
<div class="card-header">
<div class="row">
<div @click="showEditProfilModal('Private_Adressen')" class="col-auto" type="button">
<i class="fa fa-edit"></i>
</div>
<div class="col">
<span>{{$p.t('profil','privateAdressen')}}</span>
</div>
</div>
</div>
<div class="card-body">
<div class="gy-3 row ">
<div v-for="element in data.adressen" class="col-12">
<Adresse :data="element"></Adresse>
@@ -413,7 +441,7 @@ export default {
<div class="row d-none d-md-block ">
<div class="col mb-3">
<button @click="showEditProfilModal" type="button" class="text-start w-100 btn btn-outline-secondary" >
<button @click="()=>showEditProfilModal()" type="button" class="text-start w-100 btn btn-outline-secondary" >
<div class="row">
<div class="col-auto">
<i class="fa fa-edit"></i>
public/js/components/Cis/Profil/ProfilComponents/ProfilInformation.js
+59 -49
View File
@@ -1,59 +1,70 @@
export default {
props: {
title: {
type: String,
},
data: {
type: Object,
},
},
data() {
return {
FotoSperre: this.data.foto_sperre,
};
},
emits: ["showEditProfilModal"],
props:{
title:{
type:String,
},
data:{
type:Object,
methods: {
sperre_foto_function() {
//TODO: refactor
if (!this.data) {
return;
}
Vue.$fhcapi.UserData.sperre_foto_function(!this.FotoSperre).then(
(res) => {
this.FotoSperre = res.data.foto_sperre;
}
);
},
data(){
return {
FotoSperre:this.data.foto_sperre,
},
computed: {
get_image_base64_src: function () {
if (!this.data.foto) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
name: function () {
return { vorname: this.data.Vorname, nachname: this.data.Nachname };
},
profilInfo: function () {
let res = {};
let notIncludedProperties = [
"Vorname",
"Nachname",
"foto_sperre",
"foto",
];
Object.keys(this.data).forEach((key) => {
if (!notIncludedProperties.includes(key)) {
res[key] = this.data[key];
}
});
return res;
},
methods:{
sperre_foto_function() {
//TODO: make this better
if (!this.data) {
return;
}
Vue.$fhcapi.UserData.sperre_foto_function(!this.FotoSperre).then((res) => {
this.FotoSperre = res.data.foto_sperre;
});
},
},
computed:{
get_image_base64_src: function() {
if (!this.data.foto) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
name: function(){
return {vorname:this.data.Vorname, nachname: this.data.Nachname};
},
profilInfo: function(){
let res = {};
let notIncludedProperties=["Vorname", "Nachname", "foto_sperre","foto"];
Object.keys(this.data).forEach((key)=>{
if(!notIncludedProperties.includes(key)){
res[key] = this.data[key];
}
})
return res;
}
},
template: `
},
template: /*html*/ `
<div class="card h-100">
<div class="card-header">
{{title}}
<div class="row">
<div @click="$emit('showEditProfilModal','Personen_Informationen')" class="col-auto" type="button">
<i class="fa fa-edit"></i>
</div>
<div class="col">
<span>{{title}}</span>
</div>
</div>
</div>
<div class="card-body">
@@ -134,5 +145,4 @@ export default {
</div>
</div>`,
};
};
public/js/components/Cis/Profil/ProfilModal/EditProfilSelect.js
+6 -2
View File
@@ -133,8 +133,12 @@ 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));
this.data = this.list.data
? JSON.parse(JSON.stringify(this.list.data))
: null;
this.view = this.list.view
? JSON.parse(JSON.stringify(this.list.view))
: null;
},
mounted() {},
public/js/components/Cis/Profil/StudentProfil.js
+75 -61
View File
@@ -22,14 +22,16 @@ export default {
RoleInformation,
ProfilInformation,
FetchProfilUpdates,
EditProfil
EditProfil,
},
inject:['sortProfilUpdates','collapseFunction'],
inject: ["sortProfilUpdates", "collapseFunction"],
data() {
return {
showModal: false,
collapseIconBetriebsmittel: true,
editDataFilter: null,
// tabulator options
zutrittsgruppen_table_options: {
height: 200,
layout: "fitColumns",
@@ -79,58 +81,62 @@ export default {
},
props: {
data:Object,
editData:Object,
data: Object,
editData: Object,
},
methods: {
fetchProfilUpdates: function(){
Vue.$fhcapi.ProfilUpdate.selectProfilRequest().then((res)=>{
if(!res.error){
this.data.profilUpdates = res.data?.length ? res.data.sort(this.sortProfilUpdates) : null ;
fetchProfilUpdates: function () {
Vue.$fhcapi.ProfilUpdate.selectProfilRequest().then((res) => {
if (!res.error) {
this.data.profilUpdates = res.data?.length
? res.data.sort(this.sortProfilUpdates)
: null;
}
});
},
hideEditProfilModal: function(){
hideEditProfilModal: function () {
//? checks the editModal component property result, if the user made a successful request or not
if(this.$refs.editModal.result){
if (this.$refs.editModal.result) {
Vue.$fhcapi.ProfilUpdate.selectProfilRequest()
.then((request) =>{
if(!request.error){
this.data.profilUpdates = request.data;
this.data.profilUpdates.sort(this.sortProfilUpdates);
}else{
console.log("Error when fetching profile updates: " +res.data);
}
})
.catch(err=>{
console.log(err);
});
}else{
.then((request) => {
if (!request.error) {
this.data.profilUpdates = request.data;
this.data.profilUpdates.sort(this.sortProfilUpdates);
} else {
console.log("Error when fetching profile updates: " + res.data);
}
})
.catch((err) => {
console.log(err);
});
} else {
// when modal was closed without submitting request
}
this.showModal=false;
this.showModal = false;
this.editDataFilter = null;
},
showEditProfilModal() {
showEditProfilModal(view) {
if (view) {
this.editDataFilter = view;
}
this.showModal = true;
// after a state change, wait for the DOM updates to complete
Vue.nextTick(()=>{
Vue.nextTick(() => {
this.$refs.editModal.show();
});
},
},
computed: {
profilInformation() {
filteredEditData() {
return this.editDataFilter
? this.editData.data[this.editDataFilter]
: this.editData;
},
profilInformation() {
if (!this.data) {
return {};
}
@@ -142,13 +148,11 @@ export default {
Anrede: this.data.anrede,
Titel: this.data.titel,
Postnomen: this.data.postnomen,
foto_sperre:this.data.foto_sperre,
foto:this.data.foto,
foto_sperre: this.data.foto_sperre,
foto: this.data.foto,
};
},
roleInformation() {
if (!this.data) {
return {};
@@ -164,36 +168,29 @@ export default {
Gruppe: this.data.gruppe.trim(),
};
},
},
created(){
created() {
//? sorts the profil Updates: pending -> accepted -> rejected
this.data.profilUpdates?.sort(this.sortProfilUpdates);
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
this.$refs.betriebsmittelTable.tabulator.on("tableBuilt", () => {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
})
});
this.$refs.zutrittsgruppenTable.tabulator.on('tableBuilt', () => {
this.$refs.zutrittsgruppenTable.tabulator.setData(this.data.zuttritsgruppen);
})
this.$refs.zutrittsgruppenTable.tabulator.on("tableBuilt", () => {
this.$refs.zutrittsgruppenTable.tabulator.setData(
this.data.zuttritsgruppen
);
});
},
template:/*html*/ `
template: /*html*/ `
<div class="container-fluid text-break fhc-form" >
<edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(editData))" title="$p.t('profil','profilBearbeiten')" ></edit-profil>
<edit-profil v-if="showModal" ref="editModal" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" title="$p.t('profil','profilBearbeiten')" ></edit-profil>
<!-- ROW -->
<div class="row">
<!-- HIDDEN QUICK LINKS -->
@@ -250,7 +247,7 @@ export default {
<div class="col">
<!-- PROFIL INFORMATION -->
<profil-information title="$p.t('profil','studentIn')" :data="profilInformation"></profil-information>
<profil-information @showEditProfilModal="showEditProfilModal" title="$p.t('profil','studentIn')" :data="profilInformation"></profil-information>
</div>
@@ -290,7 +287,15 @@ export default {
<div class="card">
<div class="card-header">
{{$p.t('profil','privateKontakte')}}
<div class="row">
<div @click="showEditProfilModal('Private_Kontakte')" class="col-auto" type="button">
<i class="fa fa-edit"></i>
</div>
<div class="col">
<span>{{$p.t('profil','privateKontakte')}}</span>
</div>
</div>
</div>
<div class="card-body ">
@@ -312,7 +317,16 @@ export default {
<!-- PRIVATE ADRESSEN-->
<div class="card">
<div class="card-header">{{$p.t('profil','privateAdressen')}}</div>
<div class="card-header">
<div class="row">
<div @click="showEditProfilModal('Private_Adressen')" class="col-auto" type="button">
<i class="fa fa-edit"></i>
</div>
<div class="col">
<span>{{$p.t('profil','privateAdressen')}}</span>
</div>
</div>
</div>
<div class="card-body">
<div class="gy-3 row ">
@@ -367,7 +381,7 @@ export default {
<div class="row d-none d-md-block">
<div class="col mb-3">
<button @click="showEditProfilModal" type="button" class="text-start w-100 btn btn-outline-secondary" >
<button @click="()=>showEditProfilModal()" type="button" class="text-start w-100 btn btn-outline-secondary" >
<div class="row">
<div class="col-2">
<i class="fa fa-edit"></i>