mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 20:29:29 +00:00
more template cleanup profil
This commit is contained in:
Johann Hoffmann
+350
-355
@@ -4,405 +4,400 @@ import ViewStudentProfil from "../../components/Cis/Profil/StudentViewProfil.js"
|
||||
import ViewMitarbeiterProfil from "../../components/Cis/Profil/MitarbeiterViewProfil.js";
|
||||
import Loading from "../../components/Loader.js";
|
||||
import Phrasen from "../../plugin/Phrasen.js";
|
||||
import { setScrollbarWidth } from "../../helpers/CssVarCalcHelpers";
|
||||
import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers";
|
||||
|
||||
|
||||
Vue.$collapseFormatter = function (data) {
|
||||
//data - an array of objects containing the column title and value for each cell
|
||||
var container = document.createElement("div");
|
||||
container.classList.add("tabulator-collapsed-row");
|
||||
container.classList.add("text-break");
|
||||
//data - an array of objects containing the column title and value for each cell
|
||||
var container = document.createElement("div");
|
||||
container.classList.add("tabulator-collapsed-row");
|
||||
container.classList.add("text-break");
|
||||
|
||||
var list = document.createElement("div");
|
||||
list.classList.add("row");
|
||||
var list = document.createElement("div");
|
||||
list.classList.add("row");
|
||||
|
||||
container.appendChild(list);
|
||||
container.appendChild(list);
|
||||
|
||||
data.forEach(function (col) {
|
||||
let item = document.createElement("div");
|
||||
item.classList.add("col-6");
|
||||
let item2 = document.createElement("div");
|
||||
item2.classList.add("col-6");
|
||||
data.forEach(function (col) {
|
||||
let item = document.createElement("div");
|
||||
item.classList.add("col-6");
|
||||
let item2 = document.createElement("div");
|
||||
item2.classList.add("col-6");
|
||||
|
||||
item.innerHTML = "<strong>" + col.title + "</strong>";
|
||||
item2.innerHTML = col.value ? col.value : "-";
|
||||
item.innerHTML = "<strong>" + col.title + "</strong>";
|
||||
item2.innerHTML = col.value ? col.value : "-";
|
||||
|
||||
list.appendChild(item);
|
||||
list.appendChild(item2);
|
||||
});
|
||||
list.appendChild(item);
|
||||
list.appendChild(item2);
|
||||
});
|
||||
|
||||
return Object.keys(data).length ? container : "";
|
||||
return Object.keys(data).length ? container : "";
|
||||
};
|
||||
|
||||
const profilApp = Vue.createApp({
|
||||
name: 'ProfilApp',
|
||||
components: {
|
||||
StudentProfil,
|
||||
MitarbeiterProfil,
|
||||
ViewStudentProfil,
|
||||
ViewMitarbeiterProfil,
|
||||
Loading,
|
||||
},
|
||||
name: 'ProfilApp',
|
||||
components: {
|
||||
StudentProfil,
|
||||
MitarbeiterProfil,
|
||||
ViewStudentProfil,
|
||||
ViewMitarbeiterProfil,
|
||||
Loading,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
//? loading property is used for showing/hiding the loading modal
|
||||
loading: false,
|
||||
profilUpdateStates: null,
|
||||
profilUpdateTopic: null,
|
||||
view: null,
|
||||
data: null,
|
||||
// notfound is null by default, but contains an UID if no user exists with that UID
|
||||
notFoundUID: null,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//? loading property is used for showing/hiding the loading modal
|
||||
loading: false,
|
||||
profilUpdateStates: null,
|
||||
profilUpdateTopic: null,
|
||||
view: null,
|
||||
data: null,
|
||||
// notfound is null by default, but contains an UID if no user exists with that UID
|
||||
notFoundUID: null,
|
||||
};
|
||||
},
|
||||
|
||||
//? use function syntax for provide so that we can access `this`
|
||||
provide() {
|
||||
return {
|
||||
profilUpdateStates: Vue.computed(() =>
|
||||
this.profilUpdateStates ? this.profilUpdateStates : false
|
||||
),
|
||||
profilUpdateTopic: Vue.computed(() =>
|
||||
this.profilUpdateTopic ? this.profilUpdateTopic : false
|
||||
),
|
||||
setLoading: (newValue) => {
|
||||
this.loading = newValue;
|
||||
},
|
||||
getZustellkontakteCount: this.zustellKontakteCount,
|
||||
getZustelladressenCount: this.zustellAdressenCount,
|
||||
collapseFunction: (e, column) => {
|
||||
//* check if property doesn't exist already and add it to the reactive this properties
|
||||
if (this[e.target.id] === undefined) {
|
||||
this[e.target.id] = true;
|
||||
}
|
||||
this[e.target.id] = !this[e.target.id];
|
||||
//? use function syntax for provide so that we can access `this`
|
||||
provide() {
|
||||
return {
|
||||
profilUpdateStates: Vue.computed(() =>
|
||||
this.profilUpdateStates ? this.profilUpdateStates : false
|
||||
),
|
||||
profilUpdateTopic: Vue.computed(() =>
|
||||
this.profilUpdateTopic ? this.profilUpdateTopic : false
|
||||
),
|
||||
setLoading: (newValue) => {
|
||||
this.loading = newValue;
|
||||
},
|
||||
getZustellkontakteCount: this.zustellKontakteCount,
|
||||
getZustelladressenCount: this.zustellAdressenCount,
|
||||
collapseFunction: (e, column) => {
|
||||
//* check if property doesn't exist already and add it to the reactive this properties
|
||||
if (this[e.target.id] === undefined) {
|
||||
this[e.target.id] = true;
|
||||
}
|
||||
this[e.target.id] = !this[e.target.id];
|
||||
|
||||
//* gets all event icons of the different rows to use the onClick event later
|
||||
let allClickableIcons = column._column.cells.map((row) => {
|
||||
return row.element.children[0];
|
||||
});
|
||||
//* gets all event icons of the different rows to use the onClick event later
|
||||
let allClickableIcons = column._column.cells.map((row) => {
|
||||
return row.element.children[0];
|
||||
});
|
||||
|
||||
//* changes the icon that shows or hides all the collapsed columns
|
||||
//* if the replace function does not find the class to replace, it just simply returns false
|
||||
if (this[e.target.id]) {
|
||||
e.target.classList.replace("fa-angle-up", "fa-angle-down");
|
||||
} else {
|
||||
e.target.classList.replace("fa-angle-down", "fa-angle-up");
|
||||
}
|
||||
//* changes the icon that shows or hides all the collapsed columns
|
||||
//* if the replace function does not find the class to replace, it just simply returns false
|
||||
if (this[e.target.id]) {
|
||||
e.target.classList.replace("fa-angle-up", "fa-angle-down");
|
||||
} else {
|
||||
e.target.classList.replace("fa-angle-down", "fa-angle-up");
|
||||
}
|
||||
|
||||
//* changes the icon for every collapsed column to open or closed
|
||||
if (this[e.target.id]) {
|
||||
allClickableIcons
|
||||
.filter((column) => {
|
||||
return !column.classList.contains("open");
|
||||
})
|
||||
.forEach((col) => {
|
||||
col.click();
|
||||
});
|
||||
} else {
|
||||
allClickableIcons
|
||||
.filter((column) => {
|
||||
return column.classList.contains("open");
|
||||
})
|
||||
.forEach((col) => {
|
||||
col.click();
|
||||
});
|
||||
}
|
||||
},
|
||||
sortProfilUpdates: (ele1, ele2) => {
|
||||
let result = 0;
|
||||
if (ele1.status === "pending") {
|
||||
result = -1;
|
||||
} else if (ele1.status === "accepted") {
|
||||
result = ele2.status === "rejected" ? -1 : 1;
|
||||
} else {
|
||||
result = 1;
|
||||
}
|
||||
//? if they have the same status the insert date is used for ordering
|
||||
if (ele1.status === ele2.status) {
|
||||
result =
|
||||
new Date(ele2.insertamum.split(".").reverse().join("-")) -
|
||||
new Date(ele1.insertamum.split(".").reverse().join("-"));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
};
|
||||
},
|
||||
//* changes the icon for every collapsed column to open or closed
|
||||
if (this[e.target.id]) {
|
||||
allClickableIcons
|
||||
.filter((column) => {
|
||||
return !column.classList.contains("open");
|
||||
})
|
||||
.forEach((col) => {
|
||||
col.click();
|
||||
});
|
||||
} else {
|
||||
allClickableIcons
|
||||
.filter((column) => {
|
||||
return column.classList.contains("open");
|
||||
})
|
||||
.forEach((col) => {
|
||||
col.click();
|
||||
});
|
||||
}
|
||||
},
|
||||
sortProfilUpdates: (ele1, ele2) => {
|
||||
let result = 0;
|
||||
if (ele1.status === "pending") {
|
||||
result = -1;
|
||||
} else if (ele1.status === "accepted") {
|
||||
result = ele2.status === "rejected" ? -1 : 1;
|
||||
} else {
|
||||
result = 1;
|
||||
}
|
||||
//? if they have the same status the insert date is used for ordering
|
||||
if (ele1.status === ele2.status) {
|
||||
result =
|
||||
new Date(ele2.insertamum.split(".").reverse().join("-")) -
|
||||
new Date(ele1.insertamum.split(".").reverse().join("-"));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
zustellAdressenCount() {
|
||||
if (!this.data || !this.data.adressen) {
|
||||
return null;
|
||||
}
|
||||
methods: {
|
||||
zustellAdressenCount() {
|
||||
if (!this.data || !this.data.adressen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let adressenArray = [];
|
||||
if (this.data.profilUpdates?.length) {
|
||||
adressenArray = adressenArray.concat(
|
||||
this.data.profilUpdates
|
||||
.filter((update) => {
|
||||
return update.requested_change.zustelladresse;
|
||||
})
|
||||
.map((adresse) => {
|
||||
return adresse.requested_change.adresse_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
let adressenArray = [];
|
||||
if (this.data.profilUpdates?.length) {
|
||||
adressenArray = adressenArray.concat(
|
||||
this.data.profilUpdates
|
||||
.filter((update) => {
|
||||
return update.requested_change.zustelladresse;
|
||||
})
|
||||
.map((adresse) => {
|
||||
return adresse.requested_change.adresse_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!this.data.profilUpdates?.length ||
|
||||
!this.data.adressen
|
||||
.filter((adresse) => adresse.zustelladresse)
|
||||
.every((adresse) =>
|
||||
this.data.profilUpdates.some(
|
||||
(update) =>
|
||||
update.requested_change.adresse_id == adresse.adresse_id
|
||||
)
|
||||
)
|
||||
) {
|
||||
adressenArray = adressenArray.concat(
|
||||
this.data.adressen
|
||||
.filter((adresse) => {
|
||||
return adresse.zustelladresse;
|
||||
})
|
||||
.map((adr) => {
|
||||
return adr.adresse_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
if (
|
||||
!this.data.profilUpdates?.length ||
|
||||
!this.data.adressen
|
||||
.filter((adresse) => adresse.zustelladresse)
|
||||
.every((adresse) =>
|
||||
this.data.profilUpdates.some(
|
||||
(update) =>
|
||||
update.requested_change.adresse_id == adresse.adresse_id
|
||||
)
|
||||
)
|
||||
) {
|
||||
adressenArray = adressenArray.concat(
|
||||
this.data.adressen
|
||||
.filter((adresse) => {
|
||||
return adresse.zustelladresse;
|
||||
})
|
||||
.map((adr) => {
|
||||
return adr.adresse_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return [...new Set(adressenArray)];
|
||||
return [...new Set(adressenArray)];
|
||||
|
||||
// OLD version
|
||||
// return this.data.adressen.filter(adresse => {
|
||||
// return adresse.zustelladresse;
|
||||
// }).map(adr => {
|
||||
// OLD version
|
||||
// return this.data.adressen.filter(adresse => {
|
||||
// return adresse.zustelladresse;
|
||||
// }).map(adr => {
|
||||
|
||||
// return adr.adresse_id;
|
||||
// });
|
||||
},
|
||||
// return adr.adresse_id;
|
||||
// });
|
||||
},
|
||||
|
||||
zustellKontakteCount() {
|
||||
if (!this.data || !this.data.kontakte) {
|
||||
return null;
|
||||
}
|
||||
zustellKontakteCount() {
|
||||
if (!this.data || !this.data.kontakte) {
|
||||
return null;
|
||||
}
|
||||
|
||||
//TODO: not sure if how it is implemented is the best way
|
||||
let kontakteArray = [];
|
||||
//TODO: not sure if how it is implemented is the best way
|
||||
let kontakteArray = [];
|
||||
|
||||
if (this.data.profilUpdates?.length) {
|
||||
kontakteArray = kontakteArray.concat(
|
||||
this.data.profilUpdates
|
||||
.filter((update) => {
|
||||
return update.requested_change.zustellung;
|
||||
})
|
||||
.map((kontant) => {
|
||||
return kontant.requested_change.kontakt_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
if (this.data.profilUpdates?.length) {
|
||||
kontakteArray = kontakteArray.concat(
|
||||
this.data.profilUpdates
|
||||
.filter((update) => {
|
||||
return update.requested_change.zustellung;
|
||||
})
|
||||
.map((kontant) => {
|
||||
return kontant.requested_change.kontakt_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!this.data.profilUpdates?.length ||
|
||||
!this.data.kontakte
|
||||
.filter((kontakt) => kontakt.zustellung)
|
||||
.every((kontakt) =>
|
||||
this.data.profilUpdates.some(
|
||||
(update) =>
|
||||
update.requested_change.kontakt_id == kontakt.kontakt_id
|
||||
)
|
||||
)
|
||||
) {
|
||||
kontakteArray = kontakteArray.concat(
|
||||
this.data.kontakte
|
||||
.filter((kontakt) => {
|
||||
return kontakt.zustellung;
|
||||
})
|
||||
.map((kon) => {
|
||||
return kon.kontakt_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
if (
|
||||
!this.data.profilUpdates?.length ||
|
||||
!this.data.kontakte
|
||||
.filter((kontakt) => kontakt.zustellung)
|
||||
.every((kontakt) =>
|
||||
this.data.profilUpdates.some(
|
||||
(update) =>
|
||||
update.requested_change.kontakt_id == kontakt.kontakt_id
|
||||
)
|
||||
)
|
||||
) {
|
||||
kontakteArray = kontakteArray.concat(
|
||||
this.data.kontakte
|
||||
.filter((kontakt) => {
|
||||
return kontakt.zustellung;
|
||||
})
|
||||
.map((kon) => {
|
||||
return kon.kontakt_id;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return [...new Set(kontakteArray)];
|
||||
return [...new Set(kontakteArray)];
|
||||
|
||||
// OLD version
|
||||
// return this.data.kontakte.filter(kontakt => {
|
||||
// return kontakt.zustellung;
|
||||
// }).map(kon =>{
|
||||
// return kon.kontakt_id;
|
||||
// });
|
||||
},
|
||||
},
|
||||
// OLD version
|
||||
// return this.data.kontakte.filter(kontakt => {
|
||||
// return kontakt.zustellung;
|
||||
// }).map(kon =>{
|
||||
// return kon.kontakt_id;
|
||||
// });
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredEditData() {
|
||||
if (!this.data) {
|
||||
return;
|
||||
}
|
||||
computed: {
|
||||
filteredEditData() {
|
||||
if (!this.data) {
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
view: null,
|
||||
data: {
|
||||
Personen_Informationen: {
|
||||
title: this.$p.t("profil", "personenInformationen"),
|
||||
topic: "Personen_informationen",
|
||||
view: null,
|
||||
data: {
|
||||
vorname: {
|
||||
title: this.$p.t("person", "vorname"),
|
||||
topic: this.profilUpdateTopic?.["Vorname"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "vorname",
|
||||
value: this.data.vorname,
|
||||
},
|
||||
},
|
||||
nachname: {
|
||||
title: this.$p.t("person", "nachname"),
|
||||
topic: this.profilUpdateTopic?.["Nachname"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "nachname",
|
||||
value: this.data.nachname,
|
||||
},
|
||||
},
|
||||
titel: {
|
||||
title: this.$p.t("global", "titel"),
|
||||
topic: this.profilUpdateTopic?.["Titel"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "titel",
|
||||
value: this.data.titel,
|
||||
},
|
||||
},
|
||||
postnomen: {
|
||||
title: this.$p.t("profil", "postnomen"),
|
||||
topic: this.profilUpdateTopic?.["Postnomen"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "postnomen",
|
||||
value: this.data.postnomen,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
Private_Kontakte: {
|
||||
title: this.$p.t("profil", "privateKontakte"),
|
||||
topic: this.profilUpdateTopic?.["Private Kontakte"],
|
||||
data: this.data.kontakte
|
||||
?.filter((item) => {
|
||||
// excludes all contacts that are already used in pending profil update requests
|
||||
return !this.data.profilUpdates?.some(
|
||||
(update) =>
|
||||
update.status === this.profilUpdateStates["Pending"] &&
|
||||
update.requested_change?.kontakt_id === item.kontakt_id
|
||||
);
|
||||
})
|
||||
.map((kontakt) => {
|
||||
return {
|
||||
listview: "Kontakt",
|
||||
view: "EditKontakt",
|
||||
data: kontakt,
|
||||
};
|
||||
}),
|
||||
},
|
||||
Private_Adressen: {
|
||||
title: this.$p.t("profil", "privateAdressen"),
|
||||
topic: this.profilUpdateTopic?.["Private Adressen"],
|
||||
data: this.data.adressen
|
||||
?.filter((item) => {
|
||||
return !this.data.profilUpdates?.some((update) => {
|
||||
return (
|
||||
update.status === this.profilUpdateStates["Pending"] &&
|
||||
update.requested_change?.adresse_id == item.adresse_id
|
||||
);
|
||||
});
|
||||
})
|
||||
.map((adresse) => {
|
||||
return {
|
||||
listview: "Adresse",
|
||||
view: "EditAdresse",
|
||||
data: adresse,
|
||||
};
|
||||
}),
|
||||
},
|
||||
// Password_Change : {
|
||||
// title:"Passwort Ändern",
|
||||
// view:"ChangePassword",
|
||||
// data:{
|
||||
// test:"testvalue",
|
||||
// }
|
||||
// },
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
return {
|
||||
view: null,
|
||||
data: {
|
||||
Personen_Informationen: {
|
||||
title: this.$p.t("profil", "personenInformationen"),
|
||||
topic: "Personen_informationen",
|
||||
view: null,
|
||||
data: {
|
||||
vorname: {
|
||||
title: this.$p.t("person", "vorname"),
|
||||
topic: this.profilUpdateTopic?.["Vorname"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "vorname",
|
||||
value: this.data.vorname,
|
||||
},
|
||||
},
|
||||
nachname: {
|
||||
title: this.$p.t("person", "nachname"),
|
||||
topic: this.profilUpdateTopic?.["Nachname"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "nachname",
|
||||
value: this.data.nachname,
|
||||
},
|
||||
},
|
||||
titel: {
|
||||
title: this.$p.t("global", "titel"),
|
||||
topic: this.profilUpdateTopic?.["Titel"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "titel",
|
||||
value: this.data.titel,
|
||||
},
|
||||
},
|
||||
postnomen: {
|
||||
title: this.$p.t("profil", "postnomen"),
|
||||
topic: this.profilUpdateTopic?.["Postnomen"],
|
||||
view: "TextInputDokument",
|
||||
withFiles: true,
|
||||
data: {
|
||||
titel: "postnomen",
|
||||
value: this.data.postnomen,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
Private_Kontakte: {
|
||||
title: this.$p.t("profil", "privateKontakte"),
|
||||
topic: this.profilUpdateTopic?.["Private Kontakte"],
|
||||
data: this.data.kontakte
|
||||
?.filter((item) => {
|
||||
// excludes all contacts that are already used in pending profil update requests
|
||||
return !this.data.profilUpdates?.some(
|
||||
(update) =>
|
||||
update.status === this.profilUpdateStates["Pending"] &&
|
||||
update.requested_change?.kontakt_id === item.kontakt_id
|
||||
);
|
||||
})
|
||||
.map((kontakt) => {
|
||||
return {
|
||||
listview: "Kontakt",
|
||||
view: "EditKontakt",
|
||||
data: kontakt,
|
||||
};
|
||||
}),
|
||||
},
|
||||
Private_Adressen: {
|
||||
title: this.$p.t("profil", "privateAdressen"),
|
||||
topic: this.profilUpdateTopic?.["Private Adressen"],
|
||||
data: this.data.adressen
|
||||
?.filter((item) => {
|
||||
return !this.data.profilUpdates?.some((update) => {
|
||||
return (
|
||||
update.status === this.profilUpdateStates["Pending"] &&
|
||||
update.requested_change?.adresse_id == item.adresse_id
|
||||
);
|
||||
});
|
||||
})
|
||||
.map((adresse) => {
|
||||
return {
|
||||
listview: "Adresse",
|
||||
view: "EditAdresse",
|
||||
data: adresse,
|
||||
};
|
||||
}),
|
||||
},
|
||||
// Password_Change : {
|
||||
// title:"Passwort Ändern",
|
||||
// view:"ChangePassword",
|
||||
// data:{
|
||||
// test:"testvalue",
|
||||
// }
|
||||
// },
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
loading: function (newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.$refs.loadingModalRef.show();
|
||||
} else {
|
||||
this.$refs.loadingModalRef.hide();
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
loading: function (newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.$refs.loadingModalRef.show();
|
||||
} else {
|
||||
this.$refs.loadingModalRef.hide();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
// fetch profilUpdateStates to provide them to children components
|
||||
async created() {
|
||||
// fetch profilUpdateStates to provide them to children components
|
||||
|
||||
await this.$fhcApi.factory.profilUpdate.getStatus()
|
||||
.then((response) => {
|
||||
this.profilUpdateStates = response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
await this.$fhcApi.factory.profilUpdate.getStatus()
|
||||
.then((response) => {
|
||||
this.profilUpdateStates = response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
this.$fhcApi.factory.profilUpdate.getTopic()
|
||||
.then((response) => {
|
||||
this.profilUpdateTopic = response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
this.$fhcApi.factory.profilUpdate.getTopic()
|
||||
.then((response) => {
|
||||
this.profilUpdateTopic = response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
//? uid contains the last part of the uri
|
||||
let uid = location.pathname.split("/").pop();
|
||||
//? uid contains the last part of the uri
|
||||
let uid = location.pathname.split("/").pop();
|
||||
|
||||
this.$fhcApi.factory.profil.getView(uid).then((res) => {
|
||||
if (!res.data) {
|
||||
this.notFoundUID = uid;
|
||||
} else {
|
||||
this.view = res.data?.view;
|
||||
this.data = res.data?.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
this.$fhcApi.factory.profil.getView(uid).then((res) => {
|
||||
if (!res.data) {
|
||||
this.notFoundUID = uid;
|
||||
} else {
|
||||
this.view = res.data?.view;
|
||||
this.data = res.data?.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
template: `
|
||||
template: `
|
||||
<div>
|
||||
|
||||
<div v-if="notFoundUID">
|
||||
|
||||
<h3>Es wurde keine Person mit der UID {{this.notFoundUID}} gefunden</h3>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<loading ref="loadingModalRef" :timeout="0"></loading>
|
||||
<component :is="view" :data="data" :editData="filteredEditData" ></component>
|
||||
<loading ref="loadingModalRef" :timeout="0"></loading>
|
||||
<component :is="view" :data="data" :editData="filteredEditData" ></component>
|
||||
</div>
|
||||
|
||||
|
||||
</div>`,
|
||||
});
|
||||
setScrollbarWidth()
|
||||
setScrollbarWidth();
|
||||
profilApp
|
||||
.use(primevue.config.default, { zIndex: { overlay: 9999 } })
|
||||
.use(Phrasen)
|
||||
.mount("#content");
|
||||
.use(primevue.config.default, {zIndex: {overlay: 9999}})
|
||||
.use(Phrasen)
|
||||
.mount("#content");
|
||||
@@ -53,11 +53,8 @@ export default {
|
||||
<div v-if="withZustelladresse" class="order-5 offset-1 col-11">
|
||||
<div class="form-underline">
|
||||
<div class="form-underline-titel">{{$p.t('person','zustelladresse')}}</div>
|
||||
<div class="ms-2 form-check ">
|
||||
<input class="form-check-input" type="checkbox" @click.prevent :checked="data.zustelladresse" >
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ms-2 form-check ">
|
||||
<input class="form-check-input" type="checkbox" @click.prevent :checked="data.zustelladresse" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,23 +16,24 @@ export default{
|
||||
<div class="col-1 text-center" >
|
||||
<i class="fa-solid " :class="{...(data.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>
|
||||
</div>
|
||||
<div :class="{...(data.anmerkung? {'col-11':true, 'col-md-6':true, 'col-xl-11':true, 'col-xxl-6':true} : {'col-10':true, 'col-xl-9':true, 'col-xxl-10':true})}">
|
||||
<!-- rendering KONTAKT emails -->
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">{{data.kontakttyp}}</div>
|
||||
<a v-if="data.kontakt.includes('@')" role="link" :aria-disabled="view?true:false" :href="!view?('mailto:'+data.kontakt):null" class="form-underline-content">{{data.kontakt}} </a>
|
||||
<a v-else role="link" :aria-disabled="view?true:false" :href="!view?('tel:'+data.kontakt):null" class="form-underline-content">{{data.kontakt}} </a>
|
||||
<div :class="{...(data.anmerkung? {'col-11':true, 'col-md-6':true, 'col-xl-11':true, 'col-xxl-6':true} : {'col-10':true, 'col-xl-9':true, 'col-xxl-10':true})}">
|
||||
<!-- rendering KONTAKT emails -->
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">{{data.kontakttyp}}</div>
|
||||
<a v-if="data.kontakt.includes('@')" role="link" :aria-disabled="view?true:false" :href="!view?('mailto:'+data.kontakt):null" class="form-underline-content">{{data.kontakt}} </a>
|
||||
<a v-else role="link" :aria-disabled="view?true:false" :href="!view?('tel:'+data.kontakt):null" class="form-underline-content">{{data.kontakt}} </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="data?.anmerkung" class="offset-1 offset-md-0 offset-xl-1 offset-xxl-0 order-2 order-sm-1 col-10 col-md-4 col-xl-9 col-xxl-4 ">
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">{{$p.t('global','anmerkung')}}</div>
|
||||
<span class="form-underline-content">{{data.anmerkung}} </span>
|
||||
<div v-if="data?.anmerkung" class="offset-1 offset-md-0 offset-xl-1 offset-xxl-0 order-2 order-sm-1 col-10 col-md-4 col-xl-9 col-xxl-4 ">
|
||||
<div class="form-underline ">
|
||||
<div class="form-underline-titel">{{$p.t('global','anmerkung')}}</div>
|
||||
<span class="form-underline-content">{{data.anmerkung}} </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center col-1 col-sm-1 order-2 order-lg-1 col-xl-2 col-xxl-1 allign-middle">
|
||||
<i v-if="data.zustellung" class="fa-solid fa-check"></i>
|
||||
<i v-else="data.zustellung" class="fa-solid fa-xmark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center col-1 col-sm-1 order-2 order-lg-1 col-xl-2 col-xxl-1 allign-middle">
|
||||
<i v-if="data.zustellung" class="fa-solid fa-check"></i>
|
||||
<i v-else="data.zustellung" class="fa-solid fa-xmark"></i>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
@@ -16,18 +16,19 @@ export default {
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">{{$p.t('profil','mailverteilerMitglied')}}</h6>
|
||||
<div class="card-text row text-break mb-2" v-for="verteiler in data">
|
||||
<div class="col-12 ">
|
||||
<div class="row">
|
||||
<div class="col-1 ">
|
||||
<i class="fa-solid fa-envelope" style="color: #00649C;"></i>
|
||||
<div class="card-text row text-break mb-2" v-for="verteiler in data">
|
||||
<div class="col-12 ">
|
||||
<div class="row">
|
||||
<div class="col-1 ">
|
||||
<i class="fa-solid fa-envelope" style="color: #00649C;"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11 offset-1 ">{{verteiler.beschreibung}}</div>
|
||||
</div>
|
||||
<div class="col-11 offset-1 ">{{verteiler.beschreibung}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
};
|
||||
|
||||
@@ -75,7 +75,7 @@ export default {
|
||||
<div class="col-12 col-sm-6 mb-2">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-auto " style="position:relative">
|
||||
<img class=" img-thumbnail " style=" max-height:150px; " :src="get_image_base64_src">
|
||||
<img class=" img-thumbnail " style=" max-height:150px; " :src="get_image_base64_src"/>
|
||||
<!-- LOCKING IMAGE FUNCTIONALITY -->
|
||||
<div v-if="editable" role="button" @click.prevent="sperre_foto_function" class="image-lock">
|
||||
<i :class="{'fa':true, ...(FotoSperre?{'fa-lock':true}:{'fa-lock-open':true})} "></i>
|
||||
|
||||
@@ -19,19 +19,19 @@ export default {
|
||||
<div class="card-header">{{title}}</div>
|
||||
<div class="card-body">
|
||||
<div class="gy-3 row">
|
||||
<div v-for="(wert,bez) in data" class="col-md-6 col-sm-12 ">
|
||||
|
||||
<div class="form-underline">
|
||||
<div class="form-underline-titel">{{bez }}</div>
|
||||
|
||||
<!-- print Telefon link -->
|
||||
<a v-if="bez=='Telefon'" :href="data.Telefon?'tel:'+data.Telefon:null" :class="{'form-underline-content':true,'text-decoration-none':!data.Telefon,'text-body':!data.Telefon}">{{wert?wert:'-'}}</a>
|
||||
|
||||
<!-- else print information -->
|
||||
<span v-else class="form-underline-content">{{wert?wert:'-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
<div v-for="(wert,bez) in data" class="col-md-6 col-sm-12 ">
|
||||
|
||||
<div class="form-underline">
|
||||
<div class="form-underline-titel">{{bez }}</div>
|
||||
|
||||
<!-- print Telefon link -->
|
||||
<a v-if="bez=='Telefon'" :href="data.Telefon?'tel:'+data.Telefon:null" :class="{'form-underline-content':true,'text-decoration-none':!data.Telefon,'text-body':!data.Telefon}">{{wert?wert:'-'}}</a>
|
||||
|
||||
<!-- else print information -->
|
||||
<span v-else class="form-underline-content">{{wert?wert:'-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
};
|
||||
@@ -181,13 +181,13 @@ export default {
|
||||
return BsModal.popup(null, options);
|
||||
},
|
||||
template: /*html*/ `
|
||||
<bs-modal v-show="!loading" ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false" >
|
||||
<template v-if="title" v-slot:title>{{title }}</template>
|
||||
<bs-modal v-show="!loading" ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false">
|
||||
<template v-if="title" v-slot:title>{{title}}</template>
|
||||
<template v-slot:default>
|
||||
<div >
|
||||
<nav aria-label="breadcrumb" class="ps-2 ">
|
||||
<ol class="breadcrumb ">
|
||||
<li class="breadcrumb-item" v-for="element in breadcrumb">{{element}}</li>
|
||||
<div>
|
||||
<nav aria-label="breadcrumb" class="ps-2">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item" v-for="element in breadcrumb">{{element}}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<edit-profil-select @submit="submitProfilChange" v-model:breadcrumb="breadcrumb" v-model:topic="topic" v-model:profilUpdate="profilUpdate" ariaLabel="select" :list="editData"></edit-profil-select>
|
||||
|
||||
Reference in New Issue
Block a user