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

adds the collapse formater function as a global Vue function that can be used by alle the different view components

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-12 13:50:38 +01:00
parent b2c8bcb2bf
commit 4b45914d4f
4 changed files with 59 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/apps/Cis/Profil.js
+25 -1
View File
@@ -7,7 +7,31 @@ import Base from "../../components/Cis/Profil/Base.js";
import fhcapifactory from "../api/fhcapifactory.js";
Vue.$fhcapi = fhcapifactory;
Vue.$collapseFormatter = function(data){
//data - an array of objects containing the column title and value for each cell
var container = document.createElement("div");
container.classList.add("tabulator-collapsed-row");
var list = document.createElement("div");
list.classList.add("row");
container.appendChild(list);
data.forEach(function(col){
let item = document.createElement("div");
item.classList.add("col-6");
let item2 = document.createElement("div");
item2.classList.add("col-6");
item.innerHTML = "<strong>" + col.title + "</strong>";
console.log("col values",col);
item2.innerHTML = col.value?col.value:"-";
list.appendChild(item);
list.appendChild(item2);
});
return Object.keys(data).length ? container : "";
};
const app = Vue.createApp({
public/js/components/Cis/Profil/MitarbeiterProfil.js
+7 -26
View File
@@ -2,31 +2,7 @@ import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
const collapseFormatter = function(data){
//data - an array of objects containing the column title and value for each cell
var container = document.createElement("div");
container.classList.add("tabulator-collapsed-row");
var list = document.createElement("div");
list.classList.add("row");
container.appendChild(list);
data.forEach(function(col){
let item = document.createElement("div");
item.classList.add("col-6");
let item2 = document.createElement("div");
item2.classList.add("col-6");
item.innerHTML = "<strong>" + col.title + "</strong>";
console.log("col values",col);
item2.innerHTML = col.value?col.value:"-";
list.appendChild(item);
list.appendChild(item2);
});
return Object.keys(data).length ? container : "";
};
export default {
@@ -42,7 +18,7 @@ export default {
layout:"fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:collapseFormatter,
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
data: [
@@ -68,6 +44,7 @@ export default {
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,minWidth:200,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true, resizable:true,minWidth:200, },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true, resizable:true,minWidth:200, },
@@ -85,7 +62,7 @@ export default {
layout: "fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:collapseFormatter,
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
data: [{ betriebsmittel: "<a href='#'>test</a>", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
@@ -177,9 +154,13 @@ export default {
},
mounted() {
this.$refs.betriebsmittelTable.tabulator.on('tableBuilt', () => {
this.$refs.betriebsmittelTable.tabulator.setData(this.data.mittel);
this.$refs.betriebsmittelTable.tabulator.hideColumn("betriebsmittel");
})
public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+20 -5
View File
@@ -12,8 +12,13 @@ export default {
funktionen_table_options: {
height: 300,
layout: "fitColumns",
layout:"fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
@@ -23,19 +28,29 @@ export default {
},
],
columns: [
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true },
//? option when wanting to hide the collapsed list
/* {
title: "",
field: "",
headerSort: false,
formatter:"responsiveCollapse",
maxWidth:20,
}, */
{ title: "Bezeichnung", field: "Bezeichnung", headerFilter: true,minWidth:200, },
{
title: "Organisationseinheit",
field: "Organisationseinheit",
headerFilter: true,
headerFilter: true,minWidth:200,
},
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true },
{ title: "Gültig_von", field: "Gültig_von", headerFilter: true, resizable:true,minWidth:200, },
{ title: "Gültig_bis", field: "Gültig_bis", headerFilter: true, resizable:true,minWidth:200, },
{
title: "Wochenstunden",
field: "Wochenstunden",
headerFilter: true,
minWidth:200,
},
],
},
public/js/components/Cis/Profil/StudentProfil.js
+7 -2
View File
@@ -14,21 +14,26 @@ export default {
betriebsmittel_table_options: {
height: 300,
layout: "fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:Vue.$collapseFormatter,
data: [{ betriebsmittel: "", Nummer: "", Ausgegeben_am: "" }],
columns: [
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
headerFilter: true, minWidth:200,
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{ title: "Nummer", field: "Nummer", headerFilter: true, resizable:true, minWidth:200, },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
minWidth:200,
},
],
},
zutrittsgruppen_table_options: {
height: 300,
layout: "fitColumns",