blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-24 23:49:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

dynamic component inside the profil app now controlls the view and the data

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-05 13:52:31 +01:00
parent 087bf229af
commit 0d3c55b019
7 changed files with 1089 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/controllers/Cis/Profil.php
+45 -39
View File
@@ -148,11 +148,17 @@ class Profil extends Auth_Controller
$person_res = hasData($person_res)? getData($person_res)[0] : null;
}
}
$mitarbeiter_res = $this->MitarbeiterModel->load($uid);
if(isError($mitarbeiter_res)){
// error handling
}else{
$mitarbeiter_res = hasData($mitarbeiter_res)? getData($mitarbeiter_res)[0] : null;
if(isSuccess($this->MitarbeiterModel->addSelect(["kurzbz","telefonklappe", "alias","ort_kurzbz"]))
&& isSuccess($this->MitarbeiterModel->addJoin("tbl_benutzer", "tbl_benutzer.uid = tbl_mitarbeiter.mitarbeiter_uid")))
{
$mitarbeiter_res = $this->MitarbeiterModel->load($uid);
if(isError($mitarbeiter_res)){
// error handling
}else{
$mitarbeiter_res = hasData($mitarbeiter_res)? getData($mitarbeiter_res)[0] : null;
}
}
@@ -171,11 +177,11 @@ class Profil extends Auth_Controller
$res->nachname = $person_res->nachname;
$res->gebdatum = $person_res->gebdatum;
$res->gebort = $person_res->gebort;
//? Mitarbeiter Info
$res->kurzbz = $mitarbeiter_res->kurzbz;
$res->telefonklappe = $mitarbeiter_res->telefonklappe;
foreach($mitarbeiter_res as $key => $val){
$res->$key = $val;
}
//? Email Info
$intern_email = array();
$intern_email+=array("type" => "intern");
@@ -184,20 +190,14 @@ class Profil extends Auth_Controller
$extern_email+=array("type" => "alias");
$extern_email+=array("email" => $benutzer_res->alias . "@" . DOMAIN);
$res->emails = array($intern_email,$extern_email);
//? Adresse Info
$res->adressen = $adresse_res;
//? Benutzerfunktion Info
$res->funktionen = $benutzer_funktion_res;
//? Betriebsmittel Info
$res->mittel = $betriebsmittelperson_res;
//? Austellungsdatum von der Zutrittskarte
$res->zutrittskarte_ausgegebenam = $zutrittskarte_ausgegebenam;
//? Kontakt Info
$res->kontakte = $kontakte_res;
//? Mailverteiler Info
$res->mailverteiler = $mailverteiler_res;
echo json_encode($res);
return $res;
}
@@ -276,7 +276,11 @@ class Profil extends Auth_Controller
$res->postnomen = $person_res->titelpost;
$res->internal_email= $uid . "@" . DOMAIN;
$intern_email = array();
$intern_email+=array("type" => "intern");
$intern_email+=array("email"=> getAuthUID() . "@" . DOMAIN);
$res->emails = array($intern_email);
@@ -296,8 +300,7 @@ class Profil extends Auth_Controller
}
private function mitarbeiterProfil(){
//? informationen die nur für den Mitarbeiter verfügbar sind
//? Data for the Mitarbeiter view
//? betriebsmittel soll nur der user selber sehen
if(
@@ -457,12 +460,9 @@ class Profil extends Auth_Controller
$res->funktionen = $benutzer_funktion_res;
return $res;
}
}
private function studentProfil(){
@@ -619,7 +619,12 @@ class Profil extends Auth_Controller
$res->postnomen = $person_res->titelpost;
$res->internal_email= getAuthUID() . "@" . DOMAIN;
$intern_email = array();
$intern_email+=array("type" => "intern");
$intern_email+=array("email"=> getAuthUID() . "@" . DOMAIN);
$res->emails = array($intern_email);
$res->adressen = $adresse_res;
$res->zutrittsdatum = $zutrittskarte_ausgegebenam;
$res->kontakte = $kontakte_res;
@@ -662,18 +667,8 @@ class Profil extends Auth_Controller
$isMitarbeiter = hasData($isMitarbeiter) ? getData($isMitarbeiter) : null;
$res = new stdClass();
if($uid){
// if an $uid was passed as payload to the function then the user is trying to view another profile
if($isMitarbeiter ){
$res->view= "ViewMitarbeiterProfil";
$res->data= $this->viewMitarbeiterProfil($uid);
}
else {
$res->view= "ViewStudentProfil";
$res->data= $this->viewStudentProfil($uid);
}
}else{
if($uid == getAuthUID() || !$uid ){
// if the $uid is empty, then no payload was supplied and the own profile is being requested
if($isMitarbeiter ) {
$res->view= "MitarbeiterProfil";
@@ -684,10 +679,21 @@ class Profil extends Auth_Controller
$res->data = $this->studentProfil();
}
}
elseif($uid){
// if an $uid was passed as payload to the function then the user is trying to view another profile
if($isMitarbeiter ){
$res->view= "ViewMitarbeiterProfil";
$res->data= $this->viewMitarbeiterProfil($uid);
}
else {
$res->view= "ViewStudentProfil";
$res->data= $this->viewStudentProfil($uid);
}
}
echo json_encode($res);
return;
public/js/apps/Cis/Profil.js
+6 -5
View File
@@ -20,6 +20,7 @@ const app = Vue.createApp({
data() {
return {
view:null,
data:null,
}
},
@@ -38,16 +39,16 @@ const app = Vue.createApp({
};
Vue.$fhcapi.UserData.getView(payload).then((res)=>{
//this.view = res.data.view;
//this.data = res.data.data;
this.view = res.data.view;
this.data = res.data.data;
console.log(res.data);
});
},
template:`
<div>
<p>test element</p>
<!--<StudentProfil></StudentProfil>-->
<component :is="view"></component>
<component :is="view" :data="data" ></component>
</div>`
public/js/components/Cis/Profil/MitarbeiterProfil.js
+272 -200
View File
@@ -1,6 +1,5 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
//? possible types of roles:
//! depending on the role of the current view, different content is being displayed and fetched
@@ -10,209 +9,282 @@ import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
//* View_Mitarbeiter
export default {
components:{
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info:null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
components: {
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info: null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
funktionen_table_options: {
height: 300,
layout: 'fitColumns',
data:[{Bezeichnung:"",Organisationseinheit:"",Gültig_von:"",Gültig_bis:"",Wochenstunden:""}],
columns: [{title: 'Bezeichnung', field: 'Bezeichnung', headerFilter: true},
{title: 'Organisationseinheit', field: 'Organisationseinheit', headerFilter: true},
{title: 'Gültig_von', field: 'Gültig_von', headerFilter: true},
{title: 'Gültig_bis', field: 'Gültig_bis', headerFilter: true},
{title: 'Wochenstunden', field: 'Wochenstunden', headerFilter: true},]
},
betriebsmittel_table_options:{
height: 300,
layout: 'fitColumns',
data:[{betriebsmittel:"",Nummer:"",Ausgegeben_am:""}],
columns: [{title: 'Betriebsmittel', field: 'betriebsmittel', headerFilter: true},
{title: 'Nummer', field: 'Nummer', headerFilter: true},
{title: 'Ausgegeben_am', field: 'Ausgegeben_am', headerFilter: true},]
},
zutrittsgruppen_table_options:{
height: 300,
layout: 'fitColumns',
data:[{bezeichnung:"test1"}],
columns: [{title: 'Zutritt', field: 'bezeichnung'}]
}
}
funktionen_table_options: {
height: 300,
layout: "fitColumns",
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
Gültig_von: "",
Gültig_bis: "",
Wochenstunden: "",
},
],
columns: [
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true },
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
},
],
},
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
},
],
},
zutrittsgruppen_table_options: {
height: 300,
layout: "fitColumns",
data: [{ bezeichnung: "test1" }],
columns: [{ title: "Zutritt", field: "bezeichnung" }],
},
};
},
//? this props were passed in the Profil.php view file
props: ["data"],
methods: {
concatenate_addresses(address_array) {
let result = "";
for (let i = 0; i < address_array.length; i++) {
result +=
address_array[i].strasse +
" " +
address_array[i].plz +
" " +
address_array[i].ort +
"\n";
}
return result;
},
render_unterelement(wert, bezeichnung) {
if (isArray(bezeichnung)) {
}
},
concatenate_kontakte(kontakt_array) {
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result +=
kontakt_array[i].kontakttyp +
" " +
kontakt_array[i].kontakt +
" " +
kontakt_array[i].zustellung +
"\n";
}
return result;
},
sperre_foto_function(value) {
if (!this.data) {
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then((res) => {
this.data.foto_sperre = res.data.foto_sperre;
});
},
},
computed: {
get_image_base64_src() {
if (!this.data) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
Username: this.data.username,
Anrede: this.data.anrede,
Titel: this.data.titel,
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
},
GeburtsDaten: {
Geburtsdatum: this.data.gebdatum,
Geburtsort: this.data.gebort,
},
Adressen: this.data.adressen,
SpecialInformation: {
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Büro:this.data.ort_kurzbz,
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo() {
if (!this.data) {
return {};
}
return {
FhAusweisStatus: this.data.zutrittsdatum,
emails: this.data.emails,
Kontakte: this.data.kontakte,
};
},
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
//? this props were passed in the Profil.php view file
props:['uid','view'],
methods: {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
concatenate_addresses(address_array){
let result = "";
for (let i = 0; i < address_array.length; i++) {
result += address_array[i].strasse + " " + address_array[i].plz + " " + address_array[i].ort + "\n";
}
return result;
},
render_unterelement(wert,bezeichnung){
if (isArray(bezeichnung)){
}
},
concatenate_kontakte(kontakt_array){
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result += kontakt_array[i].kontakttyp + " " + kontakt_array[i].kontakt + " " + kontakt_array[i].zustellung + "\n";
}
return result;
},
sperre_foto_function(value){
if(!(this.mitarbeiter_info && this.index_information && this.student_info) ){
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then(res => {
})
this.$refs.funktionenTable.tabulator.on('tableBuilt', () => {
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
})
},
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col">
<img class="img-thumbnail" :src="get_image_base64_src"></img>
<div v-if="data.foto_sperre ">
<p style="margin:0">Profilfoto gesperrt</p>
<a href="#" @click.prevent="sperre_foto_function(false)" style="text-decoration:none">Sperre des Profilfotos aufheben</a>
</div>
<a href="#" @click.prevent="sperre_foto_function(true)" style="display:block; text-decoration:none" v-else>Profilfoto sperren</a>
</div>
<div class="col">
<h3 >Mitarbeiter</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><span style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</span></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<ol style="list-style:none">
<li v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<p class="mb-0"><b>FH-Ausweis Status</b></p>
<p class="mb-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</p>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<p class="mb-0"><b>Private Kontakte</b></p>
<div class="row" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</div>
</div>
</li>
</ol>
</div>
</div>
this.index_information.foto_sperre = res.data.foto_sperre;
<div class="row my-5">
});
<div class="col-12">
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
</div>
<div class="col-12">
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" :tableOnly />
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
},
},
computed:{
get_image_base64_src(){
if(!this.index_information){
return "";
}
return "data:image/jpeg;base64,"+this.index_information.foto;
},
personData(){
if(!this.index_information){
return {};
}
return {
Allgemein: (this.role =='Mitarbeiter' || this.role =='View_Mitarbeiter')?{
Username:this.index_information.username,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
}:{
Username:this.index_information.username,
Matrikelnummer: this.student_info?.matrikelnummer,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
},
GeburtsDaten:!this.role.includes("View")?{
Geburtsdatum:this.index_information.gebdatum,
Geburtsort: this.index_information.gebort,
}: null,
Adressen: this.index_information.adressen,
SpecialInformation: this.role =='Mitarbeiter' || this.role === 'View_Mitarbeiter'? {
Kurzzeichen: this.mitarbeiter_info?.kurzbz,
Telefon: this.mitarbeiter_info?.telefonklappe,
//* Wird das Feld Ort_kurzbz noch gepflegt?
...(this.role === 'View_Mitarbeiter'?{Büro:this.mitarbeiter_info?.ort_kurzbz}:{}) ,
} : {
Studiengang:this.student_info?.studiengang,
Semester:this.student_info?.semester,
Verband:this.student_info?.verband,
Gruppe:this.student_info?.gruppe,
Personenkennzeichen:this.student_info?.personenkennzeichen
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo(){
if(!this.index_information){
return {};
}
return {
FhAusweisStatus: this.index_information.zutrittsdatum,
emails: this.role === 'Mitarbeiter' || this.role === 'View_Mitarbeiter'? this.mitarbeiter_info?.emails: this.index_information.emails,
Kontakte:this.index_information.kontakte,
};
},
},
mounted(){
console.log(this.uid);
console.log(this.view);
console.log(typeof this.view);
if(this.view){console.log("view is true")}else{ console.log("view is false")}
//? this function is to update the tabulator information only when the tabulator was build checking the tableBulit event
//! only the tableBuilt event of the second tabulator was used to update the table informations
fhcapifactory.UserData.isMitarbeiterOrStudent(this.uid).then((res) => {
this.role = this.view? "View_"+res.data: res.data;
if(!this.role.includes('View')){
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
})
}
console.log("the role of the current view: ", this.role);
//? Die anderen api calls werden erst gemacht wenn der call zu isMitarbeiterOrStudent gemacht worden ist
//! indexProfilInformationen werden immer gefetcht
fhcapifactory.UserData.indexProfilInformaion(this.uid,this.view).then((res) => {
console.log(res.data);
this.index_information = res.data;
if(!this.role.includes("View")){
this.$refs.betriebsmittelTable.tabulator.setData(res.data.mittel);
}
});
//? Danach werden die Informationen der Role gefetcht
if(this.role === "Student" || this.role === "View_Student"){
fhcapifactory.UserData.studentProfil(this.uid,this.view).then((res)=> {
this.student_info = res.data;
if(this.role ==="Student"){
this.$refs.zutrittsgruppenTable.tabulator.setData(res.data.zuttritsgruppen);
}
})
}
if(this.role === "Mitarbeiter" || this.role === "View_Mitarbeiter"){
fhcapifactory.UserData.mitarbeiterProfil(this.uid).then((res)=> {
this.mitarbeiter_info = res.data;
this.$refs.funktionenTable.tabulator.setData(res.data.funktionen);
})
}
});
},
template: `
<p>MitarbeiterProfil</p>
`,
};
};
public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+264 -201
View File
@@ -1,6 +1,5 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
//? possible types of roles:
//! depending on the role of the current view, different content is being displayed and fetched
@@ -10,209 +9,273 @@ import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
//* View_Mitarbeiter
export default {
components:{
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info:null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
components: {
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info: null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
funktionen_table_options: {
height: 300,
layout: 'fitColumns',
data:[{Bezeichnung:"",Organisationseinheit:"",Gültig_von:"",Gültig_bis:"",Wochenstunden:""}],
columns: [{title: 'Bezeichnung', field: 'Bezeichnung', headerFilter: true},
{title: 'Organisationseinheit', field: 'Organisationseinheit', headerFilter: true},
{title: 'Gültig_von', field: 'Gültig_von', headerFilter: true},
{title: 'Gültig_bis', field: 'Gültig_bis', headerFilter: true},
{title: 'Wochenstunden', field: 'Wochenstunden', headerFilter: true},]
},
betriebsmittel_table_options:{
height: 300,
layout: 'fitColumns',
data:[{betriebsmittel:"",Nummer:"",Ausgegeben_am:""}],
columns: [{title: 'Betriebsmittel', field: 'betriebsmittel', headerFilter: true},
{title: 'Nummer', field: 'Nummer', headerFilter: true},
{title: 'Ausgegeben_am', field: 'Ausgegeben_am', headerFilter: true},]
},
zutrittsgruppen_table_options:{
height: 300,
layout: 'fitColumns',
data:[{bezeichnung:"test1"}],
columns: [{title: 'Zutritt', field: 'bezeichnung'}]
}
}
funktionen_table_options: {
height: 300,
layout: "fitColumns",
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
Gültig_von: "",
Gültig_bis: "",
Wochenstunden: "",
},
],
columns: [
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true },
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
},
],
},
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
},
],
},
zutrittsgruppen_table_options: {
height: 300,
layout: "fitColumns",
data: [{ bezeichnung: "test1" }],
columns: [{ title: "Zutritt", field: "bezeichnung" }],
},
};
},
//? this props were passed in the Profil.php view file
props: ["data"],
methods: {
concatenate_addresses(address_array) {
let result = "";
for (let i = 0; i < address_array.length; i++) {
result +=
address_array[i].strasse +
" " +
address_array[i].plz +
" " +
address_array[i].ort +
"\n";
}
return result;
},
//? this props were passed in the Profil.php view file
props:['uid','view'],
methods: {
render_unterelement(wert, bezeichnung) {
if (isArray(bezeichnung)) {
}
},
concatenate_kontakte(kontakt_array) {
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result +=
kontakt_array[i].kontakttyp +
" " +
kontakt_array[i].kontakt +
" " +
kontakt_array[i].zustellung +
"\n";
}
return result;
},
sperre_foto_function(value) {
if (!this.data) {
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then((res) => {
this.data.foto_sperre = res.data.foto_sperre;
});
},
},
computed: {
get_image_base64_src() {
if (!this.data) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
Username: this.data.username,
Anrede: this.data.anrede,
Titel: this.data.titel,
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
},
SpecialInformation: {
Kurzzeichen: this.data.kurzbz,
Telefon: this.data.telefonklappe,
Büro:this.data.ort_kurzbz,
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo() {
if (!this.data) {
return {};
}
return {
emails: this.data.emails,
concatenate_addresses(address_array){
let result = "";
for (let i = 0; i < address_array.length; i++) {
result += address_array[i].strasse + " " + address_array[i].plz + " " + address_array[i].ort + "\n";
}
return result;
},
render_unterelement(wert,bezeichnung){
if (isArray(bezeichnung)){
}
},
concatenate_kontakte(kontakt_array){
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result += kontakt_array[i].kontakttyp + " " + kontakt_array[i].kontakt + " " + kontakt_array[i].zustellung + "\n";
}
return result;
},
sperre_foto_function(value){
if(!(this.mitarbeiter_info && this.index_information && this.student_info) ){
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then(res => {
};
},
},
mounted() {
this.$refs.funktionenTable.tabulator.on('tableBuilt', () => {
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
})
},
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col">
<img class="img-thumbnail" :src="get_image_base64_src"></img>
<div v-if="data.foto_sperre ">
<p style="margin:0">Profilfoto gesperrt</p>
<a href="#" @click.prevent="sperre_foto_function(false)" style="text-decoration:none">Sperre des Profilfotos aufheben</a>
</div>
<a href="#" @click.prevent="sperre_foto_function(true)" style="display:block; text-decoration:none" v-else>Profilfoto sperren</a>
</div>
<div class="col">
<h3 >Mitarbeiter</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><span style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</span></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<ol style="list-style:none">
<li v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<p class="mb-0"><b>FH-Ausweis Status</b></p>
<p class="mb-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</p>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<p class="mb-0"><b>Private Kontakte</b></p>
<div class="row" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</div>
</div>
</li>
</ol>
</div>
</div>
this.index_information.foto_sperre = res.data.foto_sperre;
<div class="row my-5">
});
<div class="col-12">
<core-filter-cmpt title="Funktionen" ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
},
},
computed:{
get_image_base64_src(){
if(!this.index_information){
return "";
}
return "data:image/jpeg;base64,"+this.index_information.foto;
},
personData(){
if(!this.index_information){
return {};
}
return {
Allgemein: (this.role =='Mitarbeiter' || this.role =='View_Mitarbeiter')?{
Username:this.index_information.username,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
}:{
Username:this.index_information.username,
Matrikelnummer: this.student_info?.matrikelnummer,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
},
GeburtsDaten:!this.role.includes("View")?{
Geburtsdatum:this.index_information.gebdatum,
Geburtsort: this.index_information.gebort,
}: null,
Adressen: this.index_information.adressen,
SpecialInformation: this.role =='Mitarbeiter' || this.role === 'View_Mitarbeiter'? {
Kurzzeichen: this.mitarbeiter_info?.kurzbz,
Telefon: this.mitarbeiter_info?.telefonklappe,
//* Wird das Feld Ort_kurzbz noch gepflegt?
...(this.role === 'View_Mitarbeiter'?{Büro:this.mitarbeiter_info?.ort_kurzbz}:{}) ,
} : {
Studiengang:this.student_info?.studiengang,
Semester:this.student_info?.semester,
Verband:this.student_info?.verband,
Gruppe:this.student_info?.gruppe,
Personenkennzeichen:this.student_info?.personenkennzeichen
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo(){
if(!this.index_information){
return {};
}
return {
FhAusweisStatus: this.index_information.zutrittsdatum,
emails: this.role === 'Mitarbeiter' || this.role === 'View_Mitarbeiter'? this.mitarbeiter_info?.emails: this.index_information.emails,
Kontakte:this.index_information.kontakte,
};
},
},
mounted(){
console.log(this.uid);
console.log(this.view);
console.log(typeof this.view);
if(this.view){console.log("view is true")}else{ console.log("view is false")}
//? this function is to update the tabulator information only when the tabulator was build checking the tableBulit event
//! only the tableBuilt event of the second tabulator was used to update the table informations
fhcapifactory.UserData.isMitarbeiterOrStudent(this.uid).then((res) => {
this.role = this.view? "View_"+res.data: res.data;
if(!this.role.includes('View')){
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
})
}
console.log("the role of the current view: ", this.role);
//? Die anderen api calls werden erst gemacht wenn der call zu isMitarbeiterOrStudent gemacht worden ist
//! indexProfilInformationen werden immer gefetcht
fhcapifactory.UserData.indexProfilInformaion(this.uid,this.view).then((res) => {
console.log(res.data);
this.index_information = res.data;
if(!this.role.includes("View")){
this.$refs.betriebsmittelTable.tabulator.setData(res.data.mittel);
}
});
//? Danach werden die Informationen der Role gefetcht
if(this.role === "Student" || this.role === "View_Student"){
fhcapifactory.UserData.studentProfil(this.uid,this.view).then((res)=> {
this.student_info = res.data;
if(this.role ==="Student"){
this.$refs.zutrittsgruppenTable.tabulator.setData(res.data.zuttritsgruppen);
}
})
}
if(this.role === "Mitarbeiter" || this.role === "View_Mitarbeiter"){
fhcapifactory.UserData.mitarbeiterProfil(this.uid).then((res)=> {
this.mitarbeiter_info = res.data;
this.$refs.funktionenTable.tabulator.setData(res.data.funktionen);
})
}
});
},
template: `
<p>MitarbeiterViewProfil</p>
`,
};
};
public/js/components/Cis/Profil/Profil.js
+1 -1
View File
@@ -51,7 +51,7 @@ export default {
},
//? this props were passed in the Profil.php view file
props:['uid','view'],
props:['data','view'],
methods: {
concatenate_addresses(address_array){
public/js/components/Cis/Profil/StudentProfil.js
+274 -200
View File
@@ -1,6 +1,5 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
//? possible types of roles:
//! depending on the role of the current view, different content is being displayed and fetched
@@ -10,209 +9,284 @@ import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
//* View_Mitarbeiter
export default {
components:{
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info:null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
components: {
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info: null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
funktionen_table_options: {
height: 300,
layout: 'fitColumns',
data:[{Bezeichnung:"",Organisationseinheit:"",Gültig_von:"",Gültig_bis:"",Wochenstunden:""}],
columns: [{title: 'Bezeichnung', field: 'Bezeichnung', headerFilter: true},
{title: 'Organisationseinheit', field: 'Organisationseinheit', headerFilter: true},
{title: 'Gültig_von', field: 'Gültig_von', headerFilter: true},
{title: 'Gültig_bis', field: 'Gültig_bis', headerFilter: true},
{title: 'Wochenstunden', field: 'Wochenstunden', headerFilter: true},]
},
betriebsmittel_table_options:{
height: 300,
layout: 'fitColumns',
data:[{betriebsmittel:"",Nummer:"",Ausgegeben_am:""}],
columns: [{title: 'Betriebsmittel', field: 'betriebsmittel', headerFilter: true},
{title: 'Nummer', field: 'Nummer', headerFilter: true},
{title: 'Ausgegeben_am', field: 'Ausgegeben_am', headerFilter: true},]
},
zutrittsgruppen_table_options:{
height: 300,
layout: 'fitColumns',
data:[{bezeichnung:"test1"}],
columns: [{title: 'Zutritt', field: 'bezeichnung'}]
}
}
funktionen_table_options: {
height: 300,
layout: "fitColumns",
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
Gültig_von: "",
Gültig_bis: "",
Wochenstunden: "",
},
],
columns: [
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true },
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
},
],
},
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
},
],
},
zutrittsgruppen_table_options: {
height: 300,
layout: "fitColumns",
data: [{ bezeichnung: "test1" }],
columns: [{ title: "Zutritt", field: "bezeichnung" }],
},
};
},
//? this props were passed in the Profil.php view file
props: ["data"],
methods: {
concatenate_addresses(address_array) {
let result = "";
for (let i = 0; i < address_array.length; i++) {
result +=
address_array[i].strasse +
" " +
address_array[i].plz +
" " +
address_array[i].ort +
"\n";
}
return result;
},
render_unterelement(wert, bezeichnung) {
if (isArray(bezeichnung)) {
}
},
concatenate_kontakte(kontakt_array) {
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result +=
kontakt_array[i].kontakttyp +
" " +
kontakt_array[i].kontakt +
" " +
kontakt_array[i].zustellung +
"\n";
}
return result;
},
sperre_foto_function(value) {
if (!this.data) {
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then((res) => {
this.data.foto_sperre = res.data.foto_sperre;
});
},
},
computed: {
get_image_base64_src() {
if (!this.data) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
Username: this.data.username,
Matrikelnummer: this.data.matrikelnummer,
Anrede: this.data.anrede,
Titel: this.data.titel,
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
},
GeburtsDaten: {
Geburtsdatum: this.data.gebdatum,
Geburtsort: this.data.gebort,
},
Adressen: this.data.adressen,
SpecialInformation: {
Studiengang: this.data.studiengang,
Semester: this.data.semester,
Verband: this.data.verband,
Gruppe: this.data.gruppe,
Personenkennzeichen: this.data.personenkennzeichen,
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo() {
if (!this.data) {
return {};
}
return {
FhAusweisStatus: this.data.zutrittsdatum,
emails: this.data.emails,
Kontakte: this.data.kontakte,
};
},
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
//? this props were passed in the Profil.php view file
props:['uid','view'],
methods: {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
concatenate_addresses(address_array){
let result = "";
for (let i = 0; i < address_array.length; i++) {
result += address_array[i].strasse + " " + address_array[i].plz + " " + address_array[i].ort + "\n";
}
return result;
},
render_unterelement(wert,bezeichnung){
if (isArray(bezeichnung)){
}
},
concatenate_kontakte(kontakt_array){
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result += kontakt_array[i].kontakttyp + " " + kontakt_array[i].kontakt + " " + kontakt_array[i].zustellung + "\n";
}
return result;
},
sperre_foto_function(value){
if(!(this.mitarbeiter_info && this.index_information && this.student_info) ){
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then(res => {
})
this.$refs.zutrittsgruppenTable.tabulator.on('tableBuilt', () => {
this.$refs.zutrittsgruppenTable.tabulator.setData(this.data.zuttritsgruppen);
})
},
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col">
<img class="img-thumbnail" :src="get_image_base64_src"></img>
<div v-if="data.foto_sperre ">
<p style="margin:0">Profilfoto gesperrt</p>
<a href="#" @click.prevent="sperre_foto_function(false)" style="text-decoration:none">Sperre des Profilfotos aufheben</a>
</div>
<a href="#" @click.prevent="sperre_foto_function(true)" style="display:block; text-decoration:none" v-else>Profilfoto sperren</a>
</div>
<div class="col">
<h3 >Student</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><span style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</span></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<ol style="list-style:none">
<li v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER IST DAS DATUM DES FH AUSWEIS -->
<div class="mb-3" v-if="bezeichnung=='FhAusweisStatus'">
<p class="mb-0"><b>FH-Ausweis Status</b></p>
<p class="mb-0">{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}</p>
</div>
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
<!-- HIER SIND DIE PRIVATEN KONTAKTE -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung=='Kontakte'">
<p class="mb-0"><b>Private Kontakte</b></p>
<div class="row" v-for="element in wert" >
<div class="col-8">{{element.kontakttyp + ": " + element.kontakt+" " }}</div>
<div class="col-2"> {{element?.anmerkung}}</div>
<div class="col-2">
<i v-if="element.zustellung" class="fa-solid fa-check"></i>
<i v-else="element.zustellung" class="fa-solid fa-xmark"></i>
</div>
</div>
</div>
</li>
</ol>
</div>
</div>
this.index_information.foto_sperre = res.data.foto_sperre;
<div class="row my-5">
});
<div class="col-12">
<core-filter-cmpt title="Entlehnte Betriebsmittel" ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" :tableOnly />
</div>
<div class="col-12">
<core-filter-cmpt title="Zutrittsgruppen" ref="zutrittsgruppenTable" :tabulator-options="zutrittsgruppen_table_options" :tableOnly :noColFilter />
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
},
},
computed:{
get_image_base64_src(){
if(!this.index_information){
return "";
}
return "data:image/jpeg;base64,"+this.index_information.foto;
},
personData(){
if(!this.index_information){
return {};
}
return {
Allgemein: (this.role =='Mitarbeiter' || this.role =='View_Mitarbeiter')?{
Username:this.index_information.username,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
}:{
Username:this.index_information.username,
Matrikelnummer: this.student_info?.matrikelnummer,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
},
GeburtsDaten:!this.role.includes("View")?{
Geburtsdatum:this.index_information.gebdatum,
Geburtsort: this.index_information.gebort,
}: null,
Adressen: this.index_information.adressen,
SpecialInformation: this.role =='Mitarbeiter' || this.role === 'View_Mitarbeiter'? {
Kurzzeichen: this.mitarbeiter_info?.kurzbz,
Telefon: this.mitarbeiter_info?.telefonklappe,
//* Wird das Feld Ort_kurzbz noch gepflegt?
...(this.role === 'View_Mitarbeiter'?{Büro:this.mitarbeiter_info?.ort_kurzbz}:{}) ,
} : {
Studiengang:this.student_info?.studiengang,
Semester:this.student_info?.semester,
Verband:this.student_info?.verband,
Gruppe:this.student_info?.gruppe,
Personenkennzeichen:this.student_info?.personenkennzeichen
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo(){
if(!this.index_information){
return {};
}
return {
FhAusweisStatus: this.index_information.zutrittsdatum,
emails: this.role === 'Mitarbeiter' || this.role === 'View_Mitarbeiter'? this.mitarbeiter_info?.emails: this.index_information.emails,
Kontakte:this.index_information.kontakte,
};
},
},
mounted(){
console.log(this.uid);
console.log(this.view);
console.log(typeof this.view);
if(this.view){console.log("view is true")}else{ console.log("view is false")}
//? this function is to update the tabulator information only when the tabulator was build checking the tableBulit event
//! only the tableBuilt event of the second tabulator was used to update the table informations
fhcapifactory.UserData.isMitarbeiterOrStudent(this.uid).then((res) => {
this.role = this.view? "View_"+res.data: res.data;
if(!this.role.includes('View')){
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
})
}
console.log("the role of the current view: ", this.role);
//? Die anderen api calls werden erst gemacht wenn der call zu isMitarbeiterOrStudent gemacht worden ist
//! indexProfilInformationen werden immer gefetcht
fhcapifactory.UserData.indexProfilInformaion(this.uid,this.view).then((res) => {
console.log(res.data);
this.index_information = res.data;
if(!this.role.includes("View")){
this.$refs.betriebsmittelTable.tabulator.setData(res.data.mittel);
}
});
//? Danach werden die Informationen der Role gefetcht
if(this.role === "Student" || this.role === "View_Student"){
fhcapifactory.UserData.studentProfil(this.uid,this.view).then((res)=> {
this.student_info = res.data;
if(this.role ==="Student"){
this.$refs.zutrittsgruppenTable.tabulator.setData(res.data.zuttritsgruppen);
}
})
}
if(this.role === "Mitarbeiter" || this.role === "View_Mitarbeiter"){
fhcapifactory.UserData.mitarbeiterProfil(this.uid).then((res)=> {
this.mitarbeiter_info = res.data;
this.$refs.funktionenTable.tabulator.setData(res.data.funktionen);
})
}
});
},
template: `
<p>StudentProfil</p>
`,
};
};
public/js/components/Cis/Profil/StudentViewProfil.js
+227 -201
View File
@@ -1,6 +1,5 @@
import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
//? possible types of roles:
//! depending on the role of the current view, different content is being displayed and fetched
@@ -10,209 +9,236 @@ import {CoreFilterCmpt} from "../../../components/filter/Filter.js"
//* View_Mitarbeiter
export default {
components:{
CoreFilterCmpt,
components: {
CoreFilterCmpt,
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info: null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
funktionen_table_options: {
height: 300,
layout: "fitColumns",
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
Gültig_von: "",
Gültig_bis: "",
Wochenstunden: "",
},
],
columns: [
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true },
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
},
],
},
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
},
],
},
zutrittsgruppen_table_options: {
height: 300,
layout: "fitColumns",
data: [{ bezeichnung: "test1" }],
columns: [{ title: "Zutritt", field: "bezeichnung" }],
},
};
},
//? this props were passed in the Profil.php view file
props: ["data"],
methods: {
concatenate_addresses(address_array) {
let result = "";
for (let i = 0; i < address_array.length; i++) {
result +=
address_array[i].strasse +
" " +
address_array[i].plz +
" " +
address_array[i].ort +
"\n";
}
return result;
},
data() {
return {
index_information: null,
mitarbeiter_info: null,
student_info:null,
//? beinhaltet die Information ob der angefragte user ein Student oder Mitarbeiter ist
role: null,
funktionen_table_options: {
height: 300,
layout: 'fitColumns',
data:[{Bezeichnung:"",Organisationseinheit:"",Gültig_von:"",Gültig_bis:"",Wochenstunden:""}],
columns: [{title: 'Bezeichnung', field: 'Bezeichnung', headerFilter: true},
{title: 'Organisationseinheit', field: 'Organisationseinheit', headerFilter: true},
{title: 'Gültig_von', field: 'Gültig_von', headerFilter: true},
{title: 'Gültig_bis', field: 'Gültig_bis', headerFilter: true},
{title: 'Wochenstunden', field: 'Wochenstunden', headerFilter: true},]
},
betriebsmittel_table_options:{
height: 300,
layout: 'fitColumns',
data:[{betriebsmittel:"",Nummer:"",Ausgegeben_am:""}],
columns: [{title: 'Betriebsmittel', field: 'betriebsmittel', headerFilter: true},
{title: 'Nummer', field: 'Nummer', headerFilter: true},
{title: 'Ausgegeben_am', field: 'Ausgegeben_am', headerFilter: true},]
},
zutrittsgruppen_table_options:{
height: 300,
layout: 'fitColumns',
data:[{bezeichnung:"test1"}],
columns: [{title: 'Zutritt', field: 'bezeichnung'}]
}
}
render_unterelement(wert, bezeichnung) {
if (isArray(bezeichnung)) {
}
},
//? this props were passed in the Profil.php view file
props:['uid','view'],
methods: {
concatenate_addresses(address_array){
let result = "";
for (let i = 0; i < address_array.length; i++) {
result += address_array[i].strasse + " " + address_array[i].plz + " " + address_array[i].ort + "\n";
}
return result;
},
render_unterelement(wert,bezeichnung){
if (isArray(bezeichnung)){
}
},
concatenate_kontakte(kontakt_array){
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result += kontakt_array[i].kontakttyp + " " + kontakt_array[i].kontakt + " " + kontakt_array[i].zustellung + "\n";
}
return result;
},
sperre_foto_function(value){
if(!(this.mitarbeiter_info && this.index_information && this.student_info) ){
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then(res => {
this.index_information.foto_sperre = res.data.foto_sperre;
});
},
concatenate_kontakte(kontakt_array) {
let result = "";
for (let i = 0; i < kontakt_array.length; i++) {
result +=
kontakt_array[i].kontakttyp +
" " +
kontakt_array[i].kontakt +
" " +
kontakt_array[i].zustellung +
"\n";
}
return result;
},
computed:{
get_image_base64_src(){
if(!this.index_information){
return "";
}
return "data:image/jpeg;base64,"+this.index_information.foto;
},
personData(){
if(!this.index_information){
return {};
}
return {
Allgemein: (this.role =='Mitarbeiter' || this.role =='View_Mitarbeiter')?{
Username:this.index_information.username,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
}:{
Username:this.index_information.username,
Matrikelnummer: this.student_info?.matrikelnummer,
Anrede:this.index_information.anrede,
Titel:this.index_information.titel,
Vorname:this.index_information.vorname,
Nachname:this.index_information.nachname,
Postnomen:this.index_information.postnomen,
},
GeburtsDaten:!this.role.includes("View")?{
Geburtsdatum:this.index_information.gebdatum,
Geburtsort: this.index_information.gebort,
}: null,
Adressen: this.index_information.adressen,
SpecialInformation: this.role =='Mitarbeiter' || this.role === 'View_Mitarbeiter'? {
Kurzzeichen: this.mitarbeiter_info?.kurzbz,
Telefon: this.mitarbeiter_info?.telefonklappe,
//* Wird das Feld Ort_kurzbz noch gepflegt?
...(this.role === 'View_Mitarbeiter'?{Büro:this.mitarbeiter_info?.ort_kurzbz}:{}) ,
} : {
Studiengang:this.student_info?.studiengang,
Semester:this.student_info?.semester,
Verband:this.student_info?.verband,
Gruppe:this.student_info?.gruppe,
Personenkennzeichen:this.student_info?.personenkennzeichen
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo(){
if(!this.index_information){
return {};
}
return {
FhAusweisStatus: this.index_information.zutrittsdatum,
emails: this.role === 'Mitarbeiter' || this.role === 'View_Mitarbeiter'? this.mitarbeiter_info?.emails: this.index_information.emails,
Kontakte:this.index_information.kontakte,
};
},
sperre_foto_function(value) {
if (!this.data) {
return;
}
fhcapifactory.UserData.sperre_foto_function(value).then((res) => {
this.data.foto_sperre = res.data.foto_sperre;
});
},
mounted(){
console.log(this.uid);
console.log(this.view);
console.log(typeof this.view);
if(this.view){console.log("view is true")}else{ console.log("view is false")}
//? this function is to update the tabulator information only when the tabulator was build checking the tableBulit event
//! only the tableBuilt event of the second tabulator was used to update the table informations
fhcapifactory.UserData.isMitarbeiterOrStudent(this.uid).then((res) => {
this.role = this.view? "View_"+res.data: res.data;
if(!this.role.includes('View')){
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
})
}
console.log("the role of the current view: ", this.role);
//? Die anderen api calls werden erst gemacht wenn der call zu isMitarbeiterOrStudent gemacht worden ist
//! indexProfilInformationen werden immer gefetcht
fhcapifactory.UserData.indexProfilInformaion(this.uid,this.view).then((res) => {
console.log(res.data);
this.index_information = res.data;
if(!this.role.includes("View")){
this.$refs.betriebsmittelTable.tabulator.setData(res.data.mittel);
}
});
//? Danach werden die Informationen der Role gefetcht
if(this.role === "Student" || this.role === "View_Student"){
fhcapifactory.UserData.studentProfil(this.uid,this.view).then((res)=> {
this.student_info = res.data;
if(this.role ==="Student"){
this.$refs.zutrittsgruppenTable.tabulator.setData(res.data.zuttritsgruppen);
}
})
}
if(this.role === "Mitarbeiter" || this.role === "View_Mitarbeiter"){
fhcapifactory.UserData.mitarbeiterProfil(this.uid).then((res)=> {
this.mitarbeiter_info = res.data;
this.$refs.funktionenTable.tabulator.setData(res.data.funktionen);
})
}
});
},
computed: {
get_image_base64_src() {
if (!this.data) {
return "";
}
return "data:image/jpeg;base64," + this.data.foto;
},
template: `
personData() {
if (!this.data) {
return {};
}
return {
Allgemein: {
Username: this.data.username,
Matrikelnummer: this.data.matrikelnummer,
Anrede: this.data.anrede,
Titel: this.data.titel,
Vorname: this.data.vorname,
Nachname: this.data.nachname,
Postnomen: this.data.postnomen,
},
SpecialInformation: {
Studiengang: this.data.studiengang,
Semester: this.data.semester,
Verband: this.data.verband,
Gruppe: this.data.gruppe,
Personenkennzeichen: this.data.personenkennzeichen,
},
};
},
//? this computed conains all the information that is used for the second column that displays the information of the person
kontaktInfo() {
if (!this.data) {
return {};
}
return {
emails: this.data.emails,
};
},
},
mounted() {
<p>StudentViewProfil</p>
},
template: `
<div class="container-fluid">
<!-- here starts the row of the whole window -->
<div class="row">
<!-- this is the left column of the window -->
<div class="col-9">
<div class="row">
<div class="col">
<img class="img-thumbnail" :src="get_image_base64_src"></img>
</div>
<div class="col">
<h3 >Student</h3>
<div v-for="(wert,bezeichnung) in personData">
<div class="mb-3" v-if="typeof wert == 'object' && bezeichnung=='Adressen'"><span style="display:block" v-for="element in wert">{{element.strasse}} <b>({{element.adr_typ}})</b><br/>{{ element.plz}} {{element.ort}}</span></div>
<div v-else class="mb-3" ><span style="display:block;" v-for="(val,bez) in wert">{{bez}}: {{val}}</span></div>
</div>
</div>
<div class="col">
<ol style="list-style:none">
<li v-for="(wert,bezeichnung) in kontaktInfo">
<!-- HIER SIND DIE EMAILS -->
<div class="mb-3" v-if="typeof wert === 'object' && bezeichnung == 'emails'">
<p class="mb-0"><b>eMail</b></p>
<p v-for="email in wert" class="mb-0">{{email.type}}: <a style="text-decoration:none" :href="'mailto:'+email.email">{{email.email}}</a></p>
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="col-3">
<div style="background-color:#EEEEEE" class="row py-4">
<a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
<a style="text-decoration:none" class="my-1" href="#">Lehrveranstaltungen</a>
<a style="text-decoration:none" class="my-1" href="#">Zeitsperren von Gschnell</a>
</div>
<div class="row">
<h5 class="fs-3" style="margin-top:1em">Mailverteilers</h5>
<p class="fs-6">Sie sind Mitgglied in folgenden Verteilern:</p>
<div class="row text-break" v-for="verteiler in data?.mailverteiler">
<div class="col-6"><a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a></div>
<div class="col-6">{{verteiler.beschreibung}}</div>
</div>
</div>
</div>
</div>
</div>
`,
};
};