blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP stv projektarbeit detail modal ux rework

Browse Source
This commit is contained in:
Johann Hoffmann
2026-03-16 17:20:31 +01:00
parent 5d7281e470
commit dea3aac222
4 changed files with 52 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/Studentenverwaltung.css
+4
View File
@@ -281,3 +281,7 @@ html.fs_huge {
}
*/
/* slim ende */
.fhc-xxl-modal {
min-width: 80vw;
}
public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Details.js
+4 -4
View File
@@ -288,7 +288,7 @@ export default {
<div class="row mb-3">
<div class="col-10">
<div class="col-9">
<form-input
container-class="stv-details-projektarbeit-firma"
:label="$p.t('projektarbeit', 'firma')"
@@ -302,7 +302,7 @@ export default {
>
</form-input>
</div>
<div class="col-2 align-content-center">
<div class="col-3 align-content-center">
<a :href="firmenverwaltungLink" target="_blank">
{{ $p.t('projektarbeit', 'zurFirmenverwaltung') }}
</a>
@@ -311,7 +311,7 @@ export default {
<div class="row mb-3">
<form-input
container-class="stv-details-projektarbeit-lv col-10"
container-class="stv-details-projektarbeit-lv col-9"
:label="$p.t('projektarbeit', 'lehrveranstaltung')"
type="select"
v-model="formData.lehrveranstaltung_id"
@@ -327,7 +327,7 @@ export default {
</option>
</form-input>
<form-input
container-class="col-2"
container-class="col-3"
:label="$p.t('lehre', 'studiensemester')"
type="select"
v-model="studiensemester"
public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Projektarbeit.js
+32 -39
View File
@@ -199,6 +199,8 @@ export default {
title: 'Aktionen', field: 'actions',
minWidth: 150, // Ensures Action-buttons will be always fully displayed
formatter: (cell, formatterParams, onRendered) => {
const AAAWidth = '44px';
const AAAHeight = '44px';
let container = document.createElement('div');
container.className = "d-flex gap-2";
@@ -206,6 +208,8 @@ export default {
button.className = 'btn btn-outline-secondary btn-action';
button.innerHTML = '<i class="fa fa-edit"></i>';
button.title = this.$p.t('ui', 'bearbeiten');
button.style.minWidth = AAAWidth;
button.style.minHeight = AAAHeight;
button.addEventListener('click', (event) => {
let data = cell.getData();
this.editedProjektarbeit = data;
@@ -213,21 +217,23 @@ export default {
});
container.append(button);
button = document.createElement('button');
button.className = 'btn btn-outline-secondary btn-action';
button.innerHTML = '<i class="fa fa-users"></i>';
button.title = this.$p.t('projektarbeit', 'betreuerBearbeiten');
button.addEventListener('click', (event) => {
let data = cell.getData();
this.editedProjektarbeit = data;
this.actionEditBetreuer();
});
container.append(button);
// button = document.createElement('button');
// button.className = 'btn btn-outline-secondary btn-action';
// button.innerHTML = '<i class="fa fa-users"></i>';
// button.title = this.$p.t('projektarbeit', 'betreuerBearbeiten');
// button.addEventListener('click', (event) => {
// let data = cell.getData();
// this.editedProjektarbeit = data;
// this.actionEditBetreuer();
// });
// container.append(button);
button = document.createElement('button');
button.className = 'btn btn-outline-secondary btn-action';
button.innerHTML = '<i class="fa fa-xmark"></i>';
button.title = this.$p.t('ui', 'loeschen');
button.style.minWidth = AAAWidth;
button.style.minHeight = AAAHeight;
button.addEventListener('click', () =>
this.actionDeleteProjektarbeit(cell.getData().projektarbeit_id)
);
@@ -280,9 +286,14 @@ export default {
.then(this.deleteProjektarbeit)
.catch(this.$fhcAlert.handleSystemError);
},
saveProjektarbeit() {
if(this.statusNew) this.addNewProjektarbeit()
else this.updateProjektarbeit()
},
addNewProjektarbeit() {
this.$refs.projektarbeitDetails.addNewProjektarbeit()
.then((result) => {
console.log('res add new', result)
this.projektarbeitSaved();
})
.catch(this.$fhcAlert.handleSystemError);
@@ -290,6 +301,7 @@ export default {
updateProjektarbeit() {
this.$refs.projektarbeitDetails.updateProjektarbeit()
.then((result) => {
console.log('res update', result)
this.projektarbeitSaved();
})
.catch(this.$fhcAlert.handleSystemError);
@@ -308,7 +320,8 @@ export default {
projektarbeitSaved() {
this.reload();
this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSave'));
this.hideModal('projektarbeitModal');
if(!this.statusNew) this.hideModal('projektarbeitModal');
else this.statusNew = false
},
setDefaultStunden(projekttyp_kurzbz) {
this.$refs.projektbetreuer.setDefaultStunden(projekttyp_kurzbz);
@@ -358,46 +371,26 @@ export default {
</core-filter-cmpt>
<!--Modal: projektarbeitModal-->
<bs-modal ref="projektarbeitModal" dialog-class="modal-xl modal-dialog-scrollable" header-class="flex-wrap pb-0">
<bs-modal ref="projektarbeitModal" :dialog-class="(statusNew ? 'modal-xl ' : 'fhc-xxl-modal ' ) + 'modal-dialog-scrollable'" header-class="flex-wrap pb-0">
<template #title>
<p v-if="statusNew" class="fw-bold mt-3">{{$p.t('projektarbeit', 'projektarbeitAnlegen')}}</p>
<p v-else class="fw-bold mt-3">{{$p.t('projektarbeit', 'projektarbeitBearbeiten')}}</p>
</template>
<template #modal-header-content v-if="!statusNew">
<ul class="nav nav-tabs w-100 mt-3 msg_preview" id="pa_tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" :class="activeTab == 'details' ? 'active' : ''" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="true" @click="toggleMenu('details')">Details</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" :class="activeTab == 'betreuer' ? 'active' : ''" id="betreuer-tab" data-bs-toggle="tab" data-bs-target="#betreuer" type="button" role="tab" aria-controls="betreuer" aria-selected="false" @click="toggleMenu('betreuer')">{{$p.t('projektarbeit', 'betreuerGross')}}</button>
</li>
</ul>
</template>
<div class="tab-content" id="pa_content">
<div class="tab-pane fade show" :class="activeTab == 'details' ? 'active' : ''" id="details" role="tabpanel" aria-labelledby="details-tab">
<div class="row">
<div class="col-12">
<projektarbeit-details ref="projektarbeitDetails" :student="student" @projekttyp-changed="setDefaultStunden">
</projektarbeit-details>
</div>
</div>
<div class="row" >
<div :class="statusNew ? 'col-12' : 'col-6'">
<projektarbeit-details ref="projektarbeitDetails" :student="student" @projekttyp-changed="setDefaultStunden">
</projektarbeit-details>
</div>
<div class="tab-pane fade show" :class="activeTab == 'betreuer' ? 'active' : ''" id="betreuer" role="tabpanel" aria-labelledby="betreuer-tab">
<div class="row">
<div class="col-12">
<projektbetreuer ref="projektbetreuer" :config="config" @betreuer-saved="reload"></projektbetreuer>
</div>
</div>
<div :class="statusNew ? '' : 'col-6'" :style="statusNew ? 'display: none' : ''">
<projektbetreuer ref="projektbetreuer" :config="config" @betreuer-saved="reload"></projektbetreuer>
</div>
</div>
<template #footer>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{$p.t('ui', 'abbrechen')}}</button>
<button v-if="statusNew" class="btn btn-primary" @click="addNewProjektarbeit()"> {{$p.t('ui', 'speichern')}}</button>
<button v-if="!statusNew && activeTab == 'details'" class="btn btn-primary" @click="updateProjektarbeit()"> {{$p.t('ui', 'speichern')}}</button>
<button class="btn btn-primary" @click="saveProjektarbeit()"> {{$p.t('ui', 'speichern')}}</button>
</template>
</bs-modal>
public/js/components/Stv/Studentenverwaltung/Details/Projektarbeit/Projektbetreuer.js
+12 -12
View File
@@ -41,20 +41,20 @@ export default {
return {
tabulatorOptions: {
columns: [
{title: "Nachname", field: "nachname"},
{title: "Vorname", field: "vorname"},
{title: "Note", field: "note"},
{title: "Punkte", field: "punkte"},
{title: "Stunden", field: "stunden"},
{title: "Stundensatz", field: "stundensatz", visible: false},
{title: "Art", field: "betreuerart_kurzbz", visible: false},
{title: "Person ID", field: "person_id", visible: false},
{title: "Vertrag ID", field: "vertrag_id", visible: false},
{title: "Projektarbeit ID", field: "projektarbeit_id", visible: false},
{title: "Nachname", field: "nachname", widthGrow: 2},
{title: "Vorname", field: "vorname", widthGrow: 2},
{title: "Note", field: "note", widthGrow: 1},
{title: "Punkte", field: "punkte", widthGrow: 1},
{title: "Stunden", field: "stunden", widthGrow: 1},
{title: "Stundensatz", field: "stundensatz", visible: false, widthGrow: 1},
{title: "Art", field: "betreuerart_kurzbz", visible: false, widthGrow: 2},
{title: "Person ID", field: "person_id", visible: false, widthGrow: 1},
{title: "Vertrag ID", field: "vertrag_id", visible: false, widthGrow: 1},
{title: "Projektarbeit ID", field: "projektarbeit_id", visible: false, widthGrow: 1},
{
title: 'Aktionen',
field: 'actions',
minWidth: 150, // Ensures Action-buttons will be always fully displayed
minWidth: 100, // Ensures Action-buttons will be always fully displayed
formatter: (cell, formatterParams, onRendered) => {
let container = document.createElement('div');
container.className = "d-flex gap-2";
@@ -116,7 +116,7 @@ export default {
frozen: true
},
],
layout: 'fitData',
layout: 'fitColumns',
layoutColumnsOnNewData: false,
height: 'auto',
minHeight: '100',