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

properly center loadingOverlay in center of screen, not center of content + put that template away in a FhcOverlay.js component

Browse Source
This commit is contained in:
Johann Hoffmann
2025-11-20 11:33:30 +01:00
parent 352638ed90
commit c447fb9632
7 changed files with 47 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Cis/Abgabetool/AbgabeMitarbeiterDetail.js
+1 -1
View File
@@ -774,7 +774,7 @@ export const AbgabeMitarbeiterDetail = {
</Accordion>
<div v-if="projektarbeit?.abgabetermine.length == 0" style="display:flex; justify-content: center; align-content: center;">
<h3>{{ $capitalize( $p.t('abgabetool/c4keineAbgabetermineGefunden') )}}</h3>
<h5>{{ $capitalize( $p.t('abgabetool/c4keineAbgabetermineGefunden') )}}</h5>
</div>
</div>
public/js/components/Cis/Abgabetool/AbgabeStudentDetail.js
+4 -4
View File
@@ -2,6 +2,7 @@ import Upload from '../../../components/Form/Upload/Dms.js';
import BsModal from '../../Bootstrap/Modal.js';
import VueDatePicker from '../../vueDatepicker.js.php';
import ApiAbgabe from '../../../api/factory/abgabe.js'
import FhcOverlay from "../../Overlay/FhcOverlay.js";
export const AbgabeStudentDetail = {
name: "AbgabeStudentDetail",
@@ -16,7 +17,8 @@ export const AbgabeStudentDetail = {
AccordionTab: primevue.accordiontab,
Message: primevue.message,
Inplace: primevue.inplace,
VueDatePicker
VueDatePicker,
FhcOverlay
},
inject: ['notenOptions', 'isMobile', 'isViewMode'],
props: {
@@ -356,9 +358,7 @@ export const AbgabeStudentDetail = {
},
template: `
<div id="loadingOverlay" v-show="loading" style="position: absolute; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.5); z-index: 99999999999;">
<i class="fa-solid fa-spinner fa-pulse fa-5x"></i>
</div>
<FhcOverlay :active="loading || saving"></FhcOverlay>
<div v-if="projektarbeit">
public/js/components/Cis/Abgabetool/AbgabetoolAssistenz.js
+4 -6
View File
@@ -1,12 +1,12 @@
import {CoreFilterCmpt} from "../../../components/filter/Filter.js";
import AbgabeDetail from "./AbgabeMitarbeiterDetail.js";
import VerticalSplit from "../../verticalsplit/verticalsplit.js"
import BsModal from '../../Bootstrap/Modal.js';
import BsOffcanvas from '../../Bootstrap/Offcanvas.js';
import VueDatePicker from '../../vueDatepicker.js.php';
import ApiAbgabe from '../../../api/factory/abgabe.js'
import ApiStudiensemester from '../../../api/factory/studiensemester.js';
import AbgabeterminStatusLegende from "./StatusLegende.js";
import FhcOverlay from "../../Overlay/FhcOverlay.js";
// spoofed date testing
// const todayISO = '2025-08-08'
@@ -25,13 +25,13 @@ export const AbgabetoolAssistenz = {
BsOffcanvas,
CoreFilterCmpt,
AbgabeDetail,
VerticalSplit,
Checkbox: primevue.checkbox,
Dropdown: primevue.dropdown,
Inplace: primevue.inplace,
Textarea: primevue.textarea,
Timeline: primevue.timeline,
VueDatePicker
VueDatePicker,
FhcOverlay
},
provide() {
return {
@@ -814,9 +814,7 @@ export const AbgabetoolAssistenz = {
},
template: `
<template v-if="phrasenResolved">
<div id="loadingOverlay" v-show="loading || saving" style="position: absolute; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.5); z-index: 99999999999;">
<i class="fa-solid fa-spinner fa-pulse fa-5x"></i>
</div>
<FhcOverlay :active="loading || saving"></FhcOverlay>
<bs-modal ref="modalContainerAddSeries" class="bootstrap-prompt"
dialogClass="modal-lg">
public/js/components/Cis/Abgabetool/AbgabetoolMitarbeiter.js
+5 -5
View File
@@ -3,6 +3,7 @@ import AbgabeDetail from "./AbgabeMitarbeiterDetail.js";
import BsModal from '../../Bootstrap/Modal.js';
import VueDatePicker from '../../vueDatepicker.js.php';
import ApiAbgabe from '../../../api/factory/abgabe.js'
import FhcOverlay from "../../Overlay/FhcOverlay.js";
export const AbgabetoolMitarbeiter = {
name: "AbgabetoolMitarbeiter",
@@ -12,7 +13,8 @@ export const AbgabetoolMitarbeiter = {
AbgabeDetail,
Dropdown: primevue.dropdown,
Textarea: primevue.textarea,
VueDatePicker
VueDatePicker,
FhcOverlay
},
provide() {
return {
@@ -354,7 +356,7 @@ export const AbgabetoolMitarbeiter = {
this.loadProjektarbeiten()
this.calcMaxTableHeight()
}
},
watch: {
@@ -400,9 +402,7 @@ export const AbgabetoolMitarbeiter = {
},
template: `
<template v-if="phrasenResolved">
<div id="loadingOverlay" v-show="loading || saving" style="position: absolute; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.5); z-index: 99999999999;">
<i class="fa-solid fa-spinner fa-pulse fa-5x"></i>
</div>
<FhcOverlay :active="loading || saving"></FhcOverlay>
<bs-modal ref="modalContainerAddSeries" class="bootstrap-prompt"
dialogClass="modal-lg">
public/js/components/Cis/Abgabetool/AbgabetoolStudent.js
+4 -4
View File
@@ -1,6 +1,7 @@
import AbgabeDetail from "./AbgabeStudentDetail.js";
import ApiAbgabe from '../../../api/factory/abgabe.js'
import BsModal from "../../Bootstrap/Modal.js";
import FhcOverlay from "../../Overlay/FhcOverlay.js";
const today = new Date()
export const AbgabetoolStudent = {
@@ -9,7 +10,8 @@ export const AbgabetoolStudent = {
Accordion: primevue.accordion,
AccordionTab: primevue.accordiontab,
BsModal,
AbgabeDetail
AbgabeDetail,
FhcOverlay
},
inject: ['isMobile'],
provide() {
@@ -266,9 +268,7 @@ export const AbgabetoolStudent = {
},
template: `
<template v-if="phrasenResolved">
<div id="loadingOverlay" v-show="loading || saving" style="position: absolute; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.5); z-index: 99999999999;">
<i class="fa-solid fa-spinner fa-pulse fa-5x"></i>
</div>
<FhcOverlay :active="loading || saving"></FhcOverlay>
<bs-modal ref="modalContainerAbgabeDetail" class="bootstrap-prompt"
dialogClass="modal-xl" :allowFullscreenExpand="true">
public/js/components/Cis/Abgabetool/DeadlineOverview.js
+4 -1
View File
@@ -26,6 +26,8 @@ export const DeadlineOverview = {
tabulatorUuid: Vue.ref(0),
tableBuiltResolve: null,
tableBuiltPromise: null,
phrasenPromise: null,
phrasenResolved: false,
deadlineTableOptions: {
height: 700,
index: 'projektarbeit_id',
@@ -128,7 +130,8 @@ export const DeadlineOverview = {
},
created() {
this.phrasenPromise = this.$p.loadCategory(['abgabetool', 'global'])
this.phrasenPromise.then(()=> {this.phrasenResolved = true})
},
mounted() {
this.setupMounted()
public/js/components/Overlay/FhcOverlay.js
+25
View File
@@ -0,0 +1,25 @@
export const FhcOverlay = {
name: 'FhcOverlay',
props: {
active: {
type: Boolean,
default: false
}
},
template: `
<div v-show="active"
style="
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.5);
z-index: 99999999999;
pointer-events: none;
">
<i class="fa-solid fa-spinner fa-pulse fa-5x"></i>
</div>
`
};
export default FhcOverlay;