diff --git a/public/js/apps/Cis/Profil.js b/public/js/apps/Cis/Profil.js index 825b7a5ce..d9bff2cb4 100644 --- a/public/js/apps/Cis/Profil.js +++ b/public/js/apps/Cis/Profil.js @@ -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 = "" + col.title + ""; + 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({ diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js index 2ad709afd..bf8c3144e 100644 --- a/public/js/components/Cis/Profil/MitarbeiterProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js @@ -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 = "" + col.title + ""; - 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: "test", 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"); }) diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js index 26baaf24e..e7fbbeff4 100644 --- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js +++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js @@ -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, }, + ], }, diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js index a248eab34..4aa242a30 100644 --- a/public/js/components/Cis/Profil/StudentProfil.js +++ b/public/js/components/Cis/Profil/StudentProfil.js @@ -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",