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

refactors the LvMenu Modal

Browse Source
This commit is contained in:
SimonGschnell
2024-10-29 15:18:53 +01:00
parent ff367339ea
commit 587a193a6b
4 changed files with 17 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/dashboard.css
-4
View File
@@ -47,9 +47,5 @@
cursor: move;
}
.underline_hover:hover{
color:var(--bs-primary);
text-decoration: underline;
}
public/js/components/Cis/Mylv/LvMenu.js
+6 -44
View File
@@ -1,25 +1,16 @@
export default {
props:{
isMenuSelected:{
type:Boolean,
default:false,
},
menu:{
type:Array,
default:null,
},
preselectedMenu: {
type: Object,
default: null,
},
},
data(){
return{
selectedMenu:null,
}
},
emits:["update:isMenuSelected"],
methods:{
selectMenu: function (menuItem, index = null) {
@@ -40,45 +31,16 @@ export default {
},
back: function(){
if(this.preselectedMenu){
this.$emit('hideModal');
}else{
this.$emit('update:isMenuSelected', false);
}
},
},
watch:{
'preselectedMenu': function (newValue) {
if (newValue) {
this.selectedMenu = newValue;
this.$emit("update:isMenuSelected", true);
}
},
isMenuSelected: function (newValue) {
// if no Menu point has been selected, show all Menu options
if (!newValue) {
this.selectedMenu = null;
}
}
},
template:/*html*/`
<div v-if="selectedMenu" class="d-flex flex-column h-100">
<div class="d-flex mb-2">
<button v-if="selectedMenu" @click="back" class="btn btn-secondary me-2"><i class="fa fa-chevron-left"></i> Back</button>
<h2>{{selectedMenu.name}}</h2>
</div>
<iframe class="h-100 w-100" :src="selectedMenu.c4_link" :title="selectedMenu.name"></iframe>
</div>
<div v-else-if="!menu">No Menu available</div>
<div v-if="!menu">No Menu available</div>
<div v-else class="container">
<div class="row">
<div style="min-height:150px" :title="menuItem.name" role="button" @click="selectMenu(menuItem)" class="col-12 col-lg-6 col-xl-4 border border-1 d-flex flex-column align-items-center justify-content-center p-1 text-center" v-for="(menuItem, index) in menu" :key="index">
<a style="min-height:150px" :title="menuItem.name" role="button" :href="menuItem.c4_link" class="g-2 col-12 col-lg-6 col-xl-4 border border-1 d-flex flex-column align-items-center justify-content-center p-1 text-center text-decoration-none link-dark" v-for="(menuItem, index) in menu" :key="index">
<img :src="menuItem.c4_icon" :alt="menuItem.name" ></img>
<span @click="selectMenu(menuItem)" class="underline_hover mt-2">{{menuItem.name}}</span>
<span v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" :class="{'underline_hover':menuItem.c4_linkList[index][1] != '#'}" class="mt-1" :index="index">{{text}}</span>
</div>
<span @click="selectMenu(menuItem)" class=" mt-2">{{menuItem.name}}</span>
<span v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" class="mt-1" :index="index">{{text}}</span>
</a>
</div>
</div>
`
public/js/components/Cis/Mylv/LvModal.js
+4 -8
View File
@@ -32,7 +32,6 @@ export default {
menu: [],
result: false,
info: null,
isMenuSelected:false,
};
},
computed: {
@@ -67,9 +66,6 @@ export default {
)
}
},
onModalHide:function(){
this.isMenuSelected = false;
}
},
mounted() {
this.modal = this.$refs.modalContainer.modal;
@@ -78,13 +74,13 @@ export default {
return BsModal.popup.bind(this)(null, options);
},
template: /*html*/ `
<bs-modal ref="modalContainer" @showBsModal="onModalShow" @hideBsModal="onModalHide" v-bind="$props" :bodyClass="''" :dialogClass="{'modal-lg': !isMenuSelected, 'modal-fullscreen':isMenuSelected}" class="bootstrap-alert" backdrop="false" >
<bs-modal ref="modalContainer" @showBsModal="onModalShow" @hideBsModal="onModalHide" v-bind="$props" :bodyClass="''" dialogClass='modal-lg' class="bootstrap-alert" backdrop="false" >
<template v-slot:title>
<template v-if="event.titel">{{ event.titel + ' - ' + event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
<template v-else>{{ event.lehrfach_bez + ' [' + event.ort_kurzbz+']'}}</template>
</template>
<template v-slot:default>
<template v-if="!isMenuSelected">
<h3>{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
<table class="table table-hover mb-4">
<tbody>
@@ -139,8 +135,8 @@ export default {
</tbody>
</table>
<h3>Lehrveranstaltungs Menu</h3>
</template>
<lv-menu v-model:isMenuSelected="isMenuSelected" :menu="menu"></lv-menu>
<lv-menu :menu="menu"></lv-menu>
</template>
<!-- optional footer -->
<template v-slot:footer >
public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
+7 -2
View File
@@ -103,7 +103,10 @@ export default {
.then(res => {
this.menu = res.data;
})
.catch((error) => this.$fhcAlert.handleSystemError);
.catch((error) => {
this.$fhcAlert.handleSystemError(error);
this.menu = [];
});
},
template: /*html*/`<div class="mylv-semester-studiengang-lv card">
<lv-uebersicht ref="lvUebersicht" :preselectedMenu="preselectedMenuItem" :event="{
@@ -142,11 +145,13 @@ export default {
<i class="fa fa-check text-success" v-if="positiv"></i>
{{ grade || p.t('lehre/noGrades') }}
</a>
<!--
Not used anymore because the lehrveranstaltungs informationen is available as a menu point in the lehrveranstaltungs optionen
<div v-if="lvinfo" class="col text-end">
<a class="card-link" href="#" @click.prevent="openInfos">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</a>
</div>
</div>-->
</div>
</div>
</div>`