refactor templates: scroll table, only table header is sticky, rename css.file

This commit is contained in:
Manuela Thamer
2026-08-21 14:39:45 +02:00
parent 364b506220
commit 90bce8d3d5
7 changed files with 85 additions and 71 deletions
@@ -8,13 +8,13 @@ class Zeitsperren extends FHCAPI_Controller
{
parent::__construct([
'getZeitsperrenUser' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'getTypenZeitsperren' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'getTypenErreichbarkeit' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'getStunden' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'getTypenZeitsperren' => self::PERM_LOGGED,
'getTypenErreichbarkeit' => self::PERM_LOGGED,
'getStunden' => self::PERM_LOGGED,
'loadZeitsperre' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'add' => self::PERM_LOGGED,
'update' => self::PERM_LOGGED,
'delete' => self::PERM_LOGGED,
'add' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'update' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
'delete' => ['basis/mitarbeiter:r', 'admin:r', 'assistenz:r'],
]);
// Load Libraries
@@ -24,7 +24,7 @@ $includesArray = array(
'public/css/components/abgabetool/abgabe.css',
'public/css/Cis4/Cms.css',
'public/css/Cis4/Studium.css',
'public/css/components/Zeitsperren.css', //70747
'public/css/components/Zeitsperrenma.css', //70747
'public/css/Cis4/Zeitsperren.css', //77941
),
'customJSs' => array(
-1
View File
@@ -19,7 +19,6 @@ $includesArray = array(
'public/css/components/primevue.css',
'public/css/Vertragsverwaltung.css',
'public/css/components/Detailheader.css',
'public/css/components/Zeitsperren.css'
],
'customJSs' => [
#'vendor/npm-asset/primevue/tree/tree.min.js',
-3
View File
@@ -1,3 +0,0 @@
.item-inactive {
text-decoration: line-through;
}
+15
View File
@@ -0,0 +1,15 @@
.item-inactive {
text-decoration: line-through;
}
.table-scroll {
height: calc(100vh - 300px);
overflow: auto;
}
.zeitsperrenma-content thead th {
position: sticky;
top: 0;
background: white;
z-index: 2;
}
@@ -454,8 +454,10 @@ export default {
}
},
template: `
<div class="w-100 h-100">
<div class="sticky-top bg-white p-3 border-bottom">
<div class="zeitsperrenma-container">
<!-- header-->
<div class="zeitsperrenma-header">
<h4 class="mt-3"><span v-if="type=='all'">{{$p.t('zeitsperren/title_allMa')}}</span>
<span v-if="type=='fix'">{{$p.t('zeitsperren/title_fix')}}</span>
<span v-if="type=='lector'">{{$p.t('zeitsperren/title_fixLecturers')}}</span>
@@ -534,43 +536,46 @@ export default {
</div>
</div>
<table v-if="showTable" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col"> UID </th>
<th v-for="day in days" :key="day.date">
<div>{{ day.weekday }}</div>
<div>{{ day.day }}</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="m in mitarbeiter"
:key="m.uid"
>
<td>{{m.sperren[0].nachname}} {{m.sperren[0].vorname}}</td>
<td
v-for="day in days"
:key="day.date"
:class="{ 'table-warning': day.weekday === 'Sa' || day.weekday === 'So' }"
<!-- table-->
<div class="zeitsperrenma-content table-scroll">
<table v-if="showTable" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col"> UID </th>
<th v-for="day in days" :key="day.date">
<div>{{ day.weekday }}</div>
<div>{{ day.day }}</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="m in mitarbeiter"
:key="m.uid"
>
<template v-if="sperre = getSperre(m, day.date)">
{{$p.t('zeitsperren/abwesend')}}
<div v-if="sperre.kurzbz">
V: <a :href="link(sperre.vertretung_uid)">
{{ sperre.kurzbz }}
</a>
</div>
<div v-if="sperre.erreichbarkeit_kurzbz">E: {{ sperre.erreichbarkeit_kurzbz }}</div>
</template>
</td>
</tr>
</tbody>
</table>
<td>{{m.sperren[0].nachname}} {{m.sperren[0].vorname}}</td>
<td
v-for="day in days"
:key="day.date"
:class="{ 'table-warning': day.weekday === 'Sa' || day.weekday === 'So' }"
>
<template v-if="sperre = getSperre(m, day.date)">
{{$p.t('zeitsperren/abwesend')}}
<div v-if="sperre.kurzbz">
V: <a :href="link(sperre.vertretung_uid)">
{{ sperre.kurzbz }}
</a>
</div>
<div v-if="sperre.erreichbarkeit_kurzbz">E: {{ sperre.erreichbarkeit_kurzbz }}</div>
</template>
</td>
</tr>
</tbody>
</table>
<div v-if="!arrayMaTimelocks.length">
<p>{{$p.t('ui/keineEintraegeGefunden')}}</p>
</div>
<div v-if="!arrayMaTimelocks.length">
<p>{{$p.t('ui/keineEintraegeGefunden')}}</p>
</div>
</div>
`,
@@ -64,32 +64,30 @@ export default {
},
},
template: `
<div class="base-zeitsperrenma w-100 h-100">
<div class="row g-1">
<div
class="col"
v-for="button in buttons"
:key="button.key"
<div class="base-zeitsperrenma">
<div class="row g-1 flex-shrink-0">
<div
class="col"
v-for="button in buttons"
:key="button.key"
>
<button
class="btn w-100"
:class="button.class"
@click="route(button.key)"
>
<button
class="btn w-100"
:class="button.class"
@click="route(button.key)"
>
{{ $p.t(button.title) }}
</button>
</div>
{{ $p.t(button.title) }}
</button>
</div>
</div>
<lists-zeitsperren
:type="propsViewData.type"
:id="propsViewData.id"
:tage="propsViewData.days"
/>
<div class="zeitsperren-list-container">
<lists-zeitsperren
:type="propsViewData.type"
:id="propsViewData.id"
:tage="propsViewData.days"
/>
</div>
</div>
`,
}