mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 12:19:28 +00:00
adisposkofh
304 lines
9.0 KiB
JavaScript
304 lines
9.0 KiB
JavaScript
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
|
|
import Mailverteiler from "./ProfilComponents/Mailverteiler.js";
|
|
import RoleInformation from "./ProfilComponents/RoleInformation.js";
|
|
import ProfilEmails from "./ProfilComponents/ProfilEmails.js";
|
|
import ProfilInformation from "./ProfilComponents/ProfilInformation.js";
|
|
import QuickLinks from "./ProfilComponents/QuickLinks.js";
|
|
|
|
import { dateFilter } from "../../../tabulator/filters/Dates.js";
|
|
|
|
export default {
|
|
components: {
|
|
CoreFilterCmpt,
|
|
Mailverteiler,
|
|
RoleInformation,
|
|
ProfilEmails,
|
|
ProfilInformation,
|
|
QuickLinks,
|
|
},
|
|
inject: ["collapseFunction", "language"],
|
|
data() {
|
|
return {
|
|
collapseIconFunktionen: true,
|
|
arePhrasesPreloaded: false,
|
|
funktionen_table_options: {
|
|
persistenceID: "filterTableMaViewProfilFunktionen",
|
|
persistence: {
|
|
columns: false,
|
|
},
|
|
minHeight: 300,
|
|
layout: "fitColumns",
|
|
responsiveLayout: "collapse",
|
|
responsiveLayoutCollapseUseFormatters: false,
|
|
responsiveLayoutCollapseFormatter: Vue.$collapseFormatter,
|
|
columns: [
|
|
//? option when wanting to hide the collapsed list
|
|
|
|
{
|
|
title: "<i id='collapseIconFunktionen' role='button' class='fa-solid fa-angle-down '></i>",
|
|
field: "collapse",
|
|
headerSort: false,
|
|
headerFilter: false,
|
|
formatter: "responsiveCollapse",
|
|
maxWidth: 40,
|
|
headerClick: this.collapseFunction,
|
|
visible: true,
|
|
},
|
|
{
|
|
title: Vue.computed(() => this.$p.t("ui/bezeichnung")),
|
|
field: "Bezeichnung",
|
|
headerFilter: true,
|
|
minWidth: 200,
|
|
visible: true,
|
|
},
|
|
{
|
|
title: Vue.computed(() =>
|
|
this.$p.t("lehre/organisationseinheit"),
|
|
),
|
|
field: "Organisationseinheit",
|
|
headerFilter: true,
|
|
minWidth: 200,
|
|
visible: true,
|
|
},
|
|
{
|
|
title: Vue.computed(() =>
|
|
this.$p.t("global/gueltigVon"),
|
|
),
|
|
field: "Gültig_von",
|
|
headerFilterFunc: "dates",
|
|
headerFilter: dateFilter,
|
|
resizable: true,
|
|
minWidth: 200,
|
|
visible: true,
|
|
formatter: "datetime",
|
|
formatterParams: this.datetimeFormatterParams(),
|
|
},
|
|
{
|
|
title: Vue.computed(() =>
|
|
this.$p.t("global/gueltigBis"),
|
|
),
|
|
field: "Gültig_bis",
|
|
headerFilterFunc: "dates",
|
|
headerFilter: dateFilter,
|
|
resizable: true,
|
|
minWidth: 200,
|
|
visible: true,
|
|
formatter: "datetime",
|
|
formatterParams: this.datetimeFormatterParams(),
|
|
},
|
|
{
|
|
title: Vue.computed(() =>
|
|
this.$p.t("profil/wochenstunden"),
|
|
),
|
|
field: "Wochenstunden",
|
|
headerFilter: true,
|
|
minWidth: 200,
|
|
visible: true,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
|
|
//? this is the prop passed to the dynamic component with the custom data of the view
|
|
props: ["data", "permissions"],
|
|
methods: {
|
|
funktionenTableBuilt: function () {
|
|
this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
|
|
},
|
|
datetimeFormatterParams: function () {
|
|
const params = {
|
|
inputFormat: "yyyy-MM-dd",
|
|
outputFormat: "dd.MM.yyyy",
|
|
invalidPlaceholder: "(invalid date)",
|
|
timezone: FHC_JS_DATA_STORAGE_OBJECT.timezone,
|
|
};
|
|
return params;
|
|
},
|
|
},
|
|
watch: {
|
|
"data.funktionen"(newVal) {
|
|
if (this.$refs.funktionenTable)
|
|
this.$refs.funktionenTable.tabulator.setData(newVal);
|
|
},
|
|
"language.value"(newVal) {
|
|
// reevaluates computed phrasen
|
|
if (this.$refs.funktionenTable)
|
|
this.$refs.funktionenTable.tabulator.setColumns(
|
|
this.funktionen_table_options.columns,
|
|
);
|
|
},
|
|
},
|
|
computed: {
|
|
getTelefonValue() {
|
|
if (this.data.standort_telefon?.kontakt) {
|
|
return (
|
|
this.data.standort_telefon.kontakt +
|
|
" " +
|
|
this.data.telefonklappe
|
|
);
|
|
} else if (this.data.standort_telefon) {
|
|
return (
|
|
this.data.standort_telefon + " " + this.data.telefonklappe
|
|
);
|
|
} else {
|
|
return this.data.telefonklappe;
|
|
}
|
|
},
|
|
fotoStatus() {
|
|
return this.data?.fotoStatus ?? null;
|
|
},
|
|
personEmails() {
|
|
return this.data?.emails ? this.data.emails : [];
|
|
},
|
|
profilInformation() {
|
|
if (!this.data) {
|
|
return {};
|
|
}
|
|
|
|
return {
|
|
Vorname: this.data.vorname,
|
|
Nachname: this.data.nachname,
|
|
Username: this.data.username,
|
|
Anrede: this.data.anrede,
|
|
Titel: this.data.titel,
|
|
Postnomen: this.data.postnomen,
|
|
foto_sperre: this.data.foto_sperre,
|
|
foto: this.data.foto,
|
|
};
|
|
},
|
|
roleInformation() {
|
|
if (!this.data) {
|
|
return {};
|
|
}
|
|
return {
|
|
geburtsdatum: {
|
|
label: `${this.$p.t("profil", "Geburtsdatum")}`,
|
|
value: this.data.gebdatum,
|
|
},
|
|
geburtsort: {
|
|
label: `${this.$p.t("profil", "Geburtsort")}`,
|
|
value: this.data.gebort,
|
|
},
|
|
personenkennzeichen: {
|
|
label: `${this.$p.t("profil", "Kurzzeichen")}`,
|
|
value: this.data.kurzbz,
|
|
},
|
|
telefon: {
|
|
label: `${this.$p.t("profil", "Telefon")}`,
|
|
value: this.getTelefonValue,
|
|
},
|
|
office: {
|
|
label: `${this.$p.t("profil", "Büro")}`,
|
|
value: this.data.ort_kurzbz,
|
|
},
|
|
};
|
|
},
|
|
quickLinks() {
|
|
let quickLinks = [];
|
|
if (
|
|
this.$props.permissions &&
|
|
this.$props.permissions["basis/other_lv_plan"]
|
|
) {
|
|
quickLinks.push({
|
|
icon: "fa-calendar-days",
|
|
phrase: "lehre/stundenplan",
|
|
action: () => {
|
|
this.$router.push({
|
|
name: "OtherLvPlan",
|
|
params: { otherUid: this.$props.data.username },
|
|
});
|
|
},
|
|
});
|
|
}
|
|
return quickLinks;
|
|
},
|
|
},
|
|
created() {
|
|
this.$p.loadCategory(["ui", "lehre", "global", "profil"]).then(() => {
|
|
this.arePhrasesPreloaded = true;
|
|
});
|
|
},
|
|
|
|
template: /*html*/ `
|
|
|
|
<div class="container-fluid text-break fhc-form" >
|
|
<!-- ROW -->
|
|
<div class="row">
|
|
<!-- MAIN PANNEL -->
|
|
<div class="col-sm-12 col-md-8 col-xxl-9 ">
|
|
<!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
|
|
<!-- INFORMATION CONTENT START -->
|
|
<!-- ROW WITH THE PROFIL INFORMATION -->
|
|
<div class="row mb-4">
|
|
<!-- FIRST KAESTCHEN -->
|
|
<div class="col-lg-12 col-xl-6 ">
|
|
<!-- Profil Informationen -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<profil-information :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information>
|
|
</div>
|
|
</div>
|
|
<!-- QUICK LINKS, MOBILE VIEW (HIDDEN IF VIEWPORT >= MD BREAKPOINT) -->
|
|
<div v-if="quickLinks.length" class="row mb-4 d-md-none">
|
|
<div class="col">
|
|
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
|
|
</div>
|
|
</div>
|
|
<!-- START OF SECOND PROFIL INFORMATION COLUMN -->
|
|
<!-- END OF PROFIL INFORMATION ROW -->
|
|
<!-- INFORMATION CONTENT END -->
|
|
</div>
|
|
<div class="col-xl-6 col-lg-12 ">
|
|
<!-- EMAILS -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<profil-emails :title="this.$p.t('person','email')" :data="personEmails"></profil-emails>
|
|
</div>
|
|
</div>
|
|
<!-- SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
|
|
<!-- roleInformation -->
|
|
<div class="row mb-4">
|
|
<div class=" col-lg-12">
|
|
<role-information :data="roleInformation" :title="$p.t('profil','mitarbeiterInformation')"></role-information>
|
|
</div>
|
|
</div>
|
|
<!-- END OF SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
|
|
<!-- END OF THE SECOND INFORMATION COLUMN -->
|
|
</div>
|
|
<!-- START OF THE SECOND PROFIL INFORMATION ROW -->
|
|
<!-- ROW WITH PROFIL IMAGE AND INFORMATION END -->
|
|
</div>
|
|
<!-- SECOND ROW UNDER THE PROFIL IMAGE AND INFORMATION WITH THE TABLES -->
|
|
<div class="row">
|
|
<!-- FIRST TABLE -->
|
|
<div class="col-12 mb-4" >
|
|
<core-filter-cmpt v-if="arePhrasesPreloaded" @tableBuilt="funktionenTableBuilt" :title="$p.t('person','funktionen')" ref="funktionenTable" :tabulator-options="funktionen_table_options" tableOnly :sideMenu="false" />
|
|
</div>
|
|
<!-- END OF THE ROW WITH THE TABLES UNDER THE PROFIL INFORMATION -->
|
|
</div>
|
|
<!-- END OF MAIN CONTENT COL -->
|
|
</div>
|
|
<!-- START OF SIDE PANEL -->
|
|
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
|
|
<!-- QUICK LINKS, HIDDEN IF VIEWPORT < MD BREAKPOINT -->
|
|
<div v-if="quickLinks.length" class="row mb-3 d-none d-md-block">
|
|
<div class="col">
|
|
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
|
|
</div>
|
|
</div>
|
|
<!-- MAILVERTEILER -->
|
|
<div class="row">
|
|
<div class="col">
|
|
<mailverteiler :data="data?.mailverteiler" :title="$p.t('profil','mailverteiler')"></mailverteiler>
|
|
</div>
|
|
</div>
|
|
<!-- END OF SIDE PANEL -->
|
|
</div>
|
|
<!-- END OF CONTAINER ROW-->
|
|
</div>
|
|
<!-- END OF CONTAINER -->
|
|
</div>
|
|
`,
|
|
};
|