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

adds responsive layout to the tables by collapsing the columns of a table

Browse Source
This commit is contained in:
Simon Gschnell
2023-12-12 12:09:03 +01:00
parent 38301572ae
commit 3a191f4a11
2 changed files with 55 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/Profil.css
+5
View File
@@ -14,6 +14,11 @@
}
}
.tabulator-collapsed-row{
padding:7px;
}
/* dl {
width: 100%;
overflow: hidden;
public/js/components/Cis/Profil/MitarbeiterProfil.js
+50 -10
View File
@@ -2,6 +2,7 @@ import fhcapifactory from "../../../apps/api/fhcapifactory.js";
import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
export default {
components: {
CoreFilterCmpt,
@@ -12,8 +13,37 @@ export default {
funktionen_table_options: {
height: 300,
layout: "fitColumns",
layout:"fitColumns",
responsiveLayout:"collapse",
responsiveLayoutCollapseUseFormatters:false,
responsiveLayoutCollapseFormatter:function(data){
//data - an array of objects containing the column title and value for each cell
var container = document.createElement("div");
//container.classList.add("container-fluid");
//container.classList.add("p-0");
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 : "";
},
data: [
{
Bezeichnung: "",
Organisationseinheit: "",
@@ -23,19 +53,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,
},
],
},
betriebsmittel_table_options: {
@@ -46,13 +86,13 @@ export default {
{
title: "Betriebsmittel",
field: "betriebsmittel",
headerFilter: true,
headerFilter: true
},
{ title: "Nummer", field: "Nummer", headerFilter: true },
{ title: "Nummer", field: "Nummer", headerFilter: true, resizable:true },
{
title: "Ausgegeben_am",
field: "Ausgegeben_am",
headerFilter: true,
headerFilter: true
},
],
},
@@ -254,8 +294,8 @@ export default {
</div>
<div v-for="(wert,bez) in personData.Allgemein" class="row">
<dt class="col-lg-4 col-6 " >{{bez}}</dt>
<dd class=" col-lg-8 col-6 ">{{wert?wert:"-"}}</dd>
<dt class="col-lg-4 col-md-6 " >{{bez}}</dt>
<dd class=" col-lg-8 col-md-6 ">{{wert?wert:"-"}}</dd>
</div>