diff --git a/public/css/components/Profil.css b/public/css/components/Profil.css index 2ae004c9f..f5a3eec6e 100644 --- a/public/css/components/Profil.css +++ b/public/css/components/Profil.css @@ -28,6 +28,24 @@ padding:0 !important; } +.form-control_{ + border:0; + border-bottom: 1px solid #ced4da; + height:auto !important; + padding-bottom: 5px !important; + padding-left: 3px !important; + border-radius:0px; +} + +.form-control-plaintext[readonly]{ + background-color:white; +} + +.form-control:focus{ + border-color:white; + box-shadow:none; +} + /* dl { width: 100%; overflow: hidden; diff --git a/public/js/apps/Cis/Profil.js b/public/js/apps/Cis/Profil.js index eec4f9960..8c3727401 100644 --- a/public/js/apps/Cis/Profil.js +++ b/public/js/apps/Cis/Profil.js @@ -11,10 +11,12 @@ 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"); var list = document.createElement("div"); list.classList.add("row"); + container.appendChild(list); data.forEach(function(col){ @@ -74,9 +76,10 @@ const app = Vue.createApp({
+

Es wurden keine oder mehrere Profile für {{this.notFoundUID}} gefunden

- +
` diff --git a/public/js/components/Cis/Profil/Base.js b/public/js/components/Cis/Profil/Base.js index 10ff32739..547b6da57 100644 --- a/public/js/components/Cis/Profil/Base.js +++ b/public/js/components/Cis/Profil/Base.js @@ -7,9 +7,14 @@ export default { }, data() { return { + collapseIconFunktionen: true, + collapseIconBetriebsmittel: true, funktionen_table_options: { height: 300, layout: "fitColumns", + responsiveLayout: "collapse", + responsiveLayoutCollapseUseFormatters: false, + responsiveLayoutCollapseFormatter: Vue.$collapseFormatter, data: [ { Bezeichnung: "", @@ -20,42 +25,88 @@ export default { }, ], columns: [ - { title: "Bezeichnung", field: "Bezeichnung", headerFilter: true }, + //? option when wanting to hide the collapsed list + + { + title: + "", + field: "collapse", + headerSort: false, + headerFilter: false, + formatter: "responsiveCollapse", + maxWidth: 40, + headerClick: this.collapseFunction, + }, + { + title: "Bezeichnung", + field: "Bezeichnung", + headerFilter: true, + minWidth: 200, + }, { title: "Organisationseinheit", field: "Organisationseinheit", headerFilter: true, + minWidth: 200, + }, + { + title: "Gültig_von", + field: "Gültig_von", + headerFilter: true, + resizable: true, + minWidth: 200, + }, + { + title: "Gültig_bis", + field: "Gültig_bis", + headerFilter: true, + resizable: true, + minWidth: 200, }, - { 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, + minWidth: 200, }, ], }, betriebsmittel_table_options: { height: 300, layout: "fitColumns", - data: [ - { - betriebsmittel: "test", - Nummer: "", - Ausgegeben_am: "", - }, - ], + responsiveLayout: "collapse", + responsiveLayoutCollapseUseFormatters: false, + responsiveLayoutCollapseFormatter: Vue.$collapseFormatter, + data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }], columns: [ + { + title: + "", + field: "collapse", + headerSort: false, + headerFilter: false, + formatter: "responsiveCollapse", + maxWidth: 40, + headerClick: this.collapseFunction, + }, { title: "Betriebsmittel", field: "betriebsmittel", headerFilter: true, + minWidth: 200, + }, + { + title: "Nummer", + field: "Nummer", + headerFilter: true, + resizable: true, + minWidth: 200, }, - { title: "Nummer", field: "Nummer", headerFilter: true }, { title: "Ausgegeben_am", field: "Ausgegeben_am", headerFilter: true, + minWidth: 200, }, ], }, @@ -65,15 +116,52 @@ export default { //? this is the prop passed to the dynamic component with the custom data of the view props: ["data"], methods: { - sperre_foto_function(value) { + sperre_foto_function() { if (!this.data) { return; } - fhcapifactory.UserData.sperre_foto_function(value).then((res) => { + fhcapifactory.UserData.sperre_foto_function(!this.data.foto_sperre).then((res) => { this.data.foto_sperre = res.data.foto_sperre; }); }, + collapseFunction(e, column) { + //* the if of the column has to match with the name of the responsive data in the vue component + 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]; + }); + + //* 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(); + }); + } + }, }, + computed: { refreshMailTo() { return `mailto:info.mio@technikum-wien.at?subject=Datenkorrektur&body=Die%20Profildaten%20für%20User%20'${this.data.username}'%20sind%20nicht%20korrekt.%0DHier, die richtigen Daten:%0A%0ANachname:%20${this.data.nachname}%0AVorname:%20${this.data.vorname}%0AGeburtsdatum:${this.data.gebdatum}%0AGeburtsort:%20${this.data.gebort}%0ATitelPre:${this.data.titel}%20%0ATitelPost:${this.data.postnomen}%20%0A%0A***%0DPlatz für weitere (nicht angeführte Daten)%0D***%0A%0A[Bitte%20übermitteln%20Sie%20uns%20etwaige%20Dokumente%20zum%20Beleg%20der%20Änderung]`; @@ -92,29 +180,64 @@ export default { } 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, - Geburtsdatum: this.data.gebdatum, - Geburtsort: this.data.gebort, - Kurzzeichen: this.data.kurzbz, - Telefon: this.data.telefonklappe, - Büro: this.data.ort_kurzbz, - FhAusweisStatus: this.data.zutrittsdatum, - }, + Username: this.data.username, + Anrede: this.data.anrede, + Titel: this.data.titel, + Postnomen: this.data.postnomen, }; }, - //? this computed function returns the data for the second column in the profil + + personKontakt() { + if (!this.data) { + return {}; + } + + return { + emails: this.data.emails, + + }; + }, + + specialData() { + if (!this.data) { + return {}; + } + + return { + Geburtsdatum: this.data.gebdatum, + Geburtsort: this.data.gebort, + Kurzzeichen: this.data.kurzbz, + Telefon: this.data.telefonklappe, + Büro: this.data.ort_kurzbz, + }; + }, + + privateKontakte() { + if (!this.data) { + return {}; + } + + return this.data.kontakte; + + }, + + privateAdressen() { + if (!this.data) { + return {}; + } + + return this.data.adressen; + + }, + + kontaktInfo() { if (!this.data) { return {}; } return { + FhAusweisStatus: this.data.zutrittsdatum, emails: this.data.emails, Kontakte: this.data.kontakte, Adressen: this.data.adressen, @@ -132,221 +255,489 @@ export default { }); }, - template: ` - -
- -
- -
+ template: ` + +
+ +
+ +
+ +
+
+

+

+ + + + +
+ +

+ +
+
+ +
+ + + +
+ + +
+
+
+ Der FH Ausweis ist am {{data.zutrittsdatum}} ausgegeben worden. +
+
+
+ +
+ + + +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ MitarbeiterIn +
+
+ - - -
-
-
- -
    -
    • -
    • -
    • -
-
-
-
- - - - -
- - - - - -
- -
- -
- -
- - - - -
- - - - -
- - - - -
+ +
- -
-
-
-
{{bez}}
-
{{wert?wert:"-"}}
-
-
-
-
FH-Ausweis Status
-
{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}
-
-
- - - - -
- - - -
- - - - - - -
-
-
-
{{bez}}
-
{{wert?wert:"-"}}
-
-
-
-
FH-Ausweis Status
-
{{"Der FH Ausweis ist am "+ wert+ " ausgegeben worden."}}
-
-
- - - - - -
- - - - - -
- - - -
- -
- - -
-
-

Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte hier

-
-
- - - - - -
- - -
- -
- - -
- -
- - -
- - - - - - - - -
- - - - - -
- - - - - - - -
-
-
- Zeitwuensche - Lehrveranstaltungen - Zeitsperren von Gschnell -
-
-
- - - -
+ + +
+
+
+ + + + +
+ -
- - - -
Mailverteilers
-

Sie sind Mitgglied in folgenden Verteilern:

-
-
{{verteiler.gruppe_kurzbz}}
-
{{verteiler.beschreibung}}
-
- - - -
- -
- -
+
+ +
+ + + + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+ + + + + + + + +
+
+ + + +
+
+ + +
+
+
+
+
+
+ + +
+ +
+ +
+ Mitarbeiter Information +
+
+
+
+
+ + +
+
+
+ +
+ +
+ +
+ - + +
+ + + + + + + + + + + + +
+ +
+
+
+ + +
+
+ Mails +
+ +
+ + + +
+ + + + + + +
+
+
+ + + +
+
+
+ + + + + + + + + +
+ + +
+
+
+ + +
+
+
+
+ Private Kontakte +
+
+ +
+ +
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Private Adressen
+
+ +
+ +
+ + + +
+
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+ + + + + +
+ + + + + + +
+ + + + +
+
+

Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte hier

+
+ + + + + + +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + + + + + +
+ + + + + +
+ + + + + + + +
+
+ +
+
+ Quick Links +
+
+ + + Zeitwuensche + Lehrveranstaltungen + Zeitsperren von Gschnell + +
+
+ + + + +
+
+ + + +
- -
+
+ + + + +
+
+ Mailverteilers +
+
+ +
Sie sind Mitgglied in folgenden Verteilern:
+
+
+
+
+ + + +
+
+ {{verteiler.gruppe_kurzbz}} +
+
+ +
+
{{verteiler.beschreibung}}
+
+ +
+
+ + + + + +
+ + +
+ + +
+ + + + + + + + +
+ + +
`, }; diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index f0e437ee9..a4a008fe2 100644 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -212,8 +212,6 @@ export default { template: ` - -
@@ -319,7 +317,7 @@ export default {
-
+
@@ -330,10 +328,11 @@ export default {
{{wert?wert:"-"}}
- - + + +