positioning of profile cards 'quick links' and 'calendar sync'

This commit is contained in:
adisposkofh
2026-05-11 16:47:41 +02:00
parent 7f630f24d5
commit fa58635a22
5 changed files with 102 additions and 76 deletions
@@ -338,8 +338,8 @@ export default {
<div class="container-fluid text-break fhc-form" > <div class="container-fluid text-break fhc-form" >
<edit-profil v-if="showModal" ref="editModal" :isMitarbeiter="true" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" :titel="$p.t('profil','profilBearbeiten')"></edit-profil> <edit-profil v-if="showModal" ref="editModal" :isMitarbeiter="true" @hideBsModal="hideEditProfilModal" :value="JSON.parse(JSON.stringify(filteredEditData))" :titel="$p.t('profil','profilBearbeiten')"></edit-profil>
<div class="row"> <div class="row">
<div class="d-md-none col-12 "> <div class="d-md-none col-12">
<!-- Bearbeiten Button --> <!-- Bearbeiten Button -->
<div v-if="isEditable" class="row mb-3 "> <div v-if="isEditable" class="row mb-3 ">
<div class="col"> <div class="col">
<button @click="()=>showEditProfilModal()" type="button" class="text-start card w-100 btn btn-outline-secondary" > <button @click="()=>showEditProfilModal()" type="button" class="text-start card w-100 btn btn-outline-secondary" >
@@ -352,9 +352,9 @@ export default {
</button> </button>
</div> </div>
</div> </div>
<!-- MOBILE PROFIL UPDATES -->
<div v-if="data.profilUpdates" class="row mb-3"> <div v-if="data.profilUpdates" class="row mb-3">
<div class="col"> <div class="col">
<!-- MOBILE PROFIL UPDATES -->
<fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates" ></fetch-profil-updates> <fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates" ></fetch-profil-updates>
</div> </div>
</div> </div>
@@ -367,30 +367,42 @@ export default {
<!-- ROW WITH THE PROFIL INFORMATION --> <!-- ROW WITH THE PROFIL INFORMATION -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col-lg-12 col-xl-6 "> <div class="col-lg-12 col-xl-6 ">
<!-- PROFIL INFORMATION -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- PROFIL INFORMATION -->
<profil-information @showEditProfilModal="showEditProfilModal" :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information> <profil-information @showEditProfilModal="showEditProfilModal" :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information>
</div> </div>
</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>
<!-- CALENDAR SYNC OPTIONS, MOBILE VIEW (HIDDEN IF VIEWPORT >= MD BREAKPOINT) -->
<div class="row mb-4 d-md-none">
<div class="col">
<calendar-sync :uid="$props.data.username" :calendarSyncUrls="$props.calendarSyncUrls"></calendar-sync>
</div>
</div>
<!-- MITARBEITER INFO -->
<div class="row mb-4"> <div class="row mb-4">
<div class=" col-lg-12"> <div class=" col-lg-12">
<!-- MITARBEITER INFO -->
<role-information :title="$p.t('profil','mitarbeiterInformation')" :data="roleInformation"></role-information> <role-information :title="$p.t('profil','mitarbeiterInformation')" :data="roleInformation"></role-information>
</div> </div>
</div> </div>
<!-- START OF SECOND PROFIL INFORMATION COLUMN --> <!-- START OF SECOND PROFIL INFORMATION COLUMN -->
</div> </div>
<div class="col-xl-6 col-lg-12 "> <div class="col-xl-6 col-lg-12 ">
<!-- EMAILS -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- EMAILS -->
<profil-emails :title="this.$p.t('person','email')" :data="data.emails" ></profil-emails> <profil-emails :title="this.$p.t('person','email')" :data="data.emails" ></profil-emails>
</div> </div>
</div> </div>
<!-- PRIVATE KONTAKTE-->
<div class="row mb-4 "> <div class="row mb-4 ">
<div class="col"> <div class="col">
<!-- PRIVATE KONTAKTE-->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
@@ -412,9 +424,9 @@ export default {
</div> </div>
</div> </div>
</div> </div>
<!-- PRIVATE ADRESSEN-->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- PRIVATE ADRESSEN-->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
@@ -439,8 +451,8 @@ export default {
</div> </div>
</div > </div >
<div class="row"> <div class="row">
<!-- FUNKTIONEN TABELLE -->
<div class="col-12 mb-4" > <div class="col-12 mb-4" >
<!-- FUNKTIONEN TABELLE -->
<core-filter-cmpt <core-filter-cmpt
v-if="arePhrasesPreloaded" v-if="arePhrasesPreloaded"
@tableBuilt="funktionenTableBuilt" @tableBuilt="funktionenTableBuilt"
@@ -451,8 +463,8 @@ export default {
:sideMenu="false" :sideMenu="false"
/> />
</div> </div>
<!-- BETRIEBSMITTEL TABELLE -->
<div class="col-12 mb-4" > <div class="col-12 mb-4" >
<!-- BETRIEBSMITTEL TABELLE -->
<core-filter-cmpt <core-filter-cmpt
v-if="arePhrasesPreloaded" v-if="arePhrasesPreloaded"
@tableBuilt="betriebsmittelTableBuilt" @tableBuilt="betriebsmittelTableBuilt"
@@ -467,11 +479,6 @@ export default {
</div> </div>
<!-- START OF SIDE PANEL --> <!-- START OF SIDE PANEL -->
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" > <div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<div v-if="quickLinks.length" class="row mb-4">
<div class="col">
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
</div>
</div>
<!-- Bearbeiten Button --> <!-- Bearbeiten Button -->
<div class="row d-none d-md-block "> <div class="row d-none d-md-block ">
<div class="col mb-3"> <div class="col mb-3">
@@ -485,29 +492,36 @@ export default {
</button> </button>
</div> </div>
</div> </div>
<div v-if="data.profilUpdates" class="row d-none d-md-block mb-3"> <!-- QUICK LINKS, HIDDEN IF VIEWPORT < MD BREAKPOINT -->
<div class="col mb-3"> <div v-if="quickLinks.length" class="row mb-3 d-none d-md-block">
<!-- PROFIL UPDATES --> <div class="col">
<fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates> <quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
</div> </div>
</div> </div>
<div class="row mb-3" > <!-- CALENDAR SYNC OPTIONS, HIDDEN IF VIEWPORT < MD BREAKPOINT -->
<div class="col-12"> <div class="row mb-3 d-none d-md-block">
<!-- AUSWEIS STATUS -->
<ausweis-status :data="data.zutrittsdatum"></ausweis-status>
</div>
</div>
<div class="row mb-3">
<div class="col">
<!-- MAILVERTEILER -->
<mailverteiler :data="data?.mailverteiler" :title="$p.t('profil','mailverteiler')"></mailverteiler>
</div>
</div>
<div class="row">
<div class="col"> <div class="col">
<calendar-sync :uid="$props.data.username" :calendarSyncUrls="$props.calendarSyncUrls"></calendar-sync> <calendar-sync :uid="$props.data.username" :calendarSyncUrls="$props.calendarSyncUrls"></calendar-sync>
</div> </div>
</div> </div>
<!-- PROFIL UPDATES -->
<div v-if="data.profilUpdates" class="row d-none d-md-block mb-3">
<div class="col mb-3">
<fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
</div>
</div>
<!-- AUSWEIS STATUS -->
<div class="row mb-3" >
<div class="col-12">
<ausweis-status :data="data.zutrittsdatum"></ausweis-status>
</div>
</div>
<!-- MAILVERTEILER -->
<div class="row mb-3">
<div class="col">
<mailverteiler :data="data?.mailverteiler" :title="$p.t('profil','mailverteiler')"></mailverteiler>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -225,15 +225,6 @@ export default {
<div class="container-fluid text-break fhc-form" > <div class="container-fluid text-break fhc-form" >
<!-- ROW --> <!-- ROW -->
<div class="row"> <div class="row">
<!-- HIDDEN QUICK LINKS -->
<!-- TODO: uncomment when implemented
<div class="d-md-none col-12 ">
<quick-links :title="$p.t('profil','quickLinks')" :mobile="true" ></quick-links>
</div>
-->
<!-- END OF HIDDEN QUCK LINKS -->
<!-- MAIN PANNEL --> <!-- MAIN PANNEL -->
<div class="col-sm-12 col-md-8 col-xxl-9 "> <div class="col-sm-12 col-md-8 col-xxl-9 ">
<!-- ROW WITH PROFIL IMAGE AND INFORMATION --> <!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
@@ -242,27 +233,33 @@ export default {
<div class="row mb-4"> <div class="row mb-4">
<!-- FIRST KAESTCHEN --> <!-- FIRST KAESTCHEN -->
<div class="col-lg-12 col-xl-6 "> <div class="col-lg-12 col-xl-6 ">
<!-- Profil Informationen -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- Profil Informationen -->
<profil-information :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information> <profil-information :title="$p.t('profil','mitarbeiterIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information>
</div> </div>
</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 --> <!-- START OF SECOND PROFIL INFORMATION COLUMN -->
<!-- END OF PROFIL INFORMATION ROW --> <!-- END OF PROFIL INFORMATION ROW -->
<!-- INFORMATION CONTENT END --> <!-- INFORMATION CONTENT END -->
</div> </div>
<div class="col-xl-6 col-lg-12 "> <div class="col-xl-6 col-lg-12 ">
<!-- EMAILS -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- EMAILS -->
<profil-emails :title="this.$p.t('person','email')" :data="personEmails"></profil-emails> <profil-emails :title="this.$p.t('person','email')" :data="personEmails"></profil-emails>
</div> </div>
</div> </div>
<!-- SECOND ROW OF SECOND COLUMN IN MAIN CONTENT --> <!-- SECOND ROW OF SECOND COLUMN IN MAIN CONTENT -->
<!-- roleInformation -->
<div class="row mb-4"> <div class="row mb-4">
<div class=" col-lg-12"> <div class=" col-lg-12">
<!-- roleInformation -->
<role-information :data="roleInformation" :title="$p.t('profil','mitarbeiterInformation')"></role-information> <role-information :data="roleInformation" :title="$p.t('profil','mitarbeiterInformation')"></role-information>
</div> </div>
</div> </div>
@@ -284,15 +281,15 @@ export default {
</div> </div>
<!-- START OF SIDE PANEL --> <!-- START OF SIDE PANEL -->
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" > <div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<!-- VISIBLE UNTIL VIEWPORT MD --> <!-- QUICK LINKS, HIDDEN IF VIEWPORT < MD BREAKPOINT -->
<div v-if="quickLinks.length" class="row mb-4"> <div v-if="quickLinks.length" class="row mb-3 d-none d-md-block">
<div class="col"> <div class="col">
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" /> <quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
</div> </div>
</div> </div>
<!-- MAILVERTEILER -->
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<!-- MAILVERTEILER -->
<mailverteiler :data="data?.mailverteiler" :title="$p.t('profil','mailverteiler')"></mailverteiler> <mailverteiler :data="data?.mailverteiler" :title="$p.t('profil','mailverteiler')"></mailverteiler>
</div> </div>
</div> </div>
@@ -176,6 +176,7 @@ export const Profil = {
this.data = data.profil_data.data; this.data = data.profil_data.data;
this.calendarSyncUrls = data.calendar_sync_urls ?? []; this.calendarSyncUrls = data.calendar_sync_urls ?? [];
this.authPermissions = data.permissions; this.authPermissions = data.permissions;
console.log(data.profil_data);
}, },
zustellAdressenCount() { zustellAdressenCount() {
if (!this.data || !this.data.adressen) { if (!this.data || !this.data.adressen) {
@@ -292,14 +292,13 @@ export default {
</button> </button>
</div> </div>
</div> </div>
<!-- MOBILE PROFIL UPDATES -->
<div v-if="data.profilUpdates" class="row mb-3"> <div v-if="data.profilUpdates" class="row mb-3">
<div class="col"> <div class="col">
<!-- MOBILE PROFIL UPDATES -->
<fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates> <fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
</div> </div>
</div> </div>
</div> </div>
<!-- END OF HIDDEN QUCK LINKS -->
<!-- MAIN PANNEL --> <!-- MAIN PANNEL -->
<div class="col-sm-12 col-md-8 col-xxl-9 "> <div class="col-sm-12 col-md-8 col-xxl-9 ">
@@ -308,30 +307,42 @@ export default {
<!-- ROW WITH THE PROFIL INFORMATION --> <!-- ROW WITH THE PROFIL INFORMATION -->
<div class="row mb-4 "> <div class="row mb-4 ">
<div class="col-lg-12 col-xl-6 "> <div class="col-lg-12 col-xl-6 ">
<!-- PROFIL INFORMATION -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- PROFIL INFORMATION -->
<profil-information @showEditProfilModal="showEditProfilModal" :title="$p.t('profil','studentIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information> <profil-information @showEditProfilModal="showEditProfilModal" :title="$p.t('profil','studentIn')" :data="profilInformation" :fotoStatus="fotoStatus"></profil-information>
</div> </div>
</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>
<!-- CALENDAR SYNC OPTIONS, MOBILE VIEW (HIDDEN IF VIEWPORT >= MD BREAKPOINT) -->
<div class="row mb-4 d-md-none">
<div class="col">
<calendar-sync :uid="$props.data.username" :calendarSyncUrls="$props.calendarSyncUrls"></calendar-sync>
</div>
</div>
<!-- STUDENT INFO -->
<div class="row mb-4"> <div class="row mb-4">
<div class=" col-lg-12"> <div class=" col-lg-12">
<!-- STUDENT INFO -->
<role-information :title="$p.t('profil','studentInformation')" :data="roleInformation"></role-information> <role-information :title="$p.t('profil','studentInformation')" :data="roleInformation"></role-information>
</div> </div>
</div> </div>
<!-- START OF SECOND PROFIL INFORMATION COLUMN --> <!-- START OF SECOND PROFIL INFORMATION COLUMN -->
</div> </div>
<div class="col-xl-6 col-lg-12 "> <div class="col-xl-6 col-lg-12 ">
<!-- EMAILS -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- EMAILS -->
<profil-emails :title="this.$p.t('person','email')" :data="data.emails" ></profil-emails> <profil-emails :title="this.$p.t('person','email')" :data="data.emails" ></profil-emails>
</div> </div>
</div> </div>
<!-- PRIVATE KONTAKTE-->
<div class="row mb-4 "> <div class="row mb-4 ">
<div class="col"> <div class="col">
<!-- PRIVATE KONTAKTE-->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
@@ -354,9 +365,9 @@ export default {
</div> </div>
</div> </div>
<!-- PRIVATE ADRESSEN-->
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<!-- PRIVATE ADRESSEN-->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
@@ -408,11 +419,6 @@ export default {
</div> </div>
<!-- START OF SIDE PANEL --> <!-- START OF SIDE PANEL -->
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" > <div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<div v-if="quickLinks.length" class="row mb-4">
<div class="col">
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
</div>
</div>
<!-- Bearbeiten Button --> <!-- Bearbeiten Button -->
<div class="row d-none d-md-block"> <div class="row d-none d-md-block">
<div class="col mb-3"> <div class="col mb-3">
@@ -426,9 +432,21 @@ export default {
</button> </button>
</div> </div>
</div> </div>
<!-- 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>
<!-- CALENDAR SYNC OPTIONS, HIDDEN IF VIEWPORT < MD BREAKPOINT -->
<div class="row mb-3 d-none d-md-block">
<div class="col">
<calendar-sync :uid="$props.data.username" :calendarSyncUrls="$props.calendarSyncUrls"></calendar-sync>
</div>
</div>
<!-- PROFIL UPDATES -->
<div v-if="data.profilUpdates" class="row d-none d-md-block mb-3"> <div v-if="data.profilUpdates" class="row d-none d-md-block mb-3">
<div class="col mb-3"> <div class="col mb-3">
<!-- PROFIL UPDATES -->
<fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates> <fetch-profil-updates v-if="data.profilUpdates && data.profilUpdates.length" @fetchUpdates="fetchProfilUpdates" :data="data.profilUpdates"></fetch-profil-updates>
</div> </div>
</div> </div>
@@ -438,18 +456,13 @@ export default {
</div> </div>
</div> </div>
<!-- START OF THE SECOND ROW IN THE SIDE PANEL --> <!-- START OF THE SECOND ROW IN THE SIDE PANEL -->
<!-- MAILVERTEILER -->
<div class="row mb-3"> <div class="row mb-3">
<div class="col"> <div class="col">
<!-- HIER SIND DIE MAILVERTEILER -->
<mailverteiler :title="$p.t('profil','mailverteiler')" :data="data?.mailverteiler"></mailverteiler> <mailverteiler :title="$p.t('profil','mailverteiler')" :data="data?.mailverteiler"></mailverteiler>
</div> </div>
<!-- END OF THE SECOND ROW IN THE SIDE PANEL -->
</div> </div>
<div class="row"> <!-- END OF THE SECOND ROW IN THE SIDE PANEL -->
<div class="col">
<calendar-sync :uid="$props.data.username" :calendarSyncUrls="$props.calendarSyncUrls"></calendar-sync>
</div>
</div>
<!-- END OF SIDE PANEL --> <!-- END OF SIDE PANEL -->
</div> </div>
<!-- END OF CONTAINER ROW--> <!-- END OF CONTAINER ROW-->
@@ -121,12 +121,12 @@ export default {
<profil-information :data="profilInformation" :title="$p.t('profil','studentIn')" :fotoStatus="fotoStatus"></profil-information> <profil-information :data="profilInformation" :title="$p.t('profil','studentIn')" :fotoStatus="fotoStatus"></profil-information>
</div> </div>
</div> </div>
<!-- SECOND ROW OF FIRST COLUMN --> <!-- QUICK LINKS, MOBILE VIEW (HIDDEN IF VIEWPORT >= MD BREAKPOINT) -->
<div class="row mb-4"> <div v-if="quickLinks.length" class="row mb-4 d-md-none">
<div class="col"> <div class="col">
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
</div> </div>
</div> </div>
<!-- START OF SECOND PROFIL INFORMATION COLUMN --> <!-- START OF SECOND PROFIL INFORMATION COLUMN -->
<!-- END OF PROFIL INFORMATION ROW --> <!-- END OF PROFIL INFORMATION ROW -->
<!-- INFORMATION CONTENT END --> <!-- INFORMATION CONTENT END -->
@@ -155,7 +155,8 @@ export default {
<!-- START OF SIDE PANEL --> <!-- START OF SIDE PANEL -->
<div class="col-md-4 col-xxl-3 col-sm-12 text-break" > <div class="col-md-4 col-xxl-3 col-sm-12 text-break" >
<!-- START OF THE FIRST ROW IN THE SIDE PANEL --> <!-- START OF THE FIRST ROW IN THE SIDE PANEL -->
<div v-if="quickLinks.length" class="row mb-4"> <!-- QUICK LINKS, HIDDEN IF VIEWPORT < MD BREAKPOINT -->
<div v-if="quickLinks.length" class="row mb-3 d-none d-md-block">
<div class="col"> <div class="col">
<quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" /> <quick-links :title="$p.t('profil/quickLinks')" :links="quickLinks" />
</div> </div>